Overhauled dropdown menu designs for onboarding and userinfo page

src/components/Api/Api.tsx

@@ -207,7 +207,7 @@ export async function GetYearLevels() {
   return instance
     .get("/api/v1/year_levels/", config)
     .then((response) => {
-      // console.log(JSON.stringify(response.data));
+      console.log(JSON.stringify(response.data));
       return [true, response.data];
     })
     .catch((error) => {

src/interfaces/Interfaces.tsx

@@ -47,6 +47,7 @@ export interface ActivationParams {
   token: string;
 }
 
+// Semester
 export interface Semester {
   id: string;
   name: string;
@@ -57,21 +58,37 @@ export type Semesters = Array<Semester>;
 
 export type SemesterParams = [boolean, Semesters];
 
+// Year Level
 export interface YearLevel {
   id: string;
   name: string;
   shortname: string;
 }
 
-export type YearLevelParams = [boolean, YearLevel];
+export type YearLevels = Array<YearLevel>;
 
+export type YearLevelParams = [boolean, YearLevels];
+
+// Course
 export interface Course {
   id: string;
   name: string;
   shortname: string;
 }
+export type Courses = Array<Course>;
+export type CourseParams = [boolean, Courses];
 
-export type CourseParams = [boolean, Course];
+// Subject
+export interface Subject {
+  id: string;
+  name: string;
+  code: string;
+  // courses: any[]; // To-do
+  // year_levels: any[]; // To-do
+  // semesters: any[]; // To-do
+}
+export type Subjects = Array<Subject>;
+export type SubjectParams = [boolean, Subjects];
 
 export interface OnboardingParams {
   year_level: string;
@@ -89,17 +106,20 @@ export interface PatchStudentData {
 }
 
 export interface StudentData {
-  avatar: string;
-  course: string;
-  email: string;
   first_name: string;
-  is_banned: boolean;
   last_name: string;
-  semester: string;
+  email: string;
+  avatar: string;
   student_id_number: string;
+  is_banned: boolean;
+  semester: string;
+  semester_shortname: string;
+  course: string;
+  course_shortname: string;
+  year_level: string;
+  yearlevel_shortname: string;
   subjects: any[]; // To-do
   username: string;
-  year_level: string;
 }
 
 export type UserInfoParams = [boolean, StudentData];

src/routes/Onboarding/Onboarding.tsx

@@ -145,13 +145,15 @@ export default function Onboarding() {
               setSemesterOpen(false);
               setYearLevelOpen(false);
             }}
+            style={styles.input}
             setValue={setSelectedCourse}
             placeholder="Choose your course"
-            containerStyle={{
+            containerStyle={{ zIndex: 3000 }}
-              ...styles.input,
+            textStyle={{
-              ...{ zIndex: 3000 },
+              ...styles.text_white_small_bold,
+              ...{ textAlign: "center" },
             }}
-            dropDownContainerStyle={{ backgroundColor: "white" }}
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
           />
           <DropDownPicker
             zIndex={2000}
@@ -163,13 +165,15 @@ export default function Onboarding() {
               setSemesterOpen(false);
               setCourseOpen(false);
             }}
+            style={styles.input}
             setValue={setSelectedYearLevel}
             placeholder="Your Year Level"
-            containerStyle={{
+            containerStyle={{ zIndex: 2000 }}
-              ...styles.input,
+            textStyle={{
-              ...{ zIndex: 2000 },
+              ...styles.text_white_small_bold,
+              ...{ textAlign: "center" },
             }}
-            dropDownContainerStyle={{ backgroundColor: "white" }}
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
           />
           <DropDownPicker
             zIndex={1000}
@@ -181,13 +185,15 @@ export default function Onboarding() {
               setCourseOpen(false);
               setYearLevelOpen(false);
             }}
+            style={styles.input}
             setValue={setSelectedSemester}
             placeholder="Current semester"
-            containerStyle={{
+            containerStyle={{ zIndex: 1000 }}
-              ...styles.input,
+            textStyle={{
-              ...{ zIndex: 1000 },
+              ...styles.text_white_small_bold,
+              ...{ textAlign: "center" },
             }}
-            dropDownContainerStyle={{ backgroundColor: "white" }}
+            dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
           />
         </MotiView>
         <Text style={styles.text_white_small}>{error}</Text>

src/routes/UserInfoPage/UserInfoPage.tsx

@@ -7,20 +7,26 @@ import {
   NativeSyntheticEvent,
   TextInputChangeEventData,
 } from "react-native";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigation } from "@react-navigation/native";
 import {
   RootDrawerParamList,
   SemesterParams,
   UserInfoParams,
   Semester,
+  SubjectParams,
+  Subject,
+  YearLevel,
+  Course,
 } from "../../interfaces/Interfaces";
 import Button from "../../components/Button/Button";
 import { TouchableOpacity, Image } from "react-native";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
+  GetCourses,
   GetSemesters,
   GetSubjects,
+  GetYearLevels,
   PatchUserInfo,
   UserInfo,
 } from "../../components/Api/Api";
@@ -30,6 +36,7 @@ import AnimatedContainerNoScroll from "../../components/AnimatedContainer/Animat
 
 export default function UserInfoPage() {
   const queryClient = useQueryClient();
+  // User Info
   const [user, setUser] = useState({
     first_name: "",
     last_name: "",
@@ -67,6 +74,10 @@ export default function UserInfoPage() {
       queryClient.invalidateQueries({ queryKey: ["user"] });
     },
   });
+
+  // Semester
+  const [selected_semester, setSelectedSemester] = useState("");
+  const [semesterOpen, setSemesterOpen] = useState(false);
   const [semesters, setSemesters] = useState([
     { label: "", value: "", shortname: "" },
   ]);
@@ -74,19 +85,106 @@ export default function UserInfoPage() {
     queryKey: ["semesters"],
     queryFn: GetSemesters,
     onSuccess: (data: SemesterParams) => {
+      console.log("Semesters", data[1]);
       let semestersData = data[1].map((semester: Semester) => ({
         label: semester.name,
         value: semester.id,
         shortname: semester.shortname,
       }));
-
       // Update the 'semesters' state
       setSemesters(semestersData);
+      console.log(semesters);
     },
   });
-  const [isEditable, setIsEditable] = useState(false);
-  const subjectOptions = ["", "", "", ""];
 
+  // Subjects
+  const [selected_subjects, setSelectedSubjects] = useState([]);
+  const [subjectsOpen, setSubjectsOpen] = useState(false);
+  const [subjects, setSubjects] = useState([
+    { id: 0, label: "", value: "", shortname: "" },
+  ]);
+
+  const Subjects = useQuery({
+    enabled: StudentInfo.isFetched,
+    queryKey: ["subjects"],
+    queryFn: async () => {
+      let data;
+      if (StudentInfo.data) {
+        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!");
+        }
+      }
+
+      return data;
+    },
+    onSuccess: (data: SubjectParams) => {
+      let subjectsData = data[1].map((subject: Subject) => ({
+        id: Number(subject.id),
+        label: subject.name,
+        value: subject.id,
+        shortname: subject.code,
+      }));
+
+      // Update the 'subjects' state
+      setSubjects(subjectsData);
+    },
+  });
+
+  // Year Level
+  const [selected_yearlevel, setSelectedYearLevel] = useState("");
+  const [yearLevelOpen, setYearLevelOpen] = useState(false);
+  const [year_levels, setYearLevels] = useState([{ label: "", value: "" }]);
+  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([
+    {
+      label: "",
+      value: "",
+    },
+  ]);
+  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
   function Avatar() {
     if (user.avatar) {
       return <Image source={{ uri: user.avatar }} style={styles.profile} />;
@@ -99,20 +197,19 @@ export default function UserInfoPage() {
       );
     }
   }
-  const [selected_subjects, setSelectedSubjects] = useState([]);
+
-  const [subjectsOpen, setSubjectsOpen] = useState(false);
-  const [subjects, setSubjects] = useState([{ label: "", value: "" }]);
   return (
     <View style={styles.background}>
       <AnimatedContainerNoScroll>
-        <Text style={styles.text_white_medium_large}>
+        <View style={styles.flex_row}>
-          {(displayName.first_name || "Undefined") +
-            " " +
-            (displayName.last_name || "User")}
-        </Text>
-        <View>
           <Avatar />
+          <Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
+            {(displayName.first_name || "Undefined") +
+              " " +
+              (displayName.last_name || "User")}
+          </Text>
         </View>
+
         <View style={styles.padding} />
         <View style={styles.flex_row}>
           <View style={{ flex: 1 }}>
@@ -154,15 +251,31 @@ export default function UserInfoPage() {
             <Text style={styles.text_white_small_bold}>Year Level</Text>
           </View>
           <View style={{ flex: 3 }}>
-            <TextInput
+            <DropDownPicker
-              style={styles.input}
+              disabled={!isEditable}
-              editable={isEditable}
+              zIndex={4000}
-              onChange={(
+              open={yearLevelOpen}
-                e: NativeSyntheticEvent<TextInputChangeEventData>
+              value={selected_yearlevel}
-              ): void => {
+              items={year_levels}
-                setUser({ ...user, year_level: e.nativeEvent.text });
+              setOpen={(open) => {
+                setYearLevelOpen(open);
+                setSemesterOpen(false);
+                setCourseOpen(false);
+                setSubjectsOpen(false);
               }}
-              value={user.year_level}
+              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" },
+              }}
+              containerStyle={{ zIndex: 4000 }}
+              dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
             />
           </View>
         </View>
@@ -171,15 +284,31 @@ export default function UserInfoPage() {
             <Text style={styles.text_white_small_bold}>Semester</Text>
           </View>
           <View style={{ flex: 3 }}>
-            <TextInput
+            <DropDownPicker
-              style={styles.input}
+              disabled={!isEditable}
-              editable={isEditable}
+              zIndex={3000}
-              onChange={(
+              open={semesterOpen}
-                e: NativeSyntheticEvent<TextInputChangeEventData>
+              value={selected_semester}
-              ): void => {
+              items={semesters}
-                setUser({ ...user, semester: e.nativeEvent.text });
+              setOpen={(open) => {
+                setYearLevelOpen(false);
+                setSemesterOpen(open);
+                setCourseOpen(false);
+                setSubjectsOpen(false);
               }}
-              value={user.semester}
+              setValue={setSelectedSemester}
+              placeholder={user.semester}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              style={styles.input}
+              textStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              containerStyle={{ zIndex: 3000 }}
+              dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
             />
           </View>
         </View>
@@ -188,15 +317,31 @@ export default function UserInfoPage() {
             <Text style={styles.text_white_small_bold}>Course</Text>
           </View>
           <View style={{ flex: 3 }}>
-            <TextInput
+            <DropDownPicker
-              style={styles.input}
+              disabled={!isEditable}
-              editable={isEditable}
+              zIndex={2000}
-              onChange={(
+              open={courseOpen}
-                e: NativeSyntheticEvent<TextInputChangeEventData>
+              value={selected_course}
-              ): void => {
+              items={courses}
-                setUser({ ...user, course: e.nativeEvent.text });
+              setOpen={(open) => {
+                setYearLevelOpen(false);
+                setSemesterOpen(false);
+                setCourseOpen(open);
+                setSubjectsOpen(false);
               }}
-              value={user.course}
+              setValue={setSelectedCourse}
+              placeholder={user.course}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              style={styles.input}
+              textStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              containerStyle={{ zIndex: 2000 }}
+              dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
             />
           </View>
         </View>
@@ -207,41 +352,57 @@ export default function UserInfoPage() {
           </View>
           <View style={{ flex: 3 }}>
             <DropDownPicker
+              zIndex={1000}
+              disabled={!isEditable}
               multiple={true}
               max={16}
               open={subjectsOpen}
               value={selected_subjects}
               items={subjects}
-              setOpen={(open) => setSubjectsOpen(open)}
+              setOpen={(open) => {
+                setYearLevelOpen(false);
+                setSemesterOpen(false);
+                setCourseOpen(false);
+                setSubjectsOpen(open);
+              }}
               setValue={setSelectedSubjects}
               placeholder="Subjects"
-              placeholderStyle={styles.text_white_tiny}
+              placeholderStyle={{
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
               style={styles.input}
-              textStyle={styles.text_white_small_bold}
+              textStyle={{
-              dropDownContainerStyle={{ backgroundColor: "white" }}
+                ...styles.text_white_tiny_bold,
+                ...{ textAlign: "left" },
+              }}
+              containerStyle={{ zIndex: 12000 }}
+              dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
             />
           </View>
         </View>
-        <Button
+        <View style={{ zIndex: -1 }}>
-          color={colors.secondary_3}
+          <Button
-          onPress={() => {
+            color={colors.secondary_3}
-            if (isEditable) {
+            onPress={() => {
-              mutation.mutate({
+              if (isEditable) {
-                first_name: user.first_name,
+                mutation.mutate({
-                last_name: user.last_name,
+                  first_name: user.first_name,
-                course: user.course,
+                  last_name: user.last_name,
-                semester: user.semester,
+                  course: user.course,
-                subjects: [],
+                  semester: user.semester,
-                year_level: user.year_level,
+                  subjects: [],
-              });
+                  year_level: user.year_level,
-            }
+                });
-            setIsEditable(!isEditable);
+              }
-          }}
+              setIsEditable(!isEditable);
-        >
+            }}
-          <Text style={styles.text_white_small}>
+          >
-            {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
+            <Text style={styles.text_white_small}>
-          </Text>
+              {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
-        </Button>
+            </Text>
+          </Button>
+        </View>
       </AnimatedContainerNoScroll>
     </View>
   );

src/styles.tsx

@@ -141,15 +141,16 @@ const styles = StyleSheet.create({
     alignSelf: "center",
   },
   profile: {
-    height: 96,
+    height: 64,
-    width: 96,
+    width: 64,
     alignSelf: "center",
     borderRadius: 150 / 2,
     overflow: "hidden",
+    padding: 0,
   },
   input: {
     paddingHorizontal: 8,
-    marginVertical: 12,
+    marginVertical: 2,
     borderWidth: 1,
     color: colors.text_default,
     backgroundColor: colors.primary_2,