From e67485d2476bc1fb29c3c127eb22af4bed2fb980 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Mon, 17 Jul 2023 22:44:50 +0800 Subject: [PATCH] Fixed onboarding page --- App.tsx | 17 +-- .../AnimatedContainerNoScroll.tsx | 37 ++++++ src/components/Api/Api.tsx | 23 ++++ src/components/Button/Button.tsx | 20 ++- src/interfaces/Interfaces.tsx | 4 +- src/routes/Onboarding/Onboarding.tsx | 64 ++++++---- .../UserInfoPage.tsx} | 118 ++++++++++-------- src/styles.tsx | 28 +++-- 8 files changed, 201 insertions(+), 110 deletions(-) create mode 100644 src/components/AnimatedContainer/AnimatedContainerNoScroll.tsx rename src/routes/{UserInfo/UserInfo.tsx => UserInfoPage/UserInfoPage.tsx} (70%) diff --git a/App.tsx b/App.tsx index f975afd..06d0623 100644 --- 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 ( - - - + + + + - + - - + + ); } diff --git a/src/components/AnimatedContainer/AnimatedContainerNoScroll.tsx b/src/components/AnimatedContainer/AnimatedContainerNoScroll.tsx new file mode 100644 index 0000000..a3f7c35 --- /dev/null +++ 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 ( + + {props.children} + + ); +} diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx index 33427f6..3187178 100644 --- 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 diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 43aaf84..22e9596 100644 --- 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 ( {props.children} diff --git a/src/interfaces/Interfaces.tsx b/src/interfaces/Interfaces.tsx index 0a0fd9b..05d1c70 100644 --- 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; + +export type SemesterParams = [boolean, Semesters]; export interface YearLevel { id: string; diff --git a/src/routes/Onboarding/Onboarding.tsx b/src/routes/Onboarding/Onboarding.tsx index 8a91f53..56a875d 100644 --- 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(); const dispatch = useDispatch(); @@ -96,7 +98,7 @@ export default function Onboarding() { } return ( - + { - setSemesterOpen(open); - setCourseOpen(false); - setYearLevelOpen(false); - }} - setValue={setSelectedSemester} - placeholder="Current semester" - containerStyle={{ - ...styles.dropdown_template, - ...{ zIndex: 2000 }, - }} - dropDownContainerStyle={{ backgroundColor: "white" }} - /> - + { + setSemesterOpen(open); + setCourseOpen(false); + setYearLevelOpen(false); + }} + setValue={setSelectedSemester} + placeholder="Current semester" + containerStyle={{ + ...styles.input, ...{ zIndex: 1000 }, }} dropDownContainerStyle={{ backgroundColor: "white" }} /> + {error} - {error} - + ); } diff --git a/src/routes/UserInfo/UserInfo.tsx b/src/routes/UserInfoPage/UserInfoPage.tsx similarity index 70% rename from src/routes/UserInfo/UserInfo.tsx rename to src/routes/UserInfoPage/UserInfoPage.tsx index c690a43..cd12cff 100644 --- a/src/routes/UserInfo/UserInfo.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 ; @@ -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 ( - - + + {(displayName.first_name || "Undefined") + " " + @@ -90,7 +116,7 @@ export default function UserInfo() { - First Name + First Name - Last Name + Last Name - Year Level + Year Level - Semester + Semester - Course + Course - Subject + Subjects - { - console.log(selectedItem, index); - }} - renderDropdownIcon={() => } - buttonTextStyle={{ - color: "white", - }} - dropdownStyle={{ - backgroundColor: colors.primary_2, - }} - data={subjectOptions} - buttonStyle={{ - width: "90%", - marginLeft: 10, - backgroundColor: colors.primary_2, - borderRadius: 8, - }} + setSubjectsOpen(open)} + setValue={setSelectedSubjects} + placeholder="Subjects" + style={styles.input} + textStyle={styles.text_white_small_bold} + dropDownContainerStyle={{ backgroundColor: "white" }} /> @@ -218,10 +238,10 @@ export default function UserInfo() { }} > - {isEditable && UserInfo.isSuccess ? "Save" : "Edit Profile"} + {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"} - - + + ); } diff --git a/src/styles.tsx b/src/styles.tsx index 7bc39d6..8ddcfdc 100644 --- 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,