From 0439b7ab33cdeb3af09b6d31ed7f528a698c9995 Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Sat, 25 Oct 2025 20:58:28 +0100 Subject: [PATCH 1/5] addition of module list and module item and alert stating which module is selected --- src/components/entity/modules/ModuleItem.js | 32 ++++++++++++++++ src/components/entity/modules/ModuleList.js | 31 +++++++++++++++ src/components/screens/ModuleListScreen.js | 42 +++++---------------- 3 files changed, 73 insertions(+), 32 deletions(-) create mode 100644 src/components/entity/modules/ModuleItem.js create mode 100644 src/components/entity/modules/ModuleList.js diff --git a/src/components/entity/modules/ModuleItem.js b/src/components/entity/modules/ModuleItem.js new file mode 100644 index 0000000..77dec32 --- /dev/null +++ b/src/components/entity/modules/ModuleItem.js @@ -0,0 +1,32 @@ +import {StyleSheet, Text, View, Pressable} from "react-native"; + +const ModuleItem = ({module, onSelect }) => { + // Initialisation ------------- + // State ---------------------- + // Handlers ------------------- + // View ----------------------- + + return( + onSelect(module)}> + + + {module.ModuleCode} {module.ModuleName} + + + + ); +}; + + +const styles = StyleSheet.create({ + modulesItem: { + paddingVertical: 15, + borderBottomWidth: 1, + borderBottomColor: "light grey", + }, + text: { + // fontSize: 16, + }, +}); + +export default ModuleItem; \ No newline at end of file diff --git a/src/components/entity/modules/ModuleList.js b/src/components/entity/modules/ModuleList.js new file mode 100644 index 0000000..5524ebf --- /dev/null +++ b/src/components/entity/modules/ModuleList.js @@ -0,0 +1,31 @@ +import {StyleSheet, ScrollView } from "react-native"; +import modules from "../../../data/modules"; +import ModuleItem from "./ModuleItem"; +import React from "react"; + +const ModuleList = ({module, onSelect }) => { + // Initialisation ------------- + // State ---------------------- + // Handlers ------------------- + // View ----------------------- + + return( + + {modules.map((module) => { + return( + + ) + }) + } + + ); +}; + + +const styles = StyleSheet.create({ + 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 e201f43..5c09745 100644 --- a/src/components/screens/ModuleListScreen.js +++ b/src/components/screens/ModuleListScreen.js @@ -1,7 +1,8 @@ -import {StyleSheet, Text, ScrollView, View, Pressable} from "react-native"; -import Screen from "../layout/Screen"; +import {StyleSheet } from "react-native"; +import Screen from "../layout/Screen"; import initialModules from "../../data/modules.js"; +import ModuleList from "../entity/modules/ModuleList"; export const ModuleListScreen = () => { @@ -10,42 +11,19 @@ export const ModuleListScreen = () => { // State ---------------------- // Handlers ------------------- - const handleSelect = () => alert("Item selected"); + const handleSelect = (module) => alert(`Item ${module.ModuleName} selected`); // View ----------------------- + return ( - - {modules.map((module) => { - return( - - - - {module.ModuleCode} {module.ModuleName} - - - - ) - }) - } - + ); }; -const styles = StyleSheet.create({ - modulesContainer: { - marginTop: 20, - }, - modulesItem: { - padding: 15, - marginBottom: 10, - borderTopWidth: 1, - borderTopColor: "light grey", - // borderRadius: 15, - }, - text: { - }, -}); +const styles = StyleSheet.create({}); + +export default ModuleListScreen; + -export default ModuleListScreen; \ No newline at end of file From 54e73d32e08befbab73ce16f0208fac09956a239 Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Sat, 25 Oct 2025 22:04:16 +0100 Subject: [PATCH 2/5] 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 }) => { {modules.map((module) => { return( - + ) }) } @@ -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 ( - + ); }; From 2e05fc9d6da35c68285aa7c0378e116ded886577 Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Sat, 25 Oct 2025 22:15:08 +0100 Subject: [PATCH 3/5] Added Render component in UI folder --- src/components/UI/RenderCount.js | 24 ++++++++++++++++++++++ src/components/screens/ModuleListScreen.js | 3 ++- 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 src/components/UI/RenderCount.js diff --git a/src/components/UI/RenderCount.js b/src/components/UI/RenderCount.js new file mode 100644 index 0000000..1fdce24 --- /dev/null +++ b/src/components/UI/RenderCount.js @@ -0,0 +1,24 @@ +import { useRef } from "react"; +import { Text, StyleSheet } from "react-native"; + +const RenderCount = ({backgroundColor = 'dodgerblue', fontColor = 'white'}) => { +// Initialisation ------------- +// State ---------------------- + const renderCount = useRef(0); + renderCount.current += 1; +// Handlers ------------------- +// View ----------------------- + return ( + + Number of renders: {renderCount.current} + + ); +}; + +const styles = StyleSheet.create({ + count: { + padding: 5, + }, +}); + +export default RenderCount; \ No newline at end of file diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js index 0cbe4c1..7e8df26 100644 --- a/src/components/screens/ModuleListScreen.js +++ b/src/components/screens/ModuleListScreen.js @@ -3,7 +3,7 @@ import { StyleSheet } from "react-native"; import Screen from "../layout/Screen"; import ModuleList from "../entity/modules/ModuleList"; import initialModules from "../../data/modules.js"; - +import RenderCount from "../UI/RenderCount"; const ModuleListScreen = () => { // Initialisation ------------- @@ -22,6 +22,7 @@ const ModuleListScreen = () => { return ( + ); From c18a531a9cff7062e56ba74e402a68145ff68a7c Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Sat, 25 Oct 2025 22:51:18 +0100 Subject: [PATCH 4/5] 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 ( - + ); }; 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 ( - View + + View {module.ModuleCode} {module.ModuleName} + ); }; From 2eacee759a37846447d11b8928b3157d63f248be Mon Sep 17 00:00:00 2001 From: mudabbir-ahmad Date: Thu, 30 Oct 2025 10:31:03 +0000 Subject: [PATCH 5/5] Module View added, with images and moved view into reusable component for ModuleView. All activities done for week 2. --- App.js | 60 ++++++++++---------- package-lock.json | 8 ++- package.json | 3 +- src/components/entity/modules/ModuleItem.js | 4 +- src/components/entity/modules/ModuleList.js | 8 +-- src/components/entity/modules/ModuleView.js | 42 ++++++++++++++ src/components/layout/Screen.js | 6 +- src/components/screens/ModuleAddScreen.js | 12 ++-- src/components/screens/ModuleListScreen.js | 21 ++++--- src/components/screens/ModuleModifyScreen.js | 12 ++-- src/components/screens/ModuleViewScreen.js | 18 +++--- 11 files changed, 120 insertions(+), 74 deletions(-) create mode 100644 src/components/entity/modules/ModuleView.js diff --git a/App.js b/App.js index 4dcda0b..d8f34a8 100644 --- a/App.js +++ b/App.js @@ -1,5 +1,5 @@ -import { NavigationContainer } from "@react-navigation/native"; -import { createNativeStackNavigator } from "@react-navigation/native-stack"; +import {NavigationContainer} from "@react-navigation/native"; +import {createNativeStackNavigator} from "@react-navigation/native-stack"; import ModuleListScreen from "./src/components/screens/ModuleListScreen"; import ModuleModifyScreen from "./src/components/screens/ModuleModifyScreen"; import ModuleViewScreen from "./src/components/screens/ModuleViewScreen"; @@ -14,38 +14,38 @@ export const App = () => { // View ----------------------- return ( - - + + - + - + - + - + ); diff --git a/package-lock.json b/package-lock.json index de487a8..57d4335 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "expo": "^54.0.20", "expo-status-bar": "~3.0.8", "react": "19.1.0", - "react-native": "^0.81.5" + "react-native": "^0.81.5", + "react-native-fullwidth-image": "^0.1.3" } }, "node_modules/@0no-co/graphql.web": { @@ -7756,6 +7757,11 @@ } } }, + "node_modules/react-native-fullwidth-image": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/react-native-fullwidth-image/-/react-native-fullwidth-image-0.1.3.tgz", + "integrity": "sha512-nFe5EAEPlPaT1vw1abwnNmSZN9oLMzNXJAKKxeuWqPI9L7rGhXhpZH4KEBUzbqkk+58TjdT9d2bf070/GB4PGQ==" + }, "node_modules/react-native-is-edge-to-edge": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz", diff --git a/package.json b/package.json index da46ec1..4ec2b31 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "expo": "^54.0.20", "expo-status-bar": "~3.0.8", "react": "19.1.0", - "react-native": "^0.81.5" + "react-native": "^0.81.5", + "react-native-fullwidth-image": "^0.1.3" }, "private": true } diff --git a/src/components/entity/modules/ModuleItem.js b/src/components/entity/modules/ModuleItem.js index 9232c8d..cd3bc33 100644 --- a/src/components/entity/modules/ModuleItem.js +++ b/src/components/entity/modules/ModuleItem.js @@ -1,12 +1,12 @@ import {StyleSheet, Text, View, Pressable} from "react-native"; -const ModuleItem = ({module, onSelect }) => { +const ModuleItem = ({module, onSelect}) => { // Initialisation ------------- // State ---------------------- // Handlers ------------------- // View ----------------------- - return( + return ( onSelect(module)}> diff --git a/src/components/entity/modules/ModuleList.js b/src/components/entity/modules/ModuleList.js index ac024ae..2245405 100644 --- a/src/components/entity/modules/ModuleList.js +++ b/src/components/entity/modules/ModuleList.js @@ -1,17 +1,17 @@ -import {StyleSheet, ScrollView } from "react-native"; +import {StyleSheet, ScrollView} from "react-native"; import ModuleItem from "./ModuleItem"; import React from "react"; -const ModuleList = ({modules, onSelect }) => { +const ModuleList = ({modules, onSelect}) => { // Initialisation ------------- // State ---------------------- // Handlers ------------------- // View ----------------------- - return( + return ( {modules.map((module) => { - return( + return ( { + // Initialisation ------------- + // State ---------------------- + // Handlers ------------------- + // View ----------------------- + + return ( + + + + View {module.ModuleCode} {module.ModuleName} + Level {module.ModuleLevel} + + {module.ModuleLeaderName} (Module Leader) + + + + ); +}; + + +const styles = StyleSheet.create({ + container: { + gap: 15, + }, infoTray: { + gap: 5, + }, image: { + borderRadius: 3, + }, text: { + fontSize: 16, + }, boldText: { + fontSize: 16, fontWeight: 'bold', + }, dimText: { + color: "grey", + } + +}); + +export default ModuleView; \ No newline at end of file diff --git a/src/components/layout/Screen.js b/src/components/layout/Screen.js index cb30888..cb4683e 100644 --- a/src/components/layout/Screen.js +++ b/src/components/layout/Screen.js @@ -1,5 +1,5 @@ -import { StatusBar } from "expo-status-bar"; -import { StyleSheet, View } from "react-native"; +import {StatusBar} from "expo-status-bar"; +import {StyleSheet, View} from "react-native"; const Screen = ({children}) => { // Initialisation ------------- @@ -9,7 +9,7 @@ const Screen = ({children}) => { return ( {children} - + ); }; diff --git a/src/components/screens/ModuleAddScreen.js b/src/components/screens/ModuleAddScreen.js index ebd9ebf..73adf8f 100644 --- a/src/components/screens/ModuleAddScreen.js +++ b/src/components/screens/ModuleAddScreen.js @@ -1,4 +1,4 @@ -import { StyleSheet, Text } from "react-native"; +import {StyleSheet, Text} from "react-native"; import Screen from "../layout/Screen"; export const ModuleAddScreen = () => { @@ -6,11 +6,11 @@ export const ModuleAddScreen = () => { // State ---------------------- // Handlers ------------------- // View ----------------------- - return ( - - Add - - ); + return ( + + Add + + ); }; const styles = StyleSheet.create({}); diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js index c801654..2b3f3bf 100644 --- a/src/components/screens/ModuleListScreen.js +++ b/src/components/screens/ModuleListScreen.js @@ -1,17 +1,16 @@ -import { useState } from "react"; -import { StyleSheet } from "react-native"; +import {useState} from "react"; +import {StyleSheet} from "react-native"; 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 = ({navigation}) => { // Initialisation ------------- // let modules = initialModules; // State ---------------------- - const [ modules, setModules] = useState(initialModules); + const [modules, setModules] = useState(initialModules); // Handlers ------------------- @@ -19,15 +18,15 @@ const ModuleListScreen = ({navigation}) => { const handleDelete = (module) => setModules(modules.filter((item) => item.ModuleID !== module.ModuleID)); - const handleSelect = (module) => navigation.navigate('ModuleViewScreen', { module }); + const handleSelect = (module) => navigation.navigate('ModuleViewScreen', {module}); // View ----------------------- - return ( - - - - - ); + return ( + + + + + ); }; const styles = StyleSheet.create({}); diff --git a/src/components/screens/ModuleModifyScreen.js b/src/components/screens/ModuleModifyScreen.js index 6f1e973..ae2ccec 100644 --- a/src/components/screens/ModuleModifyScreen.js +++ b/src/components/screens/ModuleModifyScreen.js @@ -1,4 +1,4 @@ -import { StyleSheet, Text } from "react-native"; +import {StyleSheet, Text} from "react-native"; import Screen from "../layout/Screen"; export const ModuleModifyScreen = () => { @@ -6,11 +6,11 @@ export const ModuleModifyScreen = () => { // State ---------------------- // Handlers ------------------- // View ----------------------- - return ( - - Modify - - ); + return ( + + Modify + + ); }; const styles = StyleSheet.create({}); diff --git a/src/components/screens/ModuleViewScreen.js b/src/components/screens/ModuleViewScreen.js index 558bc56..6cd2918 100644 --- a/src/components/screens/ModuleViewScreen.js +++ b/src/components/screens/ModuleViewScreen.js @@ -1,21 +1,19 @@ -import { StyleSheet, Text } from "react-native"; +import {StyleSheet} from "react-native"; import Screen from "../layout/Screen"; +import ModuleView from "../entity/modules/ModuleView"; -export const ModuleViewScreen = ({Navigate, route}) => { + +export const ModuleViewScreen = ({ route }) => { // Initialisation ------------- - const { module } = route.params; + const {module} = route.params; // State ---------------------- // Handlers ------------------- // View ----------------------- - return ( - - - View {module.ModuleCode} {module.ModuleName} - - - ); + return ( + + ); }; const styles = StyleSheet.create({});