From d6df6d4f7ab8aba2c38caff8c22900093e55c72b Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Tue, 18 Jul 2023 20:51:43 +0800 Subject: [PATCH] Prepare to separate subjects into own page --- src/components/Api/Api.tsx | 4 +- src/routes/SubjectsPage/SubjectsPage.tsx | 442 +++++++++++++++++++++++ src/routes/UserInfoPage/UserInfoPage.tsx | 248 ++----------- 3 files changed, 465 insertions(+), 229 deletions(-) create mode 100644 src/routes/SubjectsPage/SubjectsPage.tsx diff --git a/src/components/Api/Api.tsx b/src/components/Api/Api.tsx index 13c9fd2..58cd659 100644 --- a/src/components/Api/Api.tsx +++ b/src/components/Api/Api.tsx @@ -145,7 +145,7 @@ export async function PatchUserInfo(info: PatchStudentData) { let error_message = ""; if (error.response) error_message = error.response.data; else error_message = "Unable to reach servers"; - console.log(error_message); + // console.log(error_message); return [false, error_message]; }); } @@ -208,7 +208,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) => { diff --git a/src/routes/SubjectsPage/SubjectsPage.tsx b/src/routes/SubjectsPage/SubjectsPage.tsx new file mode 100644 index 0000000..c10dc2b --- /dev/null +++ b/src/routes/SubjectsPage/SubjectsPage.tsx @@ -0,0 +1,442 @@ +import * as React from "react"; +import styles from "../../styles"; +import { + View, + Text, + TextInput, + NativeSyntheticEvent, + TextInputChangeEventData, +} from "react-native"; +import { useState } from "react"; +import { + SemesterParams, + UserInfoParams, + Semester, + SubjectParams, + Subject, + YearLevel, + Course, + OptionType, + Subjects, +} from "../../interfaces/Interfaces"; +import Button from "../../components/Button/Button"; +import { Image } from "react-native"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { + GetCourses, + GetSemesters, + GetSubjects, + GetYearLevels, + PatchUserInfo, + UserInfo, +} from "../../components/Api/Api"; +import { colors } from "../../styles"; +import DropDownPicker from "react-native-dropdown-picker"; +import { ValueType } from "react-native-dropdown-picker"; +import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll"; + +export default function UserInfoPage() { + const queryClient = useQueryClient(); + // User Info + const [user, setUser] = useState({ + first_name: "", + last_name: "", + year_level: "", + yearlevel_shortname: "", + semester: "", + semester_shortname: "", + course: "", + course_shortname: "", + avatar: "", + student_id_number: "", + subjects: [] as Subjects, + }); + const [displayName, setDisplayName] = useState({ + first_name: "", + last_name: "", + }); + const StudentInfo = useQuery({ + queryKey: ["user"], + queryFn: UserInfo, + onSuccess: (data: UserInfoParams) => { + // console.log(data[1]); + setUser({ + ...user, + first_name: data[1].first_name, + last_name: data[1].last_name, + year_level: data[1].year_level, + semester: data[1].semester, + 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, + }); + setSelectedCourse(data[1].course); + setSelectedSemester(data[1].semester); + setSelectedYearLevel(data[1].year_level); + console.log(user.subjects); + setSelectedSubjects(user.subjects); + }, + }); + const mutation = useMutation({ + mutationFn: PatchUserInfo, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["user"] }); + queryClient.invalidateQueries({ queryKey: ["subjects"] }); + setSelectedSubjects([]); + }, + }); + + // Semester + const [selected_semester, setSelectedSemester] = useState(""); + const [semesterOpen, setSemesterOpen] = useState(false); + const [semesters, setSemesters] = useState([]); + 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([]); + const [subjectsOpen, setSubjectsOpen] = useState(false); + const [subjects, setSubjects] = useState([]); + + const Subjects = useQuery({ + enabled: StudentInfo.isFetched && !StudentInfo.isStale, + 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!"); + } + // 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 'subjects' state + setSubjects(subjectsData); + }, + }); + + // Year Level + const [selected_yearlevel, setSelectedYearLevel] = useState(""); + const [yearLevelOpen, setYearLevelOpen] = useState(false); + const [year_levels, setYearLevels] = useState([]); + 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([]); + 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 ; + } else { + return ( + + ); + } + } + + return ( + + + + + + {(displayName.first_name || "Undefined") + + " " + + (displayName.last_name || "User") + + "\n" + + user.student_id_number} + + + + + + + First Name + + + + ): void => { + setUser({ ...user, first_name: e.nativeEvent.text }); + }} + value={user.first_name} + /> + + + + + Last Name + + + + ): void => { + setUser({ ...user, last_name: e.nativeEvent.text }); + }} + value={user.last_name} + /> + + + + + Year Level + + + { + 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" + /> + + + + + Semester + + + { + 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" + /> + + + + + Course + + + { + 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" + /> + + + + + + Subjects + + + { + setYearLevelOpen(false); + setSemesterOpen(false); + setCourseOpen(false); + setSubjectsOpen(open); + }} + setValue={setSelectedSubjects} + 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: 1000, + }} + dropDownDirection="TOP" + /> + + + + + + + + ); +} diff --git a/src/routes/UserInfoPage/UserInfoPage.tsx b/src/routes/UserInfoPage/UserInfoPage.tsx index 4f1af63..ad760a3 100644 --- a/src/routes/UserInfoPage/UserInfoPage.tsx +++ b/src/routes/UserInfoPage/UserInfoPage.tsx @@ -17,6 +17,7 @@ import { YearLevel, Course, OptionType, + Subjects, } from "../../interfaces/Interfaces"; import Button from "../../components/Button/Button"; import { Image } from "react-native"; @@ -34,16 +35,21 @@ 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({ first_name: "", last_name: "", year_level: "", + yearlevel_shortname: "", semester: "", + semester_shortname: "", course: "", + course_shortname: "", avatar: "", + student_id_number: "", + subjects: [] as Subjects, }); const [displayName, setDisplayName] = useState({ first_name: "", @@ -53,6 +59,7 @@ export default function UserInfoPage() { queryKey: ["user"], queryFn: UserInfo, onSuccess: (data: UserInfoParams) => { + // console.log(data[1]); setUser({ ...user, first_name: data[1].first_name, @@ -61,53 +68,34 @@ export default function UserInfoPage() { semester: data[1].semester, 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, }); - setSelectedCourse(data[1].course); - setSelectedSemester(data[1].semester); - setSelectedYearLevel(data[1].year_level); - console.log(data[1].subjects); - if (data[1].subjects) { - setSelectedSubjects(data[1].subjects); - } + console.log(user.subjects); + setSelectedSubjects(user.subjects); }, }); const mutation = useMutation({ mutationFn: PatchUserInfo, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["user"] }); - }, - }); - - // Semester - const [selected_semester, setSelectedSemester] = useState(""); - const [semesterOpen, setSemesterOpen] = useState(false); - const [semesters, setSemesters] = useState([]); - 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); + queryClient.invalidateQueries({ queryKey: ["subjects"] }); + setSelectedSubjects([]); }, }); // Subjects const [selected_subjects, setSelectedSubjects] = useState([]); - const [subjectsOpen, setSubjectsOpen] = useState(false); + const [subjectsOpen, setSubjectsOpen] = useState(true); const [subjects, setSubjects] = useState([]); const Subjects = useQuery({ - enabled: StudentInfo.isFetched, + enabled: StudentInfo.isFetched && !StudentInfo.isStale, queryKey: ["subjects"], queryFn: async () => { let data; @@ -133,7 +121,6 @@ export default function UserInfoPage() { } // console.log("Subjects available:", data[1]); } - return data; }, onSuccess: (data: SubjectParams) => { @@ -147,37 +134,6 @@ export default function UserInfoPage() { }, }); - // Year Level - const [selected_yearlevel, setSelectedYearLevel] = useState(""); - const [yearLevelOpen, setYearLevelOpen] = useState(false); - const [year_levels, setYearLevels] = useState([]); - 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([]); - 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 @@ -202,162 +158,12 @@ export default function UserInfoPage() { {(displayName.first_name || "Undefined") + " " + - (displayName.last_name || "User")} + (displayName.last_name || "User") + + "\n" + + user.student_id_number} - - - - First Name - - - - ): void => { - setUser({ ...user, first_name: e.nativeEvent.text }); - }} - value={user.first_name} - /> - - - - - Last Name - - - - ): void => { - setUser({ ...user, last_name: e.nativeEvent.text }); - }} - value={user.last_name} - /> - - - - - Year Level - - - { - setYearLevelOpen(open); - setSemesterOpen(false); - setCourseOpen(false); - setSubjectsOpen(false); - }} - onChangeValue={() => { - setUser({ ...user, year_level: selected_yearlevel }); - }} - 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" - /> - - - - - Semester - - - { - setYearLevelOpen(false); - setSemesterOpen(open); - setCourseOpen(false); - setSubjectsOpen(false); - }} - onChangeValue={() => { - setUser({ ...user, semester: selected_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" }, - }} - dropDownContainerStyle={{ - backgroundColor: colors.primary_2, - zIndex: 3000, - }} - dropDownDirection="TOP" - /> - - - - - Course - - - { - setYearLevelOpen(false); - setSemesterOpen(false); - setCourseOpen(open); - setSubjectsOpen(false); - }} - onChangeValue={() => { - setUser({ ...user, course: selected_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" }, - }} - dropDownContainerStyle={{ - backgroundColor: colors.primary_2, - zIndex: 2000, - }} - dropDownDirection="TOP" - /> - - @@ -373,13 +179,9 @@ export default function UserInfoPage() { value={selected_subjects} items={subjects} setOpen={(open) => { - setYearLevelOpen(false); - setSemesterOpen(false); - setCourseOpen(false); setSubjectsOpen(open); }} setValue={setSelectedSubjects} - placeholder="View subjects" placeholderStyle={{ ...styles.text_white_tiny_bold, ...{ textAlign: "left" }, @@ -401,26 +203,18 @@ export default function UserInfoPage() {