Fixed subjectspage and userinfo page being swapped

src/routes/SubjectsPage/SubjectsPage.tsx

@@ -35,7 +35,7 @@ import DropDownPicker from "react-native-dropdown-picker";
 import { ValueType } from "react-native-dropdown-picker";
 import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
 
-export default function UserInfoPage() {
+export default function SubjectsPage() {
   const queryClient = useQueryClient();
   // User Info
   const [user, setUser] = useState({
@@ -75,9 +75,6 @@ export default function UserInfoPage() {
         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);
       console.log(user.subjects);
       setSelectedSubjects(user.subjects);
     },
@@ -91,28 +88,10 @@ export default function UserInfoPage() {
     },
   });
 
-  // Semester
-  const [selected_semester, setSelectedSemester] = useState("");
-  const [semesterOpen, setSemesterOpen] = useState(false);
-  const [semesters, setSemesters] = useState<OptionType[]>([]);
-  const Semesters = useQuery({
-    queryKey: ["semesters"],
-    queryFn: GetSemesters,
-    onSuccess: (data: SemesterParams) => {
-      let semestersData = data[1].map((semester: Semester) => ({
-        label: semester.name,
-        value: semester.name,
-        shortname: semester.shortname,
-      }));
-      // Update the 'semesters' state
-      setSemesters(semestersData);
-    },
-  });
-
   // Subjects
 
   const [selected_subjects, setSelectedSubjects] = useState<any>([]);
-  const [subjectsOpen, setSubjectsOpen] = useState(false);
+  const [subjectsOpen, setSubjectsOpen] = useState(true);
   const [subjects, setSubjects] = useState<OptionType[]>([]);
 
   const Subjects = useQuery({
@@ -155,37 +134,6 @@ export default function UserInfoPage() {
     },
   });
 
-  // Year Level
-  const [selected_yearlevel, setSelectedYearLevel] = useState("");
-  const [yearLevelOpen, setYearLevelOpen] = useState(false);
-  const [year_levels, setYearLevels] = useState<OptionType[]>([]);
-  const yearlevel_query = useQuery({
-    queryKey: ["year_levels"],
-    queryFn: GetYearLevels,
-    onSuccess: (data) => {
-      let year_levels = data[1].map((yearlevel: YearLevel) => ({
-        label: yearlevel.name,
-        value: yearlevel.name,
-      }));
-      setYearLevels(year_levels);
-    },
-  });
-
-  // Course
-  const [selected_course, setSelectedCourse] = useState("");
-  const [courseOpen, setCourseOpen] = useState(false);
-  const [courses, setCourses] = useState<OptionType[]>([]);
-  const course_query = useQuery({
-    queryKey: ["courses"],
-    queryFn: GetCourses,
-    onSuccess: (data) => {
-      let courses = data[1].map((course: Course) => ({
-        label: course.name,
-        value: course.name,
-      }));
-      setCourses(courses);
-    },
-  });
   // Toggle editing of profile
   const [isEditable, setIsEditable] = useState(false);
   // Profile photo
@@ -216,161 +164,6 @@ export default function UserInfoPage() {
           </Text>
         </View>
 
-        <View style={styles.padding} />
-        <View style={styles.flex_row}>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.text_white_small_bold}>First Name</Text>
-          </View>
-          <View style={{ flex: 3 }}>
-            <TextInput
-              style={styles.input}
-              editable={isEditable}
-              onChange={(
-                e: NativeSyntheticEvent<TextInputChangeEventData>
-              ): void => {
-                setUser({ ...user, first_name: e.nativeEvent.text });
-              }}
-              value={user.first_name}
-            />
-          </View>
-        </View>
-        <View style={styles.flex_row}>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.text_white_small_bold}>Last Name</Text>
-          </View>
-          <View style={{ flex: 3 }}>
-            <TextInput
-              style={styles.input}
-              editable={isEditable}
-              onChange={(
-                e: NativeSyntheticEvent<TextInputChangeEventData>
-              ): void => {
-                setUser({ ...user, last_name: e.nativeEvent.text });
-              }}
-              value={user.last_name}
-            />
-          </View>
-        </View>
-        <View style={styles.flex_row}>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.text_white_small_bold}>Year Level</Text>
-          </View>
-          <View style={{ flex: 3 }}>
-            <DropDownPicker
-              disabled={!isEditable}
-              zIndex={4000}
-              open={yearLevelOpen}
-              value={selected_yearlevel}
-              items={year_levels}
-              setOpen={(open) => {
-                setYearLevelOpen(open);
-                setSemesterOpen(false);
-                setCourseOpen(false);
-                setSubjectsOpen(false);
-              }}
-              onChangeValue={() => {
-                setSelectedSubjects([]);
-                queryClient.invalidateQueries({ queryKey: ["subjects"] });
-              }}
-              setValue={setSelectedYearLevel}
-              placeholder={user.year_level}
-              placeholderStyle={{
-                ...styles.text_white_tiny_bold,
-                ...{ textAlign: "left" },
-              }}
-              style={styles.input}
-              textStyle={{
-                ...styles.text_white_tiny_bold,
-                ...{ textAlign: "left" },
-              }}
-              dropDownContainerStyle={{
-                backgroundColor: colors.primary_2,
-                zIndex: 4000,
-              }}
-              dropDownDirection="TOP"
-            />
-          </View>
-        </View>
-        <View style={styles.flex_row}>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.text_white_small_bold}>Semester</Text>
-          </View>
-          <View style={{ flex: 3 }}>
-            <DropDownPicker
-              disabled={!isEditable}
-              zIndex={3000}
-              open={semesterOpen}
-              value={selected_semester}
-              items={semesters}
-              setOpen={(open) => {
-                setYearLevelOpen(false);
-                setSemesterOpen(open);
-                setCourseOpen(false);
-                setSubjectsOpen(false);
-              }}
-              onChangeValue={() => {
-                setSelectedSubjects([]);
-                queryClient.invalidateQueries({ queryKey: ["subjects"] });
-              }}
-              setValue={setSelectedSemester}
-              placeholder={user.semester}
-              placeholderStyle={{
-                ...styles.text_white_tiny_bold,
-                ...{ textAlign: "left" },
-              }}
-              style={styles.input}
-              textStyle={{
-                ...styles.text_white_tiny_bold,
-                ...{ textAlign: "left" },
-              }}
-              dropDownContainerStyle={{
-                backgroundColor: colors.primary_2,
-                zIndex: 3000,
-              }}
-              dropDownDirection="TOP"
-            />
-          </View>
-        </View>
-        <View style={styles.flex_row}>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.text_white_small_bold}>Course</Text>
-          </View>
-          <View style={{ flex: 3 }}>
-            <DropDownPicker
-              disabled={!isEditable}
-              zIndex={2000}
-              open={courseOpen}
-              value={selected_course}
-              items={courses}
-              setOpen={(open) => {
-                setYearLevelOpen(false);
-                setSemesterOpen(false);
-                setCourseOpen(open);
-                setSubjectsOpen(false);
-              }}
-              onChangeValue={() => {
-                setSelectedSubjects([]);
-                queryClient.invalidateQueries({ queryKey: ["subjects"] });
-              }}
-              setValue={setSelectedCourse}
-              placeholder={user.course}
-              placeholderStyle={{
-                ...styles.text_white_tiny_bold,
-                ...{ textAlign: "left" },
-              }}
-              style={styles.input}
-              textStyle={{
-                ...styles.text_white_tiny_bold,
-                ...{ textAlign: "left" },
-              }}
-              dropDownContainerStyle={{
-                backgroundColor: colors.primary_2,
-                zIndex: 2000,
-              }}
-              dropDownDirection="TOP"
-            />
-          </View>
-        </View>
         <View style={styles.padding} />
         <View style={styles.flex_row}>
           <View style={{ flex: 1 }}>
