App.tsx

@@ -1,5 +1,4 @@
 import "react-native-gesture-handler";
-import styles from "./src/styles";
 import { NavigationContainer } from "@react-navigation/native";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 import { Provider } from "react-redux";
@@ -22,13 +21,6 @@ import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { StatusBar } from "expo-status-bar";
 import UserInfoPage from "./src/routes/UserInfoPage/UserInfoPage";
 import SubjectsPage from "./src/routes/SubjectsPage/SubjectsPage";
-import ConversationPage from "./src/routes/ConversationPage/ConversationPage";
-import Loading from "./src/routes/Loading/Loading";
-import StartStudying from "./src/routes/StartStudying/StartStudying";
-import { ToastProvider } from "react-native-toast-notifications";
-import InfoIcon from "./src/icons/InfoIcon/InfoIcon";
-import CreateGroup from "./src/routes/CreateGroup/CreateGroup";
-import BackgroundComponent from "./src/components/BackgroundTask/BackgroundTask";
 
 const Drawer = createDrawerNavigator();
 
@@ -36,7 +28,7 @@ const linking = {
   prefixes: [Linking.makeUrl("/")],
   config: {
     screens: {
-      Home: "",
+      Home: "home",
       Login: "login",
       Register: "register",
       Onboarding: "onboarding",
@@ -63,36 +55,27 @@ export default function App() {
     }
   }, [initialRoute]);
   return (
-    <ToastProvider
+    <QueryClientProvider client={queryClient}>
-      icon={<InfoIcon size={32} />}
+      <Provider store={store}>
-      textStyle={{ ...styles.text_white_tiny_bold }}
+        <StatusBar style="light" />
-    >
-      <BackgroundComponent />
-      <QueryClientProvider client={queryClient}>
-        <Provider store={store}>
-          <StatusBar style="light" />
 
-          <NavigationContainer linking={linking} fallback={<Loading />}>
+        <NavigationContainer linking={linking}>
-            <Drawer.Navigator
+          <Drawer.Navigator
-              initialRouteName="Revalidation"
+            initialRouteName="Revalidation"
-              drawerContent={CustomDrawerContent}
+            drawerContent={CustomDrawerContent}
-              screenOptions={DrawerScreenSettings}
+            screenOptions={DrawerScreenSettings}
-            >
+          >
-              <Drawer.Screen name="Login" component={Login} />
+            <Drawer.Screen name="Home" component={Home} />
-              <Drawer.Screen name="Register" component={Register} />
+            <Drawer.Screen name="Login" component={Login} />
-              <Drawer.Screen name="Home" component={Home} />
+            <Drawer.Screen name="Register" component={Register} />
-              <Drawer.Screen name="Onboarding" component={Onboarding} />
+            <Drawer.Screen name="Onboarding" component={Onboarding} />
-              <Drawer.Screen name="Revalidation" component={Revalidation} />
+            <Drawer.Screen name="Revalidation" component={Revalidation} />
-              <Drawer.Screen name="Activation" component={Activation} />
+            <Drawer.Screen name="Activation" component={Activation} />
-              <Drawer.Screen name="User Info" component={UserInfoPage} />
+            <Drawer.Screen name="User Info" component={UserInfoPage} />
-              <Drawer.Screen name="Subjects" component={SubjectsPage} />
+            <Drawer.Screen name="Subjects" component={SubjectsPage} />
-              <Drawer.Screen name="Start Studying" component={StartStudying} />
+          </Drawer.Navigator>
-              <Drawer.Screen name="Create Group" component={CreateGroup} />
+        </NavigationContainer>
-              <Drawer.Screen name="Conversation" component={ConversationPage} />
+      </Provider>
-            </Drawer.Navigator>
+    </QueryClientProvider>
-          </NavigationContainer>
-        </Provider>
-      </QueryClientProvider>
-    </ToastProvider>
   );
 }

app.json

