mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2025-05-17 11:58:06 +08:00
Pray to the gods the duplicate subjects bug is fixed. Move irregular status toggle to user info page from subjects page
This commit is contained in:
parent
283c030b37
commit
3331ccb974
5 changed files with 79 additions and 155 deletions
|
|
@ -28,11 +28,9 @@ export default function Revalidation() {
|
|||
dispatch(login());
|
||||
dispatch(setUser(user_info[1]));
|
||||
if (
|
||||
!(
|
||||
user_info[1].year_level ||
|
||||
user_info[1].course ||
|
||||
user_info[1].semester
|
||||
)
|
||||
!user_info[1].year_level ||
|
||||
!user_info[1].course ||
|
||||
!user_info[1].semester
|
||||
) {
|
||||
dispatch(setOnboarding());
|
||||
await setTimeout(() => {
|
||||
|
|
|
|||
|
|
@ -33,9 +33,11 @@ import {
|
|||
import { colors } from "../../styles";
|
||||
import DropDownPicker from "react-native-dropdown-picker";
|
||||
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
|
||||
import BouncyCheckbox from "react-native-bouncy-checkbox";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../features/redux/Store/Store";
|
||||
|
||||
export default function SubjectsPage() {
|
||||
const logged_in_user = useSelector((state: RootState) => state.user.user);
|
||||
const queryClient = useQueryClient();
|
||||
// User Info
|
||||
const [user, setUser] = useState({
|
||||
|
|
@ -51,15 +53,10 @@ export default function SubjectsPage() {
|
|||
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,
|
||||
|
|
@ -71,31 +68,18 @@ export default function SubjectsPage() {
|
|||
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,
|
||||
});
|
||||
setSelectedSubjects(user.subjects);
|
||||
setSelectedSubjects(data[1].subjects);
|
||||
},
|
||||
});
|
||||
const mutation = useMutation({
|
||||
mutationFn: PatchUserInfo,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["user"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["subjects", viewAll] });
|
||||
queryClient.invalidateQueries({ queryKey: ["subjects"] });
|
||||
setSelectedSubjects([]);
|
||||
},
|
||||
});
|
||||
|
||||
// View all Subjects or only view those under current course, year level, and semester
|
||||
// This is for irregular students
|
||||
const [viewAll, setViewAll] = useState(false);
|
||||
|
||||
// If viewing all subjects, refresh the choices
|
||||
useEffect(() => {
|
||||
queryClient.invalidateQueries({ queryKey: ["subjects", viewAll] });
|
||||
}, [viewAll]);
|
||||
|
||||
// Subjects
|
||||
|
||||
const [selected_subjects, setSelectedSubjects] = useState<any>([]);
|
||||
|
|
@ -104,42 +88,17 @@ export default function SubjectsPage() {
|
|||
|
||||
const Subjects = useQuery({
|
||||
enabled: StudentInfo.isFetched,
|
||||
queryKey: ["subjects", viewAll],
|
||||
queryFn: async () => {
|
||||
let data;
|
||||
if (
|
||||
StudentInfo.data &&
|
||||
StudentInfo.data[1].course_shortname &&
|
||||
StudentInfo.data[1].yearlevel_shortname &&
|
||||
StudentInfo.data[1].semester_shortname
|
||||
) {
|
||||
data = await GetSubjects(
|
||||
viewAll,
|
||||
StudentInfo.data[1].course_shortname,
|
||||
StudentInfo.data[1].yearlevel_shortname,
|
||||
StudentInfo.data[1].semester_shortname
|
||||
);
|
||||
console.log(JSON.stringify(data));
|
||||
}
|
||||
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;
|
||||
},
|
||||
queryKey: ["subjects"],
|
||||
queryFn: GetSubjects,
|
||||
onSuccess: (data: SubjectParams) => {
|
||||
let subjectsData = data[1].map((subject: Subject) => ({
|
||||
label: subject.name,
|
||||
value: subject.name,
|
||||
}));
|
||||
// Update the 'subjects' state
|
||||
setSelectedSubjects(user.subjects);
|
||||
setSubjects(subjectsData);
|
||||
if (data[1]) {
|
||||
let subjects = data[1].map((subject: Subject) => ({
|
||||
label: subject.name,
|
||||
value: subject.name,
|
||||
}));
|
||||
|
||||
setSubjects(subjects);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -163,9 +122,9 @@ export default function SubjectsPage() {
|
|||
<View style={styles.flex_row}>
|
||||
<Avatar />
|
||||
<Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
|
||||
{(displayName.first_name || "Undefined") +
|
||||
{(logged_in_user.first_name || "Undefined") +
|
||||
" " +
|
||||
(displayName.last_name || "User") +
|
||||
(logged_in_user.last_name || "User") +
|
||||
"\n" +
|
||||
user.student_id_number}
|
||||
</Text>
|
||||
|
|
@ -211,22 +170,9 @@ export default function SubjectsPage() {
|
|||
</View>
|
||||
</View>
|
||||
<View style={{ zIndex: -1 }}>
|
||||
<View style={styles.padding} />
|
||||
<View style={styles.flex_row}>
|
||||
<BouncyCheckbox
|
||||
onPress={() => {
|
||||
setViewAll(!viewAll);
|
||||
setSubjectsOpen(false);
|
||||
}}
|
||||
fillColor={colors.secondary_3}
|
||||
/>
|
||||
<Text style={styles.text_white_small}>Irregular </Text>
|
||||
</View>
|
||||
<View style={styles.padding} />
|
||||
<Button
|
||||
onPress={() => {
|
||||
setSelectedSubjects([]);
|
||||
setSubjectsOpen(!subjectsOpen);
|
||||
mutation.mutate({
|
||||
subjects: selected_subjects,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,8 +34,15 @@ import { colors } from "../../styles";
|
|||
import DropDownPicker from "react-native-dropdown-picker";
|
||||
import { ValueType } from "react-native-dropdown-picker";
|
||||
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
|
||||
import BouncyCheckbox from "react-native-bouncy-checkbox";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../features/redux/Store/Store";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setUser as setUserinState } from "../../features/redux/slices/UserSlice/UserSlice";
|
||||
|
||||
export default function UserInfoPage() {
|
||||
const logged_in_user = useSelector((state: RootState) => state.user.user);
|
||||
const dispatch = useDispatch();
|
||||
const queryClient = useQueryClient();
|
||||
// User Info
|
||||
const [user, setUser] = useState({
|
||||
|
|
@ -49,10 +56,7 @@ export default function UserInfoPage() {
|
|||
course_shortname: "",
|
||||
avatar: "",
|
||||
student_id_number: "",
|
||||
});
|
||||
const [displayName, setDisplayName] = useState({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
irregular: false,
|
||||
});
|
||||
const StudentInfo = useQuery({
|
||||
queryKey: ["user"],
|
||||
|
|
@ -68,14 +72,12 @@ export default function UserInfoPage() {
|
|||
course: data[1].course,
|
||||
avatar: data[1].avatar,
|
||||
student_id_number: data[1].student_id_number,
|
||||
});
|
||||
setDisplayName({
|
||||
first_name: data[1].first_name,
|
||||
last_name: data[1].last_name,
|
||||
irregular: data[1].irregular,
|
||||
});
|
||||
setSelectedCourse(data[1].course);
|
||||
setSelectedSemester(data[1].semester);
|
||||
setSelectedYearLevel(data[1].year_level);
|
||||
dispatch(setUserinState(data[1]));
|
||||
},
|
||||
});
|
||||
const mutation = useMutation({
|
||||
|
|
@ -83,6 +85,7 @@ export default function UserInfoPage() {
|
|||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["user"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["subjects"] });
|
||||
dispatch(setUserinState(user));
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -135,8 +138,7 @@ export default function UserInfoPage() {
|
|||
setCourses(courses);
|
||||
},
|
||||
});
|
||||
// Toggle editing of profile
|
||||
const [isEditable, setIsEditable] = useState(false);
|
||||
|
||||
// Profile photo
|
||||
function Avatar() {
|
||||
if (user.avatar) {
|
||||
|
|
@ -157,9 +159,9 @@ export default function UserInfoPage() {
|
|||
<View style={styles.flex_row}>
|
||||
<Avatar />
|
||||
<Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
|
||||
{(displayName.first_name || "Undefined") +
|
||||
{(logged_in_user.first_name || "Undefined") +
|
||||
" " +
|
||||
(displayName.last_name || "User") +
|
||||
(logged_in_user.last_name || "User") +
|
||||
"\n" +
|
||||
user.student_id_number}
|
||||
</Text>
|
||||
|
|
@ -173,7 +175,6 @@ export default function UserInfoPage() {
|
|||
<View style={{ flex: 3 }}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
editable={isEditable}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
|
|
@ -190,7 +191,6 @@ export default function UserInfoPage() {
|
|||
<View style={{ flex: 3 }}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
editable={isEditable}
|
||||
onChange={(
|
||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||
): void => {
|
||||
|
|
@ -206,7 +206,6 @@ export default function UserInfoPage() {
|
|||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
disabled={!isEditable}
|
||||
zIndex={4000}
|
||||
open={yearLevelOpen}
|
||||
value={selected_yearlevel}
|
||||
|
|
@ -242,7 +241,6 @@ export default function UserInfoPage() {
|
|||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
disabled={!isEditable}
|
||||
zIndex={3000}
|
||||
open={semesterOpen}
|
||||
value={selected_semester}
|
||||
|
|
@ -278,7 +276,6 @@ export default function UserInfoPage() {
|
|||
</View>
|
||||
<View style={{ flex: 3 }}>
|
||||
<DropDownPicker
|
||||
disabled={!isEditable}
|
||||
zIndex={2000}
|
||||
open={courseOpen}
|
||||
value={selected_course}
|
||||
|
|
@ -310,26 +307,35 @@ export default function UserInfoPage() {
|
|||
</View>
|
||||
<View style={styles.padding} />
|
||||
<View style={{ zIndex: -1 }}>
|
||||
<View style={styles.flex_row}>
|
||||
<BouncyCheckbox
|
||||
onPress={() => {
|
||||
mutation.mutate({
|
||||
irregular: !user.irregular,
|
||||
});
|
||||
setUser({ ...user, irregular: !user.irregular });
|
||||
}}
|
||||
isChecked={user.irregular}
|
||||
disableBuiltInState
|
||||
fillColor={colors.secondary_3}
|
||||
/>
|
||||
<Text style={styles.text_white_small}>Irregular </Text>
|
||||
</View>
|
||||
<Button
|
||||
onPress={() => {
|
||||
if (isEditable) {
|
||||
setYearLevelOpen(false);
|
||||
setSemesterOpen(false);
|
||||
setCourseOpen(false);
|
||||
mutation.mutate({
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
course: selected_course,
|
||||
semester: selected_semester,
|
||||
year_level: selected_yearlevel,
|
||||
});
|
||||
}
|
||||
setIsEditable(!isEditable);
|
||||
setYearLevelOpen(false);
|
||||
setSemesterOpen(false);
|
||||
setCourseOpen(false);
|
||||
mutation.mutate({
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
course: selected_course,
|
||||
semester: selected_semester,
|
||||
year_level: selected_yearlevel,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Text style={styles.text_white_small}>
|
||||
{isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
|
||||
</Text>
|
||||
<Text style={styles.text_white_small}>Save Changes</Text>
|
||||
</Button>
|
||||
</View>
|
||||
</AnimatedContainerNoScroll>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue