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;

src/components/screens/ModuleListScreen.js

@@ -2,9 +2,6 @@
 import {LogBox, 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 {Button, ButtonTray} from "../UI/Button";
 import Icons from "../UI/Icons";
 import useLoad from "../API/useLoad";
@@ -14,8 +11,7 @@ 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 ----------------------

src/components/screens/UserListScreen.js

@@ -1,42 +1,32 @@
-// import {useState, useEffect} from "react";
-import {LogBox, Text} from "react-native";
+import { LogBox, Text } from "react-native";
 import Screen from "../layout/Screen";
-import {Button, ButtonTray} from "../UI/Button";
+import UserList from "../entity/users/UserList";
+import { Button, ButtonTray } from "../UI/Button";
 import Icons from "../UI/Icons";
 import useLoad from "../API/useLoad";
-import {createDrawerNavigator} from "@react-navigation/drawer";
-import ModuleViewScreen from "./ModuleViewScreen";
-import UserViewScreen from "./UserViewScreen";
 
-
-const UserListScreen = ({navigation}) => {
-//   Initialisation -------------
-//    let modules = initialModules;
+const UserListScreen = ({ navigation }) => {
+    // Initialisation -------------
     LogBox.ignoreLogs(['Non-serializable values were found in the navigation state']);
 
-    const Drawer = createDrawerNavigator();
-
     const usersEndpoint = 'https://softwarehub.uk/unibase/api/users';
 
-//   State ----------------------
-
+    // State ----------------------
     const [users, setUsers, isLoading, loadUsers] = useLoad(usersEndpoint);
 
-//   Handlers -------------------
-
+    // Handlers -------------------
     const handleDelete = (user) =>
-        setUsers(users.filter((item) => item.UserID !== module.UserID));
-
+        setUsers(users.filter((item) => item.UserID !== user.UserID));
 
     const onDelete = (user) => {
         handleDelete(user);
         navigation.goBack();
-    }
+    };
 
     const handleAdd = (user) => setUsers([...users, user]);
 
     const handleModify = (updatedUser) => setUsers(
-        users.map((user) => (module.UserID === updatedUser.UserID) ? updatedUser : user),
+        users.map((user) => (user.UserID === updatedUser.UserID) ? updatedUser : user),
     );
 
     const onAdd = (user) => {
@@ -46,45 +36,31 @@ const UserListScreen = ({navigation}) => {
 
     const onModify = (user) => {
         handleModify(user);
-        navigation.replace('UserViewScreen', {user, onDelete, onModify});
+        navigation.replace('UserViewScreen', { user, onDelete, onModify });
     };
 
-    const goToViewScreen = (module) =>
-        navigation.navigate('UserViewScreen', {user, onDelete, onModify});
+    const goToViewScreen = (user) =>
+        navigation.navigate('UserViewScreen', { user, onDelete, onModify });
 
     const goToAddScreen = () =>
-        navigation.navigate('UserAddScreen', {onAdd});
+        navigation.navigate('UserAddScreen', { onAdd });
 
     const handleSwitchToModules = () => {
-        navigation.navigate("UserListScreen");
-
-
-//   View -----------------------
-
-        return (
-
-            <Drawer.Navigator id={"my-drawer"}>
-                <Drawer.Screen name='Module Crudler' component={ModuleViewScreen}/>
-                <Drawer.Screen name='User Crudler' component={UserViewScreen}/>
-
-
-                <Screen>
-                    {/*<RenderCount/>*/}
-                    <ButtonTray>
-                        <Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen}/>
-                    </ButtonTray>
-
-                    {isLoading && <Text>Loading Records...</Text>}
-
-                    <UserList users={users} onSelect={goToViewScreen}/>
-                </Screen>
-            </Drawer.Navigator>
-        );
+        navigation.navigate("ModuleListScreen");
     };
+
+    // View -----------------------
+    return (
+        <Screen drawer={<Drawer onSwitch={handleSwitchToModules} currentView="users" />}>
+            <ButtonTray>
+                <Button label='Add' icon={<Icons.Add />} onClick={goToAddScreen} />
+            </ButtonTray>
+
+            {isLoading && <Text>Loading Records...</Text>}
+
+            <UserList users={users} onSelect={goToViewScreen} />
+        </Screen>
+    );
 };
 
-// const styles = StyleSheet.create({});
-
 export default UserListScreen;
-
-