mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2024-11-17 06:19:25 +08:00
Fixed subjectspage and userinfo page being swapped
This commit is contained in:
parent
d6df6d4f7a
commit
ff973ccb0b
2 changed files with 177 additions and 283 deletions
|
|
@ -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<OptionType[]>([]);
|
||||
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<any>([]);
|
||||
const [subjectsOpen, setSubjectsOpen] = useState(false);
|
||||
const [subjectsOpen, setSubjectsOpen] = useState(true);
|
||||
const [subjects, setSubjects] = useState<OptionType[]>([]);
|
||||
|
||||
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<OptionType[]>([]);
|
||||
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<OptionType[]>([]);
|
||||
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() {
|
|||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.padding} />
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>First Name</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
editable={isEditable}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, first_name: e.nativeEvent.text });
|
||||
}}
|
||||
value={user.first_name}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Last Name</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
editable={isEditable}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, last_name: e.nativeEvent.text });
|
||||
}}
|
||||
value={user.last_name}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Year Level</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
disabled={!isEditable}
|
||||
zIndex={4000}
|
||||
open={yearLevelOpen}
|
||||
value={selected_yearlevel}
|
||||
items={year_levels}
|
||||
setOpen={(open) => {
|
||||
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"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Semester</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
disabled={!isEditable}
|
||||
zIndex={3000}
|
||||
open={semesterOpen}
|
||||
value={selected_semester}
|
||||
items={semesters}
|
||||
setOpen={(open) => {
|
||||
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"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Course</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
disabled={!isEditable}
|
||||
zIndex={2000}
|
||||
open={courseOpen}
|
||||
value={selected_course}
|
||||
items={courses}
|
||||
setOpen={(open) => {
|
||||
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"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.padding} />
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
|
|
@ -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);
|
||||
}}
|
||||
>
|
||||
<Text style={styles.text_white_small}>
|
||||
{isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
|
||||
{isEditable && StudentInfo.isSuccess ? "Save" : "Edit Subjects"}
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -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<any>([]);
|
||||
const [subjectsOpen, setSubjectsOpen] = useState(true);
|
||||
const [subjects, setSubjects] = useState<OptionType[]>([]);
|
||||
|
||||
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<OptionType[]>([]);
|
||||
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<OptionType[]>([]);
|
||||
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<OptionType[]>([]);
|
||||
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() {
|
|||
<View style={styles.padding} />
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Subjects</Text>
|
||||
<Text style={styles.text_white_small_bold}>First Name</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
editable={isEditable}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, first_name: e.nativeEvent.text });
|
||||
}}
|
||||
value={user.first_name}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Last Name</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
editable={isEditable}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
setUser({ ...user, last_name: e.nativeEvent.text });
|
||||
}}
|
||||
value={user.last_name}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Year Level</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
zIndex={1000}
|
||||
disabled={!isEditable}
|
||||
multiple={true}
|
||||
max={16}
|
||||
open={subjectsOpen}
|
||||
value={selected_subjects}
|
||||
items={subjects}
|
||||
zIndex={4000}
|
||||
open={yearLevelOpen}
|
||||
value={selected_yearlevel}
|
||||
items={year_levels}
|
||||
setOpen={(open) => {
|
||||
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"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Semester</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
disabled={!isEditable}
|
||||
zIndex={3000}
|
||||
open={semesterOpen}
|
||||
value={selected_semester}
|
||||
items={semesters}
|
||||
setOpen={(open) => {
|
||||
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"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.flex_row}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.text_white_small_bold}>Course</Text>
|
||||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
disabled={!isEditable}
|
||||
zIndex={2000}
|
||||
open={courseOpen}
|
||||
value={selected_course}
|
||||
items={courses}
|
||||
setOpen={(open) => {
|
||||
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"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.padding} />
|
||||
<View style={{ zIndex: -1 }}>
|
||||
<Button
|
||||
color={colors.secondary_3}
|
||||
onPress={() => {
|
||||
if (isEditable) {
|
||||
setSelectedSubjects([]);
|
||||
setSubjectsOpen(false);
|
||||
setYearLevelOpen(false);
|
||||
setSemesterOpen(false);
|
||||
setCourseOpen(false);
|
||||
mutation.mutate({
|
||||
subjects: selected_subjects,
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
course: selected_course,
|
||||
semester: selected_semester,
|
||||
year_level: selected_yearlevel,
|
||||
});
|
||||
}
|
||||
setIsEditable(!isEditable);
|
||||
}}
|
||||
>
|
||||
<Text style={styles.text_white_small}>
|
||||
{isEditable && StudentInfo.isSuccess ? "Save" : "Edit Subjects"}
|
||||
{isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
|
|
|
|||
Loading…
Reference in a new issue