Refactored Code

Template.js

@@ -8,7 +8,7 @@ const Component = () => {
     //   View -----------------------
 
     return (
-        <Text></Text>
+        <View></View>
     );
 };
 

package-lock.json

@@ -55,6 +55,7 @@
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -4050,6 +4051,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -4746,6 +4748,7 @@
       "resolved": "https://registry.npmjs.org/expo/-/expo-54.0.20.tgz",
       "integrity": "sha512-mWHky+H63W60P5Oo+VbtqzF2sLvdaoSSwG57H9rlq1DrgIla++QJZuwJkXXo55lYPymVmkVhwG6FjWYKKylwpw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "@expo/cli": "54.0.13",
@@ -4797,6 +4800,7 @@
       "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==",
+      "peer": true,
       "dependencies": {
         "fontfaceobserver": "^2.1.0"
       },
@@ -7672,6 +7676,7 @@
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7689,7 +7694,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
       "integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -7707,6 +7711,7 @@
       "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.5.tgz",
       "integrity": "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/create-cache-key-function": "^29.7.0",
         "@react-native/assets-registry": "0.81.5",
@@ -7882,6 +7887,7 @@
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
       "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9330,6 +9336,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

src/components/UI/Form.js

@@ -0,0 +1,73 @@
+import {StyleSheet, Text, TextInput, View} from "react-native";
+import {Button, ButtonTray} from "./Button";
+import Icons from "./Icons";
+
+const Form = ({children, onSubmit, onCancel, submitLabel, submitIcon}) => {
+
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (
+        <View style={styles.formContainer}>
+
+            <View style={styles.formItems}>
+                {children}
+            </View>
+
+            <ButtonTray>
+                <Button label='Cancel' icon={<Icons.Close/>} onClick={onCancel}/>
+                <Button label={submitLabel} icon={submitIcon} onClick={onSubmit}/>
+            </ButtonTray>
+        </View>
+    );
+};
+
+const InputText = ({label, value, onChange}) => {
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+    return (
+        <View style={styles.item}>
+            <Text style={styles.itemLabel}>{label}</Text>
+            <TextInput
+                value={value}
+                onChangeText={onChange}
+                style={styles.itemTextInput}
+            />
+        </View>
+    )
+};
+
+// Compose components
+Form.InputText = InputText;
+
+// Styles
+
+const styles = StyleSheet.create({
+    itemLabel: {
+        color: 'gray',
+        fontSize: 16,
+        margin: 5,
+    },
+    itemTextInput: {
+        height: 50,
+        paddingLeft: 10,
+        fontSize: 16,
+        backgroundColor: 'white',
+        borderRadius: 7,
+        borderWidth: 1,
+        borderColor: 'lightgray',
+    },
+    formItems: {
+        gap: 5,
+    },
+    formContainer: {
+        gap: 10
+    },
+
+});
+
+export default Form;

src/components/entity/modules/moduleForm.js

@@ -0,0 +1,93 @@
+import {StyleSheet, Text, TextInput, View} from "react-native";
+import {useState} from "react";
+import Icons from "../../UI/Icons";
+import Form from "../../UI/Form";
+
+const defaultModule = {
+    ModuleID: null,
+    ModuleCode: null,
+    ModuleName: null,
+    ModuleLevel: null,
+    ModuleLeaderID: null,
+    ModuleLeaderName: null,
+    ModuleImage: null,
+};
+
+const ModuleForm = ({onSubmit, onCancel}) => {
+
+    //   Initialisation -------------
+
+    defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
+    defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
+
+
+    //   State ----------------------
+
+    const [module, setModule] = useState(defaultModule);
+
+    //   Handlers -------------------
+
+    const handleChange = (field, value) => {
+        setModule({...module, [field]: value})
+    };
+
+    const handleSubmit = () => onSubmit(module);
+
+
+    //   View -----------------------
+
+    const submitLabel = 'Add';
+    const submitIcon = <Icons.Add/>;
+
+
+    return (
+        <Form
+            onSubmit={handleSubmit}
+            onCancel={onCancel}
+            submitLabel={submitLabel}
+            submitIcon={submitIcon}
+        >
+
+            <Form.InputText
+                label='Module Code'
+                value={module.ModuleCode}
+                onChange={(value) => handleChange('ModuleCode', value)}
+            />
+
+            <Form.InputText
+                label='Module Name'
+                value={module.ModuleName}
+                onChange={(value) => handleChange('ModuleName', value)}
+            />
+
+            <Form.InputText
+                label='Module Level'
+                value={module.ModuleLevel}
+                onChange={(value) => handleChange('ModuleLevel', value)}
+            />
+
+            <Form.InputText
+                label='Module Leader Name'
+                value={module.ModuleLeaderName}
+                onChange={(value) => handleChange('ModuleLeaderName', value)}
+            />
+
+            <Form.InputText
+                label='Module Image URL'
+                value={module.ModuleImage}
+                onChange={(value) => handleChange('ModuleImage', value)}
+            />
+
+            {/* This is to test whether the correct Data was being stored in Local State */}
+            {/*<Text> {module.ModuleCode}  {module.ModuleName} </Text>*/}
+
+        </Form>
+    );
+};
+
+const styles = StyleSheet.create({
+    formContainer: {},
+    item: {},
+});
+
+export default ModuleForm;

