Merge pull request #4 from mudabbir-ahmad/Week2Act3

Week2Act3 completed

App.js

@@ -1,5 +1,5 @@
-import { NavigationContainer } from "@react-navigation/native";
+import {NavigationContainer} from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
+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 (
         <NavigationContainer>
-         <Stack.Navigator
+            <Stack.Navigator
-             initialRouteName='ModuleListScreen'
+                initialRouteName='ModuleListScreen'
-             screenOptions= {{
+                screenOptions={{
-                headerStyle: { backgroundColor: "black" },
+                    headerStyle: {backgroundColor: "black"},
-                headerTintColor: "white"
+                    headerTintColor: "white"
-         }}
+                }}
-         >
+            >
-             <Stack.Screen
+                <Stack.Screen
-                 name="ModuleListScreen"
+                    name="ModuleListScreen"
-                 component={ModuleListScreen}
+                    component={ModuleListScreen}
-                 options={{  title: 'List Modules' }}
+                    options={{title: 'List Modules'}}
-             />
+                />
 
-             <Stack.Screen
+                <Stack.Screen
-                 name="ModuleAddScreen"
+                    name="ModuleAddScreen"
-                 component={ModuleAddScreen}
+                    component={ModuleAddScreen}
-                 options={{  title: 'Add Modules' }}
+                    options={{title: 'Add Modules'}}
-             />
+                />
 
-             <Stack.Screen
+                <Stack.Screen
-                 name="ModuleViewScreen"
+                    name="ModuleViewScreen"
-                 component={ModuleViewScreen}
+                    component={ModuleViewScreen}
-                 options={{  title: 'View Modules' }}
+                    options={{title: 'View Modules'}}
-             />
+                />
 
-             <Stack.Screen
+                <Stack.Screen
-              name="ModuleModifyScreen"
+                    name="ModuleModifyScreen"
-              component={ModuleModifyScreen}
+                    component={ModuleModifyScreen}
-              options={{  title: 'Modify Modules' }}
+                    options={{title: 'Modify Modules'}}
-             />
+                />
 
-         </Stack.Navigator>
+            </Stack.Navigator>
 
         </NavigationContainer>
     );

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",

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
 }

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 (
+        <Text style={[styles.count, { backgroundColor, color: fontColor}]}>
+            Number of renders: {renderCount.current}
+        </Text>
+    );
+};
+
+const styles = StyleSheet.create({
+    count: {
+        padding: 5,
+    },
+});
+
+export default RenderCount;

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 (
+        <Pressable key={module.ModuleCode} onPress={() => onSelect(module)}>
+            <View style={styles.modulesItem}>
+                <Text style={styles.text}>
+                    {module.ModuleCode} {module.ModuleName}
+                </Text>
+            </View>
+        </Pressable>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    modulesItem: {
+        paddingVertical: 15,
+        borderBottomWidth: 1,
+        borderBottomColor: "lightgray",
+    },
+    text: {
+        fontSize: 18,
+    },
+});
+
+export default ModuleItem;

src/components/entity/modules/ModuleList.js

@@ -0,0 +1,32 @@
+import {StyleSheet, ScrollView} from "react-native";
+import ModuleItem from "./ModuleItem";
+import React from "react";
+
+const ModuleList = ({modules, onSelect}) => {
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (
+        <ScrollView style={styles.modulesContainer}>
+            {modules.map((module) => {
+                return (
+                    <ModuleItem
+                        module={module}
+                        key={module.ModuleCode}
+                        onSelect={onSelect}
+                    />
+                )
+            })
+            }
+        </ScrollView>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    modulesContainer: {},
+});
+
+export default ModuleList;

src/components/entity/modules/ModuleView.js

