Add user feedback to user info and subjects page

src/components/Api/Api.tsx

@@ -17,7 +17,7 @@ if (__DEV__) {
 }
 
 // Switch this on if you wanna run production URLs while in development
-let use_production = false;
+let use_production = true;
 if (use_production) {
   backendURL = "https://stude.keannu1.duckdns.org";
   backendURLWebsocket = "ws://stude.keannu1.duckdns.org";

src/routes/SubjectsPage/SubjectsPage.tsx

@@ -39,6 +39,7 @@ import { RootState } from "../../features/redux/Store/Store";
 export default function SubjectsPage() {
   const logged_in_user = useSelector((state: RootState) => state.user.user);
   const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState("");
   // User Info
   const [user, setUser] = useState({
     first_name: "",
@@ -70,6 +71,9 @@ export default function SubjectsPage() {
       });
       setSelectedSubjects(data[1].subjects);
     },
+    onError: () => {
+      setFeedback("Unable to query user info");
+    },
   });
   const mutation = useMutation({
     mutationFn: PatchUserInfo,
@@ -77,6 +81,7 @@ export default function SubjectsPage() {
       queryClient.invalidateQueries({ queryKey: ["user"] });
       queryClient.invalidateQueries({ queryKey: ["subjects"] });
       setSelectedSubjects([]);
+      setFeedback("Changes applied successfully");
     },
   });
 
@@ -100,6 +105,9 @@ export default function SubjectsPage() {
         setSubjects(subjects);
       }
     },
+    onError: () => {
+      setFeedback("Unable to query subject info");
+    },
   });
 
   // Profile photo
@@ -178,8 +186,10 @@ export default function SubjectsPage() {
               });
             }}
           >
-            <Text style={styles.text_white_small}>Save Change</Text>
+            <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

@@ -44,6 +44,7 @@ export default function UserInfoPage() {
   const logged_in_user = useSelector((state: RootState) => state.user.user);
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState("");
   // User Info
   const [user, setUser] = useState({
     first_name: "",
@@ -79,14 +80,21 @@ export default function UserInfoPage() {
       setSelectedYearLevel(data[1].year_level);
       dispatch(setUserinState(data[1]));
     },
+    onError: () => {
+      setFeedback("Unable to query user info");
+    },
   });
   const mutation = useMutation({
     mutationFn: PatchUserInfo,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user"] });
       queryClient.invalidateQueries({ queryKey: ["subjects"] });
+      setFeedback("Changes applied successfully");
       dispatch(setUserinState(user));
     },
+    onError: () => {
+      setFeedback("An error has occured\nChanges have not been saved");
+    },
   });
 
   // Semester
@@ -105,6 +113,9 @@ export default function UserInfoPage() {
       // Update the 'semesters' state
       setSemesters(semestersData);
     },
+    onError: () => {
+      setFeedback("Unable to query semester info");
+    },
   });
 
   // Year Level
@@ -121,6 +132,9 @@ export default function UserInfoPage() {
       }));
       setYearLevels(year_levels);
     },
+    onError: () => {
+      setFeedback("Unable to query year level info");
+    },
   });
 
   // Course
@@ -137,6 +151,9 @@ export default function UserInfoPage() {
       }));
       setCourses(courses);
     },
+    onError: () => {
+      setFeedback("Unable to query course info");
+    },
   });
 
   // Profile photo
@@ -179,6 +196,7 @@ export default function UserInfoPage() {
                 e: NativeSyntheticEvent<TextInputChangeEventData>
               ): void => {
                 setUser({ ...user, first_name: e.nativeEvent.text });
+                setFeedback("");
               }}
               value={user.first_name}
             />
@@ -195,6 +213,7 @@ export default function UserInfoPage() {
                 e: NativeSyntheticEvent<TextInputChangeEventData>
               ): void => {
                 setUser({ ...user, last_name: e.nativeEvent.text });
+                setFeedback("");
               }}
               value={user.last_name}
             />
@@ -216,6 +235,9 @@ export default function UserInfoPage() {
                 setCourseOpen(false);
               }}
               setValue={setSelectedYearLevel}
+              onChangeValue={() => {
+                setFeedback("");
+              }}
               placeholder={user.year_level}
               placeholderStyle={{
                 ...styles.text_white_tiny_bold,
@@ -251,6 +273,9 @@ export default function UserInfoPage() {
                 setCourseOpen(false);
               }}
               setValue={setSelectedSemester}
+              onChangeValue={() => {
+                setFeedback("");
+              }}
               placeholder={user.semester}
               placeholderStyle={{
                 ...styles.text_white_tiny_bold,
@@ -286,6 +311,9 @@ export default function UserInfoPage() {
                 setCourseOpen(open);
               }}
               setValue={setSelectedCourse}
+              onChangeValue={() => {
+                setFeedback("");
+              }}
               placeholder={user.course}
               placeholderStyle={{
                 ...styles.text_white_tiny_bold,
@@ -337,6 +365,8 @@ export default function UserInfoPage() {
           >
             <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>