mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2024-11-17 06:19:25 +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
|
@ -11,7 +11,7 @@ import {
|
||||||
|
|
||||||
export let backendURL = "";
|
export let backendURL = "";
|
||||||
export let backendURLWebsocket = "";
|
export let backendURLWebsocket = "";
|
||||||
let use_production = true;
|
let use_production = false;
|
||||||
if (__DEV__ && !use_production) {
|
if (__DEV__ && !use_production) {
|
||||||
backendURL = "http://10.0.10.8:8000";
|
backendURL = "http://10.0.10.8:8000";
|
||||||
backendURLWebsocket = "ws://10.0.10.8:8000";
|
backendURLWebsocket = "ws://10.0.10.8:8000";
|
||||||
|
@ -224,23 +224,11 @@ export async function GetYearLevels() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function GetSubjects(
|
export async function GetSubjects() {
|
||||||
byCourseOnly: boolean,
|
|
||||||
course: string,
|
|
||||||
year_level?: string,
|
|
||||||
semester?: string
|
|
||||||
) {
|
|
||||||
const config = await GetConfig();
|
const config = await GetConfig();
|
||||||
console.log("by course only?", byCourseOnly);
|
|
||||||
// If year level and semester specified,
|
|
||||||
if (!byCourseOnly && year_level && semester) {
|
|
||||||
return instance
|
return instance
|
||||||
.get(
|
.get("/api/v1/subjects/", config)
|
||||||
"/api/v1/subjects/" + course + "/" + year_level + "/" + semester,
|
|
||||||
config
|
|
||||||
)
|
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
// console.log(JSON.stringify(response.data));
|
|
||||||
return [true, response.data];
|
return [true, response.data];
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
|
@ -250,22 +238,6 @@ export async function GetSubjects(
|
||||||
return [false, error_message];
|
return [false, error_message];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// If only course is specified
|
|
||||||
else {
|
|
||||||
return instance
|
|
||||||
.get("/api/v1/subjects/" + course, 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) {
|
export async function OnboardingUpdateStudentInfo(info: OnboardingParams) {
|
||||||
const config = await GetConfig();
|
const config = await GetConfig();
|
||||||
|
|
|
@ -85,11 +85,12 @@ export type CourseParams = [boolean, Courses];
|
||||||
|
|
||||||
// Subject
|
// Subject
|
||||||
export interface Subject {
|
export interface Subject {
|
||||||
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
code: string;
|
code: string;
|
||||||
// courses: any[]; // To-do
|
course: string;
|
||||||
// year_levels: any[]; // To-do
|
year_level: string;
|
||||||
// semesters: any[]; // To-do
|
semester: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type Subjects = Array<Subject>;
|
export type Subjects = Array<Subject>;
|
||||||
|
@ -110,6 +111,7 @@ export interface PatchStudentData {
|
||||||
semester?: string | null;
|
semester?: string | null;
|
||||||
subjects?: any[] | null; // To-do, replace 'any' with your actual type
|
subjects?: any[] | null; // To-do, replace 'any' with your actual type
|
||||||
year_level?: string | null;
|
year_level?: string | null;
|
||||||
|
irregular?: boolean | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface StudentData {
|
export interface StudentData {
|
||||||
|
@ -118,14 +120,14 @@ export interface StudentData {
|
||||||
email: string;
|
email: string;
|
||||||
avatar: string;
|
avatar: string;
|
||||||
student_id_number: string;
|
student_id_number: string;
|
||||||
is_banned: boolean;
|
irregular: boolean;
|
||||||
semester: string;
|
semester: string;
|
||||||
semester_shortname: string;
|
semester_shortname: string;
|
||||||
course: string;
|
course: string;
|
||||||
course_shortname: string;
|
course_shortname: string;
|
||||||
year_level: string;
|
year_level: string;
|
||||||
yearlevel_shortname: string;
|
yearlevel_shortname: string;
|
||||||
subjects: any[]; // To-do
|
subjects: Subject[]; // To-do
|
||||||
username: string;
|
username: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -28,11 +28,9 @@ export default function Revalidation() {
|
||||||
dispatch(login());
|
dispatch(login());
|
||||||
dispatch(setUser(user_info[1]));
|
dispatch(setUser(user_info[1]));
|
||||||
if (
|
if (
|
||||||
!(
|
!user_info[1].year_level ||
|
||||||
user_info[1].year_level ||
|
!user_info[1].course ||
|
||||||
user_info[1].course ||
|
!user_info[1].semester
|
||||||
user_info[1].semester
|
|
||||||
)
|
|
||||||
) {
|
) {
|
||||||
dispatch(setOnboarding());
|
dispatch(setOnboarding());
|
||||||
await setTimeout(() => {
|
await setTimeout(() => {
|
||||||
|
|
|
@ -33,9 +33,11 @@ import {
|
||||||
import { colors } from "../../styles";
|
import { colors } from "../../styles";
|
||||||
import DropDownPicker from "react-native-dropdown-picker";
|
import DropDownPicker from "react-native-dropdown-picker";
|
||||||
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
|
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() {
|
export default function SubjectsPage() {
|
||||||
|
const logged_in_user = useSelector((state: RootState) => state.user.user);
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
// User Info
|
// User Info
|
||||||
const [user, setUser] = useState({
|
const [user, setUser] = useState({
|
||||||
|
@ -51,15 +53,10 @@ export default function SubjectsPage() {
|
||||||
student_id_number: "",
|
student_id_number: "",
|
||||||
subjects: [] as Subjects,
|
subjects: [] as Subjects,
|
||||||
});
|
});
|
||||||
const [displayName, setDisplayName] = useState({
|
|
||||||
first_name: "",
|
|
||||||
last_name: "",
|
|
||||||
});
|
|
||||||
const StudentInfo = useQuery({
|
const StudentInfo = useQuery({
|
||||||
queryKey: ["user"],
|
queryKey: ["user"],
|
||||||
queryFn: UserInfo,
|
queryFn: UserInfo,
|
||||||
onSuccess: (data: UserInfoParams) => {
|
onSuccess: (data: UserInfoParams) => {
|
||||||
// console.log(data[1]);
|
|
||||||
setUser({
|
setUser({
|
||||||
...user,
|
...user,
|
||||||
first_name: data[1].first_name,
|
first_name: data[1].first_name,
|
||||||
|
@ -71,31 +68,18 @@ export default function SubjectsPage() {
|
||||||
student_id_number: data[1].student_id_number,
|
student_id_number: data[1].student_id_number,
|
||||||
subjects: data[1].subjects,
|
subjects: data[1].subjects,
|
||||||
});
|
});
|
||||||
setDisplayName({
|
setSelectedSubjects(data[1].subjects);
|
||||||
first_name: data[1].first_name,
|
|
||||||
last_name: data[1].last_name,
|
|
||||||
});
|
|
||||||
setSelectedSubjects(user.subjects);
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: PatchUserInfo,
|
mutationFn: PatchUserInfo,
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ["user"] });
|
queryClient.invalidateQueries({ queryKey: ["user"] });
|
||||||
queryClient.invalidateQueries({ queryKey: ["subjects", viewAll] });
|
queryClient.invalidateQueries({ queryKey: ["subjects"] });
|
||||||
setSelectedSubjects([]);
|
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
|
// Subjects
|
||||||
|
|
||||||
const [selected_subjects, setSelectedSubjects] = useState<any>([]);
|
const [selected_subjects, setSelectedSubjects] = useState<any>([]);
|
||||||
|
@ -104,42 +88,17 @@ export default function SubjectsPage() {
|
||||||
|
|
||||||
const Subjects = useQuery({
|
const Subjects = useQuery({
|
||||||
enabled: StudentInfo.isFetched,
|
enabled: StudentInfo.isFetched,
|
||||||
queryKey: ["subjects", viewAll],
|
queryKey: ["subjects"],
|
||||||
queryFn: async () => {
|
queryFn: GetSubjects,
|
||||||
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;
|
|
||||||
},
|
|
||||||
onSuccess: (data: SubjectParams) => {
|
onSuccess: (data: SubjectParams) => {
|
||||||
let subjectsData = data[1].map((subject: Subject) => ({
|
if (data[1]) {
|
||||||
|
let subjects = data[1].map((subject: Subject) => ({
|
||||||
label: subject.name,
|
label: subject.name,
|
||||||
value: subject.name,
|
value: subject.name,
|
||||||
}));
|
}));
|
||||||
// Update the 'subjects' state
|
|
||||||
setSelectedSubjects(user.subjects);
|
setSubjects(subjects);
|
||||||
setSubjects(subjectsData);
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -163,9 +122,9 @@ export default function SubjectsPage() {
|
||||||
<View style={styles.flex_row}>
|
<View style={styles.flex_row}>
|
||||||
<Avatar />
|
<Avatar />
|
||||||
<Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
|
<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" +
|
"\n" +
|
||||||
user.student_id_number}
|
user.student_id_number}
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -211,22 +170,9 @@ export default function SubjectsPage() {
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View style={{ zIndex: -1 }}>
|
<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} />
|
<View style={styles.padding} />
|
||||||
<Button
|
<Button
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
setSelectedSubjects([]);
|
|
||||||
setSubjectsOpen(!subjectsOpen);
|
|
||||||
mutation.mutate({
|
mutation.mutate({
|
||||||
subjects: selected_subjects,
|
subjects: selected_subjects,
|
||||||
});
|
});
|
||||||
|
|
|
@ -34,8 +34,15 @@ import { colors } from "../../styles";
|
||||||
import DropDownPicker from "react-native-dropdown-picker";
|
import DropDownPicker from "react-native-dropdown-picker";
|
||||||
import { ValueType } from "react-native-dropdown-picker";
|
import { ValueType } from "react-native-dropdown-picker";
|
||||||
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
|
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() {
|
export default function UserInfoPage() {
|
||||||
|
const logged_in_user = useSelector((state: RootState) => state.user.user);
|
||||||
|
const dispatch = useDispatch();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
// User Info
|
// User Info
|
||||||
const [user, setUser] = useState({
|
const [user, setUser] = useState({
|
||||||
|
@ -49,10 +56,7 @@ export default function UserInfoPage() {
|
||||||
course_shortname: "",
|
course_shortname: "",
|
||||||
avatar: "",
|
avatar: "",
|
||||||
student_id_number: "",
|
student_id_number: "",
|
||||||
});
|
irregular: false,
|
||||||
const [displayName, setDisplayName] = useState({
|
|
||||||
first_name: "",
|
|
||||||
last_name: "",
|
|
||||||
});
|
});
|
||||||
const StudentInfo = useQuery({
|
const StudentInfo = useQuery({
|
||||||
queryKey: ["user"],
|
queryKey: ["user"],
|
||||||
|
@ -68,14 +72,12 @@ export default function UserInfoPage() {
|
||||||
course: data[1].course,
|
course: data[1].course,
|
||||||
avatar: data[1].avatar,
|
avatar: data[1].avatar,
|
||||||
student_id_number: data[1].student_id_number,
|
student_id_number: data[1].student_id_number,
|
||||||
});
|
irregular: data[1].irregular,
|
||||||
setDisplayName({
|
|
||||||
first_name: data[1].first_name,
|
|
||||||
last_name: data[1].last_name,
|
|
||||||
});
|
});
|
||||||
setSelectedCourse(data[1].course);
|
setSelectedCourse(data[1].course);
|
||||||
setSelectedSemester(data[1].semester);
|
setSelectedSemester(data[1].semester);
|
||||||
setSelectedYearLevel(data[1].year_level);
|
setSelectedYearLevel(data[1].year_level);
|
||||||
|
dispatch(setUserinState(data[1]));
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
|
@ -83,6 +85,7 @@ export default function UserInfoPage() {
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ["user"] });
|
queryClient.invalidateQueries({ queryKey: ["user"] });
|
||||||
queryClient.invalidateQueries({ queryKey: ["subjects"] });
|
queryClient.invalidateQueries({ queryKey: ["subjects"] });
|
||||||
|
dispatch(setUserinState(user));
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -135,8 +138,7 @@ export default function UserInfoPage() {
|
||||||
setCourses(courses);
|
setCourses(courses);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
// Toggle editing of profile
|
|
||||||
const [isEditable, setIsEditable] = useState(false);
|
|
||||||
// Profile photo
|
// Profile photo
|
||||||
function Avatar() {
|
function Avatar() {
|
||||||
if (user.avatar) {
|
if (user.avatar) {
|
||||||
|
@ -157,9 +159,9 @@ export default function UserInfoPage() {
|
||||||
<View style={styles.flex_row}>
|
<View style={styles.flex_row}>
|
||||||
<Avatar />
|
<Avatar />
|
||||||
<Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
|
<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" +
|
"\n" +
|
||||||
user.student_id_number}
|
user.student_id_number}
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -173,7 +175,6 @@ export default function UserInfoPage() {
|
||||||
<View style={{ flex: 3 }}>
|
<View style={{ flex: 3 }}>
|
||||||
<TextInput
|
<TextInput
|
||||||
style={styles.input}
|
style={styles.input}
|
||||||
editable={isEditable}
|
|
||||||
onChange={(
|
onChange={(
|
||||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||||
): void => {
|
): void => {
|
||||||
|
@ -190,7 +191,6 @@ export default function UserInfoPage() {
|
||||||
<View style={{ flex: 3 }}>
|
<View style={{ flex: 3 }}>
|
||||||
<TextInput
|
<TextInput
|
||||||
style={styles.input}
|
style={styles.input}
|
||||||
editable={isEditable}
|
|
||||||
onChange={(
|
onChange={(
|
||||||
e: NativeSyntheticEvent<TextInputChangeEventData>
|
e: NativeSyntheticEvent<TextInputChangeEventData>
|
||||||
): void => {
|
): void => {
|
||||||
|
@ -206,7 +206,6 @@ export default function UserInfoPage() {
|
||||||
</View>
|
</View>
|
||||||
<View style={{ flex: 3 }}>
|
<View style={{ flex: 3 }}>
|
||||||
<DropDownPicker
|
<DropDownPicker
|
||||||
disabled={!isEditable}
|
|
||||||
zIndex={4000}
|
zIndex={4000}
|
||||||
open={yearLevelOpen}
|
open={yearLevelOpen}
|
||||||
value={selected_yearlevel}
|
value={selected_yearlevel}
|
||||||
|
@ -242,7 +241,6 @@ export default function UserInfoPage() {
|
||||||
</View>
|
</View>
|
||||||
<View style={{ flex: 3 }}>
|
<View style={{ flex: 3 }}>
|
||||||
<DropDownPicker
|
<DropDownPicker
|
||||||
disabled={!isEditable}
|
|
||||||
zIndex={3000}
|
zIndex={3000}
|
||||||
open={semesterOpen}
|
open={semesterOpen}
|
||||||
value={selected_semester}
|
value={selected_semester}
|
||||||
|
@ -278,7 +276,6 @@ export default function UserInfoPage() {
|
||||||
</View>
|
</View>
|
||||||
<View style={{ flex: 3 }}>
|
<View style={{ flex: 3 }}>
|
||||||
<DropDownPicker
|
<DropDownPicker
|
||||||
disabled={!isEditable}
|
|
||||||
zIndex={2000}
|
zIndex={2000}
|
||||||
open={courseOpen}
|
open={courseOpen}
|
||||||
value={selected_course}
|
value={selected_course}
|
||||||
|
@ -310,9 +307,22 @@ export default function UserInfoPage() {
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.padding} />
|
<View style={styles.padding} />
|
||||||
<View style={{ zIndex: -1 }}>
|
<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
|
<Button
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
if (isEditable) {
|
|
||||||
setYearLevelOpen(false);
|
setYearLevelOpen(false);
|
||||||
setSemesterOpen(false);
|
setSemesterOpen(false);
|
||||||
setCourseOpen(false);
|
setCourseOpen(false);
|
||||||
|
@ -323,13 +333,9 @@ export default function UserInfoPage() {
|
||||||
semester: selected_semester,
|
semester: selected_semester,
|
||||||
year_level: selected_yearlevel,
|
year_level: selected_yearlevel,
|
||||||
});
|
});
|
||||||
}
|
|
||||||
setIsEditable(!isEditable);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text style={styles.text_white_small}>
|
<Text style={styles.text_white_small}>Save Changes</Text>
|
||||||
{isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
|
|
||||||
</Text>
|
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
</AnimatedContainerNoScroll>
|
</AnimatedContainerNoScroll>
|
||||||
|
|
Loading…
Reference in a new issue