From 54e73d32e08befbab73ce16f0208fac09956a239 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Sat, 25 Oct 2025 22:04:16 +0100
Subject: [PATCH] Added Deleting modules functionality and removed modules
 import on module list that was stopping the screen from updating as it was
 using imported attribute rather than what was pasased onto it.

---
 src/components/entity/modules/ModuleItem.js |  4 ++--
 src/components/entity/modules/ModuleList.js | 13 +++++++------
 src/components/screens/ModuleListScreen.js  | 19 ++++++++++++-------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/entity/modules/ModuleItem.js b/src/components/entity/modules/ModuleItem.js
index 77dec32..9232c8d 100644
--- a/src/components/entity/modules/ModuleItem.js
+++ b/src/components/entity/modules/ModuleItem.js
@@ -22,10 +22,10 @@ const styles = StyleSheet.create({
     modulesItem: {
         paddingVertical: 15,
         borderBottomWidth: 1,
-        borderBottomColor: "light grey",
+        borderBottomColor: "lightgray",
     },
     text: {
-        // fontSize: 16,
+        fontSize: 18,
     },
 });
 
diff --git a/src/components/entity/modules/ModuleList.js b/src/components/entity/modules/ModuleList.js
index 5524ebf..ac024ae 100644
--- a/src/components/entity/modules/ModuleList.js
+++ b/src/components/entity/modules/ModuleList.js
@@ -1,9 +1,8 @@
 import {StyleSheet, ScrollView } from "react-native";
-import modules from "../../../data/modules";
 import ModuleItem from "./ModuleItem";
 import React from "react";
 
-const ModuleList = ({module, onSelect }) => {
+const ModuleList = ({modules, onSelect }) => {
     //   Initialisation -------------
     //   State ----------------------
     //   Handlers -------------------
@@ -13,7 +12,11 @@ const ModuleList = ({module, onSelect }) => {
         <ScrollView style={styles.modulesContainer}>
             {modules.map((module) => {
                 return(
-                    <ModuleItem module={module} key={module.ModuleCode} onSelect={onSelect} />
+                    <ModuleItem
+                        module={module}
+                        key={module.ModuleCode}
+                        onSelect={onSelect}
+                    />
                 )
             })
             }
@@ -23,9 +26,7 @@ const ModuleList = ({module, onSelect }) => {
 
 
 const styles = StyleSheet.create({
-    modulesContainer: {
-
-    },
+    modulesContainer: {},
 });
 
 export default ModuleList;
\ No newline at end of file
diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js
index 5c09745..0cbe4c1 100644
--- a/src/components/screens/ModuleListScreen.js
+++ b/src/components/screens/ModuleListScreen.js
@@ -1,23 +1,28 @@
-import {StyleSheet } from "react-native";
-
+import { useState } from "react";
+import { StyleSheet } from "react-native";
 import Screen from "../layout/Screen";
-import initialModules from "../../data/modules.js";
 import ModuleList from "../entity/modules/ModuleList";
+import initialModules from "../../data/modules.js";
 
 
-export const ModuleListScreen = () => {
+const ModuleListScreen = () => {
 //   Initialisation -------------
-    const modules = initialModules;
+//    let modules = initialModules;
 
 //   State ----------------------
+    const [ modules, setModules] = useState(initialModules);
+
+
 //   Handlers -------------------
-    const handleSelect = (module) => alert(`Item ${module.ModuleName} selected`);
+
+    const handleDelete = (module) =>
+        setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
 
 //   View -----------------------
 
   return (
     <Screen>
-        <ModuleList modules={{modules}} onSelect={handleSelect} />
+        <ModuleList modules={modules} onSelect={handleDelete} />
     </Screen>
   );
 };