@@ -42,15 +42,9 @@
       [
         "expo-location",
         {
-          "locationAlwaysAndWhenInUsePermission": "Allow StudE to use your location."
+          "locationAlwaysAndWhenInUsePermission": "Allow Stud-E to use your location."
         }
-      ],
+      ]
-      [        
-      "expo-image-picker",
-      {
-        "photosPermission": "Allow StudE to take and send photos for sharing in-app"
-      }
-    ]
     ],
     "extra": {
       "eas": {

package.json

@@ -17,17 +17,13 @@
     "@tanstack/react-query": "^4.29.25",
     "axios": "^1.4.0",
     "expo": "~48.0.18",
-    "expo-file-system": "~15.2.2",
-    "expo-image-picker": "~14.1.1",
     "expo-intent-launcher": "~10.5.2",
     "expo-linking": "~4.0.1",
     "expo-location": "~15.1.1",
     "expo-status-bar": "~1.4.4",
-    "moment": "^2.29.4",
     "moti": "^0.25.3",
     "react": "18.2.0",
-    "react-native": "0.71.14",
+    "react-native": "0.71.8",
-    "react-native-bouncy-checkbox": "^3.0.7",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-image-picker": "^5.6.0",
@@ -38,18 +34,13 @@
     "react-native-screens": "~3.20.0",
     "react-native-select-dropdown": "^3.3.4",
     "react-native-svg": "13.4.0",
-    "react-native-toast-notifications": "^3.3.1",
     "react-query": "^3.39.3",
     "react-redux": "^8.1.1",
-    "redux": "^4.2.1",
+    "redux": "^4.2.1"
-    "expo-task-manager": "~11.1.1",
-    "expo-background-fetch": "~11.1.1",
-    "expo-notifications": "~0.18.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "~18.0.14",
-    "@types/react-native-fetch-blob": "^0.10.7",
     "typescript": "^4.9.4"
   },
   "private": true

src/components/Api/Api.tsx

@@ -1,31 +1,20 @@
 import axios from "axios";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import {
-  ActivationType,
+  ActivationParams,
-  LocationType,
+  LoginParams,
-  LoginType,
+  OnboardingParams,
-  MessagePostType,
+  PatchStudentData,
-  OnboardingType,
+  RegistrationParams,
-  PatchUserInfoType,
+  StudentData,
-  RegistrationType,
-  StudentStatusPatchType,
-  StudentStatusType,
-  StudyGroupCreateType,
-  StudyGroupType,
 } from "../../interfaces/Interfaces";
 
-export let backendURL = "https://stude.keannu1.duckdns.org";
+let debug = true;
-export let backendURLWebsocket = "ws://stude.keannu1.duckdns.org";
+export let backendURL = "";
-if (__DEV__) {
+if (debug) {
-  backendURL = "http://10.0.10.8:8083";
+  backendURL = "http://10.0.10.8:8000";
-  backendURLWebsocket = "ws://10.0.10.8:8083";
+} else {
-}
+  backendURL = "https://keannu125.pythonanywhere.com";
-
-// Switch this on if you wanna run production URLs while in development
-let use_production = true;
-if (__DEV__ && use_production) {
-  backendURL = "https://stude.keannu1.duckdns.org";
-  backendURLWebsocket = "ws://stude.keannu1.duckdns.org";
 }
 
 const instance = axios.create({
@@ -33,29 +22,8 @@ const instance = axios.create({
   timeout: 1000,
 });
 
-console.log("Using backend API:", backendURL);
-
-// 3rd Party APIs
-export const urlProvider =
-  "https://openstreetmap.keannu1.duckdns.org/tile/{z}/{x}/{y}.png?";
 // App APIs
 
-// Error Handling
-export function ParseError(error: any) {
-  if (error.response && error.response.data) {
-    return JSON.stringify(error.response.data)
-      .replaceAll(/[{}()"]/g, " ")
-      .replaceAll(/,/g, "\n")
-      .replaceAll("[", "")
-      .replaceAll("]", "")
-      .replaceAll(".", "")
-      .replaceAll(/"/g, "")
-      .replaceAll("non_field_errors", "")
-      .trim();
-  }
-  return "Unable to reach server";
-}
-
 // Token Handling
 export async function getAccessToken() {
   const accessToken = await AsyncStorage.getItem("access_token");
@@ -88,28 +56,40 @@ export async function GetConfig() {
 }
 
 // User APIs
-export function UserRegister(register: RegistrationType) {
+export function UserRegister(register: RegistrationParams) {
+  console.log(JSON.stringify(register));
   return instance
     .post("/api/v1/accounts/users/", register)
     .then(async (response) => {
       return [true, response.status];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
       return [false, error_message];
     });
 }
 
-export function UserLogin(user: LoginType) {
+export function UserLogin(user: LoginParams) {
   return instance
     .post("/api/v1/accounts/jwt/create/", user)
     .then(async (response) => {
+      /*console.log(
+        "Access Token:",
+        response.data.access,
+        "\nRefresh Token:",
+        response.data.refresh
+      );*/
       setAccessToken(response.data.access);
       setRefreshToken(response.data.refresh);
       return [true];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
+      // console.log(error_message);
       return [false, error_message];
     });
 }
@@ -123,14 +103,21 @@ export async function TokenRefresh() {
     })
     .then(async (response) => {
       setAccessToken(response.data.access);
+      /*console.log(
+        "Token refresh success! New Access Token",
+        response.data.access
+      );*/
       return true;
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
+      console.log("Token Refresh error:", error_message);
       return false;
     });
 }
-export async function GetUserInfo() {
+export async function UserInfo() {
   const config = await GetConfig();
   return instance
     .get("/api/v1/accounts/users/me/", config)
@@ -139,31 +126,37 @@ export async function GetUserInfo() {
       return [true, response.data];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
       return [false, error_message];
     });
 }
 
-export async function PatchUserInfo(info: PatchUserInfoType) {
+export async function PatchUserInfo(info: PatchStudentData) {
   const config = await GetConfig();
   return instance
     .patch("/api/v1/accounts/users/me/", info, config)
     .then((response) => {
+      console.log(JSON.stringify(response.data));
       return [true, response.data];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
+      // console.log(error_message);
       return [false, error_message];
     });
 }
 
-export function UserActivate(activation: ActivationType) {
+export function UserActivate(activation: ActivationParams) {
   return instance
     .post("/api/v1/accounts/users/activation/", activation)
-    .then(() => {
+    .then(async (response) => {
       return true;
     })
-    .catch(() => {
+    .catch((error) => {
       return false;
     });
 }
@@ -183,7 +176,9 @@ export async function GetCourses() {
       return [true, response.data];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
       return [false, error_message];
     });
 }
@@ -201,7 +196,9 @@ export async function GetSemesters() {
       return [true, response.data];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
       return [false, error_message];
     });
 }
@@ -215,187 +212,49 @@ export async function GetYearLevels() {
       return [true, response.data];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
       return [false, error_message];
     });
 }
 
-export async function GetSubjects() {
+export async function GetSubjects(
-  const config = await GetConfig();
+  course: string,
-  return instance
+  year_level: string,
-    .get("/api/v1/subjects/", config)
+  semester: string
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function GetStudentStatus() {
-  const config = await GetConfig();
-  return instance
-    .get("/api/v1/student_status/self/", config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function PatchStudentStatus(info: StudentStatusPatchType) {
-  const config = await GetConfig();
-  return instance
-    .patch("/api/v1/student_status/self/", info, config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function GetStudentStatusList() {
-  const config = await GetConfig();
-  return instance
-    .get("/api/v1/student_status/list/", config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function GetStudentStatusListNear() {
-  const config = await GetConfig();
-  return instance
-    .get("/api/v1/student_status/near/", config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-// To-do
-export async function GetStudentStatusListFilteredCurrentLocation(
-  location: LocationType
 ) {
   const config = await GetConfig();
   return instance
-    .post(
+    .get(
-      "/api/v1/student_status/near_current_location/",
+      "/api/v1/subjects/" + course + "/" + year_level + "/" + semester,
-      {
-        location: location,
-      },
       config
     )
     .then((response) => {
+      // console.log(JSON.stringify(response.data));
       return [true, response.data];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
       return [false, error_message];
     });
 }
 
-export async function GetStudyGroupListFiltered() {
+export async function OnboardingUpdateStudentInfo(info: OnboardingParams) {
   const config = await GetConfig();
   return instance
-    .get("/api/v1/study_groups/near/", config)
+    .patch("/api/v1/accounts/users/me/", info, config)
     .then((response) => {
+      console.log(JSON.stringify(response.data));
       return [true, response.data];
     })
     .catch((error) => {
-      let error_message = ParseError(error);
+      let error_message = "";
-      return [false, error_message];
+      if (error.response) error_message = error.response.data;
-    });
+      else error_message = "Unable to reach servers";
-}
+      console.log("Error updating onboarding info", error_message);
-
-export async function GetStudyGroupList() {
-  const config = await GetConfig();
-  return instance
-    .get("/api/v1/study_groups/", config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function CreateStudyGroup(info: StudyGroupCreateType) {
-  const config = await GetConfig();
-  // console.log("Creating study group:", info);
-  return instance
-    .post("/api/v1/study_groups/create/", info, config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function GetStudyGroup(name: string) {
-  const config = await GetConfig();
-  return instance
-    .get(`/api/v1/study_groups/${name}`, config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function GetStudyGroupMessages() {
-  const config = await GetConfig();
-  return instance
-    .get(`/api/v1/messages/`, config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function GetStudyGroupMemberAvatars() {
-  const config = await GetConfig();
-  return instance
-    .get(`/api/v1/study_groups/member_avatars`, config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      let error_message = ParseError(error);
-      return [false, error_message];
-    });
-}
-
-export async function PostMessage(info: MessagePostType) {
-  const config = await GetConfig();
-  return instance
-    .post(`/api/v1/messages/`, info, config)
-    .then((response) => {
-      return [true, response.data];
-    })
-    .catch((error) => {
-      console.log("Error:", error.response.data);
-      let error_message = ParseError(error);
       return [false, error_message];
     });
 }

src/components/BackgroundTask/BackgroundTask.tsx

@@ -1,148 +0,0 @@
-import React, { useEffect } from "react";
-import { View } from "react-native";
-import * as BackgroundFetch from "expo-background-fetch";
-import * as TaskManager from "expo-task-manager";
-import * as Notifications from "expo-notifications";
-import {
-  GetStudentStatus,
-  GetStudyGroupListFiltered,
-  GetStudyGroupMessages,
-} from "../Api/Api";
-import { StudyGroupType } from "../../interfaces/Interfaces";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-
-const FETCH_STUDENT_STATUS = "STUDENT_STATUS_TASK";
-const FETCH_GROUP_MESSAGES = "GROUP_MESSAGES_TASK";
-
-TaskManager.defineTask(FETCH_GROUP_MESSAGES, async () => {
-  const data = await GetStudyGroupMessages();
-  if (data[0] && data[1]) {
-    let messages_prev = await JSON.parse(
-      (await AsyncStorage.getItem("messages")) || "[]"
-    );
-    await AsyncStorage.setItem("messages", JSON.stringify(data[1]));
-    let message_curr = data[1];
-    let difference: Array<any> = messages_prev
-      .filter(
-        (x: any) =>
-          !message_curr.some(
-            (y: any) => JSON.stringify(y) === JSON.stringify(x)
-          )
-      )
-      .concat(
-        message_curr.filter(
-          (x: any) =>
-            !messages_prev.some(
-              (y: any) => JSON.stringify(y) === JSON.stringify(x)
-            )
-        )
-      );
-
-    if (difference.length > 0) {
-      console.log(`${difference.length} unread messages`);
-      Notifications.scheduleNotificationAsync({
-        content: {
-          title: `${difference.length} unread messages`,
-          body: `${difference[0].user}: ${difference[0].message_content}`,
-        },
-        trigger: {
-          seconds: 1,
-        },
-      });
-    }
-  } else {
-    console.log(data[1].response.data);
-  }
-
-  return BackgroundFetch.BackgroundFetchResult.NewData;
-});
-
-TaskManager.defineTask(FETCH_STUDENT_STATUS, async () => {
-  const data = await GetStudyGroupListFiltered();
-  const student_status_data = await GetStudentStatus();
-  if (data[0] && data[1]) {
-    console.log("Fetching nearby study groups...");
-    const entryWithLeastDistance = data[1].reduce(
-      (prev: StudyGroupType, curr: StudyGroupType) => {
-        return prev.distance < curr.distance ? prev : curr;
-      }
-    );
-    // Only display a notification if a student isn't in a study group yet
-    if (
-      student_status_data[1].study_group == null ||
-      student_status_data[1].study_group == ""
-    ) {
-      console.log(
-        "User has no study group yet. Found nearby groups, pushing notification"
-      );
-      Notifications.scheduleNotificationAsync({
-        content: {
-          title: "Students are studying nearby",
-          body: `Nearest study group is ${Math.round(
-            entryWithLeastDistance.distance * 1000
-          )}m away`,
-        },
-        trigger: {
-          seconds: 1,
-        },
-      });
-    }
-  } else {
-    console.log(data[1].response.data);
-  }
-
-  return BackgroundFetch.BackgroundFetchResult.NewData;
-});
-
-const BackgroundComponent = () => {
-  const notification_debug = false;
-  const [Task1_isRegistered, Task1_setIsRegistered] = React.useState(false);
-  const [Task2_isRegistered, Task2_setIsRegistered] = React.useState(false);
-  const [status, setStatus] = React.useState<any>();
-  const checkStatusAsync = async () => {
-    let status = await BackgroundFetch.getStatusAsync();
-    setStatus(status);
-    let Task1_isRegistered = await TaskManager.isTaskRegisteredAsync(
-      FETCH_STUDENT_STATUS
-    );
-    let Task2_isRegistered = await TaskManager.isTaskRegisteredAsync(
-      FETCH_GROUP_MESSAGES
-    );
-    Task1_setIsRegistered(Task1_isRegistered);
-    Task2_setIsRegistered(Task2_isRegistered);
-  };
-
-  useEffect(() => {
-    const registerTasks = async () => {
-      try {
-        await checkStatusAsync();
-        // Nearby students task
-        if (!Task1_isRegistered) {
-          await BackgroundFetch.registerTaskAsync(FETCH_STUDENT_STATUS, {
-            minimumInterval: notification_debug ? 5 : 60 * 3, // Check every 5 seconds in dev & every 3 minutes in production builds
-          });
-          console.log("Task for nearby students check registered");
-        } else {
-          console.log("Task for nearby students check already registered");
-        }
-        // Message Checking Task
-        if (!Task2_isRegistered) {
-          await BackgroundFetch.registerTaskAsync(FETCH_GROUP_MESSAGES, {
-            minimumInterval: notification_debug ? 5 : 30, // Check every 5 seconds in dev & every 30 seconds in production builds
-          });
-          console.log("Task for group messages check registered");
-        } else {
-          console.log("Task for group messages check already registered");
-        }
-      } catch (err) {
-        console.log("Task Register failed:", err);
-      }
-    };
-
-    registerTasks();
-  }, []);
-
-  return <View />;
-};
-
-export default BackgroundComponent;

src/components/Button/Button.tsx

@@ -17,10 +17,7 @@ export default function Button({ disabled = false, ...props }: props) {
     <Pressable
       disabled={disabled}
       onPress={props.onPress}
-      style={({ pressed }) => [
+      style={{ ...styles.button_template, ...{ backgroundColor: props.color } }}
-        styles.button_template,
-        { backgroundColor: pressed ? colors.primary_2 : props.color },
-      ]}
     >
       {props.children}
     </Pressable>

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -5,10 +5,7 @@ import { Text, View } from "react-native";
 import { colors } from "../../styles";
 import styles from "../../styles";
 
-import {
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
-  RootDrawerParamList,
-  StudentStatusPatchType,
-} from "../../interfaces/Interfaces";
 import AppIcon from "../../icons/AppIcon/AppIcon";
 import HomeIcon from "../../icons/HomeIcon/HomeIcon";
 import LoginIcon from "../../icons/LoginIcon/LoginIcon";
@@ -20,49 +17,11 @@ import LogoutIcon from "../../icons/LogoutIcon/LogoutIcon";
 import { logout } from "../../features/redux/slices/StatusSlice/StatusSlice";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import UserIcon from "../../icons/UserIcon/UserIcon";
-import SubjectIcon from "../../icons/SubjectIcon/SubjectIcon";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { PatchStudentStatus } from "../Api/Api";
-import { useToast } from "react-native-toast-notifications";
-import MessageIcon from "../../icons/MessageIcon/MessageIcon";
 
 export default function CustomDrawerContent(props: {}) {
-  const debug = false;
   const navigation = useNavigation<RootDrawerParamList>();
   const status = useSelector((state: RootState) => state.status);
   const dispatch = useDispatch();
-  const queryClient = useQueryClient();
-  const toast = useToast();
-  const stop_studying_logout = useMutation({
-    mutationFn: async (info: StudentStatusPatchType) => {
-      const data = await PatchStudentStatus(info);
-      if (data[0] != true) {
-        return Promise.reject(new Error());
-      }
-      console.log("DEBUG", data);
-      return data;
-    },
-    onSuccess: async () => {
-      toast.show("Logged out. Stopped studying", {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-      queryClient.clear();
-      dispatch(logout());
-      await AsyncStorage.clear();
-      navigation.navigate("Login");
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
   if (status.logged_in && status.onboarding) {
     return (
       <DrawerContentScrollView {...props}>
@@ -78,17 +37,9 @@ export default function CustomDrawerContent(props: {}) {
 
         <DrawerButton
           onPress={async () => {
-            // We don't clear student statuses when logging out on debug
+            dispatch(logout());
-            if (!debug) {
+            await AsyncStorage.clear();
-              queryClient.clear();
+            navigation.navigate("Login");
-              dispatch(logout());
-              await AsyncStorage.clear();
-              navigation.navigate("Login");
-            } else {
-              stop_studying_logout.mutate({
-                active: false,
-              });
-            }
           }}
         >
           <LogoutIcon size={32} />
@@ -129,30 +80,14 @@ export default function CustomDrawerContent(props: {}) {
             navigation.navigate("Subjects");
           }}
         >
-          <SubjectIcon size={32} />
+          <UserIcon size={32} />
           <Text style={styles.text_white_medium}>Subjects</Text>
         </DrawerButton>
-        <DrawerButton
-          onPress={() => {
-            navigation.navigate("Conversation");
-          }}
-        >
-          <MessageIcon size={32} />
-          <Text style={styles.text_white_medium}>Conversation</Text>
-        </DrawerButton>
         <DrawerButton
           onPress={async () => {
-            // We don't clear student statuses when logging out on debug
+            dispatch(logout());
-            if (debug) {
+            await AsyncStorage.clear();
-              queryClient.clear();
+            navigation.navigate("Login");
-              dispatch(logout());
-              await AsyncStorage.clear();
-              navigation.navigate("Login");
-            } else {
-              stop_studying_logout.mutate({
-                active: false,
-              });
-            }
           }}
         >
           <LogoutIcon size={32} />
@@ -188,6 +123,7 @@ export default function CustomDrawerContent(props: {}) {
           <SignupIcon size={32} />
           <Text style={styles.text_white_medium}>Register</Text>
         </DrawerButton>
+
         {/*
         Debug buttons for accessing revalidation and activation page
         <DrawerButton

src/components/GetDistance/GetDistanceFromUSTP.tsx

@@ -1,20 +0,0 @@
-import { LocationType } from "../../interfaces/Interfaces";
-import GetDistance from "./GetDistance";
-
-export default function GetDistanceFromUSTP(location: LocationType) {
-  const ustpCoords = {
-    latitude: 8.4857,
-    longitude: 124.6565,
-    latitudeDelta: 0.000235,
-    longitudeDelta: 0.000067,
-  };
-
-  let dist = GetDistance(
-    location.latitude,
-    location.longitude,
-    ustpCoords.latitude,
-    ustpCoords.longitude
-  );
-  dist = Math.round(dist * 100) / 100;
-  return dist;
-}

src/components/LoadingFeedback/LoadingFeedback.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-import styles from "../../styles";
-import { View, Text, ActivityIndicator } from "react-native";
-import { colors } from "../../styles";
-import AnimatedContainer from "../AnimatedContainer/AnimatedContainer";
-
-export default function LoadingFeedback() {
-  return (
-    <View style={styles.background}>
-      <AnimatedContainer>
-        <View style={{ paddingVertical: 8 }} />
-        <ActivityIndicator size={128} color={colors.secondary_1} />
-        <Text style={styles.text_white_medium}>Loading...</Text>
-      </AnimatedContainer>
-    </View>
-  );
-}

src/components/MapRenderer/MapRendererFar.tsx

@@ -1,79 +0,0 @@
-import * as React from "react";
-import { View, Text } from "react-native";
-import MapView, { UrlTile, Callout, Marker } from "react-native-maps";
-import styles, { Viewport, colors } from "../../styles";
-import { urlProvider } from "../Api/Api";
-import { LocationType, RawLocationType } from "../../interfaces/Interfaces";
-import GetDistance from "../../components/GetDistance/GetDistance";
-
-type props = {
-  location: LocationType;
-  dist: any;
-};
-
-export default function MapRendererFar(props: props) {
-  return (
-    <>
-      <Text style={styles.text_white_medium}>
-        You are too far from USTP {"\n"}
-        Get closer to use Stud-E
-      </Text>
-      <MapView
-        style={{
-          height: Viewport.height * 0.5,
-          width: Viewport.width * 0.8,
-          alignSelf: "center",
-        }}
-        customMapStyle={[
-          {
-            featureType: "poi",
-            stylers: [
-              {
-                visibility: "off",
-              },
-            ],
-          },
-        ]}
-        mapType="none"
-        scrollEnabled={false}
-        zoomEnabled={false}
-        toolbarEnabled={false}
-        rotateEnabled={false}
-        minZoomLevel={18}
-        initialRegion={{
-          latitude: props.location.latitude,
-          longitude: props.location.longitude,
-          latitudeDelta: 0.0922,
-          longitudeDelta: 0.0421,
-        }}
-        loadingBackgroundColor={colors.secondary_2}
-      >
-        <UrlTile
-          urlTemplate={urlProvider}
-          shouldReplaceMapContent={true}
-          maximumZ={19}
-          flipY={false}
-          zIndex={1}
-        />
-        <Marker
-          coordinate={{
-            latitude: props.location.latitude,
-            longitude: props.location.longitude,
-          }}
-          pinColor={colors.primary_1}
-        >
-          <Callout>
-            <Text style={styles.text_black_tiny}>
-              You are here {"\n"}
-              X: {Math.round(props.location.longitude) + "\n"}
-              Z: {Math.round(props.location.latitude)}
-            </Text>
-          </Callout>
-        </Marker>
-      </MapView>
-      <Text style={styles.text_white_small}>
-        {props.dist}km away from USTP {"\n"}
-      </Text>
-    </>
-  );
-}

src/components/ParseError/ParseError.tsx

@@ -0,0 +1,24 @@
+export default function ParseError(text: string) {
+  if (text) {
+    return text
+      .replaceAll(/[{}()"]/g, " ")
+      .replaceAll(/,/g, "\n")
+      .replaceAll("[", "")
+      .replaceAll("]", "")
+      .replaceAll(".", "");
+  }
+  return "";
+}
+
+export function ParseLoginError(text: string) {
+  if (text) {
+    return text
+      .replaceAll(/[{}()"]/g, " ")
+      .replaceAll(/,/g, "\n")
+      .replaceAll("[", "")
+      .replaceAll("]", "")
+      .replaceAll(".", "")
+      .replaceAll("non_field_errors", "");
+  }
+  return "";
+}

src/icons/CaretLeftIcon/CaretLeftIcon.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-import { IconProps } from "../../interfaces/Interfaces";
-import { Svg, Path } from "react-native-svg";
-import { colors } from "../../styles";
-
-export default function CaretRightIcon(props: IconProps) {
-  return (
-    <>
-      <Svg
-        height={props.size + "px"}
-        width={props.size + "px"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={colors.icon_color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
-        <Path
-          d="M13.883 5.007l.058 -.005h.118l.058 .005l.06 .009l.052 .01l.108 .032l.067 .027l.132 .07l.09 .065l.081 .073l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059v12c0 .852 -.986 1.297 -1.623 .783l-.084 -.076l-6 -6a1 1 0 0 1 -.083 -1.32l.083 -.094l6 -6l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01z"
-          stroke-width="0"
-          fill={colors.icon_color}
-        ></Path>
-      </Svg>
-    </>
-  );
-}

src/icons/CaretRightIcon/CaretRightIcon.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-import { IconProps } from "../../interfaces/Interfaces";
-import { Svg, Path } from "react-native-svg";
-import { colors } from "../../styles";
-
-export default function CaretRightIcon(props: IconProps) {
-  return (
-    <>
-      <Svg
-        height={props.size + "px"}
-        width={props.size + "px"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={colors.icon_color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
-        <Path
-          d="M13.883 5.007l.058 -.005h.118l.058 .005l.06 .009l.052 .01l.108 .032l.067 .027l.132 .07l.09 .065l.081 .073l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059v12c0 .852 -.986 1.297 -1.623 .783l-.084 -.076l-6 -6a1 1 0 0 1 -.083 -1.32l.083 -.094l6 -6l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01z"
-          stroke-width="0"
-          fill={colors.icon_color}
-        ></Path>
-      </Svg>
-    </>
-  );
-}

src/icons/CaretUpIcon/CaretUpIcon.tsx

@@ -1,24 +0,0 @@
-import * as React from "react";
-import { IconProps } from "../../interfaces/Interfaces";
-import { Svg, Path } from "react-native-svg";
-import { colors } from "../../styles";
-
-export default function CaretUpIcon(props: IconProps) {
-  return (
-    <>
-      <Svg
-        height={props.size + "px"}
-        width={props.size + "px"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={colors.icon_color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
-        <Path d="M18 14l-6 -6l-6 6h12"></Path>
-      </Svg>
-    </>
-  );
-}

src/icons/DropdownIcon/DropdownIcon.tsx

@@ -3,7 +3,7 @@ import { IconProps } from "../../interfaces/Interfaces";
 import { Svg, Path } from "react-native-svg";
 import { colors } from "../../styles";
 
-export default function CaretDownIcon(props: IconProps) {
+export default function DropdownIcon(props: IconProps) {
   return (
     <>
       <Svg

src/icons/InfoIcon/InfoIcon.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { IconProps } from "../../interfaces/Interfaces";
-
-import { Svg, Path } from "react-native-svg";
-import { colors } from "../../styles";
-
-export default function InfoIcon(props: IconProps) {
-  return (
-    <>
-      <Svg
-        width={props.size}
-        height={props.size}
-        viewBox="0 0 24 24"
-        strokeWidth="2"
-        stroke={colors.icon_color}
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
-        <Path d="M12 9h.01"></Path>
-        <Path d="M11 12h1v4h1"></Path>
-        <Path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></Path>
-      </Svg>
-    </>
-  );
-}

src/icons/MessageIcon/MessageIcon.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import { IconProps } from "../../interfaces/Interfaces";
-
-import { Svg, Path } from "react-native-svg";
-import { colors } from "../../styles";
-
-export default function MessageIcon(props: IconProps) {
-  return (
-    <>
-      <Svg
-        width={props.size}
-        height={props.size}
-        viewBox="0 0 24 24"
-        strokeWidth="2"
-        stroke={colors.icon_color}
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
-        <Path d="M8 9h8"></Path>
-        <Path d="M8 13h6"></Path>
-        <Path d="M12.5 20.5l-.5 .5l-3 -3h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4"></Path>
-        <Path d="M21.121 20.121a3 3 0 1 0 -4.242 0c.418 .419 1.125 1.045 2.121 1.879c1.051 -.89 1.759 -1.516 2.121 -1.879z"></Path>
-        <Path d="M19 18v.01"></Path>
-      </Svg>
-    </>
-  );
-}

src/icons/RefreshIcon/RefreshIcon.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { IconProps } from "../../interfaces/Interfaces";
-
-import { Svg, Path } from "react-native-svg";
-import { colors } from "../../styles";
-
-export default function RefreshIcon(props: IconProps) {
-  return (
-    <>
-      <Svg
-        width={props.size}
-        height={props.size}
-        viewBox="0 0 24 24"
-        strokeWidth="2"
-        stroke={colors.icon_color}
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
-        <Path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></Path>
-        <Path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></Path>
-      </Svg>
-    </>
-  );
-}

src/icons/SubjectIcon/SubjectIcon.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { IconProps } from "../../interfaces/Interfaces";
-
-import { Svg, Path } from "react-native-svg";
-import { colors } from "../../styles";
-
-export default function SubjectIcon(props: IconProps) {
-  return (
-    <>
-      <Svg
-        width={props.size}
-        height={props.size}
-        viewBox="0 0 24 24"
-        strokeWidth="2"
-        stroke={colors.icon_color}
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
-        <Path d="M19 4v16h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12z"></Path>
-        <Path d="M19 16h-12a2 2 0 0 0 -2 2"></Path>
-        <Path d="M9 8h6"></Path>
-      </Svg>
-    </>
-  );
-}

src/interfaces/Interfaces.tsx

@@ -1,7 +1,3 @@
-import * as Location from "expo-location";
-import { GetStudentStatus } from "../components/Api/Api";
-import { Float } from "react-native/Libraries/Types/CodegenTypes";
-
 export interface IconProps {
   size: number;
 }
@@ -13,7 +9,6 @@ export interface ResponsiveIconProps {
 
 export interface RootDrawerParamList {
   navigate: any;
-  replace: any;
 }
 
 // Redux Interfaces
@@ -33,7 +28,7 @@ export interface LoggedInUserState {
 
 // API Interfaces
 
-export interface RegistrationType {
+export interface RegistrationParams {
   email: string;
   username: string;
   password: string;
@@ -42,12 +37,12 @@ export interface RegistrationType {
   student_id_number: string;
 }
 
-export interface LoginType {
+export interface LoginParams {
   username: string;
   password: string;
 }
 
-export interface ActivationType {
+export interface ActivationParams {
   uid: string;
   token: string;
 }
@@ -58,183 +53,80 @@ export interface OptionType {
 }
 
 // Semester
-export interface SemesterType {
+export interface Semester {
   id: string;
   name: string;
   shortname: string;
 }
 
-export type SemestersType = Array<SemesterType>;
+export type Semesters = Array<Semester>;
 
-export type SemesterReturnType = [boolean, SemestersType];
+export type SemesterParams = [boolean, Semesters];
 
 // Year Level
-export interface YearLevelType {
+export interface YearLevel {
   id: string;
   name: string;
   shortname: string;
 }
 
-export type YearLevelsType = Array<YearLevelType>;
+export type YearLevels = Array<YearLevel>;
 
-export type YearLevelReturnType = [boolean, YearLevelsType];
+export type YearLevelParams = [boolean, YearLevels];
 
 // Course
-export interface CourseType {
+export interface Course {
   id: string;
   name: string;
   shortname: string;
 }
-export type CoursesType = Array<CourseType>;
+export type Courses = Array<Course>;
-export type CourseReturnType = [boolean, CoursesType];
+export type CourseParams = [boolean, Courses];
 
 // Subject
-export interface SubjectType {
+export interface Subject {
-  id: number;
   name: string;
   code: string;
-  course: string;
+  // courses: any[]; // To-do
-  year_level: string;
+  // year_levels: any[]; // To-do
-  semester: string;
+  // semesters: any[]; // To-do
 }
 
-export type SubjectsType = Array<SubjectType>;
+export type Subjects = Array<Subject>;
-export type SubjectsReturnType = [boolean, SubjectsType];
+export type SubjectParams = [boolean, Subjects];
 
-export type AvatarType = {
-  uri: string;
-  type: string;
-  name: string;
-};
 // For dropdown menu
 
-export interface OnboardingType {
+export interface OnboardingParams {
   year_level: string;
   course: string;
   semester: string;
 }
 
-export interface PatchUserInfoType {
+export interface PatchStudentData {
-  course?: string;
+  course?: string | null;
-  first_name?: string;
+  first_name?: string | null;
-  last_name?: string;
+  last_name?: string | null;
-  semester?: string;
+  semester?: string | null;
-  subjects?: string[];
+  subjects?: any[] | null; // To-do, replace 'any' with your actual type
-  year_level?: string;
+  year_level?: string | null;
-  irregular?: boolean;
-  avatar?: string;
 }
 
-export interface LocationType {
+export interface StudentData {
-  latitude: Float;
-  longitude: Float;
-}
-
-export interface StudentStatusType {
-  subject: string;
-  location: LocationType;
-  landmark: string | null;
-  active: boolean;
-  study_group: string;
-}
-
-export interface StudentStatusPatchType {
-  subject?: string;
-  location?: LocationType;
-  landmark?: string | null;
-  active?: boolean;
-  study_group?: string;
-}
-
-export interface StudentStatusFilterType {
-  active: boolean;
-  distance: number;
-  landmark: string | null;
-  location: LocationType;
-  study_group?: string;
-  subject: string;
-  user: string;
-  weight?: number;
-}
-
-export interface StudentStatusFilterTypeFlattened {
-  active: boolean;
-  distance: number;
-  landmark: string | null;
-  latitude: Float;
-  longitude: Float;
-  study_group?: string;
-  subject: string;
-  user: string;
-  weight?: number;
-}
-
-export interface StudyGroupType {
-  name: string;
-  students: string[];
-  distance: number;
-  landmark: string | null;
-  location: LocationType;
-  subject: string;
-  radius: number;
-}
-
-export interface StudyGroupCreateType {
-  name: string;
-  location: LocationType;
-  subject: string;
-}
-
-export interface MessageType {
-  id: number;
-  user: string;
-  study_group: string;
-  message_content: string;
-  timestamp: string;
-}
-
-export interface MessagePostType {
-  message_content: string;
-}
-
-export interface GroupMessageAvatarType {
-  username: string;
-  avatar: string;
-}
-
-export type GroupMessageAvatarListType = GroupMessageAvatarType[];
-export type GroupMessageAvatarReturnType = [boolean, GroupMessageAvatarType[]];
-export type MessageReturnType = [boolean, MessageType[]];
-export type StudyGroupDetailReturnType = [boolean, StudyGroupType];
-export type StudyGroupReturnType = [boolean, StudyGroupType[]];
-export type StudentStatusReturnType = [boolean, StudentStatusType];
-export type StudentStatusListType = Array<StudentStatusFilterType>;
-export type StudentStatusListReturnType = [boolean, StudentStatusListType];
-export type RawLocationType = Location.LocationObject;
-
-export interface UserInfoType {
   first_name: string;
   last_name: string;
   email: string;
   avatar: string;
   student_id_number: string;
-  irregular: boolean;
+  is_banned: boolean;
   semester: string;
   semester_shortname: string;
   course: string;
   course_shortname: string;
   year_level: string;
   yearlevel_shortname: string;
-  subjects: string[];
+  subjects: any[]; // To-do
   username: string;
 }
 
-export type UserInfoReturnType = [boolean, UserInfoType];
+export type UserInfoParams = [boolean, StudentData];
-
-export type subjectUserMapType = {
-  subject: string;
-  users: string[];
-  latitude: Float;
-  longitude: Float;
-  radius: Float;
-};

src/routes/Activation/Activation.tsx

@@ -6,7 +6,6 @@ import { useNavigation, useRoute } from "@react-navigation/native";
 import { useEffect, useState } from "react";
 import { UserActivate } from "../../components/Api/Api";
 import { RootDrawerParamList } from "../../interfaces/Interfaces";
-import { useToast } from "react-native-toast-notifications";
 
 interface ActivationRouteParams {
   uid?: string;
@@ -17,7 +16,9 @@ export default function Activation() {
   const route = useRoute();
   const { uid, token } = (route.params as ActivationRouteParams) || "";
   const navigation = useNavigation<RootDrawerParamList>();
-  const toast = useToast();
+  const [state, setState] = useState(
+    "Activating with UID " + uid + " and Token " + token
+  );
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -27,22 +28,16 @@ export default function Activation() {
         token: String(token),
       });
       if (result) {
-        toast.show("Activation successful", {
+        setTimeout(() => {
-          type: "success",
+          setState("Activation successful!");
-          placement: "top",
+        }, 1000);
-          duration: 4000,
-          animationType: "slide-in",
-        });
         setTimeout(() => {
           navigation.navigate("Login");
         }, 2000);
       } else {
-        toast.show("Activation unsuccessful. Please contact support", {
+        setTimeout(() => {
-          type: "warning",
+          setState("Activation unsuccessful\nPlease contact support");
-          placement: "top",
+        }, 1000);
-          duration: 4000,
-          animationType: "slide-in",
-        });
       }
       setLoading(false);
     }
@@ -68,9 +63,8 @@ export default function Activation() {
           size={96}
           color={colors.secondary_1}
         />
-        <Text style={styles.text_white_medium}>
+        <Text style={styles.text_white_medium}>{state}</Text>
-          {"Activating with UID: " + uid + "\nToken: " + token}
+        <Text style={styles.text_white_tiny}>{uid + "\n" + token}</Text>
-        </Text>
       </AnimatedContainer>
     </View>
   );

src/routes/ConversationPage/ConversationPage.tsx

@@ -1,365 +0,0 @@
-import * as React from "react";
-import { ActivityIndicator, Image, Pressable } from "react-native";
-import styles from "../../styles";
-import {
-  View,
-  Text,
-  TextInput,
-  ScrollView,
-  NativeSyntheticEvent,
-  TextInputChangeEventData,
-} from "react-native";
-import { colors } from "../../styles";
-import { useRef, useState } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import {
-  GetStudentStatus,
-  GetStudyGroup,
-  GetStudyGroupMemberAvatars,
-  GetStudyGroupMessages,
-  PostMessage,
-} from "../../components/Api/Api";
-import {
-  StudentStatusType,
-  StudentStatusReturnType,
-  StudyGroupType,
-  StudyGroupDetailReturnType,
-  MessageType,
-  MessageReturnType,
-  MessagePostType,
-  GroupMessageAvatarType,
-  GroupMessageAvatarReturnType,
-} from "../../interfaces/Interfaces";
-import { useToast } from "react-native-toast-notifications";
-import { useQueryClient } from "@tanstack/react-query";
-import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useSelector } from "react-redux";
-import { RootState } from "../../features/redux/Store/Store";
-import CaretRightIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
-
-export default function ConversationPage() {
-  const toast = useToast();
-  const user = useSelector((state: RootState) => state.user);
-  // Student Status
-  const [student_status, setStudentStatus] = useState<StudentStatusType>();
-  const StudentStatusQuery = useQuery({
-    queryKey: ["user_status"],
-    queryFn: async () => {
-      const data = await GetStudentStatus();
-      if (data[0] == false) {
-        return Promise.reject(new Error(JSON.stringify(data[1])));
-      }
-      return data;
-    },
-    onSuccess: (data: StudentStatusReturnType) => {
-      setStudentStatus(data[1]);
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
-  // Study Group Detail
-  const [studygroup, setStudyGroup] = useState<StudyGroupType>();
-  const StudyGroupQuery = useQuery({
-    enabled:
-      student_status?.study_group != "" && student_status?.study_group != null,
-    queryKey: ["study_group"],
-    refetchInterval: 10000,
-    queryFn: async () => {
-      const data = await GetStudyGroup(student_status?.study_group || "");
-      if (data[0] == false) {
-        return Promise.reject(new Error(JSON.stringify(data[1])));
-      }
-      return data;
-    },
-    onSuccess: (data: StudyGroupDetailReturnType) => {
-      if (data[1]) {
-        setStudyGroup(data[1]);
-      }
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
-  // Study Group Messages
-  const [messages, setMessages] = useState<MessageType[]>([]);
-  const MessageQuery = useQuery({
-    refetchInterval: 3000,
-    enabled:
-      !StudentStatusQuery.isLoading &&
-      (student_status?.study_group != null ||
-        student_status?.study_group != ""),
-    queryKey: ["study_group_messages"],
-    queryFn: async () => {
-      const data = await GetStudyGroupMessages();
-      if (data[0] == false) {
-        return Promise.reject(new Error(JSON.stringify(data[1])));
-      }
-      return data;
-    },
-    onSuccess: async (data: MessageReturnType) => {
-      if (data[1]) {
-        await AsyncStorage.setItem("messages", JSON.stringify(data[1]));
-        setMessages(data[1]);
-      }
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
-  // Avatar List
-  const [users, setUsers] = useState<GroupMessageAvatarType[]>([]);
-  const AvatarsQuery = useQuery({
-    refetchInterval: 10000,
-    enabled:
-      student_status?.study_group != null ||
-      (student_status?.study_group != "" &&
-        studygroup != null &&
-        studygroup.students != null),
-    queryKey: ["study_group_avatars"],
-    queryFn: async () => {
-      const data = await GetStudyGroupMemberAvatars();
-      if (data[0] == false) {
-        return Promise.reject(new Error(JSON.stringify(data[1])));
-      }
-      return data;
-    },
-    onSuccess: (data: GroupMessageAvatarReturnType) => {
-      if (data[1]) {
-        setUsers(data[1]);
-      }
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-  const scrollViewRef = useRef<ScrollView>(null);
-  const queryClient = useQueryClient();
-  const [message, setMessage] = useState("");
-  const send_message = useMutation({
-    mutationFn: async (info: MessagePostType) => {
-      const data = await PostMessage(info);
-      if (data[0] != true) {
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["study_group_messages"] });
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
-  if (
-    !StudyGroupQuery.isLoading &&
-    !AvatarsQuery.isLoading &&
-    !MessageQuery.isLoading &&
-    student_status &&
-    studygroup &&
-    studygroup.students
-  ) {
-    return (
-      <View style={styles.background}>
-        <AnimatedContainer>
-          <View
-            style={{
-              padding: 15,
-              alignSelf: "flex-start",
-            }}
-          >
-            <View style={styles.flex_row}>
-              <Text style={{ ...styles.text_white_medium }}>
-                {`Group: ${studygroup?.name ? studygroup.name : "Loading..."}`}
-              </Text>
-            </View>
-            {studygroup.landmark ? (
-              <Text style={{...styles.text_white_tiny_bold,...{textAlign:'left'}}}>
-              {studygroup.landmark}
-              </Text>
-            ) : (
-              <></>
-            )}
-
-            <View style={{ ...styles.flex_row }}>
-              <Text
-                style={{
-                  ...styles.text_white_small,
-                  textAlign: "left",
-                  paddingRight: 4,
-                }}
-              >
-                {!StudyGroupQuery.isFetching
-                  ? studygroup.students.length + " studying"
-                  : "Loading"}
-              </Text>
-              {users.map((user: GroupMessageAvatarType, index: number) => {
-                if (index > 6) {
-                  return <React.Fragment key={index} />;
-                }
-                return (
-                  <React.Fragment key={index}>
-                    {user.avatar != null && user.avatar != "" ? (
-                      <Image
-                        source={{ uri: user.avatar }}
-                        style={styles.profile_mini}
-                      />
-                    ) : (
-                      <Image
-                        source={require("../../img/user_profile_placeholder.png")}
-                        style={styles.profile_mini}
-                      />
-                    )}
-                  </React.Fragment>
-                );
-              })}
-            </View>
-          </View>
-          <ScrollView
-            style={{ width: 320 }}
-            onContentSizeChange={() => scrollViewRef.current?.scrollToEnd()}
-            ref={scrollViewRef}
-          >
-            {messages.length > 0 ? (
-              messages.map((message: MessageType, index: number) => {
-                let avatar = "";
-                users.filter((user: GroupMessageAvatarType) => {
-                  if (user.username == message.user) {
-                    avatar = user.avatar;
-                  }
-                });
-                return (
-                  <View
-                    key={message.id}
-                    style={{
-                      ...styles.message_contentContainer,
-                      alignItems:
-                        message.user === user.user.username
-                          ? "flex-end"
-                          : "flex-start",
-                    }}
-                  >
-                    <View style={styles.flex_row}>
-                      {avatar != null && avatar != "" ? (
-                        <Image
-                          source={{ uri: avatar }}
-                          style={styles.profile_mini}
-                        />
-                      ) : (
-                        <Image
-                          source={require("../../img/user_profile_placeholder.png")}
-                          style={styles.profile_mini}
-                        />
-                      )}
-
-                      <Text style={styles.text_white_small}>
-                        {message.user}
-                      </Text>
-                      <Text
-                        style={{
-                          ...styles.text_white_tiny,
-                          ...{ marginLeft: 4, alignContent: "center" },
-                        }}
-                      >
-                        {message.timestamp}
-                      </Text>
-                    </View>
-
-                    <Text style={styles.text_white_small}>
-                      {message.message_content}
-                    </Text>
-                  </View>
-                );
-              })
-            ) : (
-              <Text style={styles.text_white_small}>There are no messages</Text>
-            )}
-          </ScrollView>
-          <View style={styles.flex_row}>
-            <TextInput
-              style={styles.chatbox}
-              placeholder="Send a message..."
-              placeholderTextColor="white"
-              value={message}
-              onChange={(
-                e: NativeSyntheticEvent<TextInputChangeEventData>
-              ): void => {
-                setMessage(e.nativeEvent.text);
-              }}
-              onSubmitEditing={() => {
-                send_message.mutate({
-                  message_content: message,
-                });
-                setMessage("");
-              }}
-            />
-            <Pressable
-              style={{
-                backgroundColor: colors.secondary_3,
-                borderRadius: 16,
-                alignSelf: "center",
-                marginLeft: 16,
-              }}
-              onPress={() => {
-                send_message.mutate({
-                  message_content: message,
-                });
-                setMessage("");
-              }}
-            >
-              <CaretRightIcon size={48} />
-            </Pressable>
-          </View>
-        </AnimatedContainer>
-      </View>
-    );
-  } else if (!student_status?.study_group) {
-    return (
-      <View style={styles.background}>
-        <AnimatedContainer>
-          <Text style={styles.text_white_medium}>
-            You are not in a study group. Join one to start a conversation!
-          </Text>
-        </AnimatedContainer>
-      </View>
-    );
-  }
-  return (
-    <View style={styles.background}>
-      <AnimatedContainer>
-        <ActivityIndicator size={96} color={colors.secondary_1} />
-        <Text style={styles.text_white_medium}>Loading...</Text>
-      </AnimatedContainer>
-    </View>
-  );
-}

src/routes/CreateGroup/CreateGroup.tsx

@@ -1,192 +0,0 @@
-import * as React from "react";
-import styles, { Viewport } from "../../styles";
-import {
-  View,
-  Text,
-  TextInput,
-  NativeSyntheticEvent,
-  TextInputChangeEventData,
-  Pressable,
-} from "react-native";
-import { useState } from "react";
-import {
-  RootDrawerParamList,
-  StudentStatusPatchType,
-  StudyGroupCreateType,
-} from "../../interfaces/Interfaces";
-import Button from "../../components/Button/Button";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { PatchStudentStatus, CreateStudyGroup } from "../../components/Api/Api";
-import { colors } from "../../styles";
-import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
-import { urlProvider } from "../../components/Api/Api";
-import MapView, { UrlTile, Marker } from "react-native-maps";
-import { useNavigation } from "@react-navigation/native";
-import { useToast } from "react-native-toast-notifications";
-import CaretLeftIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
-import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
-
-export default function CreateGroup({ route }: any) {
-  const { location, subject } = route.params;
-  const queryClient = useQueryClient();
-  const navigation = useNavigation<RootDrawerParamList>();
-  const toast = useToast();
-
-  const [name, setName] = useState("");
-  const study_group_create = useMutation({
-    mutationFn: async (info: StudyGroupCreateType) => {
-      const data = await CreateStudyGroup(info);
-      if (data[0] != true) {
-        return Promise.reject(new Error());
-      }
-      return data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status"] });
-      student_status_patch.mutate({
-        study_group: name,
-      });
-      toast.show("Created successfully", {
-        type: "success",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
-  const student_status_patch = useMutation({
-    mutationFn: async (info: StudentStatusPatchType) => {
-      const data = await PatchStudentStatus(info);
-      if (data[0] != true) {
-        return Promise.reject(new Error());
-      }
-      return data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status_list"] });
-      queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
-      toast.show(`Joined group ${name} successfully`, {
-        type: "success",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-      // Set a delay before going back to conversation page to hopefully let the queries refresh in time
-      setTimeout(() => {
-        navigation.navigate("Conversation");
-      }, 200);
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
-  if (location) {
-    return (
-      <View style={styles.background}>
-        <AnimatedContainer>
-          <View style={{ zIndex: -1 }}>
-            <View style={styles.padding} />
-            <View style={{ borderRadius: 16, overflow: "hidden" }}>
-              <MapView
-                style={{
-                  height: Viewport.height * 0.4,
-                  width: Viewport.width * 0.8,
-                  alignSelf: "center",
-                }}
-                customMapStyle={[
-                  {
-                    featureType: "poi",
-                    stylers: [
-                      {
-                        visibility: "off",
-                      },
-                    ],
-                  },
-                ]}
-                mapType="none"
-                scrollEnabled={false}
-                zoomEnabled={false}
-                toolbarEnabled={false}
-                rotateEnabled={false}
-                minZoomLevel={18}
-                initialRegion={{
-                  latitude: location.latitude,
-                  longitude: location.longitude,
-                  latitudeDelta: 0.0922,
-                  longitudeDelta: 0.0421,
-                }}
-                loadingBackgroundColor={colors.secondary_2}
-              >
-                <UrlTile
-                  urlTemplate={urlProvider}
-                  shouldReplaceMapContent={true}
-                  maximumZ={19}
-                  flipY={false}
-                  zIndex={1}
-                />
-                <Marker
-                  coordinate={{
-                    latitude: location.latitude,
-                    longitude: location.longitude,
-                  }}
-                  pinColor={colors.primary_1}
-                />
-              </MapView>
-            </View>
-            <View style={styles.padding} />
-          </View>
-          <TextInput
-            style={styles.text_input}
-            placeholder="Group Name"
-            placeholderTextColor="white"
-            autoCapitalize="none"
-            value={name}
-            onChange={(
-              e: NativeSyntheticEvent<TextInputChangeEventData>
-            ): void => {
-              setName(e.nativeEvent.text);
-            }}
-          />
-          <View style={styles.padding} />
-          <View style={styles.flex_row}>
-            <Pressable onPress={() => navigation.navigate("Home")}>
-              <CaretLeftIcon size={32} />
-            </Pressable>
-            <Button
-              onPress={() => {
-                study_group_create.mutate({
-                  name: name,
-                  location: location,
-                  subject: subject,
-                });
-              }}
-            >
-              <Text style={styles.text_white_small}>Start Studying</Text>
-            </Button>
-          </View>
-
-          <View style={styles.padding} />
-        </AnimatedContainer>
-      </View>
-    );
-  }
-  return <View />;
-}

src/routes/Loading/Loading.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-import styles from "../../styles";
-import { View, Text, ActivityIndicator } from "react-native";
-import { colors } from "../../styles";
-import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
-
-export default function Loading() {
-  return (
-    <View style={styles.background}>
-      <AnimatedContainer>
-        <View style={{ paddingVertical: 8 }} />
-        <ActivityIndicator size={128} color={colors.secondary_1} />
-        <Text style={styles.text_white_medium}>Loading StudE...</Text>
-      </AnimatedContainer>
-    </View>
-  );
-}

src/routes/Login/Login.tsx

@@ -7,13 +7,15 @@ import {
   NativeSyntheticEvent,
   TextInputChangeEventData,
 } from "react-native";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
-import { useEffect, useState } from "react";
+import { colors } from "../../styles";
+import { useState } from "react";
 import LoginIcon from "../../icons/LoginIcon/LoginIcon";
 import Button from "../../components/Button/Button";
 import { useNavigation } from "@react-navigation/native";
 import { RootDrawerParamList } from "../../interfaces/Interfaces";
-import { GetUserInfo, UserLogin } from "../../components/Api/Api";
+import { UserInfo, UserLogin } from "../../components/Api/Api";
+import { ParseLoginError } from "../../components/ParseError/ParseError";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
 import {
@@ -21,24 +23,15 @@ import {
   setOnboarding,
   unsetOnboarding,
 } from "../../features/redux/slices/StatusSlice/StatusSlice";
-import { useToast } from "react-native-toast-notifications";
-import { RootState } from "../../features/redux/Store/Store";
 
 export default function Login() {
   const navigation = useNavigation<RootDrawerParamList>();
-  const status = useSelector((state: RootState) => state.status);
-  const [logging_in, setLoggingIn] = useState(false);
   const dispatch = useDispatch();
   const [creds, setCreds] = useState({
     username: "",
     password: "",
   });
-  const toast = useToast();
+  const [error, setError] = useState("");
-  useEffect(() => {
-    if (status.logged_in) {
-      navigation.navigate("Home");
-    }
-  }, []);
   return (
     <View style={styles.background}>
       <AnimatedContainer>
@@ -67,62 +60,44 @@ export default function Login() {
           placeholderTextColor="white"
           secureTextEntry={true}
           value={creds.password}
-          autoCapitalize={"none"}
           onChange={(
             e: NativeSyntheticEvent<TextInputChangeEventData>
           ): void => {
             setCreds({ ...creds, password: e.nativeEvent.text });
           }}
         />
+        <View style={{ paddingVertical: 2 }} />
+        <Text style={styles.text_white_small}>{error}</Text>
         <View style={{ paddingVertical: 4 }} />
         <Button
           onPress={async () => {
-            if (!logging_in) {
+            await UserLogin({
-              await UserLogin({
+              username: creds.username,
-                username: creds.username,
+              password: creds.password,
-                password: creds.password,
+            }).then(async (result) => {
-              }).then(async (result) => {
+              if (result[0]) {
-                if (result[0]) {
+                setUser({ ...creds, username: "", password: "", error: "" });
-                  setUser({ ...creds, username: "", password: "", error: "" });
+                let user_info = await UserInfo();
-                  let user_info = await GetUserInfo();
+                dispatch(login());
-                  dispatch(login());
+                dispatch(setUser(user_info[1]));
-                  dispatch(setUser(user_info[1]));
+                // Redirect to onboarding if no year level, course, or semester specified
-                  // Redirect to onboarding if no year level, course, or semester specified
+                if (
-                  if (
+                  user_info[1].year_level == null ||
-                    user_info[1].year_level == null ||
+                  user_info[1].course == null ||
-                    user_info[1].course == null ||
+                  user_info[1].semester == null
-                    user_info[1].semester == null
+                ) {
-                  ) {
+                  dispatch(setOnboarding());
-                    dispatch(setOnboarding());
+                  navigation.navigate("Onboarding");
-                    navigation.navigate("Onboarding");
-                    toast.show("Successfully logged in", {
-                      type: "success",
-                      placement: "top",
-                      duration: 2000,
-                      animationType: "slide-in",
-                    });
-                  } else {
-                    dispatch(unsetOnboarding());
-                    toast.show("Successfully logged in", {
-                      type: "success",
-                      placement: "top",
-                      duration: 2000,
-                      animationType: "slide-in",
-                    });
-                    navigation.navigate("Home");
-                  }
-                  console.log(JSON.stringify(user_info));
                 } else {
-                  toast.show(JSON.stringify(result[1]), {
+                  dispatch(unsetOnboarding());
-                    type: "warning",
+                  navigation.navigate("Home");
-                    placement: "top",
-                    duration: 2000,
-                    animationType: "slide-in",
-                  });
                 }
-                setLoggingIn(false);
+                console.log(JSON.stringify(user_info));
-              });
+              } else {
-            }
+                console.log("heh", ParseLoginError(JSON.stringify(result[1])));
+                setError(ParseLoginError(JSON.stringify(result[1])));
+              }
+            });
           }}
         >
           <Text style={styles.text_white_small}>Login</Text>

src/routes/Onboarding/Onboarding.tsx

@@ -3,10 +3,10 @@ import styles from "../../styles";
 import { View, Text } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {
+  Course,
   RootDrawerParamList,
-  CourseType,
+  Semester,
-  SemesterType,
+  YearLevel,
-  YearLevelType,
 } from "../../interfaces/Interfaces";
 import { colors } from "../../styles";
 import { MotiView } from "moti";
@@ -18,18 +18,18 @@ import {
   GetCourses,
   GetSemesters,
   GetYearLevels,
-  PatchUserInfo,
+  OnboardingUpdateStudentInfo,
 } from "../../components/Api/Api";
 import { useDispatch } from "react-redux";
 import { unsetOnboarding } from "../../features/redux/slices/StatusSlice/StatusSlice";
 import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
-import { useToast } from "react-native-toast-notifications";
 export default function Onboarding() {
   const navigation = useNavigation<RootDrawerParamList>();
   const dispatch = useDispatch();
   // const creds = useSelector((state: RootState) => state.auth.creds);
-  const toast = useToast();
+  const [error, setError] = useState("");
   // Semesters
   const [selected_semester, setSelectedSemester] = useState("");
   const [semesterOpen, setSemesterOpen] = useState(false);
@@ -39,28 +39,14 @@ export default function Onboarding() {
   ]);
   const semester_query = useQuery({
     queryKey: ["semesters"],
-    queryFn: async () => {
+    queryFn: GetSemesters,
-      const data = await GetSemesters();
-      if (data[0] == false) {
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
     onSuccess: (data) => {
-      let semesters = data[1].map((item: SemesterType) => ({
+      let semesters = data[1].map((item: Semester) => ({
         label: item.name,
         value: item.name,
       }));
       setSemesters(semesters);
     },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
   });
   // Year Level
   const [selected_yearlevel, setSelectedYearLevel] = useState("");
@@ -71,28 +57,14 @@ export default function Onboarding() {
   ]);
   const yearlevel_query = useQuery({
     queryKey: ["year_levels"],
-    queryFn: async () => {
+    queryFn: GetYearLevels,
-      const data = await GetYearLevels();
-      if (data[0] == false) {
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
     onSuccess: (data) => {
-      let year_levels = data[1].map((item: YearLevelType) => ({
+      let year_levels = data[1].map((item: YearLevel) => ({
         label: item.name,
         value: item.name,
       }));
       setYearLevels(year_levels);
     },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
   });
   // Course
   const [selected_course, setSelectedCourse] = useState("");
@@ -106,28 +78,14 @@ export default function Onboarding() {
   ]);
   const course_query = useQuery({
     queryKey: ["courses"],
-    queryFn: async () => {
+    queryFn: GetCourses,
-      const data = await GetCourses();
-      if (data[0] == false) {
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
     onSuccess: (data) => {
-      let courses = data[1].map((item: CourseType) => ({
+      let courses = data[1].map((item: Course) => ({
         label: item.name,
         value: item.name,
       }));
       setCourses(courses);
     },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
   });
   if (yearlevel_query.error || semester_query.error || course_query.error) {
     return (
@@ -195,13 +153,7 @@ export default function Onboarding() {
               ...styles.text_white_small_bold,
               ...{ textAlign: "center" },
             }}
-            modalContentContainerStyle={{
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
-              backgroundColor: colors.primary_2,
-              borderWidth: 0,
-              zIndex: 1000,
-            }}
-            dropDownDirection="BOTTOM"
-            listMode="MODAL"
           />
           <DropDownPicker
             zIndex={2000}
@@ -221,13 +173,7 @@ export default function Onboarding() {
               ...styles.text_white_small_bold,
               ...{ textAlign: "center" },
             }}
-            modalContentContainerStyle={{
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
-              backgroundColor: colors.primary_2,
-              borderWidth: 0,
-              zIndex: 1000,
-            }}
-            dropDownDirection="BOTTOM"
-            listMode="MODAL"
           />
           <DropDownPicker
             zIndex={1000}
@@ -247,15 +193,10 @@ export default function Onboarding() {
               ...styles.text_white_small_bold,
               ...{ textAlign: "center" },
             }}
-            modalContentContainerStyle={{
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
-              backgroundColor: colors.primary_2,
-              borderWidth: 0,
-              zIndex: 1000,
-            }}
-            dropDownDirection="BOTTOM"
-            listMode="MODAL"
           />
         </MotiView>
+        <Text style={styles.text_white_small}>{error}</Text>
         <MotiView
           from={{
             opacity: 0,
@@ -276,7 +217,7 @@ export default function Onboarding() {
               !selected_yearlevel || !selected_course || !selected_semester
             }
             onPress={async () => {
-              let result = await PatchUserInfo({
+              let result = await OnboardingUpdateStudentInfo({
                 semester: selected_semester,
                 course: selected_course,
                 year_level: selected_yearlevel,
@@ -286,25 +227,11 @@ export default function Onboarding() {
                 setSelectedCourse("");
                 setSelectedYearLevel("");
                 setSelectedSemester("");
+                setError("Success!");
                 dispatch(setUser(result[1]));
-                toast.show("Changes applied successfully", {
-                  type: "success",
-                  placement: "top",
-                  duration: 2000,
-                  animationType: "slide-in",
-                });
                 navigation.navigate("Home");
               } else {
-                dispatch(setUser(result[1]));
+                setError(result[1]);
-                toast.show(
-                  "An error has occured\nChanges have not been saved",
-                  {
-                    type: "warning",
-                    placement: "top",
-                    duration: 2000,
-                    animationType: "slide-in",
-                  }
-                );
               }
             }}
           >

src/routes/Register/Register.tsx

@@ -15,16 +15,13 @@ import { RootDrawerParamList } from "../../interfaces/Interfaces";
 import SignupIcon from "../../icons/SignupIcon/SignupIcon";
 import { UserRegister } from "../../components/Api/Api";
 import IsNumber from "../../components/IsNumber/IsNumber";
+import ParseError from "../../components/ParseError/ParseError";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
-import { useToast } from "react-native-toast-notifications";
-import { ScrollView } from "react-native-gesture-handler";
 
 export default function Register() {
   const navigation = useNavigation<RootDrawerParamList>();
-  const toast = useToast();
   // const dispatch = useDispatch();
   // const creds = useSelector((state: RootState) => state.auth.creds);
-  const [registering, setRegistering] = useState(false);
   const [user, setUser] = useState({
     first_name: "",
     last_name: "",
@@ -32,7 +29,7 @@ export default function Register() {
     username: "",
     email: "",
     password: "",
-    confirm_password: "",
+    feedback: "",
   });
   return (
     <View style={styles.background}>
@@ -116,7 +113,6 @@ export default function Register() {
           placeholderTextColor={colors.text_default}
           secureTextEntry={true}
           value={user.password}
-          autoCapitalize={"none"}
           onChange={(
             e: NativeSyntheticEvent<TextInputChangeEventData>
           ): void => {
@@ -124,77 +120,42 @@ export default function Register() {
           }}
         />
         <View style={{ paddingVertical: 4 }} />
-        <TextInput
+        <Text style={styles.text_white_small}>{user.feedback}</Text>
-          style={styles.text_input}
-          placeholder="Confirm Password"
-          placeholderTextColor={colors.text_default}
-          secureTextEntry={true}
-          value={user.confirm_password}
-          autoCapitalize={"none"}
-          onChange={(
-            e: NativeSyntheticEvent<TextInputChangeEventData>
-          ): void => {
-            setUser({ ...user, confirm_password: e.nativeEvent.text });
-          }}
-        />
         <View style={{ paddingVertical: 4 }} />
         <Button
           onPress={async () => {
-            if (!registering) {
+            await UserRegister({
-              if (user.password === user.confirm_password) {
+              username: user.username,
-                setRegistering(true);
+              email: user.email,
-                await UserRegister({
+              password: user.password,
-                  username: user.username,
+              student_id_number: user.student_id_number,
-                  email: user.email,
+              first_name: user.first_name,
-                  password: user.password,
+              last_name: user.last_name,
-                  student_id_number: user.student_id_number,
+            }).then((result) => {
-                  first_name: user.first_name,
+              console.log(result);
-                  last_name: user.last_name,
+              if (result[0]) {
-                }).then((result: any) => {
+                setUser({
-                  console.log(result);
+                  ...user,
-                  if (result[0]) {
+                  first_name: "",
-                    setUser({
+                  last_name: "",
-                      ...user,
+                  student_id_number: "",
-                      first_name: "",
+                  username: "",
-                      last_name: "",
+                  email: "",
-                      student_id_number: "",
+                  password: "",
-                      username: "",
+                  feedback:
-                      email: "",
+                    "Success! An email has been sent to activate your account",
-                      password: "",
-                    });
-                    toast.show(
-                      "Success! An email has been sent to activate your account",
-                      {
-                        type: "success",
-                        placement: "top",
-                        duration: 6000,
-                        animationType: "slide-in",
-                      }
-                    );
-                    setTimeout(() => {
-                      navigation.navigate("Login");
-                    }, 10000);
-                  } else {
-                    toast.show(JSON.parse(JSON.stringify(result[1])), {
-                      type: "warning",
-                      placement: "top",
-                      duration: 6000,
-                      animationType: "slide-in",
-                    });
-                  }
-                  setRegistering(false);
                 });
+                setTimeout(() => {
+                  navigation.navigate("Login");
+                }, 10000);
               } else {
-                toast.show(
+                setUser({
-                  "Password does not match confirm password. Please try again"
+                  ...user,
-                ),
+                  feedback: ParseError(JSON.stringify(result[1])),
-                  {
+                });
-                    type: "warning",
-                    placement: "top",
-                    duration: 6000,
-                    animationType: "slide-in",
-                  };
               }
+            });
+            {
             }
           }}
         >

src/routes/Revalidation/Revalidation.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styles from "../../styles";
 import { View, Text, ActivityIndicator } from "react-native";
-import { TokenRefresh, GetUserInfo } from "../../components/Api/Api";
+import { TokenRefresh, UserInfo } from "../../components/Api/Api";
 import { useDispatch } from "react-redux";
 import { colors } from "../../styles";
 import { useEffect, useState } from "react";
@@ -15,55 +15,37 @@ import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContai
 import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
 import { setOnboarding } from "../../features/redux/slices/StatusSlice/StatusSlice";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useToast } from "react-native-toast-notifications";
 
 export default function Revalidation() {
   const dispatch = useDispatch();
   const navigation = useNavigation<RootDrawerParamList>();
   const [state, setState] = useState("Checking for existing session");
-  const toast = useToast();
   useEffect(() => {
     setState("Previous session found");
     TokenRefresh().then(async (response) => {
-      let user_info = await GetUserInfo();
+      let user_info = await UserInfo();
       if (response && user_info[0]) {
         dispatch(login());
         dispatch(setUser(user_info[1]));
         if (
-          !user_info[1].year_level ||
+          !(
-          !user_info[1].course ||
+            user_info[1].year_level ||
-          !user_info[1].semester
+            user_info[1].course ||
+            user_info[1].semester
+          )
         ) {
           dispatch(setOnboarding());
-          toast.show("Previous session restored", {
-            type: "success",
-            placement: "top",
-            duration: 2000,
-            animationType: "slide-in",
-          });
           await setTimeout(() => {
             navigation.navigate("Onboarding");
           }, 700);
         } else {
           dispatch(unsetOnboarding());
-          toast.show("Previous session restored", {
-            type: "success",
-            placement: "top",
-            duration: 2000,
-            animationType: "slide-in",
-          });
           await setTimeout(() => {
             navigation.navigate("Home");
           }, 700);
         }
       } else {
         await setState("Session expired");
-        toast.show("Session expired. Please login again", {
-          type: "warning",
-          placement: "top",
-          duration: 2000,
-          animationType: "slide-in",
-        });
         await setTimeout(() => {
           AsyncStorage.clear();
           navigation.navigate("Login");

src/routes/StartStudying/StartStudying.tsx

@@ -1,234 +0,0 @@
-import * as React from "react";
-import styles, { Viewport } from "../../styles";
-import {
-  View,
-  Text,
-  ToastAndroid,
-  Pressable,
-  ActivityIndicator,
-} from "react-native";
-import { useState } from "react";
-import {
-  UserInfoReturnType,
-  OptionType,
-  RootDrawerParamList,
-  StudentStatusType,
-  StudentStatusReturnType,
-  StudentStatusPatchType,
-} from "../../interfaces/Interfaces";
-import Button from "../../components/Button/Button";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
-  PatchStudentStatus,
-  GetUserInfo,
-  ParseError,
-} from "../../components/Api/Api";
-import { colors } from "../../styles";
-import DropDownPicker from "react-native-dropdown-picker";
-import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
-import { urlProvider } from "../../components/Api/Api";
-import MapView, { UrlTile, Marker } from "react-native-maps";
-import { useNavigation } from "@react-navigation/native";
-import { useToast } from "react-native-toast-notifications";
-import CaretLeftIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
-import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
-
-export default function StartStudying({ route }: any) {
-  const { location } = route.params;
-  const queryClient = useQueryClient();
-  const navigation = useNavigation<RootDrawerParamList>();
-  const toast = useToast();
-
-  // Subject choices
-  const [selected_subject, setSelectedSubject] = useState("");
-  const [subjectsOpen, setSubjectsOpen] = useState(false);
-  const [subjects, setSubjects] = useState<OptionType[]>([]);
-  const StudentInfo = useQuery({
-    queryKey: ["user"],
-    queryFn: async () => {
-      const data = await GetUserInfo();
-      if (data[0] == false) {
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
-    onSuccess: (data: UserInfoReturnType) => {
-      let subjects = data[1].subjects.map((subject: string) => ({
-        label: subject,
-        value: subject,
-      }));
-      setSubjects(subjects);
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
-  const mutation = useMutation({
-    mutationFn: async (info: StudentStatusPatchType) => {
-      const data = await PatchStudentStatus(info);
-      if (data[0] == false) {
-        return Promise.reject(new Error(JSON.stringify(data[1])));
-      }
-      return data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status_list"] });
-      queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
-      toast.show("You are now studying  \n" + selected_subject, {
-        type: "success",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-      // Set a delay before going back to homepage to hopefully let the queries refresh in time
-      setTimeout(() => {
-        navigation.navigate("Home");
-      }, 200);
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
-  if (StudentInfo.isLoading) {
-    return (
-      <View style={styles.background}>
-        <AnimatedContainer>
-          <View style={{ paddingVertical: 8 }} />
-          <ActivityIndicator size={96} color={colors.secondary_1} />
-          <Text style={styles.text_white_medium}>Loading...</Text>
-        </AnimatedContainer>
-      </View>
-    );
-  }
-  if (location && location.coords) {
-    return (
-      <View style={styles.background}>
-        <AnimatedContainerNoScroll>
-          <View style={{ zIndex: -1 }}>
-            <View style={styles.padding} />
-            <View style={{ borderRadius: 16, overflow: "hidden" }}>
-              <MapView
-                style={{
-                  height: Viewport.height * 0.4,
-                  width: Viewport.width * 0.8,
-                  alignSelf: "center",
-                }}
-                customMapStyle={[
-                  {
-                    featureType: "poi",
-                    stylers: [
-                      {
-                        visibility: "off",
-                      },
-                    ],
-                  },
-                ]}
-                mapType="none"
-                scrollEnabled={false}
-                zoomEnabled={false}
-                toolbarEnabled={false}
-                rotateEnabled={false}
-                minZoomLevel={18}
-                initialRegion={{
-                  latitude: location.coords.latitude,
-                  longitude: location.coords.longitude,
-                  latitudeDelta: 0.0922,
-                  longitudeDelta: 0.0421,
-                }}
-                loadingBackgroundColor={colors.secondary_2}
-              >
-                <UrlTile
-                  urlTemplate={urlProvider}
-                  shouldReplaceMapContent={true}
-                  maximumZ={19}
-                  flipY={false}
-                  zIndex={1}
-                />
-                <Marker
-                  coordinate={{
-                    latitude: location.coords.latitude,
-                    longitude: location.coords.longitude,
-                  }}
-                  pinColor={colors.primary_1}
-                />
-              </MapView>
-            </View>
-            <View style={styles.padding} />
-          </View>
-          <DropDownPicker
-            zIndex={1000}
-            max={16}
-            open={subjectsOpen}
-            value={selected_subject}
-            items={subjects}
-            setOpen={(open) => {
-              setSubjectsOpen(open);
-            }}
-            setValue={setSelectedSubject}
-            placeholderStyle={{
-              ...styles.text_white_tiny_bold,
-              ...{ textAlign: "left" },
-            }}
-            placeholder="Select subject"
-            multipleText="Select subject"
-            style={styles.input}
-            textStyle={{
-              ...styles.text_white_tiny_bold,
-              ...{ textAlign: "left" },
-            }}
-            modalContentContainerStyle={{
-              backgroundColor: colors.primary_2,
-              borderWidth: 0,
-              zIndex: 1000,
-            }}
-            autoScroll
-            dropDownDirection="BOTTOM"
-            listMode="MODAL"
-          />
-          <View style={styles.padding} />
-          <View style={styles.flex_row}>
-            <Pressable onPress={() => navigation.navigate("Home")}>
-              <CaretLeftIcon size={32} />
-            </Pressable>
-            <Button
-              onPress={() => {
-                console.log({
-                  subject: selected_subject,
-                  location: {
-                    latitude: location.coords.latitude,
-                    longitude: location.coords.longitude,
-                  },
-                });
-                mutation.mutate({
-                  active: true,
-                  subject: selected_subject,
-                  location: {
-                    latitude: location.coords.latitude,
-                    longitude: location.coords.longitude,
-                  },
-                });
-              }}
-            >
-              <Text style={styles.text_white_small}>Start Studying</Text>
-            </Button>
-          </View>
-        </AnimatedContainerNoScroll>
-      </View>
-    );
-  }
-  return <View />;
-}

src/routes/SubjectsPage/SubjectsPage.tsx

@@ -1,63 +1,42 @@
 import * as React from "react";
 import styles from "../../styles";
-import { View, Text, ActivityIndicator } from "react-native";
+import {
+  View,
+  Text,
+  TextInput,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+} from "react-native";
 import { useState } from "react";
 import {
-  UserInfoReturnType,
+  SemesterParams,
-  SubjectsReturnType,
+  UserInfoParams,
-  SubjectType,
+  Semester,
+  SubjectParams,
+  Subject,
+  YearLevel,
+  Course,
   OptionType,
-  StudentStatusType,
+  Subjects,
-  PatchUserInfoType,
-  StudentStatusPatchType,
 } from "../../interfaces/Interfaces";
 import Button from "../../components/Button/Button";
 import { Image } from "react-native";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
+  GetCourses,
+  GetSemesters,
   GetSubjects,
+  GetYearLevels,
   PatchUserInfo,
-  GetUserInfo,
+  UserInfo,
-  PatchStudentStatus,
 } from "../../components/Api/Api";
 import { colors } from "../../styles";
 import DropDownPicker from "react-native-dropdown-picker";
+import { ValueType } from "react-native-dropdown-picker";
 import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
-import { useSelector } from "react-redux";
-import { RootState } from "../../features/redux/Store/Store";
-import { useToast } from "react-native-toast-notifications";
-import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
-import Loading from "../Loading/Loading";
-import LoadingFeedback from "../../components/LoadingFeedback/LoadingFeedback";
 
 export default function SubjectsPage() {
-  const logged_in_user = useSelector((state: RootState) => state.user.user);
   const queryClient = useQueryClient();
-  const toast = useToast();
-
-  // Student Status
-  const studentstatus_mutation = useMutation({
-    mutationFn: async (info: StudentStatusPatchType) => {
-      const data = await PatchStudentStatus(info);
-      if (data[0] != true) {
-        return Promise.reject(new Error());
-      }
-      return data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status"] });
-    },
-    onError: () => {
-      toast.show("An error has occured\nChanges have not been saved", {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
   // User Info
   const [user, setUser] = useState({
     first_name: "",
@@ -70,18 +49,17 @@ export default function SubjectsPage() {
     course_shortname: "",
     avatar: "",
     student_id_number: "",
-    subjects: [] as string[],
+    subjects: [] as Subjects,
+  });
+  const [displayName, setDisplayName] = useState({
+    first_name: "",
+    last_name: "",
   });
   const StudentInfo = useQuery({
     queryKey: ["user"],
-    queryFn: async () => {
+    queryFn: UserInfo,
-      const data = await GetUserInfo();
+    onSuccess: (data: UserInfoParams) => {
-      if (data[0] == false) {
+      //  console.log(data[1]);
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
-    onSuccess: (data: UserInfoReturnType) => {
       setUser({
         ...user,
         first_name: data[1].first_name,
@@ -93,47 +71,19 @@ export default function SubjectsPage() {
         student_id_number: data[1].student_id_number,
         subjects: data[1].subjects,
       });
-      setSelectedSubjects(data[1].subjects);
+      setDisplayName({
-    },
+        first_name: data[1].first_name,
-    onError: (error: Error) => {
+        last_name: data[1].last_name,
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
       });
+      setSelectedSubjects(user.subjects);
     },
   });
   const mutation = useMutation({
-    mutationFn: async (info: PatchUserInfoType) => {
+    mutationFn: PatchUserInfo,
-      const data = await PatchUserInfo(info);
-      if (data[0] != true) {
-        return Promise.reject(new Error());
-      }
-      return data;
-    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user"] });
       queryClient.invalidateQueries({ queryKey: ["subjects"] });
       setSelectedSubjects([]);
-      // Reset student status when changing user info to prevent bugs
-      studentstatus_mutation.mutate({
-        active: false,
-      });
-      toast.show("Changes applied successfully.\nStudent status reset", {
-        type: "success",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
     },
   });
 
@@ -147,29 +97,39 @@ export default function SubjectsPage() {
     enabled: StudentInfo.isFetched,
     queryKey: ["subjects"],
     queryFn: async () => {
-      const data = await GetSubjects();
+      let data;
-      if (data[0] == false) {
+      if (StudentInfo.data) {
-        return Promise.reject(new Error(JSON.stringify(data[1])));
+        if (
+          StudentInfo.data[1].course_shortname &&
+          StudentInfo.data[1].yearlevel_shortname &&
+          StudentInfo.data[1].semester_shortname
+        ) {
+          data = await GetSubjects(
+            StudentInfo.data[1].course_shortname,
+            StudentInfo.data[1].yearlevel_shortname,
+            StudentInfo.data[1].semester_shortname
+          );
+        }
+      }
+      if (data) {
+        if (!data[0]) {
+          throw new Error("Error with query" + data[1]);
+        }
+        if (!data[1]) {
+          throw new Error("User has no course, year level, or semester!");
+        }
+        // console.log("Subjects available:", data[1]);
       }
       return data;
     },
-    onSuccess: (data: SubjectsReturnType) => {
+    onSuccess: (data: SubjectParams) => {
-      if (data[1]) {
+      let subjectsData = data[1].map((subject: Subject) => ({
-        let subjects = data[1].map((subject: SubjectType) => ({
+        label: subject.name,
-          label: subject.name,
+        value: subject.name,
-          value: subject.name,
+      }));
-        }));
+      // Update the 'subjects' state
-
+      setSelectedSubjects(user.subjects);
-        setSubjects(subjects);
+      setSubjects(subjectsData);
-      }
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
     },
   });
 
@@ -186,18 +146,16 @@ export default function SubjectsPage() {
       );
     }
   }
-  if (StudentInfo.isLoading || Subjects.isLoading) {
+
-    return <LoadingFeedback />;
-  }
   return (
     <View style={styles.background}>
       <AnimatedContainerNoScroll>
         <View style={styles.flex_row}>
           <Avatar />
           <Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
-            {(logged_in_user.first_name || "Undefined") +
+            {(displayName.first_name || "Undefined") +
               " " +
-              (logged_in_user.last_name || "User") +
+              (displayName.last_name || "User") +
               "\n" +
               user.student_id_number}
           </Text>
@@ -231,29 +189,32 @@ export default function SubjectsPage() {
                 ...styles.text_white_tiny_bold,
                 ...{ textAlign: "left" },
               }}
-              modalContentContainerStyle={{
+              dropDownContainerStyle={{
                 backgroundColor: colors.primary_2,
                 borderWidth: 0,
                 zIndex: 1000,
+                maxHeight: 512,
               }}
-              autoScroll
+              dropDownDirection="TOP"
-              dropDownDirection="BOTTOM"
-              listMode="MODAL"
             />
           </View>
         </View>
         <View style={{ zIndex: -1 }}>
-          <View style={styles.padding} />
           <Button
             onPress={() => {
-              mutation.mutate({
+              if (subjectsOpen) {
-                subjects: selected_subjects,
+                setSelectedSubjects([]);
-              });
+                setSubjectsOpen(false);
+                mutation.mutate({
+                  subjects: selected_subjects,
+                });
+              }
             }}
           >
-            <Text style={styles.text_white_small}>Save Changes</Text>
+            <Text style={styles.text_white_small}>
+              {subjectsOpen && StudentInfo.isSuccess ? "Save" : "Edit Subjects"}
+            </Text>
           </Button>
-          <View style={styles.padding} />
         </View>
       </AnimatedContainerNoScroll>
     </View>

src/routes/UserInfoPage/UserInfoPage.tsx

@@ -6,20 +6,18 @@ import {
   TextInput,
   NativeSyntheticEvent,
   TextInputChangeEventData,
-  Pressable,
-  ActivityIndicator,
 } from "react-native";
 import { useState } from "react";
 import {
-  SemesterReturnType,
+  SemesterParams,
-  UserInfoReturnType,
+  UserInfoParams,
-  SemesterType,
+  Semester,
-  YearLevelType,
+  SubjectParams,
-  CourseType,
+  Subject,
+  YearLevel,
+  Course,
   OptionType,
-  StudentStatusType,
+  Subjects,
-  PatchUserInfoType,
-  StudentStatusPatchType,
 } from "../../interfaces/Interfaces";
 import Button from "../../components/Button/Button";
 import { Image } from "react-native";
@@ -27,55 +25,18 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   GetCourses,
   GetSemesters,
+  GetSubjects,
   GetYearLevels,
-  PatchStudentStatus,
   PatchUserInfo,
-  GetUserInfo,
+  UserInfo,
 } from "../../components/Api/Api";
 import { colors } from "../../styles";
 import DropDownPicker from "react-native-dropdown-picker";
+import { ValueType } from "react-native-dropdown-picker";
 import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
-import BouncyCheckbox from "react-native-bouncy-checkbox";
-import { useSelector } from "react-redux";
-import { RootState } from "../../features/redux/Store/Store";
-import { useDispatch } from "react-redux";
-import { setUser as setUserinState } from "../../features/redux/slices/UserSlice/UserSlice";
-import * as ImagePicker from "expo-image-picker";
-import * as FileSystem from "expo-file-system";
-import { useToast } from "react-native-toast-notifications";
-import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
-import Loading from "../Loading/Loading";
-import LoadingFeedback from "../../components/LoadingFeedback/LoadingFeedback";
 
 export default function UserInfoPage() {
-  const logged_in_user = useSelector((state: RootState) => state.user.user);
-  const dispatch = useDispatch();
   const queryClient = useQueryClient();
-  const toast = useToast();
-
-  // Student Status
-  const studentstatus_mutation = useMutation({
-    mutationFn: async (info: StudentStatusPatchType) => {
-      const data = await PatchStudentStatus(info);
-      if (data[0] != true) {
-        return Promise.reject(new Error());
-      }
-      return data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["user"] });
-      queryClient.invalidateQueries({ queryKey: ["user_status"] });
-    },
-    onError: () => {
-      toast.show("An error has occured\nChanges have not been saved", {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
-  });
-
   // User Info
   const [user, setUser] = useState({
     first_name: "",
@@ -88,18 +49,15 @@ export default function UserInfoPage() {
     course_shortname: "",
     avatar: "",
     student_id_number: "",
-    irregular: false,
+  });
+  const [displayName, setDisplayName] = useState({
+    first_name: "",
+    last_name: "",
   });
   const StudentInfo = useQuery({
     queryKey: ["user"],
-    queryFn: async () => {
+    queryFn: UserInfo,
-      const data = await GetUserInfo();
+    onSuccess: (data: UserInfoParams) => {
-      if (data[0] == false) {
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
-    onSuccess: (data: UserInfoReturnType) => {
       //  console.log(data[1]);
       setUser({
         ...user,
@@ -108,55 +66,23 @@ export default function UserInfoPage() {
         year_level: data[1].year_level,
         semester: data[1].semester,
         course: data[1].course,
-        student_id_number: data[1].student_id_number,
-        irregular: data[1].irregular,
         avatar: data[1].avatar,
+        student_id_number: data[1].student_id_number,
+      });
+      setDisplayName({
+        first_name: data[1].first_name,
+        last_name: data[1].last_name,
       });
       setSelectedCourse(data[1].course);
       setSelectedSemester(data[1].semester);
       setSelectedYearLevel(data[1].year_level);
-      dispatch(setUserinState(data[1]));
-    },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
     },
   });
-
   const mutation = useMutation({
-    mutationFn: async (info: PatchUserInfoType) => {
+    mutationFn: PatchUserInfo,
-      const data = await PatchUserInfo(info);
-      if (data[0] == false) {
-        return Promise.reject(new Error());
-      }
-      return data;
-    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user"] });
       queryClient.invalidateQueries({ queryKey: ["subjects"] });
-      // Reset student status when changing user info to prevent bugs
-      studentstatus_mutation.mutate({
-        active: false,
-      });
-      toast.show("Changes applied successfully.\nStudent status reset", {
-        type: "success",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-      dispatch(setUserinState(user));
-    },
-    onError: () => {
-      toast.show("An error has occured\nChanges have not been saved", {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
     },
   });
 
@@ -166,15 +92,9 @@ export default function UserInfoPage() {
   const [semesters, setSemesters] = useState<OptionType[]>([]);
   const Semesters = useQuery({
     queryKey: ["semesters"],
-    queryFn: async () => {
+    queryFn: GetSemesters,
-      const data = await GetSemesters();
+    onSuccess: (data: SemesterParams) => {
-      if (data[0] == false) {
+      let semestersData = data[1].map((semester: Semester) => ({
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
-    onSuccess: (data: SemesterReturnType) => {
-      let semestersData = data[1].map((semester: SemesterType) => ({
         label: semester.name,
         value: semester.name,
         shortname: semester.shortname,
@@ -182,14 +102,6 @@ export default function UserInfoPage() {
       // Update the 'semesters' state
       setSemesters(semestersData);
     },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
   });
 
   // Year Level
@@ -198,28 +110,14 @@ export default function UserInfoPage() {
   const [year_levels, setYearLevels] = useState<OptionType[]>([]);
   const yearlevel_query = useQuery({
     queryKey: ["year_levels"],
-    queryFn: async () => {
+    queryFn: GetYearLevels,
-      const data = await GetYearLevels();
-      if (data[0] == false) {
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
     onSuccess: (data) => {
-      let year_levels = data[1].map((yearlevel: YearLevelType) => ({
+      let year_levels = data[1].map((yearlevel: YearLevel) => ({
         label: yearlevel.name,
         value: yearlevel.name,
       }));
       setYearLevels(year_levels);
     },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
   });
 
   // Course
@@ -228,84 +126,40 @@ export default function UserInfoPage() {
   const [courses, setCourses] = useState<OptionType[]>([]);
   const course_query = useQuery({
     queryKey: ["courses"],
-    queryFn: async () => {
+    queryFn: GetCourses,
-      const data = await GetCourses();
-      if (data[0] == false) {
-        return Promise.reject(new Error(data[1]));
-      }
-      return data;
-    },
     onSuccess: (data) => {
-      let courses = data[1].map((course: CourseType) => ({
+      let courses = data[1].map((course: Course) => ({
         label: course.name,
         value: course.name,
       }));
       setCourses(courses);
     },
-    onError: (error: Error) => {
-      toast.show(String(error), {
-        type: "warning",
-        placement: "top",
-        duration: 2000,
-        animationType: "slide-in",
-      });
-    },
   });
-
+  // Toggle editing of profile
+  const [isEditable, setIsEditable] = useState(false);
   // Profile photo
-  const pickImage = async () => {
-    // No permissions request is necessary for launching the image library
-    let result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.All,
-      allowsEditing: true,
-      aspect: [4, 3],
-      quality: 1,
-    });
-    if (!result.canceled) {
-      const encodedImage = await FileSystem.readAsStringAsync(
-        result.assets[0].uri,
-        { encoding: "base64" }
-      );
-      mutation.mutate({
-        avatar: encodedImage,
-      });
-    }
-  };
   function Avatar() {
     if (user.avatar) {
-      return (
+      return <Image source={{ uri: user.avatar }} style={styles.profile} />;
-        <Pressable onPress={pickImage}>
-          <Image source={{ uri: user.avatar }} style={styles.profile} />
-        </Pressable>
-      );
     } else {
       return (
-        <Pressable onPress={pickImage}>
+        <Image
-          <Image
+          source={require("../../img/user_profile_placeholder.png")}
-            source={require("../../img/user_profile_placeholder.png")}
+          style={{ ...styles.profile, ...{ marginRight: 48 } }}
-            style={{ ...styles.profile, ...{ marginRight: 48 } }}
+        />
-          />
-        </Pressable>
       );
     }
   }
-  if (
+
-    StudentInfo.isLoading ||
-    Semesters.isLoading ||
-    yearlevel_query.isLoading ||
-    course_query.isLoading
-  ) {
-    return <LoadingFeedback />;
-  }
   return (
     <View style={styles.background}>
       <AnimatedContainerNoScroll>
         <View style={styles.flex_row}>
           <Avatar />
           <Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
-            {(logged_in_user.first_name || "Undefined") +
+            {(displayName.first_name || "Undefined") +
               " " +
-              (logged_in_user.last_name || "User") +
+              (displayName.last_name || "User") +
               "\n" +
               user.student_id_number}
           </Text>
@@ -319,6 +173,7 @@ export default function UserInfoPage() {
           <View style={{ flex: 3 }}>
             <TextInput
               style={styles.input}
+              editable={isEditable}
               onChange={(
                 e: NativeSyntheticEvent<TextInputChangeEventData>
               ): void => {
@@ -335,6 +190,7 @@ export default function UserInfoPage() {
           <View style={{ flex: 3 }}>
             <TextInput
               style={styles.input}
+              editable={isEditable}
               onChange={(
                 e: NativeSyntheticEvent<TextInputChangeEventData>
               ): void => {
@@ -350,7 +206,8 @@ export default function UserInfoPage() {
           </View>
           <View style={{ flex: 3 }}>
             <DropDownPicker
-              zIndex={1000}
+              disabled={!isEditable}
+              zIndex={4000}
               open={yearLevelOpen}
               value={selected_yearlevel}
               items={year_levels}
@@ -372,7 +229,7 @@ export default function UserInfoPage() {
               }}
               dropDownContainerStyle={{
                 backgroundColor: colors.primary_2,
-                zIndex: 1000,
+                zIndex: 4000,
                 borderWidth: 0,
               }}
               dropDownDirection="TOP"
@@ -385,7 +242,8 @@ export default function UserInfoPage() {
           </View>
           <View style={{ flex: 3 }}>
             <DropDownPicker
-              zIndex={2000}
+              disabled={!isEditable}
+              zIndex={3000}
               open={semesterOpen}
               value={selected_semester}
               items={semesters}
@@ -407,7 +265,7 @@ export default function UserInfoPage() {
               }}
               dropDownContainerStyle={{
                 backgroundColor: colors.primary_2,
-                zIndex: 2000,
+                zIndex: 3000,
                 borderWidth: 0,
               }}
               dropDownDirection="TOP"
@@ -420,7 +278,8 @@ export default function UserInfoPage() {
           </View>
           <View style={{ flex: 3 }}>
             <DropDownPicker
-              zIndex={3000}
+              disabled={!isEditable}
+              zIndex={2000}
               open={courseOpen}
               value={selected_course}
               items={courses}
@@ -442,7 +301,7 @@ export default function UserInfoPage() {
               }}
               dropDownContainerStyle={{
                 backgroundColor: colors.primary_2,
-                zIndex: 3000,
+                zIndex: 2000,
                 borderWidth: 0,
               }}
               dropDownDirection="TOP"
@@ -451,37 +310,27 @@ export default function UserInfoPage() {
         </View>
         <View style={styles.padding} />
         <View style={{ zIndex: -1 }}>
-          <View style={{ ...styles.flex_row, ...{ alignSelf: "center" } }}>
-            <BouncyCheckbox
-              onPress={() => {
-                mutation.mutate({
-                  irregular: !user.irregular,
-                });
-                setUser({ ...user, irregular: !user.irregular });
-              }}
-              isChecked={user.irregular}
-              disableBuiltInState
-              fillColor={colors.secondary_3}
-            />
-            <Text style={styles.text_white_small}>Irregular </Text>
-          </View>
           <Button
             onPress={() => {
-              setYearLevelOpen(false);
+              if (isEditable) {
-              setSemesterOpen(false);
+                setYearLevelOpen(false);
-              setCourseOpen(false);
+                setSemesterOpen(false);
-              mutation.mutate({
+                setCourseOpen(false);
-                first_name: user.first_name,
+                mutation.mutate({
-                last_name: user.last_name,
+                  first_name: user.first_name,
-                course: selected_course,
+                  last_name: user.last_name,
-                semester: selected_semester,
+                  course: selected_course,
-                year_level: selected_yearlevel,
+                  semester: selected_semester,
-              });
+                  year_level: selected_yearlevel,
+                });
+              }
+              setIsEditable(!isEditable);
             }}
           >
-            <Text style={styles.text_white_small}>Save Changes</Text>
+            <Text style={styles.text_white_small}>
+              {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
+            </Text>
           </Button>
-          <View style={styles.padding} />
         </View>
       </AnimatedContainerNoScroll>
     </View>

src/styles.tsx

@@ -16,7 +16,6 @@ export const colors = {
   secondary_4: "#FFE9CE",
   secondary_5: "#FFF5E9",
   text_default: "#FFFF",
-  text_dark: "black",
   text_error: "#e32d1e",
   text_success: "#2ecc71",
   icon_color: "#FFFF",
@@ -44,9 +43,8 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     display: "flex",
     flexDirection: "column",
-    flexGrow: 1,
+    flex: 1,
     paddingHorizontal: 4,
-    paddingVertical: 32,
   },
   flex_row: {
     display: "flex",
@@ -107,42 +105,6 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     textAlign: "center",
   },
-  text_black_tiny: {
-    color: colors.text_dark,
-    fontSize: font_sizes.tiny,
-    fontWeight: "bold",
-    textAlign: "center",
-  },
-  text_black_small: {
-    color: colors.text_dark,
-    fontSize: font_sizes.small,
-    fontWeight: "bold",
-    textAlign: "center",
-  },
-  text_black_medium: {
-    color: colors.text_dark,
-    fontSize: font_sizes.medium,
-    fontWeight: "bold",
-    textAlign: "center",
-  },
-  text_black_medium_large: {
-    color: colors.text_dark,
-    fontSize: font_sizes.medium_large,
-    fontWeight: "bold",
-    textAlign: "center",
-  },
-  text_black_large: {
-    color: colors.text_dark,
-    fontSize: font_sizes.large,
-    fontWeight: "bold",
-    textAlign: "center",
-  },
-  text_black_xl: {
-    color: colors.text_dark,
-    fontSize: font_sizes.xl,
-    fontWeight: "bold",
-    textAlign: "center",
-  },
   button_template: {
     justifyContent: "center",
     alignSelf: "center",
@@ -172,8 +134,7 @@ const styles = StyleSheet.create({
     width: "70%",
   },
   map: {
-    marginVertical: 4,
+    height: Viewport.height * 0.8,
-    height: Viewport.height * 0.7,
     width: Viewport.width * 0.8,
     alignSelf: "center",
   },
@@ -184,18 +145,6 @@ const styles = StyleSheet.create({
     borderRadius: 150 / 2,
     overflow: "hidden",
     padding: 0,
-    borderColor: colors.primary_2,
-    borderWidth: 3,
-  },
-  profile_mini: {
-    height: 32,
-    width: 32,
-    alignSelf: "center",
-    borderRadius: 150 / 2,
-    overflow: "hidden",
-    padding: 0,
-    borderColor: colors.primary_2,
-    borderWidth: 3,
   },
   input: {
     paddingHorizontal: 8,
@@ -209,39 +158,5 @@ const styles = StyleSheet.create({
   padding: {
     paddingVertical: 8,
   },
-  calloutContainer: {
-    backgroundColor: colors.secondary_1,
-    padding: 0,
-    border: 0,
-  },
-  chatbox: {
-    paddingHorizontal: 8,
-    height: 50,
-    marginVertical: 10,
-    borderWidth: 1,
-    color: colors.text_default,
-    backgroundColor: colors.primary_2,
-    borderRadius: 20,
-    borderColor: colors.primary_3,
-    width: 256,
-  },
-  messageScrollViewContainer: {
-    backgroundColor: colors.secondary_1,
-    padding: 15,
-  },
-  message_contentContainer: {
-    backgroundColor: "#00000038",
-    margin: 5,
-    padding: 10,
-    borderRadius: 20,
-  },
-  badge: {
-    height: 16,
-    width: 16,
-    justifyContent: "center",
-    borderRadius: 10,
-    marginLeft: 4,
-    marginRight: 4,
-  },
 });
 export default styles;