diff --git a/src/components/entity/modules/ModuleView.js b/src/components/entity/modules/ModuleView.js index 134aad3..136f11d 100644 --- a/src/components/entity/modules/ModuleView.js +++ b/src/components/entity/modules/ModuleView.js @@ -24,7 +24,7 @@ const ModuleView = ({module, onDelete, onModify}) => { // View ----------------------- return ( - + View {module.ModuleCode} {module.ModuleName} diff --git a/src/components/entity/modules/moduleForm.js b/src/components/entity/modules/moduleForm.js index a46990b..d61c30c 100644 --- a/src/components/entity/modules/moduleForm.js +++ b/src/components/entity/modules/moduleForm.js @@ -1,7 +1,8 @@ import {StyleSheet, Text, TextInput, View} from "react-native"; -import {useState} from "react"; +import {useEffect, useState} from "react"; import Icons from "../../UI/Icons"; import Form from "../../UI/Form"; +import API from "../../API/API"; const defaultModule = { ModuleID: null, @@ -9,8 +10,8 @@ const defaultModule = { ModuleName: null, ModuleLevel: null, ModuleLeaderID: null, - ModuleLeaderName: null, - ModuleImage: null, + ModuleYearID: null, + ModuleImageURL: null, }; const ModuleForm = ({originalModule, onSubmit, onCancel}) => { @@ -20,6 +21,8 @@ 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 levels = [ {value: 3, label: '3 (Foundation)'}, {value: 4, label: '4 (First Year)'}, @@ -28,11 +31,32 @@ 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, setYears] = useState([]); + const [isYearsLoading, setIsYearsLoading] = useState(true); + + const loadYears = async (endpoint) => { + const response = await API.get(endpoint); + setIsYearsLoading(false); + if (response.isSuccess) setYears(response.result); + }; + + useEffect(() => { + loadYears(yearsEndpoint) + }, []); + // Handlers ------------------- const handleChange = (field, value) => { @@ -47,6 +71,8 @@ const ModuleForm = ({originalModule, onSubmit, onCancel}) => { const submitLabel = originalModule ? 'Modify' : 'Add'; const submitIcon = originalModule ? : ; + const cohorts = years.map((year) => ({value: year.YearID, label: year.YearName}) ); + return (
{ value={module.ModuleName} onChange={(value) => handleChange('ModuleName', value)} /> - + { isYearsLoading ? Loading Levels... : handleChange('ModuleLevel', value)} + isLoading={isYearsLoading} + /> + } + + handleChange('ModuleYearID', value)} /> { handleChange('ModuleImage', value)} + value={module.ModuleImageURL} + onChange={(value) => handleChange('ModuleImageURL', value)} /> {/* This is to test whether the correct Data was being stored in Local State */} diff --git a/src/components/layout/Screen.js b/src/components/layout/Screen.js index cb4683e..f0daca0 100644 --- a/src/components/layout/Screen.js +++ b/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 ------------------- diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js index 8aed38a..219fbf9 100644 --- a/src/components/screens/ModuleListScreen.js +++ b/src/components/screens/ModuleListScreen.js @@ -1,10 +1,10 @@ import {useState, useEffect} from "react"; -import {LogBox, StyleSheet} from "react-native"; +import {LogBox, StyleSheet, Text} from "react-native"; import Screen from "../layout/Screen"; import ModuleList from "../entity/modules/ModuleList"; import API from "../API/API"; // 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"; @@ -25,7 +25,9 @@ const ModuleListScreen = ({navigation}) => { if (response.isSuccess) setModules(response.result); }; - useEffect( () => {loadModules(modulesEndpoint)}, [] ); + useEffect(() => { + loadModules(modulesEndpoint) + }, []); // Handlers ------------------- @@ -65,10 +67,13 @@ const ModuleListScreen = ({navigation}) => { return ( - + {/**/}