week5 act 1

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/screens/ModuleListScreen.js

@@ -1,9 +1,10 @@
-import {useState} from "react";
+import {useState, useEffect} from "react";
 import {LogBox, StyleSheet} 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 RenderCount from "../UI/RenderCount";
+// import initialModules from "../../data/modules.js";
+import RenderCount from "../UI/RenderCount";
 import {Button, ButtonTray} from "../UI/Button";
 import Icons from "../UI/Icons";
 
@@ -11,9 +12,20 @@ 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] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const loadModules = async (endpoint) => {
+        const response = await API.get(endpoint);
+        setIsLoading(false);
+        if (response.isSuccess) setModules(response.result);
+    };
+
+    useEffect( () => {loadModules(modulesEndpoint)}, [] );
 
 //   Handlers -------------------
 
@@ -53,7 +65,7 @@ const ModuleListScreen = ({navigation}) => {
 
     return (
         <Screen>
-            {/*<RenderCount/>*/}
+            <RenderCount/>
             <ButtonTray>
                 <Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen}/>
             </ButtonTray>