Merge pull request #6 from mudabbir-ahmad/week3act3

Week3act3

Template.js

@@ -0,0 +1,17 @@
+import {Pressable, ScrollView, StyleSheet, Text, View} from "react-native";
+
+const Component = () => {
+
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (
+        <Text></Text>
+    );
+};
+
+const styles = StyleSheet.create({});
+
+export default Component;

package-lock.json

@@ -8,6 +8,7 @@
       "name": "crudler",
       "version": "1.0.0",
       "dependencies": {
+        "@expo/vector-icons": "^15.0.3",
         "@react-navigation/native": "^7.1.18",
         "@react-navigation/native-stack": "^7.5.1",
         "expo": "^54.0.20",
@@ -15,6 +16,9 @@
         "react": "19.1.0",
         "react-native": "^0.81.5",
         "react-native-fullwidth-image": "^0.1.3"
+      },
+      "devDependencies": {
+        "baseline-browser-mapping": "^2.9.0"
       }
     },
     "node_modules/@0no-co/graphql.web": {
@@ -2539,6 +2543,16 @@
       "integrity": "sha512-HHQigo3rQWKMDzYDLkubN5WQOYXJJE2eNqIQC2axC2iO3mHdwnIR7FgZVvHWtBwAdzBgAP0ECp8KqS8TiMKvgw==",
       "license": "MIT"
     },
+    "node_modules/@expo/vector-icons": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
+      "integrity": "sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==",
+      "peerDependencies": {
+        "expo-font": ">=14.0.4",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@expo/ws-tunnel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@expo/ws-tunnel/-/ws-tunnel-1.0.6.tgz",
@@ -3936,9 +3950,9 @@
       ]
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.10",
+      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.0.tgz",
-      "integrity": "sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==",
+      "integrity": "sha512-Mh++g+2LPfzZToywfE1BUzvZbfOY52Nil0rn9H1CPC5DJ7fX+Vir7nToBeoiSbB1zTNeGYbELEvJESujgGrzXw==",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
       }
@@ -4779,6 +4793,19 @@
         }
       }
     },
+    "node_modules/expo-font": {
+      "version": "14.0.9",
+      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.9.tgz",
+      "integrity": "sha512-xCoQbR/36qqB6tew/LQ6GWICpaBmHLhg/Loix5Rku/0ZtNaXMJv08M9o1AcrdiGTn/Xf/BnLu6DgS45cWQEHZg==",
+      "dependencies": {
+        "fontfaceobserver": "^2.1.0"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "3.0.19",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.19.tgz",
@@ -5060,17 +5087,6 @@
         }
       }
     },
-    "node_modules/expo/node_modules/@expo/vector-icons": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
-      "integrity": "sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "expo-font": ">=14.0.4",
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/expo/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -5222,20 +5238,6 @@
         "react-native": "*"
       }
     },
-    "node_modules/expo/node_modules/expo-font": {
-      "version": "14.0.9",
-      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.9.tgz",
-      "integrity": "sha512-xCoQbR/36qqB6tew/LQ6GWICpaBmHLhg/Loix5Rku/0ZtNaXMJv08M9o1AcrdiGTn/Xf/BnLu6DgS45cWQEHZg==",
-      "license": "MIT",
-      "dependencies": {
-        "fontfaceobserver": "^2.1.0"
-      },
-      "peerDependencies": {
-        "expo": "*",
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/expo/node_modules/expo-keep-awake": {
       "version": "15.0.7",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-15.0.7.tgz",

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
     "@react-navigation/native": "^7.1.18",
     "@react-navigation/native-stack": "^7.5.1",
     "expo": "^54.0.20",
@@ -17,5 +18,8 @@
     "react-native": "^0.81.5",
     "react-native-fullwidth-image": "^0.1.3"
   },
-  "private": true
+  "private": true,
+  "devDependencies": {
+    "baseline-browser-mapping": "^2.9.0"
+  }
 }

src/components/UI/Button.js

@@ -0,0 +1,58 @@
+import {Pressable, StyleSheet, Text, View} from "react-native";
+
+export const Button = ({label, icon, onClick, styleLabel, styleButton}) => {
+
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (
+        <Pressable onPress={onClick} style={[styles.button, styleButton]}>
+
+            {
+                icon ? icon : null
+            }
+
+            <Text style={[styles.label, styleLabel]}>
+                {label}
+            </Text>
+        </Pressable>
+    );
+};
+
+export const ButtonTray = ({children}) => {
+
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (
+        <View style={styles.buttonTray}>{children}</View>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        minHeight: 50,
+        borderWidth: 1,
+        borderRadius: 7,
+        borderColor: 'grey',
+        backgroundColor: 'white',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 3,
+        flex: 1,
+        flexDirection: 'row',
+        gap: 5,
+    },
+    label: {
+        fontSize: 16,
+    },
+    buttonTray: {
+        flexDirection: 'row',
+        gap: 15,
+    }
+
+});

src/components/UI/Icons.js

@@ -0,0 +1,18 @@
+import {MaterialIcons} from '@expo/vector-icons';
+
+const Icons = {};
+
+const Add = () => <MaterialIcons name='add' size={16}/>;
+const Close = () => <MaterialIcons name='close' size={16}/>;
+const Delete = () => <MaterialIcons name='delete' size={16}/>;
+const Edit = () => <MaterialIcons name='edit' size={16}/>;
+const Submit = () => <MaterialIcons name='check' size={16}/>;
+
+// Compose
+Icons.Add = Add;
+Icons.Close = Close;
+Icons.Delete = Delete;
+Icons.Edit = Edit;
+Icons.Submit = Submit;
+
+export default Icons;