@@ -386,9 +179,6 @@ export default function UserInfoPage() {
               value={selected_subjects}
               items={subjects}
               setOpen={(open) => {
-                setYearLevelOpen(false);
-                setSemesterOpen(false);
-                setCourseOpen(false);
                 setSubjectsOpen(open);
               }}
               setValue={setSelectedSubjects}
@@ -415,24 +205,16 @@ export default function UserInfoPage() {
             onPress={() => {
               if (isEditable) {
                 setSelectedSubjects([]);
-                setYearLevelOpen(false);
-                setSemesterOpen(false);
-                setCourseOpen(false);
                 setSubjectsOpen(false);
                 mutation.mutate({
-                  first_name: user.first_name,
-                  last_name: user.last_name,
-                  course: selected_course,
-                  semester: selected_semester,
                   subjects: selected_subjects,
-                  year_level: selected_yearlevel,
                 });
               }
               setIsEditable(!isEditable);
             }}
           >
             <Text style={styles.text_white_small}>
-              {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
+              {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Subjects"}
             </Text>
           </Button>
         </View>

src/routes/UserInfoPage/UserInfoPage.tsx

@@ -35,7 +35,7 @@ import DropDownPicker from "react-native-dropdown-picker";
 import { ValueType } from "react-native-dropdown-picker";
 import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
 
-export default function SubjectsPage() {
+export default function UserInfoPage() {
   const queryClient = useQueryClient();
   // User Info
   const [user, setUser] = useState({
@@ -49,7 +49,6 @@ export default function SubjectsPage() {
     course_shortname: "",
     avatar: "",
     student_id_number: "",
-    subjects: [] as Subjects,
   });
   const [displayName, setDisplayName] = useState({
     first_name: "",
@@ -69,14 +68,14 @@ export default function SubjectsPage() {
         course: data[1].course,
         avatar: data[1].avatar,
         student_id_number: data[1].student_id_number,
-        subjects: data[1].subjects,
       });
       setDisplayName({
         first_name: data[1].first_name,
         last_name: data[1].last_name,
       });
-      console.log(user.subjects);
+      setSelectedCourse(data[1].course);
-      setSelectedSubjects(user.subjects);
+      setSelectedSemester(data[1].semester);
+      setSelectedYearLevel(data[1].year_level);
     },
   });
   const mutation = useMutation({
@@ -84,56 +83,58 @@ export default function SubjectsPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["user"] });
       queryClient.invalidateQueries({ queryKey: ["subjects"] });
-      setSelectedSubjects([]);
     },
   });
 
-  // Subjects
+  // Semester
-
+  const [selected_semester, setSelectedSemester] = useState("");
-  const [selected_subjects, setSelectedSubjects] = useState<any>([]);
+  const [semesterOpen, setSemesterOpen] = useState(false);
-  const [subjectsOpen, setSubjectsOpen] = useState(true);
+  const [semesters, setSemesters] = useState<OptionType[]>([]);
-  const [subjects, setSubjects] = useState<OptionType[]>([]);
+  const Semesters = useQuery({
-
+    queryKey: ["semesters"],
-  const Subjects = useQuery({
+    queryFn: GetSemesters,
-    enabled: StudentInfo.isFetched && !StudentInfo.isStale,
+    onSuccess: (data: SemesterParams) => {
-    queryKey: ["subjects"],
+      let semestersData = data[1].map((semester: Semester) => ({
-    queryFn: async () => {
+        label: semester.name,
-      let data;
+        value: semester.name,
-      if (StudentInfo.data) {
+        shortname: semester.shortname,
-        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: SubjectParams) => {
-      let subjectsData = data[1].map((subject: Subject) => ({
-        label: subject.name,
-        value: subject.name,
       }));
-
+      // Update the 'semesters' state
-      // Update the 'subjects' state
+      setSemesters(semestersData);
-      setSubjects(subjectsData);
     },
   });
 
+  // Year Level
+  const [selected_yearlevel, setSelectedYearLevel] = useState("");
+  const [yearLevelOpen, setYearLevelOpen] = useState(false);
+  const [year_levels, setYearLevels] = useState<OptionType[]>([]);
+  const yearlevel_query = useQuery({
+    queryKey: ["year_levels"],
+    queryFn: GetYearLevels,
+    onSuccess: (data) => {
+      let year_levels = data[1].map((yearlevel: YearLevel) => ({
+        label: yearlevel.name,
+        value: yearlevel.name,
+      }));
+      setYearLevels(year_levels);
+    },
+  });
+
+  // Course
+  const [selected_course, setSelectedCourse] = useState("");
+  const [courseOpen, setCourseOpen] = useState(false);
+  const [courses, setCourses] = useState<OptionType[]>([]);
+  const course_query = useQuery({
+    queryKey: ["courses"],
+    queryFn: GetCourses,
+    onSuccess: (data) => {
+      let courses = data[1].map((course: Course) => ({
+        label: course.name,
+        value: course.name,
+      }));
+      setCourses(courses);
+    },
+  });
   // Toggle editing of profile
   const [isEditable, setIsEditable] = useState(false);
   // Profile photo
@@ -167,21 +168,56 @@ export default function SubjectsPage() {
         <View style={styles.padding} />
         <View style={styles.flex_row}>
           <View style={{ flex: 1 }}>
-            <Text style={styles.text_white_small_bold}>Subjects</Text>
+            <Text style={styles.text_white_small_bold}>First Name</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <TextInput
+              style={styles.input}
+              editable={isEditable}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setUser({ ...user, first_name: e.nativeEvent.text });
+              }}
+              value={user.first_name}
+            />
+          </View>
+        </View>
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Last Name</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <TextInput
+              style={styles.input}
+              editable={isEditable}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setUser({ ...user, last_name: e.nativeEvent.text });
+              }}
+              value={user.last_name}
+            />
+          </View>
+        </View>
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Year Level</Text>
           </View>
           <View style={{ flex: 3 }}>
             <DropDownPicker
-              zIndex={1000}
               disabled={!isEditable}
-              multiple={true}
+              zIndex={4000}
-              max={16}
+              open={yearLevelOpen}
-              open={subjectsOpen}
+              value={selected_yearlevel}
-              value={selected_subjects}
+              items={year_levels}
-              items={subjects}
               setOpen={(open) => {
-                setSubjectsOpen(open);
+                setYearLevelOpen(open);
+                setSemesterOpen(false);
+                setCourseOpen(false);
               }}
-              setValue={setSelectedSubjects}
+              setValue={setSelectedYearLevel}
+              placeholder={user.year_level}
               placeholderStyle={{
                 ...styles.text_white_tiny_bold,
                 ...{ textAlign: "left" },
@@ -193,28 +229,104 @@ export default function SubjectsPage() {
               }}
               dropDownContainerStyle={{
                 backgroundColor: colors.primary_2,
-                zIndex: 1000,
+                zIndex: 4000,
               }}
               dropDownDirection="TOP"
             />
           </View>
         </View>
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Semester</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <DropDownPicker
+              disabled={!isEditable}
+              zIndex={3000}
+              open={semesterOpen}
+              value={selected_semester}
+              items={semesters}
+              setOpen={(open) => {
+                setYearLevelOpen(false);
+                setSemesterOpen(open);
+                setCourseOpen(false);
+              }}
+              setValue={setSelectedSemester}
+              placeholder={user.semester}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              style={styles.input}
+              textStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              dropDownContainerStyle={{
+                backgroundColor: colors.primary_2,
+                zIndex: 3000,
+              }}
+              dropDownDirection="TOP"
+            />
+          </View>
+        </View>
+        <View style={styles.flex_row}>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.text_white_small_bold}>Course</Text>
+          </View>
+          <View style={{ flex: 3 }}>
+            <DropDownPicker
+              disabled={!isEditable}
+              zIndex={2000}
+              open={courseOpen}
+              value={selected_course}
+              items={courses}
+              setOpen={(open) => {
+                setYearLevelOpen(false);
+                setSemesterOpen(false);
+                setCourseOpen(open);
+              }}
+              setValue={setSelectedCourse}
+              placeholder={user.course}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              style={styles.input}
+              textStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              dropDownContainerStyle={{
+                backgroundColor: colors.primary_2,
+                zIndex: 2000,
+              }}
+              dropDownDirection="TOP"
+            />
+          </View>
+        </View>
+        <View style={styles.padding} />
         <View style={{ zIndex: -1 }}>
           <Button
             color={colors.secondary_3}
             onPress={() => {
               if (isEditable) {
-                setSelectedSubjects([]);
+                setYearLevelOpen(false);
-                setSubjectsOpen(false);
+                setSemesterOpen(false);
+                setCourseOpen(false);
                 mutation.mutate({
-                  subjects: selected_subjects,
+                  first_name: user.first_name,
+                  last_name: user.last_name,
+                  course: selected_course,
+                  semester: selected_semester,
+                  year_level: selected_yearlevel,
                 });
               }
               setIsEditable(!isEditable);
             }}
           >
             <Text style={styles.text_white_small}>
-              {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Subjects"}
+              {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
             </Text>
           </Button>
         </View>