Fixed onboarding page

2024-11-17 06:19:25 +08:00 · 2023-07-17 22:44:50 +08:00 · 2023-07-17 22:44:50 +08:00 · e67485d247
commit e67485d247
parent 8de8e67070
8 changed files with 201 additions and 110 deletions
--- a/App.tsx
+++ b/App.tsx
@ -16,10 +16,10 @@ import Register from "./src/routes/Register/Register";
 import Onboarding from "./src/routes/Onboarding/Onboarding";
 import Revalidation from "./src/routes/Revalidation/Revalidation";
 import Activation from "./src/routes/Activation/Activation";
-import UserInfo from "./src/routes/UserInfo/UserInfo";
 import { useState, useEffect } from "react";
-import { QueryClientProvider, QueryClient } from "react-query";
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { StatusBar } from "expo-status-bar";
+import UserInfoPage from "./src/routes/UserInfoPage/UserInfoPage";

 const Drawer = createDrawerNavigator();

@ -54,9 +54,10 @@ export default function App() {
    }
  }, [initialRoute]);
  return (
-    <Provider store={store}>
-      <StatusBar style="light" />
-      <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={queryClient}>
+      <Provider store={store}>
+        <StatusBar style="light" />
+
        <NavigationContainer linking={linking}>
          <Drawer.Navigator
            initialRouteName="Revalidation"
@ -69,10 +70,10 @@ export default function App() {
            <Drawer.Screen name="Onboarding" component={Onboarding} />
            <Drawer.Screen name="Revalidation" component={Revalidation} />
            <Drawer.Screen name="Activation" component={Activation} />
-            <Drawer.Screen name="User Info" component={UserInfo} />
+            <Drawer.Screen name="User Info" component={UserInfoPage} />
          </Drawer.Navigator>
        </NavigationContainer>
-      </QueryClientProvider>
-    </Provider>
+      </Provider>
+    </QueryClientProvider>
  );
 }
--- a/src/components/AnimatedContainer/AnimatedContainerNoScroll.tsx
+++ b/src/components/AnimatedContainer/AnimatedContainerNoScroll.tsx
@ -0,0 +1,37 @@
+import * as React from "react";
+import { View, Text, ScrollView } from "react-native";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import { MotiView, MotiScrollView } from "moti";
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function AnimatedContainerNoScroll(props: props) {
+  return (
+    <MotiView
+      style={styles.container}
+      from={{
+        borderRadius: 0,
+        opacity: 0,
+        backgroundColor: colors.secondary_2,
+        paddingTop: 4,
+        paddingBottom: 4,
+        marginHorizontal: "4%",
+        marginVertical: "10%",
+      }}
+      animate={{
+        borderRadius: 15,
+        opacity: 1,
+        backgroundColor: colors.secondary_2,
+        paddingTop: 16,
+        paddingBottom: 16,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
+      }}
+      transition={{ type: "timing", duration: 700 }}
+    >
+      {props.children}
+    </MotiView>
+  );
+}
--- a/src/components/Api/Api.tsx
+++ b/src/components/Api/Api.tsx
@ -218,6 +218,29 @@ export async function GetYearLevels() {
    });
 }

