Finished onboarding page

This commit is contained in:
Keannu Bernasol 2023-07-06 20:29:04 +08:00
parent bccc808150
commit 3931f58472
4 changed files with 54 additions and 38 deletions

View file

@ -3,6 +3,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
import { import {
ActivationParams, ActivationParams,
LoginParams, LoginParams,
OnboardingParams,
RegistrationParams, RegistrationParams,
} from "../../interfaces/Interfaces"; } from "../../interfaces/Interfaces";
@ -113,7 +114,7 @@ export async function UserInfo() {
}) })
.then((response) => { .then((response) => {
// console.log(JSON.stringify(response.data)); // console.log(JSON.stringify(response.data));
return response.data; return [true, response.data];
}) })
.catch((error) => { .catch((error) => {
let error_message = ""; let error_message = "";
@ -198,3 +199,23 @@ export async function GetYearLevels() {
return false; return false;
}); });
} }
export async function OnboardingUpdateStudentInfo(info: OnboardingParams) {
const accessToken = await getAccessToken();
const headers = {
Authorization: `Bearer ${accessToken}`,
};
return instance
.patch("/api/v1/accounts/users/me/", info, { headers })
.then((response) => {
console.log(JSON.stringify(response.data));
return response.data;
})
.catch((error) => {
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
console.log("Error updating onboarding info", error_message);
return false;
});
}

View file

@ -64,3 +64,9 @@ export interface CourseParams {
name: string; name: string;
shortname: string; shortname: string;
} }
export interface OnboardingParams {
year_level: string;
course: string;
semester: string;
}

View file

@ -19,18 +19,18 @@ import {
GetCourses, GetCourses,
GetSemesters, GetSemesters,
GetYearLevels, GetYearLevels,
OnboardingUpdateStudentInfo,
} from "../../components/Api/Api"; } from "../../components/Api/Api";
export default function Onboarding() { export default function Onboarding() {
const navigation = useNavigation<RootDrawerParamList>(); const navigation = useNavigation<RootDrawerParamList>();
// const dispatch = useDispatch(); // const dispatch = useDispatch();
// const creds = useSelector((state: RootState) => state.auth.creds); // const creds = useSelector((state: RootState) => state.auth.creds);
const [error, setError] = useState(false);
// Semesters // Semesters
const [semester, setSemester] = useState(""); const [semester, setSemester] = useState("");
const [semesterOpen, setSemesterOpen] = useState(false); const [semesterOpen, setSemesterOpen] = useState(false);
const [semesters, setSemesters] = useState([ const [semesters, setSemesters] = useState([
{ label: "1st Semester", value: "1st Sem", id: "" }, { label: "1st Semester", value: "1st Sem" },
{ label: "2nd Semester", value: "2nd Sem", id: "" }, { label: "2nd Semester", value: "2nd Sem" },
]); ]);
const semester_query = useQuery({ const semester_query = useQuery({
queryKey: ["semesters"], queryKey: ["semesters"],
@ -38,21 +38,17 @@ export default function Onboarding() {
onSuccess: (data) => { onSuccess: (data) => {
let semesters = data.map((item: SemesterParams) => ({ let semesters = data.map((item: SemesterParams) => ({
label: item.name, label: item.name,
value: item.shortname, value: item.name,
id: item.id,
})); }));
setSemesters(semesters); setSemesters(semesters);
}, },
onError: () => {
setError(true);
},
}); });
// Year Level // Year Level
const [year_level, setYearLevel] = useState(""); const [year_level, setYearLevel] = useState("");
const [yearLevelOpen, setYearLevelOpen] = useState(false); const [yearLevelOpen, setYearLevelOpen] = useState(false);
const [year_levels, setYearLevels] = useState([ const [year_levels, setYearLevels] = useState([
{ label: "1st Year", value: "1st Year", id: "" }, { label: "1st Year", value: "1st Year" },
{ label: "2nd Year", value: "2nd Year", id: "" }, { label: "2nd Year", value: "2nd Year" },
]); ]);
const yearlevel_query = useQuery({ const yearlevel_query = useQuery({
queryKey: ["year_levels"], queryKey: ["year_levels"],
@ -60,14 +56,10 @@ export default function Onboarding() {
onSuccess: (data) => { onSuccess: (data) => {
let year_levels = data.map((item: YearLevelParams) => ({ let year_levels = data.map((item: YearLevelParams) => ({
label: item.name, label: item.name,
value: item.shortname, value: item.name,
id: item.id,
})); }));
setYearLevels(year_levels); setYearLevels(year_levels);
}, },
onError: () => {
setError(true);
},
}); });
// Course // Course
const [course, setCourse] = useState(""); const [course, setCourse] = useState("");
@ -76,34 +68,21 @@ export default function Onboarding() {
{ {
label: "Bachelor of Science in Information Technology", label: "Bachelor of Science in Information Technology",
value: "BSIT", value: "BSIT",
id: "",
}, },
{ label: "Bachelor of Science in Computer Science", value: "BSCS", id: "" }, { label: "Bachelor of Science in Computer Science", value: "BSCS" },
]); ]);
const [complete, setComplete] = useState(false);
const course_query = useQuery({ const course_query = useQuery({
queryKey: ["courses"], queryKey: ["courses"],
queryFn: GetCourses, queryFn: GetCourses,
onSuccess: (data) => { onSuccess: (data) => {
let courses = data.map((item: CourseParams) => ({ let courses = data.map((item: CourseParams) => ({
label: item.name, label: item.name,
value: item.shortname, value: item.name,
id: item.id,
})); }));
setCourses(courses); setCourses(courses);
}, },
onError: () => {
setError(true);
},
}); });
useEffect(() => { if (yearlevel_query.error || semester_query.error || course_query.error) {
setComplete(
!isStringEmpty(year_level) &&
!isStringEmpty(course) &&
!isStringEmpty(semester)
);
}, [year_level, course, semester, complete]);
if (error) {
return ( return (
<View style={styles.background}> <View style={styles.background}>
<View style={styles.container}> <View style={styles.container}>
@ -213,8 +192,15 @@ export default function Onboarding() {
style={styles.button_template} style={styles.button_template}
> >
<Button <Button
disabled={!complete} disabled={!year_level || !course || !semester}
onPress={() => console.log(complete)} onPress={async () => {
console.log(semester, course, year_level);
await OnboardingUpdateStudentInfo({
semester: semester,
course: course,
year_level: year_level,
});
}}
color={colors.blue_3} color={colors.blue_3}
> >
<Text style={styles.text_white_small}>Proceed</Text> <Text style={styles.text_white_small}>Proceed</Text>

View file

@ -17,12 +17,15 @@ export default function Revalidation() {
useEffect(() => { useEffect(() => {
setState("Previous session found"); setState("Previous session found");
TokenRefresh().then(async (response) => { TokenRefresh().then(async (response) => {
if (response) { let user_info = await UserInfo();
let user_info = await UserInfo(); if (response && user_info[0]) {
await dispatch(setUser(user_info)); await dispatch(setUser(user_info));
if ( if (
!(user_info.year_level || user_info.course || user_info.semester) && !(
(await UserInfo()) user_info[1].year_level ||
user_info[1].course ||
user_info[1].semester
)
) { ) {
await setTimeout(() => { await setTimeout(() => {
navigation.navigate("Onboarding"); navigation.navigate("Onboarding");