keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2025-06-29 00:35:46 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into initial-frontend

Browse source
This commit is contained in:
lemeow125 2023-09-30 17:40:16 +08:00 • committed by GitHub
commit fab7491a8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 2331 additions and 524 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/routes/Activation/Activation.tsx
View file

@ -6,6 +6,7 @@ import { useNavigation, useRoute } from "@react-navigation/native";
import { useEffect, useState } from "react";
import { UserActivate } from "../../components/Api/Api";
import { RootDrawerParamList } from "../../interfaces/Interfaces";
import { useToast } from "react-native-toast-notifications";
interface ActivationRouteParams {
uid?: string;
@ -16,9 +17,7 @@ export default function Activation() {
const route = useRoute();
const { uid, token } = (route.params as ActivationRouteParams) || "";
const navigation = useNavigation<RootDrawerParamList>();
const [state, setState] = useState(
"Activating with UID " + uid + " and Token " + token
);
const toast = useToast();
const [loading, setLoading] = useState(true);
useEffect(() => {
@ -28,16 +27,22 @@ export default function Activation() {
token: String(token),
});
if (result) {
setTimeout(() => {
setState("Activation successful!");
}, 1000);
toast.show("Activation successful", {
type: "success",
placement: "top",
duration: 4000,
animationType: "slide-in",
});
setTimeout(() => {
navigation.navigate("Login");
}, 2000);
} else {
setTimeout(() => {
setState("Activation unsuccessful\nPlease contact support");
}, 1000);
toast.show("Activation unsuccessful. Please contact support", {
type: "warning",
placement: "top",
duration: 4000,
animationType: "slide-in",
});
}
setLoading(false);
}
@ -63,8 +68,9 @@ export default function Activation() {
size={96}
color={colors.secondary_1}
/>
<Text style={styles.text_white_medium}>{state}</Text>
<Text style={styles.text_white_tiny}>{uid + "\n" + token}</Text>
<Text style={styles.text_white_medium}>
{"Activating with UID: " + uid + "\nToken: " + token}
</Text>
</AnimatedContainer>
</View>
);

177
src/routes/CreateGroup/CreateGroup.tsx Normal file
View file

@ -0,0 +1,177 @@
import * as React from "react";
import styles, { Viewport } from "../../styles";
import {
View,
Text,
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
} from "react-native";
import { useState } from "react";
import {
RootDrawerParamList,
StudentStatusPatchType,
StudyGroupCreateType,
} from "../../interfaces/Interfaces";
import Button from "../../components/Button/Button";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { PatchStudentStatus, CreateStudyGroup } from "../../components/Api/Api";
import { colors } from "../../styles";
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
import { urlProvider } from "../../components/Api/Api";
import MapView, { UrlTile, Marker } from "react-native-maps";
import { useNavigation } from "@react-navigation/native";
import { useToast } from "react-native-toast-notifications";
export default function CreateGroup({ route }: any) {
const { location, subject } = route.params;
const queryClient = useQueryClient();
const navigation = useNavigation<RootDrawerParamList>();
const toast = useToast();
const [name, setName] = useState("");
const study_group_create = useMutation({
mutationFn: async (info: StudyGroupCreateType) => {
const data = await CreateStudyGroup(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
return data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["user_status"] });
queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
student_status_patch.mutate({
study_group: name,
});
toast.show("Created successfully", {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const student_status_patch = useMutation({
mutationFn: async (info: StudentStatusPatchType) => {
const data = await PatchStudentStatus(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
return data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["user_status"] });
toast.show(`Joined group ${name} successfully`, {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
navigation.navigate("Home");
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
if (location) {
return (
<View style={styles.background}>
<AnimatedContainerNoScroll>
<View style={{ zIndex: -1 }}>
<View style={styles.padding} />
<MapView
style={{
height: Viewport.height * 0.4,
width: Viewport.width * 0.8,
alignSelf: "center",
}}
customMapStyle={[
{
featureType: "poi",
stylers: [
{
visibility: "off",
},
],
},
]}
mapType="none"
scrollEnabled={false}
zoomEnabled={false}
toolbarEnabled={false}
rotateEnabled={false}
minZoomLevel={18}
initialRegion={{
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
loadingBackgroundColor={colors.secondary_2}
>
<UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.latitude,
longitude: location.longitude,
}}
pinColor={colors.primary_1}
/>
</MapView>
<View style={styles.padding} />
</View>
<TextInput
style={styles.text_input}
placeholder="Group Name"
placeholderTextColor="white"
autoCapitalize="none"
value={name}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setName(e.nativeEvent.text);
}}
/>
<View style={styles.padding} />
<Button
onPress={() => {
study_group_create.mutate({
name: name,
location: location,
subject: subject,
});
}}
>
<Text style={styles.text_white_small}>Start Studying</Text>
</Button>
<View style={styles.padding} />
</AnimatedContainerNoScroll>
</View>
);
}
return <View />;
}

999
src/routes/Home/Home.tsx
View file

File diff suppressed because it is too large Load diff

17
src/routes/Loading/Loading.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from "react";
import styles from "../../styles";
import { View, Text, ActivityIndicator } from "react-native";
import { colors } from "../../styles";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
export default function Loading() {
return (
<View style={styles.background}>
<AnimatedContainer>
<View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={128} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>Loading StudE...</Text>
</AnimatedContainer>
</View>
);
}

32
src/routes/Login/Login.tsx
View file

@ -8,14 +8,12 @@ import {
TextInputChangeEventData,
} from "react-native";
import { useDispatch } from "react-redux";
import { colors } from "../../styles";
import { useState } from "react";
import LoginIcon from "../../icons/LoginIcon/LoginIcon";
import Button from "../../components/Button/Button";
import { useNavigation } from "@react-navigation/native";
import { RootDrawerParamList } from "../../interfaces/Interfaces";
import { UserInfo, UserLogin } from "../../components/Api/Api";
import { ParseLoginError } from "../../components/ParseError/ParseError";
import { GetUserInfo, UserLogin } from "../../components/Api/Api";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
import {
@ -23,6 +21,7 @@ import {
setOnboarding,
unsetOnboarding,
} from "../../features/redux/slices/StatusSlice/StatusSlice";
import { useToast } from "react-native-toast-notifications";
export default function Login() {
const navigation = useNavigation<RootDrawerParamList>();
@ -31,7 +30,7 @@ export default function Login() {
username: "",
password: "",
});
const [error, setError] = useState("");
const toast = useToast();
return (
<View style={styles.background}>
<AnimatedContainer>
@ -60,14 +59,13 @@ export default function Login() {
placeholderTextColor="white"
secureTextEntry={true}
value={creds.password}
autoCapitalize={"none"}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setCreds({ ...creds, password: e.nativeEvent.text });
}}
/>
<View style={{ paddingVertical: 2 }} />
<Text style={styles.text_white_small}>{error}</Text>
<View style={{ paddingVertical: 4 }} />
<Button
onPress={async () => {
@ -77,7 +75,7 @@ export default function Login() {
}).then(async (result) => {
if (result[0]) {
setUser({ ...creds, username: "", password: "", error: "" });
let user_info = await UserInfo();
let user_info = await GetUserInfo();
dispatch(login());
dispatch(setUser(user_info[1]));
// Redirect to onboarding if no year level, course, or semester specified
@ -88,14 +86,30 @@ export default function Login() {
) {
dispatch(setOnboarding());
navigation.navigate("Onboarding");
toast.show("Successfully logged in", {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
} else {
dispatch(unsetOnboarding());
toast.show("Successfully logged in", {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
navigation.navigate("Home");
}
console.log(JSON.stringify(user_info));
} else {
console.log("heh", ParseLoginError(JSON.stringify(result[1])));
setError(ParseLoginError(JSON.stringify(result[1])));
toast.show(JSON.stringify(result[1]), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
}
});
}}

87
src/routes/Onboarding/Onboarding.tsx
View file

@ -3,10 +3,10 @@ import styles from "../../styles";
import { View, Text } from "react-native";
import { useNavigation } from "@react-navigation/native";
import {
Course,
RootDrawerParamList,
Semester,
YearLevel,
CourseType,
SemesterType,
YearLevelType,
} from "../../interfaces/Interfaces";
import { colors } from "../../styles";
import { MotiView } from "moti";
@ -18,18 +18,18 @@ import {
GetCourses,
GetSemesters,
GetYearLevels,
OnboardingUpdateStudentInfo,
PatchUserInfo,
} from "../../components/Api/Api";
import { useDispatch } from "react-redux";
import { unsetOnboarding } from "../../features/redux/slices/StatusSlice/StatusSlice";
import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
import { useToast } from "react-native-toast-notifications";
export default function Onboarding() {
const navigation = useNavigation<RootDrawerParamList>();
const dispatch = useDispatch();
// const creds = useSelector((state: RootState) => state.auth.creds);
const [error, setError] = useState("");
const toast = useToast();
// Semesters
const [selected_semester, setSelectedSemester] = useState("");
const [semesterOpen, setSemesterOpen] = useState(false);
@ -39,14 +39,28 @@ export default function Onboarding() {
]);
const semester_query = useQuery({
queryKey: ["semesters"],
queryFn: GetSemesters,
queryFn: async () => {
const data = await GetSemesters();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data) => {
let semesters = data[1].map((item: Semester) => ({
let semesters = data[1].map((item: SemesterType) => ({
label: item.name,
value: item.name,
}));
setSemesters(semesters);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// Year Level
const [selected_yearlevel, setSelectedYearLevel] = useState("");
@ -57,14 +71,28 @@ export default function Onboarding() {
]);
const yearlevel_query = useQuery({
queryKey: ["year_levels"],
queryFn: GetYearLevels,
queryFn: async () => {
const data = await GetYearLevels();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data) => {
let year_levels = data[1].map((item: YearLevel) => ({
let year_levels = data[1].map((item: YearLevelType) => ({
label: item.name,
value: item.name,
}));
setYearLevels(year_levels);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// Course
const [selected_course, setSelectedCourse] = useState("");
@ -78,14 +106,28 @@ export default function Onboarding() {
]);
const course_query = useQuery({
queryKey: ["courses"],
queryFn: GetCourses,
queryFn: async () => {
const data = await GetCourses();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data) => {
let courses = data[1].map((item: Course) => ({
let courses = data[1].map((item: CourseType) => ({
label: item.name,
value: item.name,
}));
setCourses(courses);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
if (yearlevel_query.error || semester_query.error || course_query.error) {
return (
@ -196,7 +238,6 @@ export default function Onboarding() {
dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
/>
</MotiView>
<Text style={styles.text_white_small}>{error}</Text>
<MotiView
from={{
opacity: 0,
@ -217,7 +258,7 @@ export default function Onboarding() {
!selected_yearlevel || !selected_course || !selected_semester
}
onPress={async () => {
let result = await OnboardingUpdateStudentInfo({
let result = await PatchUserInfo({
semester: selected_semester,
course: selected_course,
year_level: selected_yearlevel,
@ -227,11 +268,25 @@ export default function Onboarding() {
setSelectedCourse("");
setSelectedYearLevel("");
setSelectedSemester("");
setError("Success!");
dispatch(setUser(result[1]));
toast.show("Changes applied successfully", {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
navigation.navigate("Home");
} else {
setError(result[1]);
dispatch(setUser(result[1]));
toast.show(
"An error has occured\nChanges have not been saved",
{
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
}
);
}
}}
>

26
src/routes/Register/Register.tsx
View file

@ -15,11 +15,12 @@ import { RootDrawerParamList } from "../../interfaces/Interfaces";
import SignupIcon from "../../icons/SignupIcon/SignupIcon";
import { UserRegister } from "../../components/Api/Api";
import IsNumber from "../../components/IsNumber/IsNumber";
import ParseError from "../../components/ParseError/ParseError";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { useToast } from "react-native-toast-notifications";
export default function Register() {
const navigation = useNavigation<RootDrawerParamList>();
const toast = useToast();
// const dispatch = useDispatch();
// const creds = useSelector((state: RootState) => state.auth.creds);
const [user, setUser] = useState({
@ -29,7 +30,6 @@ export default function Register() {
username: "",
email: "",
password: "",
feedback: "",
});
return (
<View style={styles.background}>
@ -113,6 +113,7 @@ export default function Register() {
placeholderTextColor={colors.text_default}
secureTextEntry={true}
value={user.password}
autoCapitalize={"none"}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
@ -120,8 +121,6 @@ export default function Register() {
}}
/>
<View style={{ paddingVertical: 4 }} />
<Text style={styles.text_white_small}>{user.feedback}</Text>
<View style={{ paddingVertical: 4 }} />
<Button
onPress={async () => {
await UserRegister({
@ -142,16 +141,25 @@ export default function Register() {
username: "",
email: "",
password: "",
feedback:
"Success! An email has been sent to activate your account",
});
toast.show(
"Success! An email has been sent to activate your account",
{
type: "success",
placement: "top",
duration: 6000,
animationType: "slide-in",
}
);
setTimeout(() => {
navigation.navigate("Login");
}, 10000);
} else {
setUser({
...user,
feedback: ParseError(JSON.stringify(result[1])),
toast.show(JSON.stringify(result[1]), {
type: "warning",
placement: "top",
duration: 6000,
animationType: "slide-in",
});
}
});

32
src/routes/Revalidation/Revalidation.tsx
View file

@ -1,7 +1,7 @@
import * as React from "react";
import styles from "../../styles";
import { View, Text, ActivityIndicator } from "react-native";
import { TokenRefresh, UserInfo } from "../../components/Api/Api";
import { TokenRefresh, GetUserInfo } from "../../components/Api/Api";
import { useDispatch } from "react-redux";
import { colors } from "../../styles";
import { useEffect, useState } from "react";
@ -15,37 +15,55 @@ import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContai
import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
import { setOnboarding } from "../../features/redux/slices/StatusSlice/StatusSlice";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useToast } from "react-native-toast-notifications";
export default function Revalidation() {
const dispatch = useDispatch();
const navigation = useNavigation<RootDrawerParamList>();
const [state, setState] = useState("Checking for existing session");
const toast = useToast();
useEffect(() => {
setState("Previous session found");
TokenRefresh().then(async (response) => {
let user_info = await UserInfo();
let user_info = await GetUserInfo();
if (response && user_info[0]) {
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());
toast.show("Previous session restored", {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
await setTimeout(() => {
navigation.navigate("Onboarding");
}, 700);
} else {
dispatch(unsetOnboarding());
toast.show("Previous session restored", {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
await setTimeout(() => {
navigation.navigate("Home");
}, 700);
}
} else {
await setState("Session expired");
toast.show("Session expired. Please login again", {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
await setTimeout(() => {
AsyncStorage.clear();
navigation.navigate("Login");

204
src/routes/StartStudying/StartStudying.tsx Normal file
View file

@ -0,0 +1,204 @@
import * as React from "react";
import styles, { Viewport } from "../../styles";
import { View, Text, ToastAndroid } from "react-native";
import { useState } from "react";
import {
UserInfoReturnType,
OptionType,
RootDrawerParamList,
StudentStatusType,
StudentStatusReturnType,
StudentStatusPatchType,
} from "../../interfaces/Interfaces";
import Button from "../../components/Button/Button";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
PatchStudentStatus,
GetUserInfo,
ParseError,
} from "../../components/Api/Api";
import { colors } from "../../styles";
import DropDownPicker from "react-native-dropdown-picker";
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
import { urlProvider } from "../../components/Api/Api";
import MapView, { UrlTile, Marker } from "react-native-maps";
import { useNavigation } from "@react-navigation/native";
import { useToast } from "react-native-toast-notifications";
export default function StartStudying({ route }: any) {
const { location } = route.params;
const queryClient = useQueryClient();
const navigation = useNavigation<RootDrawerParamList>();
const toast = useToast();
// Subject choices
const [selected_subject, setSelectedSubject] = useState("");
const [subjectsOpen, setSubjectsOpen] = useState(false);
const [subjects, setSubjects] = useState<OptionType[]>([]);
const StudentInfo = useQuery({
queryKey: ["user"],
queryFn: async () => {
const data = await GetUserInfo();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data: UserInfoReturnType) => {
let subjects = data[1].subjects.map((subject: string) => ({
label: subject,
value: subject,
}));
setSubjects(subjects);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const mutation = useMutation({
mutationFn: async (info: StudentStatusPatchType) => {
const data = await PatchStudentStatus(info);
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["user_status"] });
toast.show("You are now studying \n" + selected_subject, {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
navigation.navigate("Home");
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
if (location && location.coords) {
return (
<View style={styles.background}>
<AnimatedContainerNoScroll>
<View style={{ zIndex: -1 }}>
<View style={styles.padding} />
<MapView
style={{
height: Viewport.height * 0.4,
width: Viewport.width * 0.8,
alignSelf: "center",
}}
customMapStyle={[
{
featureType: "poi",
stylers: [
{
visibility: "off",
},
],
},
]}
mapType="none"
scrollEnabled={false}
zoomEnabled={false}
toolbarEnabled={false}
rotateEnabled={false}
minZoomLevel={18}
initialRegion={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
loadingBackgroundColor={colors.secondary_2}
>
<UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
}}
pinColor={colors.primary_1}
/>
</MapView>
<View style={styles.padding} />
</View>
<DropDownPicker
zIndex={1000}
max={16}
open={subjectsOpen}
value={selected_subject}
items={subjects}
setOpen={(open) => {
setSubjectsOpen(open);
}}
setValue={setSelectedSubject}
placeholderStyle={{
...styles.text_white_tiny_bold,
...{ textAlign: "left" },
}}
placeholder="Select subject"
multipleText="Select subject"
style={styles.input}
textStyle={{
...styles.text_white_tiny_bold,
...{ textAlign: "left" },
}}
modalContentContainerStyle={{
backgroundColor: colors.primary_2,
borderWidth: 0,
zIndex: 1000,
}}
autoScroll
dropDownDirection="BOTTOM"
listMode="MODAL"
/>
<View style={styles.padding} />
<Button
onPress={() => {
console.log({
subject: selected_subject,
location: {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
},
});
mutation.mutate({
active: true,
subject: selected_subject,
location: {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
},
});
}}
>
<Text style={styles.text_white_small}>Start Studying</Text>
</Button>
<View style={styles.padding} />
</AnimatedContainerNoScroll>
</View>
);
}
return <View />;
}

199
src/routes/SubjectsPage/SubjectsPage.tsx
View file

@ -1,42 +1,60 @@
import * as React from "react";
import styles from "../../styles";
import { View, Text } from "react-native";
import { useState } from "react";
import {
View,
Text,
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
} from "react-native";
import { useEffect, useState } from "react";
import {
SemesterParams,
UserInfoParams,
Semester,
SubjectParams,
Subject,
YearLevel,
Course,
UserInfoReturnType,
SubjectsReturnType,
SubjectType,
OptionType,
Subjects,
StudentStatusType,
PatchUserInfoType,
StudentStatusPatchType,
} from "../../interfaces/Interfaces";
import Button from "../../components/Button/Button";
import { Image } from "react-native";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
GetCourses,
GetSemesters,
GetSubjects,
GetYearLevels,
PatchUserInfo,
UserInfo,
GetUserInfo,
PatchStudentStatus,
} from "../../components/Api/Api";
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";
import { useToast } from "react-native-toast-notifications";
export default function SubjectsPage() {
const logged_in_user = useSelector((state: RootState) => state.user.user);
const queryClient = useQueryClient();
const toast = useToast();
// Student Status
const studentstatus_mutation = useMutation({
mutationFn: async (info: StudentStatusPatchType) => {
const data = await PatchStudentStatus(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
return data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["user_status"] });
},
onError: () => {
toast.show("An error has occured\nChanges have not been saved", {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// User Info
const [user, setUser] = useState({
first_name: "",
@ -49,17 +67,18 @@ export default function SubjectsPage() {
course_shortname: "",
avatar: "",
student_id_number: "",
subjects: [] as Subjects,
});
const [displayName, setDisplayName] = useState({
first_name: "",
last_name: "",
subjects: [] as string[],
});
const StudentInfo = useQuery({
queryKey: ["user"],
queryFn: UserInfo,
onSuccess: (data: UserInfoParams) => {
// console.log(data[1]);
queryFn: async () => {
const data = await GetUserInfo();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data: UserInfoReturnType) => {
setUser({
...user,
first_name: data[1].first_name,
@ -71,31 +90,50 @@ 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(data[1].subjects);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
setSelectedSubjects(user.subjects);
},
});
const mutation = useMutation({
mutationFn: PatchUserInfo,
mutationFn: async (info: PatchUserInfoType) => {
const data = await PatchUserInfo(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
return data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["subjects", viewAll] });
queryClient.invalidateQueries({ queryKey: ["subjects"] });
setSelectedSubjects([]);
// Reset student status when changing user info to prevent bugs
studentstatus_mutation.mutate({
active: false,
});
toast.show("Changes applied successfully.\nStudent status reset", {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// 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 +142,31 @@ export default function SubjectsPage() {
const Subjects = useQuery({
enabled: StudentInfo.isFetched,
queryKey: ["subjects", viewAll],
queryKey: ["subjects"],
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]);
const data = await GetSubjects();
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
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);
onSuccess: (data: SubjectsReturnType) => {
if (data[1]) {
let subjects = data[1].map((subject: SubjectType) => ({
label: subject.name,
value: subject.name,
}));
setSubjects(subjects);
}
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
@ -163,9 +190,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,29 +238,17 @@ 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,
});
}}
>
<Text style={styles.text_white_small}>Save Change</Text>
<Text style={styles.text_white_small}>Save Changes</Text>
</Button>
<View style={styles.padding} />
</View>
</AnimatedContainerNoScroll>
</View>

260
src/routes/UserInfoPage/UserInfoPage.tsx
View file

@ -6,18 +6,19 @@ import {
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
Pressable,
} from "react-native";
import { useState } from "react";
import {
SemesterParams,
UserInfoParams,
Semester,
SubjectParams,
Subject,
YearLevel,
Course,
SemesterReturnType,
UserInfoReturnType,
SemesterType,
YearLevelType,
CourseType,
OptionType,
Subjects,
StudentStatusType,
PatchUserInfoType,
StudentStatusPatchType,
} from "../../interfaces/Interfaces";
import Button from "../../components/Button/Button";
import { Image } from "react-native";
@ -25,18 +26,52 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
GetCourses,
GetSemesters,
GetSubjects,
GetYearLevels,
PatchStudentStatus,
PatchUserInfo,
UserInfo,
GetUserInfo,
} from "../../components/Api/Api";
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";
import * as ImagePicker from "expo-image-picker";
import * as FileSystem from "expo-file-system";
import { useToast } from "react-native-toast-notifications";
export default function UserInfoPage() {
const logged_in_user = useSelector((state: RootState) => state.user.user);
const dispatch = useDispatch();
const queryClient = useQueryClient();
const toast = useToast();
// Student Status
const studentstatus_mutation = useMutation({
mutationFn: async (info: StudentStatusPatchType) => {
const data = await PatchStudentStatus(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
return data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["user_status"] });
},
onError: () => {
toast.show("An error has occured\nChanges have not been saved", {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// User Info
const [user, setUser] = useState({
first_name: "",
@ -49,15 +84,18 @@ 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"],
queryFn: UserInfo,
onSuccess: (data: UserInfoParams) => {
queryFn: async () => {
const data = await GetUserInfo();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data: UserInfoReturnType) => {
// console.log(data[1]);
setUser({
...user,
@ -66,23 +104,55 @@ export default function UserInfoPage() {
year_level: data[1].year_level,
semester: data[1].semester,
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,
avatar: data[1].avatar,
});
setSelectedCourse(data[1].course);
setSelectedSemester(data[1].semester);
setSelectedYearLevel(data[1].year_level);
dispatch(setUserinState(data[1]));
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const mutation = useMutation({
mutationFn: PatchUserInfo,
mutationFn: async (info: PatchUserInfoType) => {
const data = await PatchUserInfo(info);
if (data[0] == false) {
return Promise.reject(new Error());
}
return data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["subjects"] });
// Reset student status when changing user info to prevent bugs
studentstatus_mutation.mutate({
active: false,
});
toast.show("Changes applied successfully.\nStudent status reset", {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
dispatch(setUserinState(user));
},
onError: () => {
toast.show("An error has occured\nChanges have not been saved", {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
@ -92,9 +162,15 @@ export default function UserInfoPage() {
const [semesters, setSemesters] = useState<OptionType[]>([]);
const Semesters = useQuery({
queryKey: ["semesters"],
queryFn: GetSemesters,
onSuccess: (data: SemesterParams) => {
let semestersData = data[1].map((semester: Semester) => ({
queryFn: async () => {
const data = await GetSemesters();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data: SemesterReturnType) => {
let semestersData = data[1].map((semester: SemesterType) => ({
label: semester.name,
value: semester.name,
shortname: semester.shortname,
@ -102,6 +178,14 @@ export default function UserInfoPage() {
// Update the 'semesters' state
setSemesters(semestersData);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// Year Level
@ -110,14 +194,28 @@ export default function UserInfoPage() {
const [year_levels, setYearLevels] = useState<OptionType[]>([]);
const yearlevel_query = useQuery({
queryKey: ["year_levels"],
queryFn: GetYearLevels,
queryFn: async () => {
const data = await GetYearLevels();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data) => {
let year_levels = data[1].map((yearlevel: YearLevel) => ({
let year_levels = data[1].map((yearlevel: YearLevelType) => ({
label: yearlevel.name,
value: yearlevel.name,
}));
setYearLevels(year_levels);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// Course
@ -126,27 +224,64 @@ export default function UserInfoPage() {
const [courses, setCourses] = useState<OptionType[]>([]);
const course_query = useQuery({
queryKey: ["courses"],
queryFn: GetCourses,
queryFn: async () => {
const data = await GetCourses();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: (data) => {
let courses = data[1].map((course: Course) => ({
let courses = data[1].map((course: CourseType) => ({
label: course.name,
value: course.name,
}));
setCourses(courses);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// Toggle editing of profile
const [isEditable, setIsEditable] = useState(false);
// Profile photo
const pickImage = async () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.canceled) {
const encodedImage = await FileSystem.readAsStringAsync(
result.assets[0].uri,
{ encoding: "base64" }
);
mutation.mutate({
avatar: encodedImage,
});
}
};
function Avatar() {
if (user.avatar) {
return <Image source={{ uri: user.avatar }} style={styles.profile} />;
return (
<Pressable onPress={pickImage}>
<Image source={{ uri: user.avatar }} style={styles.profile} />
</Pressable>
);
} else {
return (
<Image
source={require("../../img/user_profile_placeholder.png")}
style={{ ...styles.profile, ...{ marginRight: 48 } }}
/>
<Pressable onPress={pickImage}>
<Image
source={require("../../img/user_profile_placeholder.png")}
style={{ ...styles.profile, ...{ marginRight: 48 } }}
/>
</Pressable>
);
}
}
@ -157,9 +292,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 +308,6 @@ export default function UserInfoPage() {
<View style={{ flex: 3 }}>
<TextInput
style={styles.input}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
@ -190,7 +324,6 @@ export default function UserInfoPage() {
<View style={{ flex: 3 }}>
<TextInput
style={styles.input}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
@ -206,7 +339,6 @@ export default function UserInfoPage() {
</View>
<View style={{ flex: 3 }}>
<DropDownPicker
disabled={!isEditable}
zIndex={4000}
open={yearLevelOpen}
value={selected_yearlevel}
@ -242,7 +374,6 @@ export default function UserInfoPage() {
</View>
<View style={{ flex: 3 }}>
<DropDownPicker
disabled={!isEditable}
zIndex={3000}
open={semesterOpen}
value={selected_semester}
@ -278,7 +409,6 @@ export default function UserInfoPage() {
</View>
<View style={{ flex: 3 }}>
<DropDownPicker
disabled={!isEditable}
zIndex={2000}
open={courseOpen}
value={selected_course}
@ -310,27 +440,37 @@ export default function UserInfoPage() {
</View>
<View style={styles.padding} />
<View style={{ zIndex: -1 }}>
<View style={{ ...styles.flex_row, ...{ alignSelf: "center" } }}>
<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 style={styles.padding} />
</View>
</AnimatedContainerNoScroll>
</View>