Added modify screen routing

src/components/entity/modules/ModuleView.js

@@ -3,7 +3,7 @@ import FullWidthImage from "react-native-fullwidth-image";
 import {Button, ButtonTray} from "../../UI/Button";
 import Icons from "../../UI/Icons.js"
 
-const ModuleView = ({module, onDelete}) => {
+const ModuleView = ({module, onDelete, onModify}) => {
     //   Initialisation -------------
     //   State ----------------------
     //   Handlers -------------------
@@ -35,7 +35,11 @@ const ModuleView = ({module, onDelete}) => {
         </View>
 
         <ButtonTray>
-            <Button icon={<Icons.Edit/>} label={"Modify"}/>
+            <Button
+                icon={<Icons.Edit/>}
+                label={"Modify"}
+                onClick={onModify}
+            />
             <Button
                 icon={<Icons.Delete/>}
                 label={"Delete"}

src/components/screens/ModuleListScreen.js

@@ -15,7 +15,6 @@ const ModuleListScreen = ({navigation}) => {
 //   State ----------------------
     const [modules, setModules] = useState(initialModules);
 
-
 //   Handlers -------------------
 
     const handleDelete = (module) =>
@@ -27,17 +26,28 @@ const ModuleListScreen = ({navigation}) => {
         navigation.goBack();
     }
 
-    const handleAdd = (module) => setModules([ ...modules, module]);
+    const handleAdd = (module) => setModules([...modules, module]);
+
+    const handleModify = (updatedModule) => setModules(
+        modules.map((module) => (module.ModuleID === updatedModule.ModuleID) ? updatedModule : module),
+    );
 
     const onAdd = (module) => {
         handleAdd(module);
         navigation.goBack();
     };
 
+    const onModify = (module) => {
+        handleModify(module);
+        navigation.navigate('ModuleListScreen');
+    };
+
     const goToViewScreen = (module) =>
-        navigation.navigate('ModuleViewScreen', {module, onDelete});
+        navigation.navigate('ModuleViewScreen', {module, onDelete, onModify});
+
+    const goToAddScreen = () =>
+        navigation.navigate('ModuleAddScreen', {onAdd});
 
-    const goToAddScreen = () => navigation.navigate('ModuleAddScreen', {onAdd});
 
 //   View -----------------------
 
@@ -45,9 +55,9 @@ const ModuleListScreen = ({navigation}) => {
         <Screen>
             {/*<RenderCount/>*/}
             <ButtonTray>
-                <Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen} />
+                <Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen}/>
             </ButtonTray>
-            <ModuleList modules={modules} onSelect={goToViewScreen} />
+            <ModuleList modules={modules} onSelect={goToViewScreen}/>
         </Screen>
     );
 };

src/components/screens/ModuleViewScreen.js

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