src/components/entity/modules/ModuleView.js

@@ -1,10 +1,26 @@
-import {StyleSheet, Text, View } from "react-native";
+import {Alert, StyleSheet, Text, View} from "react-native";
 import FullWidthImage from "react-native-fullwidth-image";
+import {Button, ButtonTray} from "../../UI/Button";
+import Icons from "../../UI/Icons.js"
 
-const ModuleView = ({module}) => {
+const ModuleView = ({module, onDelete}) => {
     //   Initialisation -------------
     //   State ----------------------
     //   Handlers -------------------
+
+    const handleDelete = () => onDelete(module);
+
+    const requestDelete = () => {
+        Alert.alert(
+            'Delete Warning',
+            `Are you sure you want to delete module ${module.ModuleCode} ${module.ModuleName}?`,
+            [
+                {text: 'cancel'},
+                {text: 'Delete', onPress: handleDelete}
+            ]
+        );
+    }
+
     //   View -----------------------
 
     return (<View style={styles.container}>
@@ -16,8 +32,19 @@ const ModuleView = ({module}) => {
             <Text style={styles.Text}>
                 {module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
             </Text>
-
         </View>
+
+        <ButtonTray>
+            <Button icon={<Icons.Edit/>} label={"Modify"}/>
+            <Button
+                icon={<Icons.Delete/>}
+                label={"Delete"}
+                // styleButton={{backgroundColor: 'mistyrose'}}
+                // styleLabel={{color: 'red'}}
+                onClick={requestDelete}
+            />
+        </ButtonTray>
+
     </View>);
 };
 

src/components/screens/ModuleAddScreen.js

@@ -1,14 +1,36 @@
 import {StyleSheet, Text} from "react-native";
 import Screen from "../layout/Screen";
+import {Button, ButtonTray} from "../UI/Button";
+import Icons from "../UI/Icons";
 
-export const ModuleAddScreen = () => {
+const defaultModule = {
+    ModuleID: Math.floor(100000 + Math.random()*900000),
+    ModuleCode: "CI6330",
+    ModuleName: "Mobile Application Development",
+    ModuleLevel: 6,
+    ModuleLeaderID: 1,
+    ModuleLeaderName: "Graeme Jones",
+    ModuleImage: 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg',
+};
+
+export const ModuleAddScreen = ({navigation, route}) => {
 //   Initialisation -------------
+    const { onAdd } = route.params;
+
 //   State ----------------------
 //   Handlers -------------------
+
+    const handleAdd = () => onAdd(defaultModule);
+    const handleCancel = navigation.goBack;
+
 //   View -----------------------
     return (
         <Screen style={styles.container}>
             <Text>Add</Text>
+            <ButtonTray>
+                <Button label='Cancel' onClick={handleCancel} />
+                <Button label='Add' icon={<Icons.Add/>} onClick={handleAdd} />
+            </ButtonTray>
         </Screen>
     );
 };

src/components/screens/ModuleListScreen.js

@@ -1,13 +1,16 @@
 import {useState} from "react";
-import {StyleSheet} from "react-native";
+import {LogBox, 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 RenderCount from "../UI/RenderCount";
+import {Button, ButtonTray} from "../UI/Button";
+import Icons from "../UI/Icons";
 
 const ModuleListScreen = ({navigation}) => {
 //   Initialisation -------------
 //    let modules = initialModules;
+    LogBox.ignoreLogs(['Non-serializable values were found in the navigation state']);
 
 //   State ----------------------
     const [modules, setModules] = useState(initialModules);
@@ -18,13 +21,33 @@ const ModuleListScreen = ({navigation}) => {
     const handleDelete = (module) =>
         setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
 
-    const handleSelect = (module) => navigation.navigate('ModuleViewScreen', {module});
+
+    const onDelete = (module) => {
+        handleDelete(module);
+        navigation.goBack();
+    }
+
+    const handleAdd = (module) => setModules([ ...modules, module]);
+
+    const onAdd = (module) => {
+        handleAdd(module);
+        navigation.goBack();
+    };
+
+    const goToViewScreen = (module) =>
+        navigation.navigate('ModuleViewScreen', {module, onDelete});
+
+    const goToAddScreen = () => navigation.navigate('ModuleAddScreen', {onAdd});
+
 //   View -----------------------
 
     return (
         <Screen>
-            <RenderCount/>
+            {/*<RenderCount/>*/}
-            <ModuleList modules={modules} onSelect={handleSelect}/>
+            <ButtonTray>
+                <Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen} />
+            </ButtonTray>
+            <ModuleList modules={modules} onSelect={goToViewScreen} />
         </Screen>
     );
 };

src/components/screens/ModuleViewScreen.js

@@ -3,16 +3,16 @@ import Screen from "../layout/Screen";
 import ModuleView from "../entity/modules/ModuleView";
 
 
-export const ModuleViewScreen = ({ route }) => {
+export const ModuleViewScreen = ({route}) => {
 //   Initialisation -------------
 
-    const {module} = route.params;
+    const {module, onDelete} = route.params;
 
 //   State ----------------------
 //   Handlers -------------------
 //   View -----------------------
     return (<Screen>
-        <ModuleView module={module}></ModuleView>
+        <ModuleView module={module} onDelete={onDelete}></ModuleView>
     </Screen>);
 };