Refactored user form to fetch data as appropriate. including user types and years for cohorts and populating the screen appropriately. Changed User add screen to use the user form.

src/components/entity/users/UserForm.js

@@ -9,33 +9,29 @@ const defaultUser = {
     UserFirstname: null,
     UserLastname: null,
     UserEmail: null,
-    UserRegistered: null,
-    UserLevel: null,
-    UserYearID: null,
     UserUsertypeID: null,
+    UserYearID: null,
     UserImageURL: null,
-    UserUsertypeName: null,
-    UserYearName: null,
 };
 
 const UserForm = ({ originalUser, onSubmit, onCancel }) => {
     // Initialisation -------------
-    
-    const yearsEndpoint = 'https://softwarehub.uk/unibase/api/years';
-    const userEndpoint = 'https://softwarehub.uk/unibase/api/user';
 
-    const [years, , isYearsLoading] = useLoad(yearsEndpoint);
+    defaultUser.UserID = Math.floor(100000 + Math.random() * 900000);
-    const [users, , isUsersLoading] = useLoad(userEndpoint);
+    defaultUser.UserImageURL = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
+
+    const usertypesEndpoint = 'https://softwarehub.uk/unibase/api/usertypes';
+    const yearsEndpoint = 'https://softwarehub.uk/unibase/api/years';
 
     // State ----------------------
-    const [user, setUser] = useState(originalUser || {
+
-        ...defaultUser,
+    const [user, setUser] = useState(originalUser || defaultUser);
-        UserID: Math.floor(100000 + Math.random() * 900000),
+
-        UserImageURL: 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg',
+    const [usertypes, , isUsertypesLoading] = useLoad(usertypesEndpoint);
-        UserRegistered: new Date().toISOString()
+    const [years, , isYearsLoading] = useLoad(yearsEndpoint);
-    });
 
     // Handlers -------------------
+
     const handleChange = (field, value) => {
         setUser({ ...user, [field]: value });
     };
@@ -43,15 +39,19 @@ const UserForm = ({ originalUser, onSubmit, onCancel }) => {
     const handleSubmit = () => onSubmit(user);
 
     // View -----------------------
+
     const submitLabel = originalUser ? 'Modify' : 'Add';
     const submitIcon = originalUser ? <Icons.Edit /> : <Icons.Add />;
 
-    const levels = [
+    const usertypeOptions = usertypes.map((usertype) => ({
-        { value: 4, label: 'Level 4' },
+        value: usertype.UsertypeID,
-        { value: 5, label: 'Level 5' },
+        label: usertype.UsertypeName
-        { value: 6, label: 'Level 6' },
+    }));
-        { value: 7, label: 'Level 7' }
+
-    ];
+    const yearOptions = years.map((year) => ({
+        value: year.YearID,
+        label: year.YearName
+    }));
 
     return (
         <Form
@@ -79,39 +79,25 @@ const UserForm = ({ originalUser, onSubmit, onCancel }) => {
             />
 
             <Form.InputSelect
-                label='User Level'
+                label='User Type'
-                prompt='Select user level...'
+                value={user.UserUsertypeID}
-                options={levels}
+                onChange={(value) => handleChange('UserUsertypeID', value)}
-                value={user.UserLevel}
+                prompt={'Select user type...'}
-                onChange={(value) => handleChange('UserLevel', value)}
+                options={usertypeOptions}
+                isLoading={isUsertypesLoading}
             />
 
-            {isYearsLoading ? (
+            <Form.InputSelect
-                <Text>Loading Years...</Text>
+                label='Cohort Year'
-            ) : (
+                value={user.UserYearID}
-                <Form.InputSelect
+                onChange={(value) => handleChange('UserYearID', value)}
-                    label='Year/Cohort'
+                prompt={'Select cohort year...'}
-                    value={user.UserYearID}
+                options={yearOptions}
-                    onChange={(value) => handleChange('UserYearID', value)}
+                isLoading={isYearsLoading}
-                    prompt='Select year/cohort...'
+            />
-                    options={years}
-                />
-            )}
-
-            {isUsersLoading ? (
-                <Text>Loading User Types...</Text>
-            ) : (
-                <Form.InputSelect
-                    label='User Type'
-                    value={user.UserUsertypeID}
-                    onChange={(value) => handleChange('UserUsertypeID', value)}
-                    prompt='Select user type...'
-                    options={users}
-                />
-            )}
 
             <Form.InputText
-                label='Profile Image URL'
+                label='User Image URL'
                 value={user.UserImageURL}
                 onChange={(value) => handleChange('UserImageURL', value)}
             />

src/components/screens/UserAddScreen.js

@@ -1,6 +1,6 @@
 import {StyleSheet, Text, TextInput, View} from "react-native";
 import Screen from "../layout/Screen";
-import ModuleForm from "../entity/modules/moduleForm";
+import UserForm from "../entity/users/UserForm";
 
 
 export const UserAddScreen = ({navigation, route}) => {
@@ -14,7 +14,7 @@ export const UserAddScreen = ({navigation, route}) => {
 //   View -----------------------
     return (
         <Screen style={styles.container}>
-            <ModuleForm onSubmit={onAdd} onCancel={handleCancel}/>
+            <UserForm onSubmit={onAdd} onCancel={handleCancel}/>
         </Screen>
     );
 };