diff --git a/src/routes/SubjectsPage/SubjectsPage.tsx b/src/routes/SubjectsPage/SubjectsPage.tsx index c10dc2b..ad760a3 100644 --- a/src/routes/SubjectsPage/SubjectsPage.tsx +++ b/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([]); - 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 [subjectsOpen, setSubjectsOpen] = useState(true); const [subjects, setSubjects] = useState([]); 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([]); - 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 @@ -216,161 +164,6 @@ export default function UserInfoPage() { - - - - 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" - /> - - @@ -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); }} > - {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"} + {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Subjects"} diff --git a/src/routes/UserInfoPage/UserInfoPage.tsx b/src/routes/UserInfoPage/UserInfoPage.tsx index ad760a3..10895c5 100644 --- a/src/routes/UserInfoPage/UserInfoPage.tsx +++ b/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); - setSelectedSubjects(user.subjects); + setSelectedCourse(data[1].course); + 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 - - const [selected_subjects, setSelectedSubjects] = useState([]); - const [subjectsOpen, setSubjectsOpen] = useState(true); - 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, + // 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 'subjects' state - setSubjects(subjectsData); + // Update the 'semesters' state + setSemesters(semestersData); }, }); + // 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 @@ -167,21 +168,56 @@ export default function SubjectsPage() { - Subjects + 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 { - 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" /> + + + Semester + + + { + 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" + /> + + + + + Course + + + { + 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" + /> + + +