Finalize changes to using modals for user feedback

App.tsx

@@ -1,5 +1,5 @@
 import "react-native-gesture-handler";
-import { Text } from "react-native";
+import styles from "./src/styles";
 import { NavigationContainer } from "@react-navigation/native";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 import { Provider } from "react-redux";
@@ -60,7 +60,10 @@ export default function App() {
     }
   }, [initialRoute]);
   return (
-    <ToastProvider icon={<AppIcon size={64} />}>
+    <ToastProvider
+      icon={<AppIcon size={64} />}
+      textStyle={{ ...styles.text_white_tiny_bold }}
+    >
       <QueryClientProvider client={queryClient}>
         <Provider store={store}>
           <StatusBar style="light" />

src/components/Api/Api.tsx

@@ -28,7 +28,7 @@ const instance = axios.create({
   timeout: 1000,
 });
 
-console.log(backendURL);
+console.log("Using backend API:", backendURL);
 
 // 3rd Party APIs
 export const urlProvider =

src/routes/Activation/Activation.tsx

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

src/routes/Home/Home.tsx

@@ -1,5 +1,5 @@
 import styles, { Viewport, colors } from "../../styles";
-import { View, Text, ToastAndroid } from "react-native";
+import { View, Text } from "react-native";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { useState, useEffect } from "react";
 import MapView, { Callout, Marker, UrlTile } from "react-native-maps";
@@ -46,8 +46,8 @@ export default function Home() {
         "Location permission was denied. Please allow in order to use StudE",
         {
           type: "warning",
-          placement: "bottom",
+          placement: "top",
-          duration: 4000,
+          duration: 2000,
           animationType: "slide-in",
         }
       );
@@ -129,18 +129,18 @@ export default function Home() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user"] });
       queryClient.invalidateQueries({ queryKey: ["user_status"] });
-      toast.show("You are no longer studying " + subject, {
+      toast.show("You are no longer studying  \n" + subject, {
         type: "success",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
     onError: () => {
       toast.show("Server error. Unable to update student status", {
         type: "warning",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },

src/routes/Login/Login.tsx

@@ -8,7 +8,6 @@ import {
   TextInputChangeEventData,
 } from "react-native";
 import { useDispatch } from "react-redux";
-import { colors } from "../../styles";
 import { useState } from "react";
 import LoginIcon from "../../icons/LoginIcon/LoginIcon";
 import Button from "../../components/Button/Button";
@@ -89,16 +88,16 @@ export default function Login() {
                   navigation.navigate("Onboarding");
                   toast.show("Successfully logged in", {
                     type: "success",
-                    placement: "bottom",
+                    placement: "top",
-                    duration: 4000,
+                    duration: 2000,
                     animationType: "slide-in",
                   });
                 } else {
                   dispatch(unsetOnboarding());
                   toast.show("Successfully logged in", {
                     type: "success",
-                    placement: "bottom",
+                    placement: "top",
-                    duration: 4000,
+                    duration: 2000,
                     animationType: "slide-in",
                   });
                   navigation.navigate("Home");
@@ -108,8 +107,8 @@ export default function Login() {
                 console.log(ParseLoginError(JSON.stringify(result[1])));
                 toast.show(JSON.stringify(result[1]), {
                   type: "warning",
-                  placement: "bottom",
+                  placement: "top",
-                  duration: 4000,
+                  duration: 2000,
                   animationType: "slide-in",
                 });
               }

src/routes/Onboarding/Onboarding.tsx

@@ -48,6 +48,14 @@ export default function Onboarding() {
       }));
       setSemesters(semesters);
     },
+    onError: () => {
+      toast.show("Server error: Unable to query available semesters", {
+        type: "warning",
+        placement: "top",
+        duration: 2000,
+        animationType: "slide-in",
+      });
+    },
   });
   // Year Level
   const [selected_yearlevel, setSelectedYearLevel] = useState("");
@@ -66,6 +74,14 @@ export default function Onboarding() {
       }));
       setYearLevels(year_levels);
     },
+    onError: () => {
+      toast.show("Server error: Unable to query available year levels", {
+        type: "warning",
+        placement: "top",
+        duration: 2000,
+        animationType: "slide-in",
+      });
+    },
   });
   // Course
   const [selected_course, setSelectedCourse] = useState("");
