From c18a531a9cff7062e56ba74e402a68145ff68a7c Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Sat, 25 Oct 2025 22:51:18 +0100
Subject: [PATCH] added a way to view modules that are interacted with

---
 src/components/screens/ModuleListScreen.js | 6 ++++--
 src/components/screens/ModuleViewScreen.js | 9 +++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js
index 7e8df26..c801654 100644
--- a/src/components/screens/ModuleListScreen.js
+++ b/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>
   );
 };
diff --git a/src/components/screens/ModuleViewScreen.js b/src/components/screens/ModuleViewScreen.js
index f3796c8..558bc56 100644
--- a/src/components/screens/ModuleViewScreen.js
+++ b/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>
   );
 };