@@ -0,0 +1,42 @@
+import {StyleSheet, Text, View } from "react-native";
+import FullWidthImage from "react-native-fullwidth-image";
+
+const ModuleView = ({module}) => {
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (<View style={styles.container}>
+        <FullWidthImage source={{uri: module.ModuleImage}} style={styles.image}/>
+
+        <View style={styles.infoTray}>
+            <Text style={styles.boldText}>View {module.ModuleCode} {module.ModuleName}</Text>
+            <Text style={styles.text}>Level {module.ModuleLevel}</Text>
+            <Text style={styles.Text}>
+                {module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
+            </Text>
+
+        </View>
+    </View>);
+};
+
+
+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;

src/components/layout/Screen.js

@@ -1,5 +1,5 @@
-import { StatusBar } from "expo-status-bar";
+import {StatusBar} from "expo-status-bar";
-import { StyleSheet, View } from "react-native";
+import {StyleSheet, View} from "react-native";
 
 const Screen = ({children}) => {
 //   Initialisation -------------
@@ -9,7 +9,7 @@ const Screen = ({children}) => {
     return (
         <View style={styles.screen}>
             {children}
-            <StatusBar style="light" />
+            <StatusBar style="light"/>
         </View>
     );
 };

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 (
+    return (
-    <Screen style={styles.container}>
+        <Screen style={styles.container}>
-      <Text>Add</Text>
+            <Text>Add</Text>
-    </Screen>
+        </Screen>
-  );
+    );
 };
 
 const styles = StyleSheet.create({});

src/components/screens/ModuleListScreen.js

@@ -1,51 +1,36 @@
-import {StyleSheet, Text, ScrollView, View, Pressable} 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";
 
-
+const ModuleListScreen = ({navigation}) => {
-export const ModuleListScreen = () => {
 //   Initialisation -------------
-    const modules = initialModules;
+//    let modules = initialModules;
 
 //   State ----------------------
-//   Handlers -------------------
+    const [modules, setModules] = useState(initialModules);
-    const handleSelect = () => alert("Item selected");
 
+
+//   Handlers -------------------
+
+    const handleDelete = (module) =>
+        setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
+
+    const handleSelect = (module) => navigation.navigate('ModuleViewScreen', {module});
 //   View -----------------------
-  return (
+
-    <Screen>
+    return (
-        <ScrollView style={styles.modulesContainer}>
+        <Screen>
-        {modules.map((module) => {
+            <RenderCount/>
-                return(
+            <ModuleList modules={modules} onSelect={handleSelect}/>
-                    <Pressable key={module.ModuleCode} onPress={handleSelect}>
+        </Screen>
-                        <View style={styles.modulesItem}>
+    );
-                            <Text style={styles.text}>
-                                {module.ModuleCode} {module.ModuleName}
-                            </Text>
-                        </View>
-                    </Pressable>
-                )
-            })
-        }
-    </ScrollView>
-    </Screen>
-  );
 };
 
-const styles = StyleSheet.create({
+const styles = StyleSheet.create({});
-    modulesContainer: {
+
-        marginTop: 20,
+export default ModuleListScreen;
-    },
+
-    modulesItem: {
-        padding: 15,
-        marginBottom: 10,
-        borderTopWidth: 1,
-        borderTopColor: "light grey",
-        // borderRadius: 15,
-    },
-    text: {
-    },
-});
 
-export default ModuleListScreen;

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 (
+    return (
-    <Screen style={styles.container}>
+        <Screen style={styles.container}>
-      <Text>Modify</Text>
+            <Text>Modify</Text>
-    </Screen>
+        </Screen>
-  );
+    );
 };
 
 const styles = StyleSheet.create({});

src/components/screens/ModuleViewScreen.js

@@ -1,16 +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 = () => {
+
+export const ModuleViewScreen = ({ route }) => {
 //   Initialisation -------------
+
+    const {module} = route.params;
+
 //   State ----------------------
 //   Handlers -------------------
 //   View -----------------------
-  return (
+    return (<Screen>
-    <Screen style={styles.container}>
+        <ModuleView module={module}></ModuleView>
-      <Text>View</Text>
+    </Screen>);
-    </Screen>
-  );
 };
 
 const styles = StyleSheet.create({});