src/components/screens/ModuleAddScreen.js

@@ -1,115 +1,24 @@
 import {StyleSheet, Text, TextInput, View} from "react-native";
 import Screen from "../layout/Screen";
-import {Button, ButtonTray} from "../UI/Button";
+import ModuleForm from "../entity/modules/moduleForm";
-import Icons from "../UI/Icons";
-import {useState} from "react";
 
-const defaultModule = {
-    ModuleID: null,
-    ModuleCode: null,
-    ModuleName: null,
-    ModuleLevel: null,
-    ModuleLeaderID: null,
-    ModuleLeaderName: null,
-    ModuleImage: null,
-};
 
 export const ModuleAddScreen = ({navigation, route}) => {
 //   Initialisation -------------
     const {onAdd} = route.params;
-
-    defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
-    defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
-
 //   State ----------------------
-    const [module, setModule] = useState(defaultModule);
-
 //   Handlers -------------------
 
-    const handleAdd = () => onAdd(module);
     const handleCancel = navigation.goBack;
 
-    const handleChange = (field, value) => {setModule( {...module, [field]: value} )};
-
 //   View -----------------------
     return (
         <Screen style={styles.container}>
-
+            <ModuleForm onSubmit={onAdd} onCancel={handleCancel}/>
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Code</Text>
-                <TextInput
-                    value={module.ModuleCode}
-                    onChangeText={ (value) => handleChange('ModuleCode',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Name</Text>
-                <TextInput
-                    value={module.ModuleName}
-                    onChangeText={ (value) => handleChange('ModuleName',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Level</Text>
-                <TextInput
-                    value={module.ModuleLevel}
-                    onChangeText={ (value) => handleChange('ModuleLevel',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Leader Name</Text>
-                <TextInput
-                    value={module.ModuleLeaderName}
-                    onChangeText={ (value) => handleChange('ModuleLeaderName',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Image URL</Text>
-                <TextInput
-                    value={module.ModuleImage}
-                    onChangeText={ (value) => handleChange('ModuleImage',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-
-
-
-            {/* This is to test whether the correct Data was being stored in Local State */}
-            {/*<Text> {module.ModuleCode}  {module.ModuleName} </Text>*/}
-
-            <ButtonTray>
-                <Button label='Cancel' onClick={handleCancel}/>
-                <Button label='Add' icon={<Icons.Add/>} onClick={handleAdd}/>
-            </ButtonTray>
         </Screen>
     );
 };
 
-const styles = StyleSheet.create({
+const styles = StyleSheet.create({});
-    item: {},
-    itemLabel: {
-        color: 'gray',
-        fontSize: 16,
-        margin: 5,
-    },
-    itemTextInput: {
-        height: 50,
-        paddingLeft: 10,
-        fontSize: 16,
-        backgroundColor: 'white',
-        borderRadius: 7,
-        borderWidth: 1,
-        borderColor: 'lightgray',
-    },
-});
 
 export default ModuleAddScreen;

src/components/screens/ModuleViewScreen.js

@@ -12,7 +12,7 @@ export const ModuleViewScreen = ({route}) => {
 //   Handlers -------------------
 //   View -----------------------
     return (<Screen>
-        <ModuleView module={module} onDelete={onDelete}></ModuleView>
+        <ModuleView module={module} onDelete={onDelete} />
     </Screen>);
 };