From 1872d450c63116c43a5d6c58075e88330460adf2 Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Sat, 25 Oct 2025 17:33:33 +0100 Subject: [PATCH 1/3] Added Initial Modules to module list screen --- src/components/layout/Screen.js | 3 +- src/components/screens/ModuleListScreen.js | 22 +++++- src/data/modules.js | 81 ++++++++++++++++++++++ 3 files changed, 101 insertions(+), 5 deletions(-) create mode 100644 src/data/modules.js diff --git a/src/components/layout/Screen.js b/src/components/layout/Screen.js index cd41bca..cb30888 100644 --- a/src/components/layout/Screen.js +++ b/src/components/layout/Screen.js @@ -16,10 +16,9 @@ const Screen = ({children}) => { const styles = StyleSheet.create({ screen: { + padding: 15, flex: 1, backgroundColor: "#fff", - alignItems: "center", - justifyContent: "center", }, }); diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js index a924542..e9a7e8d 100644 --- a/src/components/screens/ModuleListScreen.js +++ b/src/components/screens/ModuleListScreen.js @@ -1,14 +1,30 @@ -import { StyleSheet, Text } from "react-native"; +import { StyleSheet, Text, View } from "react-native"; import Screen from "../layout/Screen"; +import initialModules from "../../data/modules.js"; + + export const ModuleListScreen = () => { // Initialisation ------------- + const modules = initialModules; + // State ---------------------- // Handlers ------------------- // View ----------------------- return ( - - List + + + {modules.map((module) => { + return( + + + {module.ModuleCode} {module.ModuleName} + + + ) + }) + } + ); }; diff --git a/src/data/modules.js b/src/data/modules.js new file mode 100644 index 0000000..5cba8af --- /dev/null +++ b/src/data/modules.js @@ -0,0 +1,81 @@ +const modules = [ + { + ModuleID: 106778, + ModuleName: 'Games Programming', + ModuleCode: 'CI2270', + ModuleLevel: 4, + ModuleLeaderID: 1, + ModuleLeaderName: 'Graeme Jones', + ModuleImage: + 'https://images.freeimages.com/images/small-previews/9b8/electronic-components-2-1242738.jpg', + }, + { + ModuleID: 592225, + ModuleName: 'Individual Project', + ModuleCode: 'CI7446', + ModuleLevel: 7, + ModuleLeaderID: 2, + ModuleLeaderName: 'Graeme Jones', + ModuleImage: + 'https://images.freeimages.com/images/small-previews/411/light-of-technology-1510575.jpg', + }, + { + ModuleID: 329011, + ModuleName: 'Database Driven Web Applications', + ModuleCode: 'CI6388', + ModuleLevel: 6, + ModuleLeaderID: 3, + ModuleLeaderName: 'Graeme Jones', + ModuleImage: 'https://images.freeimages.com/images/small-previews/64b/vla-1-1315506.jpg', + }, + { + ModuleID: 512346, + ModuleName: 'Advanced Data Modelling', + ModuleCode: 'CI8502', + ModuleLevel: 6, + ModuleLeaderID: 4, + ModuleLeaderName: 'Graeme Jones', + ModuleImage: 'https://images.freeimages.com/images/small-previews/293/cable-4-1243085.jpg', + }, + { + ModuleID: 692345, + ModuleName: 'Ethical Hacking', + ModuleCode: 'CI7572', + ModuleLevel: 7, + ModuleLeaderID: 5, + ModuleLeaderName: 'Graeme Jones', + ModuleImage: 'https://images.freeimages.com/images/small-previews/fa1/cable-5-1243077.jpg', + }, + { + ModuleID: 906072, + ModuleName: 'Network and Mobile Forensics', + ModuleCode: 'CI5068', + ModuleLevel: 7, + ModuleLeaderID: 6, + ModuleLeaderName: 'Graeme Jones', + ModuleImage: + 'https://images.freeimages.com/images/small-previews/930/towertv-3-1423238.jpg', + }, + { + ModuleID: 394428, + ModuleName: 'Practical Data Analyst Skills', + ModuleCode: 'CI9213', + ModuleLevel: 5, + ModuleLeaderID: 7, + ModuleLeaderName: 'Graeme Jones', + ModuleImage: + 'https://images.freeimages.com/images/small-previews/cf5/cellphone-1313194.jpg', + }, + { + ModuleID: 699951, + ModuleName: 'Statistics in Practice', + ModuleCode: 'CI5856', + ModuleLevel: 7, + ModuleLeaderID: 8, + ModuleLeaderName: 'Graeme Jones', + ModuleImage: + 'https://images.freeimages.com/images/small-previews/4e8/sala-de-parto-03-1432033.jpg', + }, +]; + +export default modules; \ No newline at end of file From 9236cb3f682c45893f1d51a823ee043998ae37f9 Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Sat, 25 Oct 2025 18:20:09 +0100 Subject: [PATCH 2/3] Styled Module List items and added Alerts --- src/components/screens/ModuleListScreen.js | 35 ++++++++++++++++------ 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js index e9a7e8d..28133ce 100644 --- a/src/components/screens/ModuleListScreen.js +++ b/src/components/screens/ModuleListScreen.js @@ -1,4 +1,4 @@ -import { StyleSheet, Text, View } from "react-native"; +import {StyleSheet, Text, ScrollView, View, Pressable} from "react-native"; import Screen from "../layout/Screen"; import initialModules from "../../data/modules.js"; @@ -10,25 +10,42 @@ export const ModuleListScreen = () => { // State ---------------------- // Handlers ------------------- + const handleSelect = () => alert("Item selected"); + // View ----------------------- return ( - + {modules.map((module) => { return( - - - {module.ModuleCode} {module.ModuleName} - - + + + + {module.ModuleCode} {module.ModuleName} + + + ) }) } - + ); }; -const styles = StyleSheet.create({}); +const styles = StyleSheet.create({ + modulesContainer: { + marginTop: 20, + }, + modulesItem: { + padding: 15, + marginBottom: 10, + borderTopWidth: 1, + borderTopColor: "light grey", + // borderRadius: 15, + }, + text: { + }, +}); export default ModuleListScreen; \ No newline at end of file From b3c38162206c9a7c3fbbcf91396b14b45c9c7475 Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Sat, 25 Oct 2025 18:28:50 +0100 Subject: [PATCH 3/3] moved key to pressable --- src/components/screens/ModuleListScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js index 28133ce..e201f43 100644 --- a/src/components/screens/ModuleListScreen.js +++ b/src/components/screens/ModuleListScreen.js @@ -18,8 +18,8 @@ export const ModuleListScreen = () => { {modules.map((module) => { return( - - + + {module.ModuleCode} {module.ModuleName}