mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2024-11-17 06:19:25 +08:00
Merge branch 'master' into initial-frontend
This commit is contained in:
lemeow125
GitHub
commit
fab7491a8d
25 changed files with 2331 additions and 524 deletions
60
App.tsx
60
App.tsx
|
|
@ -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";
|
||||
|
|
@ -22,6 +23,11 @@ import { StatusBar } from "expo-status-bar";
|
|||
import UserInfoPage from "./src/routes/UserInfoPage/UserInfoPage";
|
||||
import SubjectsPage from "./src/routes/SubjectsPage/SubjectsPage";
|
||||
import ConversationPage from "./src/routes/ConversationPage/ConversationPage";
|
||||
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();
|
||||
|
||||
|
|
@ -29,7 +35,7 @@ const linking = {
|
|||
prefixes: [Linking.makeUrl("/")],
|
||||
config: {
|
||||
screens: {
|
||||
Home: "home",
|
||||
Home: "",
|
||||
Login: "login",
|
||||
Register: "register",
|
||||
Onboarding: "onboarding",
|
||||
|
|
@ -56,28 +62,36 @@ 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.Screen name="Conversation" component={ConversationPage} />
|
||||
</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.Screen name="Conversation" component={ConversationPage} />
|
||||
</Drawer.Navigator>
|
||||
</NavigationContainer>
|
||||
</Provider>
|
||||
</QueryClientProvider>
|
||||
</ToastProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
10
app.json
10
app.json
|
|
@ -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
38
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
20
src/components/GetDistance/GetDistanceFromUSTP.tsx
Normal 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
79
src/components/MapRenderer/MapRendererFar.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 "";
|
||||
}
|
||||
|
|
@ -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
24
src/icons/CaretUpIcon/CaretUpIcon.tsx
Normal 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
27
src/icons/InfoIcon/InfoIcon.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
177
src/routes/CreateGroup/CreateGroup.tsx
Normal 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 />;
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
17
src/routes/Loading/Loading.tsx
Normal file
17
src/routes/Loading/Loading.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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",
|
||||
});
|
||||
}
|
||||
});
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
}
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
204
src/routes/StartStudying/StartStudying.tsx
Normal 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 />;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue