Merge pull request #8 from mudabbir-ahmad/Week5Act1

Week5Act1

src/components/API/API.js

@@ -0,0 +1,31 @@
+const API = {};
+
+API.get = (endpoint) => callFetch(endpoint, 'GET');
+API.post = (endpoint, data) => callFetch(endpoint, 'POST', data);
+API.put = (endpoint, data) => callFetch(endpoint, 'PUT', data);
+API.delete = (endpoint) => callFetch(endpoint, 'DELETE');
+
+export default API;
+
+const callFetch = async (endpoint, method, dataObj = null) => {
+    // Build request object
+    let requestObj = {method: method}; // GET, POST, PUT or DELETE
+    if (dataObj)
+        requestObj = {
+            ...requestObj,
+            headers: {'Content-type': 'application/json'},
+            body: JSON.stringify(dataObj),
+        };
+
+    // Call the fetch and process the return
+    try {
+        let result = null;
+        const response = await fetch(endpoint, requestObj);
+        if (response.status !== 204) result = await response.json();
+        return response.status >= 200 && response.status < 300
+            ? {isSuccess: true, result}
+            : {isSuccess: false, message: `${result.message}`};
+    } catch (error) {
+        return {isSuccess: false, message: error.message};
+    }
+};

src/components/API/useLoad.js

@@ -0,0 +1,28 @@
+import {useEffect, useState} from "react";
+import API from "./API";
+
+
+const useLoad = (loadEndpoint) => {
+
+    //   State ----------------------
+
+    const [records, setRecords] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    //   Loader ----------------------
+    const loadRecords = async (endpoint) => {
+        const response = await API.get(endpoint);
+        setIsLoading(false);
+        if (response.isSuccess) setRecords(response.result);
+    };
+
+    useEffect(() => {
+        loadRecords(loadEndpoint);
+    }, []);
+
+    //   return ----------------------
+
+    return [records, setRecords, isLoading, loadRecords];
+};
+
+export default useLoad;

src/components/UI/RenderCount.js

@@ -1,5 +1,5 @@
-import { useRef } from "react";
+import {useRef} from "react";
-import { Text, StyleSheet } from "react-native";
+import {Text, StyleSheet} from "react-native";
 
 const RenderCount = ({backgroundColor = 'dodgerblue', fontColor = 'white'}) => {
 //     Initialisation -------------
@@ -9,7 +9,7 @@ const RenderCount = ({backgroundColor = 'dodgerblue', fontColor = 'white'}) => {
 //     Handlers -------------------
 //     View -----------------------
     return (
-        <Text style={[styles.count, { backgroundColor, color: fontColor}]}>
+        <Text style={[styles.count, {backgroundColor, color: fontColor}]}>
             Number of renders: {renderCount.current}
         </Text>
     );

src/components/entity/modules/ModuleView.js

@@ -24,13 +24,14 @@ const ModuleView = ({module, onDelete, onModify}) => {
     //   View -----------------------
 
     return (<View style={styles.container}>
-        <FullWidthImage source={{uri: module.ModuleImage}} style={styles.image}/>
+        <FullWidthImage source={{uri: module.ModuleImageURL}} 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}>cohort {module.ModuleYearID}</Text>
             <Text style={styles.Text}>
-                {module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
+                {module.ModuleLeaderID} <Text style={styles.dimText}>(Module Leader)</Text>
             </Text>
         </View>
 

src/components/entity/modules/moduleForm.js

@@ -1,16 +1,17 @@
-import {StyleSheet, Text, TextInput, View} from "react-native";
+import { Text } from "react-native";
 import {useState} from "react";
 import Icons from "../../UI/Icons";
 import Form from "../../UI/Form";
+import useLoad from "../../API/useLoad";
 
 const defaultModule = {
     ModuleID: null,
     ModuleCode: null,
     ModuleName: null,
     ModuleLevel: null,
+    ModuleYearID: null,
     ModuleLeaderID: null,
-    ModuleLeaderName: null,
+    ModuleImageURL: null,
-    ModuleImage: null,
 };
 
 const ModuleForm = ({originalModule, onSubmit, onCancel}) => {
@@ -20,6 +21,10 @@ const ModuleForm = ({originalModule, onSubmit, onCancel}) => {
     defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
     defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
 
+    const yearsEndpoint = 'https://softwarehub.uk/unibase/api/years';
+
+    const staffEndpoint = 'https://softwarehub.uk/unibase/api/users/staff';
+
     const levels = [
         {value: 3, label: '3 (Foundation)'},
         {value: 4, label: '4 (First Year)'},
@@ -28,11 +33,23 @@ const ModuleForm = ({originalModule, onSubmit, onCancel}) => {
         {value: 7, label: '7 (Masters)'},
     ];
 
+    // const cohorts = [
+    //     {value: 1, label: 'local 2022-23'},
+    //     {value: 2, label: 'local 2023-24'},
+    //     {value: 3, label: 'local 2024-25'},
+    //     {value: 3, label: 'local 2025-26'},
+    //     {value: 5, label: 'local 2026-27'},
+    // ];
+
 
     //   State ----------------------
 
     const [module, setModule] = useState(originalModule || defaultModule);
 
+    const [years, , isYearsLoading] = useLoad(yearsEndpoint);
+
+    const [Leaders, , isLeadersLoading] = useLoad(staffEndpoint);
+
     //   Handlers -------------------
 
     const handleChange = (field, value) => {
@@ -47,6 +64,11 @@ const ModuleForm = ({originalModule, onSubmit, onCancel}) => {
     const submitLabel = originalModule ? 'Modify' : 'Add';
     const submitIcon = originalModule ? <Icons.Edit/> : <Icons.Add/>;
 
+    const cohorts = years.map((year) => ({value: year.YearID, label: year.YearName}));
+    const staff = Leaders.map((leader) => ({
+        value: leader.UserID,
+        label: ` ${leader.UserFirstname} ${leader.UserLastname} `
+    }));
 
     return (
         <Form
@@ -67,25 +89,40 @@ const ModuleForm = ({originalModule, onSubmit, onCancel}) => {
                 value={module.ModuleName}
                 onChange={(value) => handleChange('ModuleName', value)}
             />
-
+            {isYearsLoading ? <Text>Loading Levels...</Text> :
                 <Form.InputSelect
                     label='Module Level'
                     prompt={'Select module level...'}
                     options={levels}
                     value={module.ModuleLevel}
                     onChange={(value) => handleChange('ModuleLevel', value)}
+                    isLoading={isYearsLoading}
+                />
+            }
+
+            <Form.InputSelect
+                label='Module cohort'
+                value={module.ModuleYearID}
+                onChange={(value) => handleChange('ModuleYearID', value)}
+                prompt={'Select module cohort...'}
+                options={cohorts}
+                isLoading={isYearsLoading}
             />
 
-            <Form.InputText
+            <Form.InputSelect
-                label='Module Leader Name'
+                label='Module Leader'
-                value={module.ModuleLeaderName}
+                value={module.ModuleLeaderID}
-                onChange={(value) => handleChange('ModuleLeaderName', value)}
+                onChange={(value) => handleChange('ModuleLeaderID', value)}
+                prompt={'Select module leader...'}
+                options={staff}
+                isLoading={isLeadersLoading}
             />
 
+
             <Form.InputText
                 label='Module Image URL'
-                value={module.ModuleImage}
+                value={module.ModuleImageURL}
-                onChange={(value) => handleChange('ModuleImage', value)}
+                onChange={(value) => handleChange('ModuleImageURL', value)}
             />
 
             {/* This is to test whether the correct Data was being stored in Local State */}
@@ -95,9 +132,6 @@ const ModuleForm = ({originalModule, onSubmit, onCancel}) => {
     );
 };
 
-const styles = StyleSheet.create({
+// const styles = StyleSheet.create({});
-    formContainer: {},
-    item: {},
-});
 
 export default ModuleForm;

src/components/layout/Screen.js

@@ -1,7 +1,7 @@
 import {StatusBar} from "expo-status-bar";
 import {StyleSheet, View} from "react-native";
 
-const Screen = ({children}) => {
+const Screen = ({ children }) => {
 //   Initialisation -------------
 //   State ----------------------
 //   Handlers -------------------

src/components/screens/ModuleListScreen.js

@@ -1,19 +1,26 @@
-import {useState} from "react";
+// import {useState, useEffect} from "react";
-import {LogBox, StyleSheet} from "react-native";
+import {LogBox, Text} from "react-native";
 import Screen from "../layout/Screen";
 import ModuleList from "../entity/modules/ModuleList";
-import initialModules from "../../data/modules.js";
+// import API from "../API/API";
+// import initialModules from "../../data/modules.js";
 // import RenderCount from "../UI/RenderCount";
 import {Button, ButtonTray} from "../UI/Button";
 import Icons from "../UI/Icons";
+import useLoad from "../API/useLoad";
+
 
 const ModuleListScreen = ({navigation}) => {
 //   Initialisation -------------
 //    let modules = initialModules;
     LogBox.ignoreLogs(['Non-serializable values were found in the navigation state']);
 
+
+    const modulesEndpoint = 'https://softwarehub.uk/unibase/api/modules';
+
 //   State ----------------------
-    const [modules, setModules] = useState(initialModules);
+
+    const [modules, setModules, isLoading, loadModules] = useLoad(modulesEndpoint);
 
 //   Handlers -------------------
 
@@ -39,7 +46,7 @@ const ModuleListScreen = ({navigation}) => {
 
     const onModify = (module) => {
         handleModify(module);
-        navigation.replace('ModuleViewScreen', { module, onDelete, onModify });
+        navigation.replace('ModuleViewScreen', {module, onDelete, onModify});
     };
 
     const goToViewScreen = (module) =>
@@ -57,12 +64,15 @@ const ModuleListScreen = ({navigation}) => {
             <ButtonTray>
                 <Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen}/>
             </ButtonTray>
+
+            {isLoading && <Text>Loading Records...</Text>}
+
             <ModuleList modules={modules} onSelect={goToViewScreen}/>
         </Screen>
     );
 };
 
-const styles = StyleSheet.create({});
+// const styles = StyleSheet.create({});
 
 export default ModuleListScreen;