added a way to view modules that are interacted with

src/components/screens/ModuleListScreen.js

@@ -4,8 +4,9 @@ import Screen from "../layout/Screen";
 import ModuleList from "../entity/modules/ModuleList";
 import initialModules from "../../data/modules.js";
 import RenderCount from "../UI/RenderCount";
+import ModuleViewScreen from "./ModuleViewScreen";
 
-const ModuleListScreen = () => {
+const ModuleListScreen = ({navigation}) => {
 //   Initialisation -------------
 //    let modules = initialModules;
 
@@ -18,12 +19,13 @@ const ModuleListScreen = () => {
     const handleDelete = (module) =>
         setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
 
+    const handleSelect = (module) => navigation.navigate('ModuleViewScreen', { module });
 //   View -----------------------
 
   return (
     <Screen>
         <RenderCount />
-        <ModuleList modules={modules} onSelect={handleDelete} />
+        <ModuleList modules={modules} onSelect={handleSelect} />
     </Screen>
   );
 };

src/components/screens/ModuleViewScreen.js

@@ -1,14 +1,19 @@
 import { StyleSheet, Text } from "react-native";
 import Screen from "../layout/Screen";
 
-export const ModuleViewScreen = () => {
+export const ModuleViewScreen = ({Navigate, route}) => {
 //   Initialisation -------------
+
+    const { module } = route.params;
+
 //   State ----------------------
 //   Handlers -------------------
 //   View -----------------------
   return (
     <Screen style={styles.container}>
-      <Text>View</Text>
+      <Text>
+          View {module.ModuleCode} {module.ModuleName}
+      </Text>
     </Screen>
   );
 };