Refactoring a lot of the user items to use the USER data from the API, as it keeps a very similar structure to module.

src/components/entity/modules/ModuleView.js

@@ -23,49 +23,55 @@ const ModuleView = ({module, onDelete, onModify}) => {
 
     //   View -----------------------
 
-    return (<View style={styles.container}>
-        <FullWidthImage source={{uri: module.ModuleImageURL}} style={styles.image}/>
+    return (
+        <View style={styles.container}>
+            <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.ModuleLeaderID} <Text style={styles.dimText}>(Module Leader)</Text>
-            </Text>
-        </View>
+            <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.ModuleLeaderID} <Text style={styles.dimText}>(Module Leader)</Text>
+                </Text>
+            </View>
 
-        <ButtonTray>
-            <Button
-                icon={<Icons.Edit/>}
-                label={"Modify"}
-                onClick={onModify}
-            />
-            <Button
-                icon={<Icons.Delete/>}
-                label={"Delete"}
-                // styleButton={{backgroundColor: 'mistyrose'}}
-                // styleLabel={{color: 'red'}}
-                onClick={requestDelete}
-            />
-        </ButtonTray>
+            <ButtonTray>
+                <Button
+                    icon={<Icons.Edit/>}
+                    label={"Modify"}
+                    onClick={onModify}
+                />
+                <Button
+                    icon={<Icons.Delete/>}
+                    label={"Delete"}
+                    // styleButton={{backgroundColor: 'mistyrose'}}
+                    // styleLabel={{color: 'red'}}
+                    onClick={requestDelete}
+                />
+            </ButtonTray>
 
-    </View>);
+        </View>);
 };
 
 
 const styles = StyleSheet.create({
     container: {
         gap: 15,
-    }, infoTray: {
+    },
+    infoTray: {
         gap: 5,
-    }, image: {
+    },
+    image: {
         borderRadius: 3,
-    }, text: {
+    },
+    text: {
         fontSize: 16,
-    }, boldText: {
+    },
+    boldText: {
         fontSize: 16, fontWeight: 'bold',
-    }, dimText: {
+    },
+    dimText: {
         color: "grey",
     }
 

src/components/entity/users/UserForm.js

@@ -20,15 +20,14 @@ const defaultUser = {
 
 const UserForm = ({ originalUser, onSubmit, onCancel }) => {
     // Initialisation -------------
-
+    
     const yearsEndpoint = 'https://softwarehub.uk/unibase/api/years';
-    const usertypesEndpoint = 'https://softwarehub.uk/unibase/api/usertypes';
+    const userEndpoint = 'https://softwarehub.uk/unibase/api/user';
 
     const [years, , isYearsLoading] = useLoad(yearsEndpoint);
-    const [usertypes, , isUsertypesLoading] = useLoad(usertypesEndpoint);
+    const [users, , isUsersLoading] = useLoad(userEndpoint);
 
     // State ----------------------
-
     const [user, setUser] = useState(originalUser || {
         ...defaultUser,
         UserID: Math.floor(100000 + Math.random() * 900000),
@@ -37,7 +36,6 @@ const UserForm = ({ originalUser, onSubmit, onCancel }) => {
     });
 
     // Handlers -------------------
-
     const handleChange = (field, value) => {
         setUser({ ...user, [field]: value });
     };
@@ -45,15 +43,14 @@ const UserForm = ({ originalUser, onSubmit, onCancel }) => {
     const handleSubmit = () => onSubmit(user);
 
     // View -----------------------
-
     const submitLabel = originalUser ? 'Modify' : 'Add';
     const submitIcon = originalUser ? <Icons.Edit /> : <Icons.Add />;
 
     const levels = [
-        { value: '4', label: 'Level 4' },
-        { value: '5', label: 'Level 5' },
-        { value: '6', label: 'Level 6' },
-        { value: '7', label: 'Level 7' }
+        { value: 4, label: 'Level 4' },
+        { value: 5, label: 'Level 5' },
+        { value: 6, label: 'Level 6' },
+        { value: 7, label: 'Level 7' }
     ];
 
     return (
@@ -81,29 +78,27 @@ const UserForm = ({ originalUser, onSubmit, onCancel }) => {
                 onChange={(value) => handleChange('UserEmail', value)}
             />
 
+            <Form.InputSelect
+                label='User Level'
+                prompt='Select user level...'
+                options={levels}
+                value={user.UserLevel}
+                onChange={(value) => handleChange('UserLevel', value)}
+            />
+
             {isYearsLoading ? (
-                <Text>Loading Levels...</Text>
+                <Text>Loading Years...</Text>
             ) : (
                 <Form.InputSelect
-                    label='User Level'
-                    prompt='Select user level...'
-                    options={levels}
-                    value={user.UserLevel}
-                    onChange={(value) => handleChange('UserLevel', value)}
-                    isLoading={isYearsLoading}
+                    label='Year/Cohort'
+                    value={user.UserYearID}
+                    onChange={(value) => handleChange('UserYearID', value)}
+                    prompt='Select year/cohort...'
+                    options={years}
                 />
             )}
 
-            <Form.InputSelect
-                label='Year/Cohort'
-                value={user.UserYearID}
-                onChange={(value) => handleChange('UserYearID', value)}
-                prompt='Select year/cohort...'
-                options={years}
-                isLoading={isYearsLoading}
-            />
-
-            {isUsertypesLoading ? (
+            {isUsersLoading ? (
                 <Text>Loading User Types...</Text>
             ) : (
                 <Form.InputSelect
@@ -111,8 +106,7 @@ const UserForm = ({ originalUser, onSubmit, onCancel }) => {
                     value={user.UserUsertypeID}
                     onChange={(value) => handleChange('UserUsertypeID', value)}
                     prompt='Select user type...'
-                    options={usertypes}
-                    isLoading={isUsertypesLoading}
+                    options={users}
                 />
             )}
 

src/components/entity/users/UserItem.js

@@ -1,25 +1,24 @@
-import {StyleSheet, Text, View, Pressable} from "react-native";
+import { StyleSheet, Text, View, Pressable } from "react-native";
 
-const UserItem = ({user, onSelect}) => {
-    //   Initialisation -------------
-    //   State ----------------------
-    //   Handlers -------------------
-    //   View -----------------------
+const UserItem = ({ user, onSelect }) => {
+    // Initialisation -------------
+    // State ----------------------
+    // Handlers -------------------
+    // View -----------------------
 
     return (
-        <Pressable key={user.UserCode} onPress={() => onSelect(user)}>
-            <View style={styles.usersItem}>
+        <Pressable key={user.UserID} onPress={() => onSelect(user)}>
+            <View style={styles.userItem}>
                 <Text style={styles.text}>
-                    {user.UserCode} {user.UserName}
+                    `${user.UserFirstname} ${user.UserLastname}`
                 </Text>
             </View>
         </Pressable>
     );
 };
 
-
 const styles = StyleSheet.create({
-    usersItem: {
+    userItem: {
         paddingVertical: 15,
         borderBottomWidth: 1,
         borderBottomColor: "lightgray",
@@ -29,4 +28,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default UserItem;
+export default UserItem;

src/components/entity/users/UserList.js

@@ -2,19 +2,19 @@ import {StyleSheet, ScrollView} from "react-native";
 import UserItem from "./UserItem";
 import React from "react";
 
-const UserList = ({modules, onSelect}) => {
+const UserList = ({users, onSelect}) => {
     //   Initialisation -------------
     //   State ----------------------
     //   Handlers -------------------
     //   View -----------------------
 
     return (
-        <ScrollView style={styles.modulesContainer}>
-            {modules.map((module) => {
+        <ScrollView style={styles.usersContainer}>
+            {users.map((user) => {
                 return (
                     <UserItem
-                        module={module}
-                        key={module.ModuleCode}
+                        module={user}
+                        key={user.UserCode}
                         onSelect={onSelect}
                     />
                 )
@@ -26,7 +26,7 @@ const UserList = ({modules, onSelect}) => {
 
 
 const styles = StyleSheet.create({
-    modulesContainer: {},
+    usersContainer: {},
 });
 
 export default UserList;

src/components/entity/users/UserView.js

@@ -1,74 +1,59 @@
-import {Alert, StyleSheet, Text, View} from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import FullWidthImage from "react-native-fullwidth-image";
-import {Button, ButtonTray} from "../../UI/Button";
-import Icons from "../../UI/Icons.js"
+import Icons from "../../UI/Icons";
+import { ListItem } from "../../UI/List";
 
-const UserView = ({module, onDelete, onModify}) => {
-    //   Initialisation -------------
-    //   State ----------------------
-    //   Handlers -------------------
+const UserItem = ({ user, onSelect }) => {
+    // Initialisation -------------
 
-    const handleDelete = () => onDelete(module);
+    const fullName = `${user.UserFirstname} ${user.UserLastname}`;
 
-    const requestDelete = () => {
-        Alert.alert(
-            'Delete Warning',
-            `Are you sure you want to delete module ${module.ModuleCode} ${module.ModuleName}?`,
-            [
-                {text: 'cancel'},
-                {text: 'Delete', onPress: handleDelete}
-            ]
-        );
-    }
+    // State ----------------------
+    // Handlers -------------------
 
-    //   View -----------------------
+    const handleSelect = () => onSelect(user);
 
-    return (<View style={styles.container}>
-        <FullWidthImage source={{uri: module.ModuleImageURL}} style={styles.image}/>
+    // View -----------------------
 
-        <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.ModuleLeaderID} <Text style={styles.dimText}>(Module Leader)</Text>
-            </Text>
-        </View>
-
-        <ButtonTray>
-            <Button
-                icon={<Icons.Edit/>}
-                label={"Modify"}
-                onClick={onModify}
+    return (
+        <ListItem onPress={handleSelect}>
+            <FullWidthImage
+                source={{ uri: user.UserImageURL }}
+                style={styles.image}
             />
-            <Button
-                icon={<Icons.Delete/>}
-                label={"Delete"}
-                // styleButton={{backgroundColor: 'mistyrose'}}
-                // styleLabel={{color: 'red'}}
-                onClick={requestDelete}
-            />
-        </ButtonTray>
 
-    </View>);
+            <View style={styles.infoTray}>
+                <Text style={styles.boldText}>{fullName}</Text>
+                <Text style={styles.text}>{user.UserEmail}</Text>
+                <Text style={styles.text}>
+                    {user.UserUsertypeName || 'Unknown Type'}
+                    <Text style={styles.dimText}> (Level {user.UserLevel})</Text>
+                </Text>
+            </View>
+
+            <Icons.Forward />
+        </ListItem>
+    );
 };
 
-
 const styles = StyleSheet.create({
-    container: {
-        gap: 15,
-    }, infoTray: {
-        gap: 5,
-    }, image: {
+    image: {
         borderRadius: 3,
-    }, text: {
+    },
+    infoTray: {
+        gap: 5,
+        flex: 1,
+    },
+    text: {
         fontSize: 16,
-    }, boldText: {
-        fontSize: 16, fontWeight: 'bold',
-    }, dimText: {
+    },
+    boldText: {
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    dimText: {
         color: "grey",
-    }
-
+    },
 });
 
-export default UserView;
+export default UserItem;