+export async function GetSubjects(
+  course: string,
+  year_level: string,
+  semester: string
+) {
+  const config = await GetConfig();
+  return instance
+    .get(
+      "/api/v1/subjects/" + course + "/" + year_level + "/" + semester,
+      config
+    )
+    .then((response) => {
+      // console.log(JSON.stringify(response.data));
+      return [true, response.data];
+    })
+    .catch((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 OnboardingUpdateStudentInfo(info: OnboardingParams) {
  const config = await GetConfig();
  return instance
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@ -5,26 +5,20 @@ import styles from "../../styles";
 export interface props {
  children: React.ReactNode;
  onPress: (event: GestureResponderEvent) => void;
-  color: string;
+  color?: string;
  disabled?: boolean;
 }

-export default function Button({ disabled = false, ...props }: props) {
-  const rgb = props.color.match(/\d+/g);
+export default function Button({
+  disabled = false,
+  color = "rgba(52, 52, 52, 0.8)",
+  ...props
+}: props) {
  return (
    <Pressable
      disabled={disabled}
      onPress={props.onPress}
-      style={{
-        ...styles.button_template,
-        ...{
-          backgroundColor: disabled
-            ? rgb
-              ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.3)`
-              : "rgba(0, 0, 0, 0)"
-            : props.color,
-        },
-      }}
+      style={styles.button_template}
    >
      {props.children}
    </Pressable>
--- a/src/interfaces/Interfaces.tsx
+++ b/src/interfaces/Interfaces.tsx
@ -53,7 +53,9 @@ export interface Semester {
  shortname: string;
 }

-export type SemesterParams = [boolean, Semester];
+export type Semesters = Array<Semester>;
+
+export type SemesterParams = [boolean, Semesters];

 export interface YearLevel {
  id: string;
--- a/src/routes/Onboarding/Onboarding.tsx
+++ b/src/routes/Onboarding/Onboarding.tsx
@ -23,6 +23,8 @@ import {
 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";
 export default function Onboarding() {
  const navigation = useNavigation<RootDrawerParamList>();
  const dispatch = useDispatch();
@ -96,7 +98,7 @@ export default function Onboarding() {
  }
  return (
    <View style={styles.background}>
-      <View style={styles.container}>
+      <AnimatedContainerNoScroll>
        <MotiView
          from={{ opacity: 0 }}
          animate={{ opacity: 1 }}
@ -146,31 +148,13 @@ export default function Onboarding() {
            setValue={setSelectedCourse}
            placeholder="Choose your course"
            containerStyle={{
-              ...styles.dropdown_template,
+              ...styles.input,
              ...{ zIndex: 3000 },
            }}
            dropDownContainerStyle={{ backgroundColor: "white" }}
          />
          <DropDownPicker
            zIndex={2000}
-            open={semesterOpen}
-            value={selected_semester}
-            items={semesters}
-            setOpen={(open) => {
-              setSemesterOpen(open);
-              setCourseOpen(false);
-              setYearLevelOpen(false);
-            }}
-            setValue={setSelectedSemester}
-            placeholder="Current semester"
-            containerStyle={{
-              ...styles.dropdown_template,
-              ...{ zIndex: 2000 },
-            }}
-            dropDownContainerStyle={{ backgroundColor: "white" }}
-          />
-          <DropDownPicker
-            zIndex={1000}
            open={yearLevelOpen}
            value={selected_yearlevel}
            items={year_levels}
@ -182,19 +166,46 @@ export default function Onboarding() {
            setValue={setSelectedYearLevel}
            placeholder="Your Year Level"
            containerStyle={{
-              ...styles.dropdown_template,
+              ...styles.input,
+              ...{ zIndex: 2000 },
+            }}
+            dropDownContainerStyle={{ backgroundColor: "white" }}
+          />
+          <DropDownPicker
+            zIndex={1000}
+            open={semesterOpen}
+            value={selected_semester}
+            items={semesters}
+            setOpen={(open) => {
+              setSemesterOpen(open);
+              setCourseOpen(false);
+              setYearLevelOpen(false);
+            }}
+            setValue={setSelectedSemester}
+            placeholder="Current semester"
+            containerStyle={{
+              ...styles.input,
              ...{ zIndex: 1000 },
            }}
            dropDownContainerStyle={{ backgroundColor: "white" }}
          />
        </MotiView>
+        <Text style={styles.text_white_small}>{error}</Text>
        <MotiView
-          from={{ opacity: 0 }}
-          animate={{ opacity: 1, zIndex: -1 }}
+          from={{
+            opacity: 0,
+            zIndex: -1,
+          }}
+          animate={{
+            opacity: 1,
+            zIndex: -1,
+          }}
          transition={{ type: "timing", duration: 400, delay: 1700 }}
-          style={styles.button_template}
+          style={{
+            ...styles.button_template,
+            ...{ padding: 0, backgroundColor: colors.secondary_3 },
+          }}
        >
-          <Text style={styles.text_white_small}>{error}</Text>
          <Button
            disabled={
              !selected_yearlevel || !selected_course || !selected_semester
@ -217,12 +228,11 @@ export default function Onboarding() {
                setError(result[1]);
              }
            }}
-            color={colors.secondary_3}
          >
            <Text style={styles.text_white_small}>Proceed</Text>
          </Button>
        </MotiView>
-      </View>
+      </AnimatedContainerNoScroll>
    </View>
  );
 }
--- a/src/routes/UserInfoPage/UserInfoPage.tsx
+++ b/src/routes/UserInfoPage/UserInfoPage.tsx
@ -11,23 +11,40 @@ import { useState } from "react";
 import { useNavigation } from "@react-navigation/native";
 import {
  RootDrawerParamList,
+  SemesterParams,
  UserInfoParams,
+  Semester,
 } from "../../interfaces/Interfaces";
 import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 import { TouchableOpacity, Image } from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import SelectDropdown from "react-native-select-dropdown";
-import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
-  UserInfo as GetUserInfo,
+  GetSemesters,
+  GetSubjects,
  PatchUserInfo,
+  UserInfo,
 } from "../../components/Api/Api";
 import { colors } from "../../styles";
+import DropDownPicker from "react-native-dropdown-picker";
+import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";

-export default function UserInfo() {
+export default function UserInfoPage() {
  const queryClient = useQueryClient();
-  const UserInfo = useQuery("user", GetUserInfo, {
+  const [user, setUser] = useState({
+    first_name: "",
+    last_name: "",
+    year_level: "",
+    semester: "",
+    course: "",
+    avatar: "",
+  });
+  const [displayName, setDisplayName] = useState({
+    first_name: "",
+    last_name: "",
+  });
+  const StudentInfo = useQuery({
+    queryKey: ["user"],
+    queryFn: UserInfo,
    onSuccess: (data: UserInfoParams) => {
      setUser({
        ...user,
@ -47,23 +64,29 @@ export default function UserInfo() {
  const mutation = useMutation({
    mutationFn: PatchUserInfo,
    onSuccess: () => {
-      queryClient.invalidateQueries("user");
+      queryClient.invalidateQueries({ queryKey: ["user"] });
+    },
+  });
+  const [semesters, setSemesters] = useState([
+    { label: "", value: "", shortname: "" },
+  ]);
+  const Semesters = useQuery({
+    queryKey: ["semesters"],
+    queryFn: GetSemesters,
+    onSuccess: (data: SemesterParams) => {
+      let semestersData = data[1].map((semester: Semester) => ({
+        label: semester.name,
+        value: semester.id,
+        shortname: semester.shortname,
+      }));
+
+      // Update the 'semesters' state
+      setSemesters(semestersData);
    },
  });
  const [isEditable, setIsEditable] = useState(false);
  const subjectOptions = ["", "", "", ""];
-  const [user, setUser] = useState({
-    first_name: "",
-    last_name: "",
-    year_level: "",
-    semester: "",
-    course: "",
-    avatar: "",
-  });
-  const [displayName, setDisplayName] = useState({
-    first_name: "",
-    last_name: "",
-  });
+
  function Avatar() {
    if (user.avatar) {
      return <Image source={{ uri: user.avatar }} style={styles.profile} />;
@ -76,9 +99,12 @@ export default function UserInfo() {
      );
    }
  }
+  const [selected_subjects, setSelectedSubjects] = useState([]);
+  const [subjectsOpen, setSubjectsOpen] = useState(false);
+  const [subjects, setSubjects] = useState([{ label: "", value: "" }]);
  return (
-    <ScrollView style={styles.background}>
-      <AnimatedContainer>
+    <View style={styles.background}>
+      <AnimatedContainerNoScroll>
        <Text style={styles.text_white_medium_large}>
          {(displayName.first_name || "Undefined") +
            " " +
@ -90,7 +116,7 @@ export default function UserInfo() {
        <View style={styles.padding} />
        <View style={styles.flex_row}>
          <View style={{ flex: 1 }}>
-            <Text style={styles.text}>First Name</Text>
+            <Text style={styles.text_white_small_bold}>First Name</Text>
          </View>
          <View style={{ flex: 3 }}>
            <TextInput
@ -107,7 +133,7 @@ export default function UserInfo() {
        </View>
        <View style={styles.flex_row}>
          <View style={{ flex: 1 }}>
-            <Text style={styles.text}>Last Name</Text>
+            <Text style={styles.text_white_small_bold}>Last Name</Text>
          </View>
          <View style={{ flex: 3 }}>
            <TextInput
@ -125,7 +151,7 @@ export default function UserInfo() {
        <View style={styles.padding} />
        <View style={styles.flex_row}>
          <View style={{ flex: 1 }}>
-            <Text style={styles.text}>Year Level</Text>
+            <Text style={styles.text_white_small_bold}>Year Level</Text>
          </View>
          <View style={{ flex: 3 }}>
            <TextInput
@ -142,7 +168,7 @@ export default function UserInfo() {
        </View>
        <View style={styles.flex_row}>
          <View style={{ flex: 1 }}>
-            <Text style={styles.text}>Semester</Text>
+            <Text style={styles.text_white_small_bold}>Semester</Text>
          </View>
          <View style={{ flex: 3 }}>
            <TextInput
@ -159,7 +185,7 @@ export default function UserInfo() {
        </View>
        <View style={styles.flex_row}>
          <View style={{ flex: 1 }}>
-            <Text style={styles.text}>Course</Text>
+            <Text style={styles.text_white_small_bold}>Course</Text>
          </View>
          <View style={{ flex: 3 }}>
            <TextInput
@ -177,27 +203,21 @@ export default function UserInfo() {
        <View style={styles.padding} />
        <View style={styles.flex_row}>
          <View style={{ flex: 1 }}>
-            <Text style={styles.text}>Subject</Text>
+            <Text style={styles.text_white_small_bold}>Subjects</Text>
          </View>
          <View style={{ flex: 3 }}>
-            <SelectDropdown
-              onSelect={(selectedItem, index) => {
-                console.log(selectedItem, index);
-              }}
-              renderDropdownIcon={() => <DropdownIcon size={32} />}
-              buttonTextStyle={{
-                color: "white",
-              }}
-              dropdownStyle={{
-                backgroundColor: colors.primary_2,
-              }}
-              data={subjectOptions}
-              buttonStyle={{
-                width: "90%",
-                marginLeft: 10,
-                backgroundColor: colors.primary_2,
-                borderRadius: 8,
-              }}
+            <DropDownPicker
+              multiple={true}
+              max={16}
+              open={subjectsOpen}
+              value={selected_subjects}
+              items={subjects}
+              setOpen={(open) => setSubjectsOpen(open)}
+              setValue={setSelectedSubjects}
+              placeholder="Subjects"
+              style={styles.input}
+              textStyle={styles.text_white_small_bold}
+              dropDownContainerStyle={{ backgroundColor: "white" }}
            />
          </View>
        </View>
@ -218,10 +238,10 @@ export default function UserInfo() {
          }}
        >
          <Text style={styles.text_white_small}>
-            {isEditable && UserInfo.isSuccess ? "Save" : "Edit Profile"}
+            {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
          </Text>
        </TouchableOpacity>
-      </AnimatedContainer>
-    </ScrollView>
+      </AnimatedContainerNoScroll>
+    </View>
  );
 }
--- a/src/styles.tsx
+++ b/src/styles.tsx
@ -94,6 +94,18 @@ const styles = StyleSheet.create({
    fontWeight: "bold",
    textAlign: "center",
  },
+  text_white_small_bold: {
+    color: colors.text_default,
+    fontSize: font_sizes.small,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_white_tiny_bold: {
+    color: colors.text_default,
+    fontSize: font_sizes.tiny,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
  button_template: {
    justifyContent: "center",
    alignSelf: "center",
@ -117,9 +129,10 @@ const styles = StyleSheet.create({
    width: width * 0.5,
  },
  dropdown_template: {
-    borderRadius: 16,
+    backgroundColor: colors.primary_2,
+    containerStyle: colors.primary_2,
+    borderRadius: 8,
    width: "70%",
-    marginVertical: 6,
  },
  map: {
    flex: 1,
@ -135,21 +148,12 @@ const styles = StyleSheet.create({
    overflow: "hidden",
  },
  input: {
-    height: 40,
-    margin: 12,
-    marginRight: 30,
+    marginVertical: 12,
    borderWidth: 1,
    color: colors.text_default,
    backgroundColor: colors.primary_2,
    borderRadius: 8,
    borderColor: colors.primary_3,
-    padding: 8,
-  },
-  text: {
-    marginLeft: 5,
-    color: colors.text_default,
-    fontSize: font_sizes.small,
-    fontWeight: "bold",
  },
  padding: {
    paddingVertical: 8,