keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #8 from lemeow125/feature/student_status

Browse source 
Feature/student status
This commit is contained in:
lemeow125 2023-09-30 17:14:55 +08:00 committed by GitHub
commit 8f58dddbda
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 2230 additions and 523 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
App.tsx
View file

@ -1,4 +1,5 @@
import "react-native-gesture-handler";
import styles from "./src/styles";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Provider } from "react-redux";
@ -21,6 +22,11 @@ import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { StatusBar } from "expo-status-bar";
import UserInfoPage from "./src/routes/UserInfoPage/UserInfoPage";
import SubjectsPage from "./src/routes/SubjectsPage/SubjectsPage";
import Loading from "./src/routes/Loading/Loading";
import StartStudying from "./src/routes/StartStudying/StartStudying";
import { ToastProvider } from "react-native-toast-notifications";
import InfoIcon from "./src/icons/InfoIcon/InfoIcon";
import CreateGroup from "./src/routes/CreateGroup/CreateGroup";
const Drawer = createDrawerNavigator();
@ -28,7 +34,7 @@ const linking = {
prefixes: [Linking.makeUrl("/")],
config: {
screens: {
Home: "home",
Home: "",
Login: "login",
Register: "register",
Onboarding: "onboarding",
@ -55,27 +61,34 @@ export default function App() {
}
}, [initialRoute]);
return (
<QueryClientProvider client={queryClient}>
<Provider store={store}>
<StatusBar style="light" />
<ToastProvider
icon={<InfoIcon size={32} />}
textStyle={{ ...styles.text_white_tiny_bold }}
>
<QueryClientProvider client={queryClient}>
<Provider store={store}>
<StatusBar style="light" />
<NavigationContainer linking={linking}>
<Drawer.Navigator
initialRouteName="Revalidation"
drawerContent={CustomDrawerContent}
screenOptions={DrawerScreenSettings}
>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Login" component={Login} />
<Drawer.Screen name="Register" component={Register} />
<Drawer.Screen name="Onboarding" component={Onboarding} />
<Drawer.Screen name="Revalidation" component={Revalidation} />
<Drawer.Screen name="Activation" component={Activation} />
<Drawer.Screen name="User Info" component={UserInfoPage} />
<Drawer.Screen name="Subjects" component={SubjectsPage} />
</Drawer.Navigator>
</NavigationContainer>
</Provider>
</QueryClientProvider>
<NavigationContainer linking={linking} fallback={<Loading />}>
<Drawer.Navigator
initialRouteName="Revalidation"
drawerContent={CustomDrawerContent}
screenOptions={DrawerScreenSettings}
>
<Drawer.Screen name="Login" component={Login} />
<Drawer.Screen name="Register" component={Register} />
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Onboarding" component={Onboarding} />
<Drawer.Screen name="Revalidation" component={Revalidation} />
<Drawer.Screen name="Activation" component={Activation} />
<Drawer.Screen name="User Info" component={UserInfoPage} />
<Drawer.Screen name="Subjects" component={SubjectsPage} />
<Drawer.Screen name="Start Studying" component={StartStudying} />
<Drawer.Screen name="Create Group" component={CreateGroup} />
</Drawer.Navigator>
</NavigationContainer>
</Provider>
</QueryClientProvider>
</ToastProvider>
);
}

10
app.json
View file

@ -42,9 +42,15 @@
[
"expo-location",
{
"locationAlwaysAndWhenInUsePermission": "Allow Stud-E to use your location."
"locationAlwaysAndWhenInUsePermission": "Allow StudE to use your location."
}
]
],
[
"expo-image-picker",
{
"photosPermission": "Allow StudE to take and send photos for sharing in-app"
}
]
],
"extra": {
"eas": {

38
package-lock.json generated
View file

@ -16,6 +16,8 @@
"@tanstack/react-query": "^4.29.25",
"axios": "^1.4.0",
"expo": "~48.0.18",
"expo-file-system": "~15.2.2",
"expo-image-picker": "~14.1.1",
"expo-intent-launcher": "~10.5.2",
"expo-linking": "~4.0.1",
"expo-location": "~15.1.1",
@ -34,6 +36,7 @@
"react-native-screens": "~3.20.0",
"react-native-select-dropdown": "^3.3.4",
"react-native-svg": "13.4.0",
"react-native-toast-notifications": "^3.3.1",
"react-query": "^3.39.3",
"react-redux": "^8.1.1",
"redux": "^4.2.1"
@ -41,6 +44,7 @@
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.0.14",
"@types/react-native-fetch-blob": "^0.10.7",
"typescript": "^4.9.4"
}
},
@ -5311,6 +5315,12 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-native-fetch-blob": {
"version": "0.10.7",
"resolved": "https://registry.npmjs.org/@types/react-native-fetch-blob/-/react-native-fetch-blob-0.10.7.tgz",
"integrity": "sha512-9UTvmUvArimShiENeR3xnRO71NcZjpTi7AcFAIbhdTIfqQOO2OK/I/DpUPXcZF/erffLxOoRkoXrZOxyBBWKRQ==",
"dev": true
},
"node_modules/@types/scheduler": {
"version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@ -7458,6 +7468,25 @@
"expo": "*"
}
},
"node_modules/expo-image-loader": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-4.1.1.tgz",
"integrity": "sha512-ciEHVokU0f6w0eTxdRxLCio6tskMsjxWIoV92+/ZD37qePUJYMfEphPhu1sruyvMBNR8/j5iyOvPFVGTfO8oxA==",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-image-picker": {
"version": "14.1.1",
"resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-14.1.1.tgz",
"integrity": "sha512-SvWtnkLW7jp5Ntvk3lVcRQmhFYja8psmiR7O6P/+7S6f4llt3vaFwb4I3+pUXqJxxpi7BHc2+95qOLf0SFOIag==",
"dependencies": {
"expo-image-loader": "~4.1.0"
},
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-intent-launcher": {
"version": "10.5.2",
"resolved": "https://registry.npmjs.org/expo-intent-launcher/-/expo-intent-launcher-10.5.2.tgz",
@ -12425,6 +12454,15 @@
"react-native": "*"
}
},
"node_modules/react-native-toast-notifications": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/react-native-toast-notifications/-/react-native-toast-notifications-3.3.1.tgz",
"integrity": "sha512-yc1Q2nOdIYvAf0GAIlmg8q42hiwpEHnLxkxJ6P+tN6jpcKZ1qzMXlgnmNdyF9cm9VOyHQexEP8952IKNAv1Olw==",
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native/node_modules/promise": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",

4
package.json
View file

@ -17,6 +17,8 @@
"@tanstack/react-query": "^4.29.25",
"axios": "^1.4.0",
"expo": "~48.0.18",
"expo-file-system": "~15.2.2",
"expo-image-picker": "~14.1.1",
"expo-intent-launcher": "~10.5.2",
"expo-linking": "~4.0.1",
"expo-location": "~15.1.1",
@ -35,6 +37,7 @@
"react-native-screens": "~3.20.0",
"react-native-select-dropdown": "^3.3.4",
"react-native-svg": "13.4.0",
"react-native-toast-notifications": "^3.3.1",
"react-query": "^3.39.3",
"react-redux": "^8.1.1",
"redux": "^4.2.1"
@ -42,6 +45,7 @@
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.0.14",
"@types/react-native-fetch-blob": "^0.10.7",
"typescript": "^4.9.4"
},
"private": true

283
src/components/Api/Api.tsx
View file

@ -1,21 +1,28 @@
import axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
ActivationParams,
LoginParams,
OnboardingParams,
PatchStudentData,
RegistrationParams,
StudentData,
ActivationType,
LocationType,
LoginType,
OnboardingType,
PatchUserInfoType,
RegistrationType,
StudentStatusPatchType,
StudentStatusType,
StudyGroupCreateType,
StudyGroupType,
} from "../../interfaces/Interfaces";
export let backendURL = "";
export let backendURLWebsocket = "";
let use_production = true;
if (__DEV__ || !use_production) {
backendURL = "http://10.0.10.8:8000";
backendURLWebsocket = "ws://10.0.10.8:8000";
} else {
export let backendURL = "https://stude.keannu1.duckdns.org";
export let backendURLWebsocket = "ws://stude.keannu1.duckdns.org";
if (__DEV__) {
backendURL = "http://10.0.10.8:8083";
backendURLWebsocket = "ws://10.0.10.8:8083";
}
// Switch this on if you wanna run production URLs while in development
let use_production = false;
if (__DEV__ && use_production) {
backendURL = "https://stude.keannu1.duckdns.org";
backendURLWebsocket = "ws://stude.keannu1.duckdns.org";
}
@ -25,8 +32,29 @@ const instance = axios.create({
timeout: 1000,
});
console.log("Using backend API:", backendURL);
// 3rd Party APIs
export const urlProvider =
"https://openstreetmap.keannu1.duckdns.org/tile/{z}/{x}/{y}.png?";
// App APIs
// Error Handling
export function ParseError(error: any) {
if (error.response && error.response.data) {
return JSON.stringify(error.response.data)
.replaceAll(/[{}()"]/g, " ")
.replaceAll(/,/g, "\n")
.replaceAll("[", "")
.replaceAll("]", "")
.replaceAll(".", "")
.replaceAll(/"/g, "")
.replaceAll("non_field_errors", "")
.trim();
}
return "Unable to reach server";
}
// Token Handling
export async function getAccessToken() {
const accessToken = await AsyncStorage.getItem("access_token");
@ -59,40 +87,28 @@ export async function GetConfig() {
}
// User APIs
export function UserRegister(register: RegistrationParams) {
console.log(JSON.stringify(register));
export function UserRegister(register: RegistrationType) {
return instance
.post("/api/v1/accounts/users/", register)
.then(async (response) => {
return [true, response.status];
})
.catch((error) => {
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
let error_message = ParseError(error);
return [false, error_message];
});
}
export function UserLogin(user: LoginParams) {
export function UserLogin(user: LoginType) {
return instance
.post("/api/v1/accounts/jwt/create/", user)
.then(async (response) => {
/*console.log(
"Access Token:",
response.data.access,
"\nRefresh Token:",
response.data.refresh
);*/
setAccessToken(response.data.access);
setRefreshToken(response.data.refresh);
return [true];
})
.catch((error) => {
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
// console.log(error_message);
let error_message = ParseError(error);
return [false, error_message];
});
}
@ -106,21 +122,14 @@ export async function TokenRefresh() {
})
.then(async (response) => {
setAccessToken(response.data.access);
/*console.log(
"Token refresh success! New Access Token",
response.data.access
);*/
return true;
})
.catch((error) => {
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
console.log("Token Refresh error:", error_message);
let error_message = ParseError(error);
return false;
});
}
export async function UserInfo() {
export async function GetUserInfo() {
const config = await GetConfig();
return instance
.get("/api/v1/accounts/users/me/", config)
@ -129,37 +138,31 @@ export async function UserInfo() {
return [true, response.data];
})
.catch((error) => {
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function PatchUserInfo(info: PatchStudentData) {
export async function PatchUserInfo(info: PatchUserInfoType) {
const config = await GetConfig();
return instance
.patch("/api/v1/accounts/users/me/", info, 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";
// console.log(error_message);
let error_message = ParseError(error);
return [false, error_message];
});
}
export function UserActivate(activation: ActivationParams) {
export function UserActivate(activation: ActivationType) {
return instance
.post("/api/v1/accounts/users/activation/", activation)
.then(async (response) => {
.then(() => {
return true;
})
.catch((error) => {
.catch(() => {
return false;
});
}
@ -179,9 +182,7 @@ export async function GetCourses() {
return [true, response.data];
})
.catch((error) => {
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
let error_message = ParseError(error);
return [false, error_message];
});
}
@ -199,9 +200,7 @@ export async function GetSemesters() {
return [true, response.data];
})
.catch((error) => {
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
let error_message = ParseError(error);
return [false, error_message];
});
}
@ -215,69 +214,135 @@ export async function GetYearLevels() {
return [true, response.data];
})
.catch((error) => {
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function GetSubjects(
byCourseOnly: boolean,
course: string,
year_level?: string,
semester?: string
) {
const config = await GetConfig();
console.log("by course only?", byCourseOnly);
// If year level and semester specified,
if (!byCourseOnly && year_level && semester) {
return instance
.get(
"/api/v1/subjects/" + course + "/" + year_level + "/" + semester,
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];
});
}
// 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 GetSubjects() {
const config = await GetConfig();
return instance
.patch("/api/v1/accounts/users/me/", info, config)
.get("/api/v1/subjects/", 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";
console.log("Error updating onboarding info", error_message);
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function GetStudentStatus() {
const config = await GetConfig();
return instance
.get("/api/v1/student_status/self/", config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function PatchStudentStatus(info: StudentStatusPatchType) {
const config = await GetConfig();
return instance
.patch("/api/v1/student_status/self/", info, config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function GetStudentStatusList() {
const config = await GetConfig();
return instance
.get("/api/v1/student_status/list/", config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function GetStudentStatusListNear() {
const config = await GetConfig();
return instance
.get("/api/v1/student_status/near/", config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
// To-do
export async function GetStudentStatusListFilteredCurrentLocation(
location: LocationType
) {
const config = await GetConfig();
return instance
.post(
"/api/v1/student_status/near_current_location/",
{
location: location,
},
config
)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function GetStudyGroupListFiltered() {
const config = await GetConfig();
return instance
.get("/api/v1/study_groups/near/", config)
.then((response) => {
console.log("DEBUGGG", response.data);
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function GetStudyGroupList() {
const config = await GetConfig();
return instance
.get("/api/v1/study_groups/", config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function CreateStudyGroup(info: StudyGroupCreateType) {
const config = await GetConfig();
// console.log("Creating study group:", info);
return instance
.post("/api/v1/study_groups/create/", info, config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}

68
src/components/DrawerSettings/CustomDrawerContent.tsx
View file

@ -5,7 +5,10 @@ import { Text, View } from "react-native";
import { colors } from "../../styles";
import styles from "../../styles";
import { RootDrawerParamList } from "../../interfaces/Interfaces";
import {
RootDrawerParamList,
StudentStatusPatchType,
} from "../../interfaces/Interfaces";
import AppIcon from "../../icons/AppIcon/AppIcon";
import HomeIcon from "../../icons/HomeIcon/HomeIcon";
import LoginIcon from "../../icons/LoginIcon/LoginIcon";
@ -18,11 +21,48 @@ import { logout } from "../../features/redux/slices/StatusSlice/StatusSlice";
import AsyncStorage from "@react-native-async-storage/async-storage";
import UserIcon from "../../icons/UserIcon/UserIcon";
import SubjectIcon from "../../icons/SubjectIcon/SubjectIcon";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import toast from "react-native-toast-notifications/lib/typescript/toast";
import { PatchStudentStatus } from "../Api/Api";
import { useToast } from "react-native-toast-notifications";
export default function CustomDrawerContent(props: {}) {
const navigation = useNavigation<RootDrawerParamList>();
const status = useSelector((state: RootState) => state.status);
const dispatch = useDispatch();
const queryClient = useQueryClient();
const toast = useToast();
const debug_disable_clear_on_logout = true;
const stop_studying_logout = useMutation({
mutationFn: async (info: StudentStatusPatchType) => {
const data = await PatchStudentStatus(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
console.log("DEBUG", data);
return data;
},
onSuccess: async () => {
toast.show("Logged out. Stopped studying", {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
queryClient.clear();
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
if (status.logged_in && status.onboarding) {
return (
<DrawerContentScrollView {...props}>
@ -38,9 +78,16 @@ export default function CustomDrawerContent(props: {}) {
<DrawerButton
onPress={async () => {
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
if (debug_disable_clear_on_logout) {
queryClient.clear();
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
} else {
stop_studying_logout.mutate({
active: false,
});
}
}}
>
<LogoutIcon size={32} />
@ -86,9 +133,16 @@ export default function CustomDrawerContent(props: {}) {
</DrawerButton>
<DrawerButton
onPress={async () => {
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
if (debug_disable_clear_on_logout) {
queryClient.clear();
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
} else {
stop_studying_logout.mutate({
active: false,
});
}
}}
>
<LogoutIcon size={32} />

20
src/components/GetDistance/GetDistanceFromUSTP.tsx Normal file
View file

@ -0,0 +1,20 @@
import { LocationType } from "../../interfaces/Interfaces";
import GetDistance from "./GetDistance";
export default function GetDistanceFromUSTP(location: LocationType) {
const ustpCoords = {
latitude: 8.4857,
longitude: 124.6565,
latitudeDelta: 0.000235,
longitudeDelta: 0.000067,
};
let dist = GetDistance(
location.latitude,
location.longitude,
ustpCoords.latitude,
ustpCoords.longitude
);
dist = Math.round(dist);
return dist;
}

79
src/components/MapRenderer/MapRendererFar.tsx Normal file
View file

@ -0,0 +1,79 @@
import * as React from "react";
import { View, Text } from "react-native";
import MapView, { UrlTile, Callout, Marker } from "react-native-maps";
import styles, { Viewport, colors } from "../../styles";
import { urlProvider } from "../Api/Api";
import { LocationType, RawLocationType } from "../../interfaces/Interfaces";
import GetDistance from "../../components/GetDistance/GetDistance";
type props = {
location: LocationType;
dist: any;
};
export default function MapRendererFar(props: props) {
return (
<>
<Text style={styles.text_white_medium}>
You are too far from USTP {"\n"}
Get closer to use Stud-E
</Text>
<MapView
style={{
height: Viewport.height * 0.5,
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: props.location.latitude,
longitude: props.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: props.location.latitude,
longitude: props.location.longitude,
}}
pinColor={colors.primary_1}
>
<Callout>
<Text style={styles.text_black_tiny}>
You are here {"\n"}
X: {Math.round(props.location.longitude) + "\n"}
Z: {Math.round(props.location.latitude)}
</Text>
</Callout>
</Marker>
</MapView>
<Text style={styles.text_white_small}>
{props.dist}km away from USTP {"\n"}
</Text>
</>
);
}

24
src/components/ParseError/ParseError.tsx
View file

@ -1,24 +0,0 @@
export default function ParseError(text: string) {
if (text) {
return text
.replaceAll(/[{}()"]/g, " ")
.replaceAll(/,/g, "\n")
.replaceAll("[", "")
.replaceAll("]", "")
.replaceAll(".", "");
}
return "";
}
export function ParseLoginError(text: string) {
if (text) {
return text
.replaceAll(/[{}()"]/g, " ")
.replaceAll(/,/g, "\n")
.replaceAll("[", "")
.replaceAll("]", "")
.replaceAll(".", "")
.replaceAll("non_field_errors", "");
}
return "";
}

2
src/icons/DropdownIcon/DropdownIcon.tsx → src/icons/CaretDownIcon/CaretDownIcon.tsx
View file

@ -3,7 +3,7 @@ import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function DropdownIcon(props: IconProps) {
export default function CaretDownIcon(props: IconProps) {
return (
<>
<Svg

24
src/icons/CaretUpIcon/CaretUpIcon.tsx Normal file
View file

@ -0,0 +1,24 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function CaretUpIcon(props: IconProps) {
return (
<>
<Svg
height={props.size + "px"}
width={props.size + "px"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={colors.icon_color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
<Path d="M18 14l-6 -6l-6 6h12"></Path>
</Svg>
</>
);
}

27
src/icons/InfoIcon/InfoIcon.tsx Normal file
View file

@ -0,0 +1,27 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function InfoIcon(props: IconProps) {
return (
<>
<Svg
width={props.size}
height={props.size}
viewBox="0 0 24 24"
strokeWidth="2"
stroke={colors.icon_color}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
<Path d="M12 9h.01"></Path>
<Path d="M11 12h1v4h1"></Path>
<Path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></Path>
</Svg>
</>
);
}

150
src/interfaces/Interfaces.tsx
View file

@ -1,3 +1,7 @@
import * as Location from "expo-location";
import { GetStudentStatus } from "../components/Api/Api";
import { Float } from "react-native/Libraries/Types/CodegenTypes";
export interface IconProps {
size: number;
}
@ -9,6 +13,7 @@ export interface ResponsiveIconProps {
export interface RootDrawerParamList {
navigate: any;
replace: any;
}
// Redux Interfaces
@ -28,7 +33,7 @@ export interface LoggedInUserState {
// API Interfaces
export interface RegistrationParams {
export interface RegistrationType {
email: string;
username: string;
password: string;
@ -37,12 +42,12 @@ export interface RegistrationParams {
student_id_number: string;
}
export interface LoginParams {
export interface LoginType {
username: string;
password: string;
}
export interface ActivationParams {
export interface ActivationType {
uid: string;
token: string;
}
@ -53,80 +58,165 @@ export interface OptionType {
}
// Semester
export interface Semester {
export interface SemesterType {
id: string;
name: string;
shortname: string;
}
export type Semesters = Array<Semester>;
export type SemestersType = Array<SemesterType>;
export type SemesterParams = [boolean, Semesters];
export type SemesterReturnType = [boolean, SemestersType];
// Year Level
export interface YearLevel {
export interface YearLevelType {
id: string;
name: string;
shortname: string;
}
export type YearLevels = Array<YearLevel>;
export type YearLevelsType = Array<YearLevelType>;
export type YearLevelParams = [boolean, YearLevels];
export type YearLevelReturnType = [boolean, YearLevelsType];
// Course
export interface Course {
export interface CourseType {
id: string;
name: string;
shortname: string;
}
export type Courses = Array<Course>;
export type CourseParams = [boolean, Courses];
export type CoursesType = Array<CourseType>;
export type CourseReturnType = [boolean, CoursesType];
// Subject
export interface Subject {
export interface SubjectType {
id: number;
name: string;
code: string;
// courses: any[]; // To-do
// year_levels: any[]; // To-do
// semesters: any[]; // To-do
course: string;
year_level: string;
semester: string;
}
export type Subjects = Array<Subject>;
export type SubjectParams = [boolean, Subjects];
export type SubjectsType = Array<SubjectType>;
export type SubjectsReturnType = [boolean, SubjectsType];
export type AvatarType = {
uri: string;
type: string;
name: string;
};
// For dropdown menu
export interface OnboardingParams {
export interface OnboardingType {
year_level: string;
course: string;
semester: string;
}
export interface PatchStudentData {
course?: string | null;
first_name?: string | null;
last_name?: string | null;
semester?: string | null;
subjects?: any[] | null; // To-do, replace 'any' with your actual type
year_level?: string | null;
export interface PatchUserInfoType {
course?: string;
first_name?: string;
last_name?: string;
semester?: string;
subjects?: string[];
year_level?: string;
irregular?: boolean;
avatar?: string;
}
export interface StudentData {
export interface LocationType {
latitude: Float;
longitude: Float;
}
export interface StudentStatusType {
subject: string;
location: LocationType;
landmark: string | null;
active: boolean;
study_group: string;
}
export interface StudentStatusPatchType {
subject?: string;
location?: LocationType;
landmark?: string | null;
active?: boolean;
study_group?: string;
}
export interface StudentStatusFilterType {
active: boolean;
distance: number;
landmark: string | null;
location: LocationType;
study_group?: string;
subject: string;
user: string;
weight?: number;
}
export interface StudentStatusFilterTypeFlattened {
active: boolean;
distance: number;
landmark: string | null;
latitude: Float;
longitude: Float;
study_group?: string;
subject: string;
user: string;
weight?: number;
}
export interface StudyGroupType {
name: string;
students: string[];
distance: number;
landmark: string | null;
location: LocationType;
subject: string;
radius: number;
}
export interface StudyGroupCreateType {
name: string;
location: LocationType;
subject: string;
}
export type StudyGroupReturnType = [boolean, StudyGroupType[]];
export type StudentStatusReturnType = [boolean, StudentStatusType];
export type StudentStatusListType = Array<StudentStatusFilterType>;
export type StudentStatusListReturnType = [boolean, StudentStatusListType];
export type RawLocationType = Location.LocationObject;
export interface UserInfoType {
first_name: string;
last_name: string;
email: string;
avatar: string;
student_id_number: string;
is_banned: boolean;
irregular: boolean;
semester: string;
semester_shortname: string;
course: string;
course_shortname: string;
year_level: string;
yearlevel_shortname: string;
subjects: any[]; // To-do
subjects: string[];
username: string;
}
export type UserInfoParams = [boolean, StudentData];
export type UserInfoReturnType = [boolean, UserInfoType];
export type subjectUserMapType = {
subject: string;
users: string[];
latitude: Float;
longitude: Float;
radius: Float;
};

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 />;
}

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

@ -1,127 +1,326 @@
import styles, { Viewport, colors } from "../../styles";
import { View, Text } from "react-native";
import styles, { colors } from "../../styles";
import { View, Text, Pressable, ScrollView, Switch } from "react-native";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { useState, useEffect } from "react";
import MapView, { Callout, Marker, UrlTile } from "react-native-maps";
import MapView, { Circle, Marker } from "react-native-maps";
import * as Location from "expo-location";
import GetDistance from "../../components/GetDistance/GetDistance";
import Button from "../../components/Button/Button";
import { AnimatedMapView } from "react-native-maps/lib/MapView";
type LocationType = Location.LocationObject;
import {
RootDrawerParamList,
StudentStatusReturnType,
RawLocationType,
StudentStatusType,
StudentStatusListReturnType,
StudentStatusListType,
StudentStatusPatchType,
StudyGroupType,
StudyGroupReturnType,
StudentStatusFilterType,
} from "../../interfaces/Interfaces";
import { useNavigation } from "@react-navigation/native";
import {
GetStudentStatus,
GetStudentStatusListNear,
GetStudyGroupList,
GetStudyGroupListFiltered,
PatchStudentStatus,
} from "../../components/Api/Api";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useToast } from "react-native-toast-notifications";
import React from "react";
import MapRendererFar from "../../components/MapRenderer/MapRendererFar";
import GetDistanceFromUSTP from "../../components/GetDistance/GetDistanceFromUSTP";
import Modal from "react-native-modal";
import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
export default function Home() {
const [location, setLocation] = useState<LocationType | null>(null);
// Switch this condition to see the main map when debugging
const map_debug = true;
const navigation = useNavigation<RootDrawerParamList>();
const [location, setLocation] = useState<RawLocationType | null>(null);
const [dist, setDist] = useState<number | null>(null);
const [feedback, setFeedback] = useState(
"To continue, please allow Stud-E permission to location services"
);
const urlProvider =
"https://tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey=0f5cb5930d7642a8a921daea650754d9";
const ustpCoords = {
latitude: 8.4857,
longitude: 124.6565,
latitudeDelta: 0.000235,
longitudeDelta: 0.000067,
};
const queryClient = useQueryClient();
const toast = useToast();
const [modalOpen, setModalOpen] = useState(false);
const [modalByGroup, setModalByGroup] = useState(false);
async function requestLocation() {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== "granted") {
setFeedback(
"Permission to access location was denied. Please allow permission"
setFeedback("Allow location permissions to continue");
toast.show(
"Location permission was denied. Please allow in order to use StudE",
{
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
}
);
return;
}
if (status == "granted") {
let location = await Location.getCurrentPositionAsync({});
if (location) {
setLocation(location);
getDistance(location);
let newLocation = await Location.getCurrentPositionAsync({});
if (newLocation) {
// Only update location state if user's location has changed
if (
!location ||
newLocation.coords.latitude !== location.coords.latitude ||
newLocation.coords.longitude !== location.coords.longitude
) {
setLocation(newLocation);
DistanceHandler(newLocation);
}
}
}
}
// Refresh every 10 seconds
// Refresh every 15 seconds
useEffect(() => {
const interval = setInterval(() => {
requestLocation();
}, 10000);
}, 15000);
return () => clearInterval(interval);
});
// Refresh when user moves location
useEffect(() => {
requestLocation();
}, [location]);
// Run when screen loads
// Refresh when screen loads
useEffect(() => {
requestLocation();
}, []);
async function getDistance(location: LocationType) {
let dist = GetDistance(
location.coords.latitude,
location.coords.longitude,
8.4857, // LatitudeDelta
124.6565 // LongitudeDelta
);
setDist(Math.round(dist));
async function DistanceHandler(location: RawLocationType) {
let dist = GetDistanceFromUSTP(location.coords);
setDist(dist);
// Deactivate student status if too far away
if (dist >= 2 && !map_debug)
stop_studying.mutate({
active: false,
});
}
// Student Status
const [studying, setStudying] = useState(false);
const [subject, setSubject] = useState("");
const [buttonLabel, setButtonLabel] = useState("Start studying");
const [student_status, setStudentStatus] = useState<StudentStatusType>();
const StudentStatusQuery = useQuery({
queryKey: ["user_status"],
queryFn: async () => {
const data = await GetStudentStatus();
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: (data: StudentStatusReturnType) => {
if (data[1].active !== undefined) {
setStudying(data[1].active);
}
if (data[1].subject !== undefined) {
setSubject(data[1].subject);
}
if (data[1].active == true) {
setButtonLabel("Stop Studying");
} else if (data[1].active == false) {
setButtonLabel("Start Studying");
}
setStudentStatus(data[1]);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const stop_studying = useMutation({
mutationFn: async (info: StudentStatusPatchType) => {
const data = await PatchStudentStatus(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
return data;
},
onSuccess: () => {
if (student_status?.study_group) {
// Display separate toast if you stop studying while in a study group
toast.show("You left study group \n" + student_status?.study_group, {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
}
toast.show("You are no longer studying \n" + subject, {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
queryClient.invalidateQueries({ queryKey: ["user_status"] });
// Delay refetching for study groups since backend still needs to delete groups without students after leaving a study group
setTimeout(() => {
queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
queryClient.invalidateQueries({
queryKey: ["study_group_list_global"],
});
}, 500);
setStudyGroups([]);
setStudying(false);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const change_study_group = useMutation({
mutationFn: async (info: StudentStatusPatchType) => {
const data = await PatchStudentStatus(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
return data;
},
onSuccess: () => {
if (student_status?.study_group) {
// Display separate toast if you stop studying while in a study group
toast.show("You left study group \n" + student_status?.study_group, {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
}
queryClient.invalidateQueries({ queryKey: ["user_status"] });
// Delay refetching for study groups since backend still needs to delete groups without students after leaving a study group
setTimeout(() => {
queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
queryClient.invalidateQueries({
queryKey: ["study_group_list_global"],
});
}, 500);
setStudyGroups([]);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const [student_statuses, setStudentStatuses] =
useState<StudentStatusListType>([]);
// Student Status List
const StudentStatusListQuery = useQuery({
enabled: studying,
queryKey: ["user_status_list"],
queryFn: async () => {
const data = await GetStudentStatusListNear();
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: (data: StudentStatusListReturnType) => {
if (data[1] && location) {
// Filter to only include students studying solo
let data_filtered = data[1].filter(
(item: StudentStatusFilterType) => item.study_group == null
);
setStudentStatuses(data_filtered);
}
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const [study_groups, setStudyGroups] = useState<StudyGroupType[]>([]);
// Study Group List
const StudyGroupQuery = useQuery({
enabled: studying,
queryKey: ["study_group_list"],
queryFn: async () => {
const data = await GetStudyGroupListFiltered();
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: (data: StudyGroupReturnType) => {
if (data[1] && location) {
setStudyGroups(data[1]);
}
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const [study_groups_global, setStudyGroupsGlobal] = useState<
StudyGroupType[]
>([]);
// Student Status List
const StudyGroupGlobalQuery = useQuery({
enabled: !studying,
queryKey: ["study_group_list_global"],
queryFn: async () => {
const data = await GetStudyGroupList();
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: (data: StudyGroupReturnType) => {
if (data[1] && location) {
setStudyGroupsGlobal(data[1]);
}
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
function CustomMap() {
if (dist && location) {
if (dist <= 1.5) {
// Just switch this condition for map debugging
if (dist <= 2 || map_debug) {
return (
<AnimatedMapView
style={styles.map}
mapType="none"
initialRegion={ustpCoords}
scrollEnabled={false}
zoomEnabled={false}
rotateEnabled={false}
followsUserLocation={true}
minZoomLevel={18}
toolbarEnabled={false}
customMapStyle={[
{
featureType: "poi",
stylers: [
{
visibility: "off",
},
],
},
]}
>
<UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
}}
/>
</AnimatedMapView>
);
} else {
return (
<View>
<Text style={styles.text_white_medium}>
You are too far from USTP {"\n"}
Get closer to use Stud-E
</Text>
<AnimatedMapView
style={{
height: Viewport.height * 0.5,
width: Viewport.width * 0.8,
alignSelf: "center",
}}
<>
<MapView
style={styles.map}
customMapStyle={[
{
featureType: "poi",
@ -132,62 +331,517 @@ export default function Home() {
],
},
]}
mapType="none"
scrollEnabled={false}
zoomEnabled={false}
scrollEnabled={true}
zoomEnabled={true}
toolbarEnabled={false}
rotateEnabled={false}
followsUserLocation={true}
minZoomLevel={18}
maxZoomLevel={19}
minZoomLevel={19}
zoomTapEnabled
initialRegion={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
latitude:
student_status?.location?.latitude ||
location.coords.latitude,
longitude:
student_status?.location?.longitude ||
location.coords.longitude,
latitudeDelta: 0.4,
longitudeDelta: 0.4,
}}
loadingBackgroundColor={colors.secondary_2}
>
{student_statuses.map(
(student_status: StudentStatusFilterType, index: number) => {
const randomColorWithOpacity = `rgba(${Math.floor(
Math.random() * 256
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
Math.random() * 256
)}, 0.7)`;
return (
<Marker
key={index}
coordinate={student_status.location}
pinColor={randomColorWithOpacity}
zIndex={1000}
onPress={() => {
toast.hideAll();
toast.show(
<View
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
}}
>
<Text style={styles.text_white_tiny_bold}>
Student: {student_status.user}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`Studying ${student_status.subject}`}
</Text>
</View>,
{
type: "normal",
placement: "top",
duration: 2000,
animationType: "slide-in",
style: {
backgroundColor: colors.secondary_2,
borderWidth: 1,
borderColor: colors.primary_1,
},
}
);
}}
/>
);
}
)}
{studying ? (
study_groups.map(
(studygroup: StudyGroupType, index: number) => {
const randomColorWithOpacity = `rgba(${Math.floor(
Math.random() * 256
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
Math.random() * 256
)}, 0.7)`;
return (
<React.Fragment key={index}>
<Marker
coordinate={studygroup.location}
pinColor={randomColorWithOpacity}
zIndex={1000}
onPress={() => {
toast.hideAll();
toast.show(
<View
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
}}
>
<Text style={styles.text_white_tiny_bold}>
Study Group: {studygroup.name}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`${studygroup.students.length} ${
studygroup.students.length > 1
? "students"
: "student"
} studying`}
</Text>
{student_status?.study_group !=
studygroup.name ? (
<Button
onPress={() => {
change_study_group.mutate({
study_group: studygroup.name,
subject: studygroup.subject,
});
}}
>
<Text style={styles.text_white_tiny_bold}>
Join Group
</Text>
</Button>
) : (
<></>
)}
{student_status?.study_group ==
studygroup.name ? (
<Button
onPress={() => {
change_study_group.mutate({
study_group: "",
});
}}
>
<Text style={styles.text_white_tiny_bold}>
Leave Group
</Text>
</Button>
) : (
<></>
)}
</View>,
{
type: "normal",
placement: "top",
duration: 2000,
animationType: "slide-in",
style: {
backgroundColor: colors.secondary_2,
borderWidth: 1,
borderColor: colors.primary_1,
},
}
);
}}
/>
<Circle
center={studygroup.location}
radius={studygroup.radius}
fillColor={randomColorWithOpacity}
strokeColor="white"
zIndex={1000}
/>
</React.Fragment>
);
}
)
) : (
<></>
)}
{!studying ? (
study_groups_global.map(
(studygroup: StudyGroupType, index: number) => {
const randomColorWithOpacity = `rgba(${Math.floor(
Math.random() * 256
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
Math.random() * 256
)}, 0.7)`;
return (
<React.Fragment key={index}>
<Marker
coordinate={studygroup.location}
pinColor={randomColorWithOpacity}
zIndex={1000}
onPress={() => {
toast.hideAll();
toast.show(
<View
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
}}
>
<Text style={styles.text_white_tiny_bold}>
Study Group: {studygroup.name}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`${studygroup.students.length} ${
studygroup.students.length > 1
? "students"
: "student"
} studying`}
</Text>
{student_status?.study_group !=
studygroup.name ? (
<Text style={styles.text_white_tiny_bold}>
Study nearby to join
</Text>
) : (
<></>
)}
</View>,
{
type: "normal",
placement: "top",
duration: 2000,
animationType: "slide-in",
style: {
backgroundColor: colors.secondary_2,
borderWidth: 1,
borderColor: colors.primary_1,
},
}
);
}}
/>
<Circle
center={studygroup.location}
radius={studygroup.radius}
fillColor={randomColorWithOpacity}
strokeColor="white"
zIndex={1000}
/>
</React.Fragment>
);
}
)
) : (
<></>
)}
{!studying || !student_status?.study_group ? (
<Marker
zIndex={1001}
coordinate={{
latitude:
student_status?.location?.latitude ||
location.coords.latitude,
longitude:
student_status?.location?.longitude ||
location.coords.longitude,
}}
draggable={!student_status?.active}
onDragEnd={(e) => {
const newLocation = e.nativeEvent.coordinate;
const distance = GetDistance(
newLocation.latitude,
newLocation.longitude,
location.coords.latitude,
location.coords.longitude
);
if (distance <= 0.1) {
// If the new location is within 100 meters of the actual location, update the location state
setLocation({
...location,
coords: {
...location.coords,
latitude: newLocation.latitude,
longitude: newLocation.longitude,
},
});
} else {
// If the new location is more than 100 meters away from the actual location, reset the marker to the actual location
setLocation({
...location,
});
}
}}
pinColor={colors.primary_1}
onPress={() => {
toast.hideAll();
toast.show(
<View
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
}}
>
<Text style={styles.text_white_tiny_bold}>
You are here
</Text>
{student_status?.active &&
!student_status?.study_group ? (
<>
<Text style={styles.text_white_tiny_bold}>
{student_status?.active
? "Studying " + student_status?.subject
: ""}
</Text>
<Button
onPress={() => {
if (student_status?.subject) {
navigation.navigate("Create Group", {
location: {
latitude:
student_status?.location.latitude,
longitude:
student_status?.location.longitude,
},
subject: student_status?.subject,
});
}
}}
>
<Text style={styles.text_white_tiny_bold}>
Create Group
</Text>
</Button>
</>
) : (
<></>
)}
{student_status?.study_group ? (
<>
<Text style={styles.text_white_tiny_bold}>
{`Studying: ${student_status?.subject}`}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`In group: ${student_status?.study_group}`}
</Text>
</>
) : (
<></>
)}
</View>,
{
type: "normal",
placement: "top",
duration: 2000,
animationType: "slide-in",
style: {
backgroundColor: colors.secondary_2,
borderWidth: 1,
borderColor: colors.primary_1,
},
}
);
}}
></Marker>
) : (
<></>
)}
</MapView>
<View
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
}}
>
<UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
<Button
onPress={async () => {
if (!student_status?.active) {
navigation.navigate("Start Studying", {
location: location,
});
} else {
stop_studying.mutate({
active: false,
});
}
}}
onPress={() => console.log(location)}
pinColor={colors.primary_1}
>
<Callout>
<Text style={styles.text_black_tiny}>
X: {Math.round(location.coords.longitude) + "\n"}
Z: {Math.round(location.coords.latitude)}
</Text>
</Callout>
</Marker>
</AnimatedMapView>
<Text style={styles.text_white_small}>
{dist}km away from USTP {"\n"}
</Text>
</View>
<Text style={styles.text_white_small}>{buttonLabel}</Text>
</Button>
<Pressable
style={{
display: modalOpen ? "none" : "flex",
backgroundColor: colors.secondary_3,
borderRadius: 16,
alignSelf: "center",
}}
onPress={() => {
setModalOpen(true);
}}
>
{studying ? <CaretUpIcon size={32} /> : <></>}
</Pressable>
</View>
<View style={styles.padding} />
</>
);
} else {
return <MapRendererFar location={location.coords} dist={dist} />;
}
} else {
return (
<AnimatedContainer>
<>
<Text style={styles.text_white_medium}>{feedback}</Text>
<Button onPress={() => requestLocation()}>
<Text style={styles.text_white_medium}>Allow Access</Text>
</Button>
</AnimatedContainer>
</>
);
}
}
return (
<View style={styles.background}>
<Modal
coverScreen={false}
isVisible={modalOpen && studying}
style={{ opacity: 0.85 }}
hasBackdrop={false}
>
<AnimatedContainer>
<Text style={styles.text_white_medium}>Groups List</Text>
<Pressable
style={{
alignContent: "flex-start",
backgroundColor: colors.secondary_3,
borderRadius: 16,
}}
onPress={() => setModalOpen(false)}
>
<DropdownIcon size={32} />
</Pressable>
<Switch
value={modalByGroup}
onChange={() => {
setModalByGroup(!modalByGroup);
}}
/>
<ScrollView>
{!modalByGroup ? (
student_statuses.map(
(student_status: StudentStatusFilterType, index: number) => {
return (
<View
key={index}
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
backgroundColor: colors.secondary_3,
borderColor: colors.primary_2,
borderWidth: 1,
borderRadius: 16,
width: 256,
}}
>
<Text style={styles.text_white_tiny_bold}>
Student: {student_status.user}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`Studying ${student_status.subject}`}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`${Math.round(student_status.distance * 1000)}m away`}
</Text>
</View>
);
}
)
) : (
<></>
)}
{modalByGroup ? (
study_groups.map((studygroup: StudyGroupType, index: number) => {
return (
<View
key={index}
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
backgroundColor: colors.secondary_3,
borderColor: colors.primary_2,
borderWidth: 1,
borderRadius: 16,
width: 256,
}}
>
<Text style={styles.text_white_tiny_bold}>
Group Name: {studygroup.name}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`Studying ${studygroup.subject}`}
</Text>
<Text style={styles.text_white_tiny_bold}>
Students Studying: {studygroup.students.length}
</Text>
{student_status?.study_group != studygroup.name ? (
<Text style={styles.text_white_tiny_bold}>
{`${Math.round(studygroup.distance * 1000)}m away`}
</Text>
) : (
<></>
)}
</View>
);
})
) : (
<></>
)}
</ScrollView>
</AnimatedContainer>
</Modal>
<AnimatedContainer>
<CustomMap />
</AnimatedContainer>

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>

5
src/styles.tsx
View file

@ -171,7 +171,8 @@ const styles = StyleSheet.create({
width: "70%",
},
map: {
height: Viewport.height * 0.8,
marginVertical: 4,
height: Viewport.height * 0.7,
width: Viewport.width * 0.8,
alignSelf: "center",
},
@ -182,6 +183,8 @@ const styles = StyleSheet.create({
borderRadius: 150 / 2,
overflow: "hidden",
padding: 0,
borderColor: colors.primary_2,
borderWidth: 3,
},
input: {
paddingHorizontal: 8,