@@ -87,6 +103,14 @@ export default function Onboarding() {
       }));
       setCourses(courses);
     },
+    onError: () => {
+      toast.show("Server error: Unable to query available courses", {
+        type: "warning",
+        placement: "top",
+        duration: 2000,
+        animationType: "slide-in",
+      });
+    },
   });
   if (yearlevel_query.error || semester_query.error || course_query.error) {
     return (
@@ -230,8 +254,8 @@ export default function Onboarding() {
                 dispatch(setUser(result[1]));
                 toast.show("Changes applied successfully", {
                   type: "success",
-                  placement: "bottom",
+                  placement: "top",
-                  duration: 6000,
+                  duration: 2000,
                   animationType: "slide-in",
                 });
                 navigation.navigate("Home");
@@ -241,8 +265,8 @@ export default function Onboarding() {
                   "An error has occured\nChanges have not been saved",
                   {
                     type: "warning",
-                    placement: "bottom",
+                    placement: "top",
-                    duration: 6000,
+                    duration: 2000,
                     animationType: "slide-in",
                   }
                 );

src/routes/Register/Register.tsx

@@ -146,7 +146,7 @@ export default function Register() {
                   "Success! An email has been sent to activate your account",
                   {
                     type: "success",
-                    placement: "bottom",
+                    placement: "top",
                     duration: 6000,
                     animationType: "slide-in",
                   }
@@ -157,7 +157,7 @@ export default function Register() {
               } else {
                 toast.show(JSON.stringify(result[1]), {
                   type: "warning",
-                  placement: "bottom",
+                  placement: "top",
                   duration: 6000,
                   animationType: "slide-in",
                 });

src/routes/Revalidation/Revalidation.tsx

@@ -37,8 +37,8 @@ export default function Revalidation() {
           dispatch(setOnboarding());
           toast.show("Previous session restored", {
             type: "success",
-            placement: "bottom",
+            placement: "top",
-            duration: 4000,
+            duration: 2000,
             animationType: "slide-in",
           });
           await setTimeout(() => {
@@ -48,8 +48,8 @@ export default function Revalidation() {
           dispatch(unsetOnboarding());
           toast.show("Previous session restored", {
             type: "success",
-            placement: "bottom",
+            placement: "top",
-            duration: 4000,
+            duration: 2000,
             animationType: "slide-in",
           });
           await setTimeout(() => {
@@ -60,8 +60,8 @@ export default function Revalidation() {
         await setState("Session expired");
         toast.show("Session expired. Please login again", {
           type: "warning",
-          placement: "bottom",
+          placement: "top",
-          duration: 4000,
+          duration: 2000,
           animationType: "slide-in",
         });
         await setTimeout(() => {

src/routes/StartStudying/StartStudying.tsx

@@ -40,9 +40,9 @@ export default function StartStudying({ route }: any) {
     },
     onError: () => {
       toast.show("Server error: Unable to query available subjects", {
-        type: "error",
+        type: "warning",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
@@ -53,19 +53,19 @@ export default function StartStudying({ route }: any) {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user"] });
       queryClient.invalidateQueries({ queryKey: ["user_status"] });
-      toast.show("You are now studying " + selected_subject, {
+      toast.show("You are now studying  \n" + selected_subject, {
         type: "success",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
       navigation.navigate("Home");
     },
     onError: () => {
       toast.show("A server error has occured. Please try again", {
-        type: "error",
+        type: "warning",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },

src/routes/SubjectsPage/SubjectsPage.tsx

@@ -1,45 +1,28 @@
 import * as React from "react";
 import styles from "../../styles";
+import { View, Text } from "react-native";
+import { useState } from "react";
 import {
-  View,
-  Text,
-  TextInput,
-  NativeSyntheticEvent,
-  TextInputChangeEventData,
-} from "react-native";
-import { useEffect, useState } from "react";
-import {
-  SemesterParams,
   UserInfoParams,
-  Semester,
   SubjectParams,
   Subject,
-  YearLevel,
-  Course,
   OptionType,
-  Subjects,
 } from "../../interfaces/Interfaces";
 import Button from "../../components/Button/Button";
 import { Image } from "react-native";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import {
+import { GetSubjects, PatchUserInfo, UserInfo } from "../../components/Api/Api";
-  GetCourses,
-  GetSemesters,
-  GetSubjects,
-  GetYearLevels,
-  PatchUserInfo,
-  UserInfo,
-} from "../../components/Api/Api";
 import { colors } from "../../styles";
 import DropDownPicker 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";
 
 export default function SubjectsPage() {
   const logged_in_user = useSelector((state: RootState) => state.user.user);
   const queryClient = useQueryClient();
-  const [feedback, setFeedback] = useState("");
+  const toast = useToast();
   // User Info
   const [user, setUser] = useState({
     first_name: "",
@@ -72,7 +55,12 @@ export default function SubjectsPage() {
       setSelectedSubjects(data[1].subjects);
     },
     onError: () => {
-      setFeedback("Unable to query user info");
+      toast.show("Server Error: Unable to query user info", {
+        type: "warning",
+        placement: "top",
+        duration: 2000,
+        animationType: "slide-in",
+      });
     },
   });
   const mutation = useMutation({
@@ -81,7 +69,12 @@ export default function SubjectsPage() {
       queryClient.invalidateQueries({ queryKey: ["user"] });
       queryClient.invalidateQueries({ queryKey: ["subjects"] });
       setSelectedSubjects([]);
-      setFeedback("Changes applied successfully");
+      toast.show("Changes applied successfully", {
+        type: "success",
+        placement: "top",
+        duration: 2000,
+        animationType: "slide-in",
+      });
     },
   });
 
@@ -106,7 +99,12 @@ export default function SubjectsPage() {
       }
     },
     onError: () => {
-      setFeedback("Unable to query subject info");
+      toast.show("Server Error: Unable to query subject info", {
+        type: "warning",
+        placement: "top",
+        duration: 2000,
+        animationType: "slide-in",
+      });
     },
   });
 
@@ -189,7 +187,6 @@ export default function SubjectsPage() {
             <Text style={styles.text_white_small}>Save Changes</Text>
           </Button>
           <View style={styles.padding} />
-          <Text style={styles.text_white_small}>{feedback}</Text>
         </View>
       </AnimatedContainerNoScroll>
     </View>

src/routes/UserInfoPage/UserInfoPage.tsx

@@ -58,16 +58,16 @@ export default function UserInfoPage() {
       queryClient.invalidateQueries({ queryKey: ["user_status"] });
       toast.show("Changes applied successfully", {
         type: "success",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
     onError: () => {
       toast.show("An error has occured\nChanges have not been saved", {
         type: "warning",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
@@ -112,7 +112,7 @@ export default function UserInfoPage() {
       toast.show("Server Error: Unable to query user info", {
         type: "warning",
         placement: "bottom",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
@@ -130,7 +130,7 @@ export default function UserInfoPage() {
       toast.show("Changes applied successfully", {
         type: "success",
         placement: "bottom",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
       dispatch(setUserinState(user));
@@ -139,7 +139,7 @@ export default function UserInfoPage() {
       toast.show("An error has occured\nChanges have not been saved", {
         type: "warning",
         placement: "bottom",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
@@ -164,8 +164,8 @@ export default function UserInfoPage() {
     onError: () => {
       toast.show("Server Error: Unable to query semester info", {
         type: "warning",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
@@ -188,8 +188,8 @@ export default function UserInfoPage() {
     onError: () => {
       toast.show("Server Error: Unable to query year level info", {
         type: "warning",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
@@ -212,8 +212,8 @@ export default function UserInfoPage() {
     onError: () => {
       toast.show("Server Error: Unable to query course info", {
         type: "warning",
-        placement: "bottom",
+        placement: "top",
-        duration: 4000,
+        duration: 2000,
         animationType: "slide-in",
       });
     },
@@ -426,7 +426,7 @@ export default function UserInfoPage() {
             <Text style={styles.text_white_small}>Irregular </Text>
           </View>
           <Button
-            onPress={async () => {
+            onPress={() => {
               setYearLevelOpen(false);
               setSemesterOpen(false);
               setCourseOpen(false);