Compare commits

..

No commits in common. "master" and "v0.3.0-alpha" have entirely different histories.

33 changed files with 2217 additions and 4167 deletions

61
App.tsx
View file

@ -1,5 +1,4 @@
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,13 +21,6 @@ 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 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";
import BackgroundComponent from "./src/components/BackgroundTask/BackgroundTask";
const Drawer = createDrawerNavigator();
@ -36,7 +28,7 @@ const linking = {
prefixes: [Linking.makeUrl("/")],
config: {
screens: {
Home: "",
Home: "home",
Login: "login",
Register: "register",
Onboarding: "onboarding",
@ -63,36 +55,27 @@ export default function App() {
}
}, [initialRoute]);
return (
<ToastProvider
icon={<InfoIcon size={32} />}
textStyle={{ ...styles.text_white_tiny_bold }}
>
<BackgroundComponent />
<QueryClientProvider client={queryClient}>
<Provider store={store}>
<StatusBar style="light" />
<QueryClientProvider client={queryClient}>
<Provider store={store}>
<StatusBar style="light" />
<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>
<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>
);
}

View file

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

2115
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -17,16 +17,13 @@
"@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",
"expo-status-bar": "~1.4.4",
"moment": "^2.29.4",
"moti": "^0.25.3",
"react": "18.2.0",
"react-native": "0.71.14",
"react-native": "0.71.8",
"react-native-bouncy-checkbox": "^3.0.7",
"react-native-dropdown-picker": "^5.4.6",
"react-native-gesture-handler": "~2.9.0",
@ -38,18 +35,13 @@
"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",
"expo-task-manager": "~11.1.1",
"expo-background-fetch": "~11.1.1",
"expo-notifications": "~0.18.1"
"redux": "^4.2.1"
},
"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

View file

@ -1,29 +1,21 @@
import axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {
ActivationType,
LocationType,
LoginType,
MessagePostType,
OnboardingType,
PatchUserInfoType,
RegistrationType,
StudentStatusPatchType,
StudentStatusType,
StudyGroupCreateType,
StudyGroupType,
ActivationParams,
LoginParams,
OnboardingParams,
PatchStudentData,
RegistrationParams,
StudentData,
} from "../../interfaces/Interfaces";
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
export let backendURL = "";
export let backendURLWebsocket = "";
let use_production = true;
if (__DEV__ && use_production) {
if (__DEV__ || !use_production) {
backendURL = "http://10.0.10.8:8000";
backendURLWebsocket = "ws://10.0.10.8:8000";
} else {
backendURL = "https://stude.keannu1.duckdns.org";
backendURLWebsocket = "ws://stude.keannu1.duckdns.org";
}
@ -33,29 +25,8 @@ 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");
@ -88,28 +59,40 @@ export async function GetConfig() {
}
// User APIs
export function UserRegister(register: RegistrationType) {
export function UserRegister(register: RegistrationParams) {
console.log(JSON.stringify(register));
return instance
.post("/api/v1/accounts/users/", register)
.then(async (response) => {
return [true, response.status];
})
.catch((error) => {
let error_message = ParseError(error);
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
return [false, error_message];
});
}
export function UserLogin(user: LoginType) {
export function UserLogin(user: LoginParams) {
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 = ParseError(error);
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
// console.log(error_message);
return [false, error_message];
});
}
@ -123,14 +106,21 @@ 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 = ParseError(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);
return false;
});
}
export async function GetUserInfo() {
export async function UserInfo() {
const config = await GetConfig();
return instance
.get("/api/v1/accounts/users/me/", config)
@ -139,31 +129,37 @@ export async function GetUserInfo() {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(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 PatchUserInfo(info: PatchUserInfoType) {
export async function PatchUserInfo(info: PatchStudentData) {
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 = ParseError(error);
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
// console.log(error_message);
return [false, error_message];
});
}
export function UserActivate(activation: ActivationType) {
export function UserActivate(activation: ActivationParams) {
return instance
.post("/api/v1/accounts/users/activation/", activation)
.then(() => {
.then(async (response) => {
return true;
})
.catch(() => {
.catch((error) => {
return false;
});
}
@ -183,7 +179,9 @@ export async function GetCourses() {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
return [false, error_message];
});
}
@ -201,7 +199,9 @@ export async function GetSemesters() {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
return [false, error_message];
});
}
@ -215,187 +215,69 @@ export async function GetYearLevels() {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(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 GetSubjects() {
const config = await GetConfig();
return instance
.get("/api/v1/subjects/", config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
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
export async function GetSubjects(
byCourseOnly: boolean,
course: string,
year_level?: string,
semester?: string
) {
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];
});
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 GetStudyGroupListFiltered() {
export async function OnboardingUpdateStudentInfo(info: OnboardingParams) {
const config = await GetConfig();
return instance
.get("/api/v1/study_groups/near/", config)
.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 = 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];
});
}
export async function GetStudyGroup(name: string) {
const config = await GetConfig();
return instance
.get(`/api/v1/study_groups/${name}`, config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function GetStudyGroupMessages() {
const config = await GetConfig();
return instance
.get(`/api/v1/messages/`, config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function GetStudyGroupMemberAvatars() {
const config = await GetConfig();
return instance
.get(`/api/v1/study_groups/member_avatars`, config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
let error_message = ParseError(error);
return [false, error_message];
});
}
export async function PostMessage(info: MessagePostType) {
const config = await GetConfig();
return instance
.post(`/api/v1/messages/`, info, config)
.then((response) => {
return [true, response.data];
})
.catch((error) => {
console.log("Error:", error.response.data);
let error_message = ParseError(error);
let error_message = "";
if (error.response) error_message = error.response.data;
else error_message = "Unable to reach servers";
console.log("Error updating onboarding info", error_message);
return [false, error_message];
});
}

View file

@ -1,148 +0,0 @@
import React, { useEffect } from "react";
import { View } from "react-native";
import * as BackgroundFetch from "expo-background-fetch";
import * as TaskManager from "expo-task-manager";
import * as Notifications from "expo-notifications";
import {
GetStudentStatus,
GetStudyGroupListFiltered,
GetStudyGroupMessages,
} from "../Api/Api";
import { StudyGroupType } from "../../interfaces/Interfaces";
import AsyncStorage from "@react-native-async-storage/async-storage";
const FETCH_STUDENT_STATUS = "STUDENT_STATUS_TASK";
const FETCH_GROUP_MESSAGES = "GROUP_MESSAGES_TASK";
TaskManager.defineTask(FETCH_GROUP_MESSAGES, async () => {
const data = await GetStudyGroupMessages();
if (data[0] && data[1]) {
let messages_prev = await JSON.parse(
(await AsyncStorage.getItem("messages")) || "[]"
);
await AsyncStorage.setItem("messages", JSON.stringify(data[1]));
let message_curr = data[1];
let difference: Array<any> = messages_prev
.filter(
(x: any) =>
!message_curr.some(
(y: any) => JSON.stringify(y) === JSON.stringify(x)
)
)
.concat(
message_curr.filter(
(x: any) =>
!messages_prev.some(
(y: any) => JSON.stringify(y) === JSON.stringify(x)
)
)
);
if (difference.length > 0) {
console.log(`${difference.length} unread messages`);
Notifications.scheduleNotificationAsync({
content: {
title: `${difference.length} unread messages`,
body: `${difference[0].user}: ${difference[0].message_content}`,
},
trigger: {
seconds: 1,
},
});
}
} else {
console.log(data[1].response.data);
}
return BackgroundFetch.BackgroundFetchResult.NewData;
});
TaskManager.defineTask(FETCH_STUDENT_STATUS, async () => {
const data = await GetStudyGroupListFiltered();
const student_status_data = await GetStudentStatus();
if (data[0] && data[1]) {
console.log("Fetching nearby study groups...");
const entryWithLeastDistance = data[1].reduce(
(prev: StudyGroupType, curr: StudyGroupType) => {
return prev.distance < curr.distance ? prev : curr;
}
);
// Only display a notification if a student isn't in a study group yet
if (
student_status_data[1].study_group == null ||
student_status_data[1].study_group == ""
) {
console.log(
"User has no study group yet. Found nearby groups, pushing notification"
);
Notifications.scheduleNotificationAsync({
content: {
title: "Students are studying nearby",
body: `Nearest study group is ${Math.round(
entryWithLeastDistance.distance * 1000
)}m away`,
},
trigger: {
seconds: 1,
},
});
}
} else {
console.log(data[1].response.data);
}
return BackgroundFetch.BackgroundFetchResult.NewData;
});
const BackgroundComponent = () => {
const notification_debug = false;
const [Task1_isRegistered, Task1_setIsRegistered] = React.useState(false);
const [Task2_isRegistered, Task2_setIsRegistered] = React.useState(false);
const [status, setStatus] = React.useState<any>();
const checkStatusAsync = async () => {
let status = await BackgroundFetch.getStatusAsync();
setStatus(status);
let Task1_isRegistered = await TaskManager.isTaskRegisteredAsync(
FETCH_STUDENT_STATUS
);
let Task2_isRegistered = await TaskManager.isTaskRegisteredAsync(
FETCH_GROUP_MESSAGES
);
Task1_setIsRegistered(Task1_isRegistered);
Task2_setIsRegistered(Task2_isRegistered);
};
useEffect(() => {
const registerTasks = async () => {
try {
await checkStatusAsync();
// Nearby students task
if (!Task1_isRegistered) {
await BackgroundFetch.registerTaskAsync(FETCH_STUDENT_STATUS, {
minimumInterval: notification_debug ? 5 : 60 * 3, // Check every 5 seconds in dev & every 3 minutes in production builds
});
console.log("Task for nearby students check registered");
} else {
console.log("Task for nearby students check already registered");
}
// Message Checking Task
if (!Task2_isRegistered) {
await BackgroundFetch.registerTaskAsync(FETCH_GROUP_MESSAGES, {
minimumInterval: notification_debug ? 5 : 30, // Check every 5 seconds in dev & every 30 seconds in production builds
});
console.log("Task for group messages check registered");
} else {
console.log("Task for group messages check already registered");
}
} catch (err) {
console.log("Task Register failed:", err);
}
};
registerTasks();
}, []);
return <View />;
};
export default BackgroundComponent;

View file

@ -17,10 +17,7 @@ export default function Button({ disabled = false, ...props }: props) {
<Pressable
disabled={disabled}
onPress={props.onPress}
style={({ pressed }) => [
styles.button_template,
{ backgroundColor: pressed ? colors.primary_2 : props.color },
]}
style={{ ...styles.button_template, ...{ backgroundColor: props.color } }}
>
{props.children}
</Pressable>

View file

@ -5,10 +5,7 @@ import { Text, View } from "react-native";
import { colors } from "../../styles";
import styles from "../../styles";
import {
RootDrawerParamList,
StudentStatusPatchType,
} from "../../interfaces/Interfaces";
import { RootDrawerParamList } from "../../interfaces/Interfaces";
import AppIcon from "../../icons/AppIcon/AppIcon";
import HomeIcon from "../../icons/HomeIcon/HomeIcon";
import LoginIcon from "../../icons/LoginIcon/LoginIcon";
@ -21,48 +18,11 @@ 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 { PatchStudentStatus } from "../Api/Api";
import { useToast } from "react-native-toast-notifications";
import MessageIcon from "../../icons/MessageIcon/MessageIcon";
export default function CustomDrawerContent(props: {}) {
const debug = false;
const navigation = useNavigation<RootDrawerParamList>();
const status = useSelector((state: RootState) => state.status);
const dispatch = useDispatch();
const queryClient = useQueryClient();
const toast = useToast();
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}>
@ -78,17 +38,9 @@ export default function CustomDrawerContent(props: {}) {
<DrawerButton
onPress={async () => {
// We don't clear student statuses when logging out on debug
if (!debug) {
queryClient.clear();
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
} else {
stop_studying_logout.mutate({
active: false,
});
}
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
}}
>
<LogoutIcon size={32} />
@ -132,27 +84,11 @@ export default function CustomDrawerContent(props: {}) {
<SubjectIcon size={32} />
<Text style={styles.text_white_medium}>Subjects</Text>
</DrawerButton>
<DrawerButton
onPress={() => {
navigation.navigate("Conversation");
}}
>
<MessageIcon size={32} />
<Text style={styles.text_white_medium}>Conversation</Text>
</DrawerButton>
<DrawerButton
onPress={async () => {
// We don't clear student statuses when logging out on debug
if (debug) {
queryClient.clear();
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
} else {
stop_studying_logout.mutate({
active: false,
});
}
dispatch(logout());
await AsyncStorage.clear();
navigation.navigate("Login");
}}
>
<LogoutIcon size={32} />
@ -188,6 +124,7 @@ export default function CustomDrawerContent(props: {}) {
<SignupIcon size={32} />
<Text style={styles.text_white_medium}>Register</Text>
</DrawerButton>
{/*
Debug buttons for accessing revalidation and activation page
<DrawerButton

View file

@ -1,20 +0,0 @@
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 * 100) / 100;
return dist;
}

View file

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

View file

@ -1,79 +0,0 @@
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>
</>
);
}

View file

@ -0,0 +1,24 @@
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 "";
}

View file

@ -1,28 +0,0 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function CaretRightIcon(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="M13.883 5.007l.058 -.005h.118l.058 .005l.06 .009l.052 .01l.108 .032l.067 .027l.132 .07l.09 .065l.081 .073l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059v12c0 .852 -.986 1.297 -1.623 .783l-.084 -.076l-6 -6a1 1 0 0 1 -.083 -1.32l.083 -.094l6 -6l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01z"
stroke-width="0"
fill={colors.icon_color}
></Path>
</Svg>
</>
);
}

View file

@ -1,28 +0,0 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function CaretRightIcon(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="M13.883 5.007l.058 -.005h.118l.058 .005l.06 .009l.052 .01l.108 .032l.067 .027l.132 .07l.09 .065l.081 .073l.083 .094l.054 .077l.054 .096l.017 .036l.027 .067l.032 .108l.01 .053l.01 .06l.004 .057l.002 .059v12c0 .852 -.986 1.297 -1.623 .783l-.084 -.076l-6 -6a1 1 0 0 1 -.083 -1.32l.083 -.094l6 -6l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01z"
stroke-width="0"
fill={colors.icon_color}
></Path>
</Svg>
</>
);
}

View file

@ -1,24 +0,0 @@
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>
</>
);
}

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 CaretDownIcon(props: IconProps) {
export default function DropdownIcon(props: IconProps) {
return (
<>
<Svg

View file

@ -1,27 +0,0 @@
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>
</>
);
}

View file

@ -1,29 +0,0 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function MessageIcon(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="M8 9h8"></Path>
<Path d="M8 13h6"></Path>
<Path d="M12.5 20.5l-.5 .5l-3 -3h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4"></Path>
<Path d="M21.121 20.121a3 3 0 1 0 -4.242 0c.418 .419 1.125 1.045 2.121 1.879c1.051 -.89 1.759 -1.516 2.121 -1.879z"></Path>
<Path d="M19 18v.01"></Path>
</Svg>
</>
);
}

View file

@ -1,26 +0,0 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function RefreshIcon(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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></Path>
<Path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></Path>
</Svg>
</>
);
}

View file

@ -1,7 +1,3 @@
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;
}
@ -13,7 +9,6 @@ export interface ResponsiveIconProps {
export interface RootDrawerParamList {
navigate: any;
replace: any;
}
// Redux Interfaces
@ -33,7 +28,7 @@ export interface LoggedInUserState {
// API Interfaces
export interface RegistrationType {
export interface RegistrationParams {
email: string;
username: string;
password: string;
@ -42,12 +37,12 @@ export interface RegistrationType {
student_id_number: string;
}
export interface LoginType {
export interface LoginParams {
username: string;
password: string;
}
export interface ActivationType {
export interface ActivationParams {
uid: string;
token: string;
}
@ -58,183 +53,80 @@ export interface OptionType {
}
// Semester
export interface SemesterType {
export interface Semester {
id: string;
name: string;
shortname: string;
}
export type SemestersType = Array<SemesterType>;
export type Semesters = Array<Semester>;
export type SemesterReturnType = [boolean, SemestersType];
export type SemesterParams = [boolean, Semesters];
// Year Level
export interface YearLevelType {
export interface YearLevel {
id: string;
name: string;
shortname: string;
}
export type YearLevelsType = Array<YearLevelType>;
export type YearLevels = Array<YearLevel>;
export type YearLevelReturnType = [boolean, YearLevelsType];
export type YearLevelParams = [boolean, YearLevels];
// Course
export interface CourseType {
export interface Course {
id: string;
name: string;
shortname: string;
}
export type CoursesType = Array<CourseType>;
export type CourseReturnType = [boolean, CoursesType];
export type Courses = Array<Course>;
export type CourseParams = [boolean, Courses];
// Subject
export interface SubjectType {
id: number;
export interface Subject {
name: string;
code: string;
course: string;
year_level: string;
semester: string;
// courses: any[]; // To-do
// year_levels: any[]; // To-do
// semesters: any[]; // To-do
}
export type SubjectsType = Array<SubjectType>;
export type SubjectsReturnType = [boolean, SubjectsType];
export type Subjects = Array<Subject>;
export type SubjectParams = [boolean, Subjects];
export type AvatarType = {
uri: string;
type: string;
name: string;
};
// For dropdown menu
export interface OnboardingType {
export interface OnboardingParams {
year_level: string;
course: string;
semester: string;
}
export interface PatchUserInfoType {
course?: string;
first_name?: string;
last_name?: string;
semester?: string;
subjects?: string[];
year_level?: string;
irregular?: boolean;
avatar?: 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 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 interface MessageType {
id: number;
user: string;
study_group: string;
message_content: string;
timestamp: string;
}
export interface MessagePostType {
message_content: string;
}
export interface GroupMessageAvatarType {
username: string;
avatar: string;
}
export type GroupMessageAvatarListType = GroupMessageAvatarType[];
export type GroupMessageAvatarReturnType = [boolean, GroupMessageAvatarType[]];
export type MessageReturnType = [boolean, MessageType[]];
export type StudyGroupDetailReturnType = [boolean, StudyGroupType];
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 {
export interface StudentData {
first_name: string;
last_name: string;
email: string;
avatar: string;
student_id_number: string;
irregular: boolean;
is_banned: boolean;
semester: string;
semester_shortname: string;
course: string;
course_shortname: string;
year_level: string;
yearlevel_shortname: string;
subjects: string[];
subjects: any[]; // To-do
username: string;
}
export type UserInfoReturnType = [boolean, UserInfoType];
export type subjectUserMapType = {
subject: string;
users: string[];
latitude: Float;
longitude: Float;
radius: Float;
};
export type UserInfoParams = [boolean, StudentData];

View file

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

View file

@ -1,365 +0,0 @@
import * as React from "react";
import { ActivityIndicator, Image, Pressable } from "react-native";
import styles from "../../styles";
import {
View,
Text,
TextInput,
ScrollView,
NativeSyntheticEvent,
TextInputChangeEventData,
} from "react-native";
import { colors } from "../../styles";
import { useRef, useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import {
GetStudentStatus,
GetStudyGroup,
GetStudyGroupMemberAvatars,
GetStudyGroupMessages,
PostMessage,
} from "../../components/Api/Api";
import {
StudentStatusType,
StudentStatusReturnType,
StudyGroupType,
StudyGroupDetailReturnType,
MessageType,
MessageReturnType,
MessagePostType,
GroupMessageAvatarType,
GroupMessageAvatarReturnType,
} from "../../interfaces/Interfaces";
import { useToast } from "react-native-toast-notifications";
import { useQueryClient } from "@tanstack/react-query";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useSelector } from "react-redux";
import { RootState } from "../../features/redux/Store/Store";
import CaretRightIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
export default function ConversationPage() {
const toast = useToast();
const user = useSelector((state: RootState) => state.user);
// Student Status
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) => {
setStudentStatus(data[1]);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// Study Group Detail
const [studygroup, setStudyGroup] = useState<StudyGroupType>();
const StudyGroupQuery = useQuery({
enabled:
student_status?.study_group != "" && student_status?.study_group != null,
queryKey: ["study_group"],
refetchInterval: 10000,
queryFn: async () => {
const data = await GetStudyGroup(student_status?.study_group || "");
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: (data: StudyGroupDetailReturnType) => {
if (data[1]) {
setStudyGroup(data[1]);
}
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// Study Group Messages
const [messages, setMessages] = useState<MessageType[]>([]);
const MessageQuery = useQuery({
refetchInterval: 3000,
enabled:
!StudentStatusQuery.isLoading &&
(student_status?.study_group != null ||
student_status?.study_group != ""),
queryKey: ["study_group_messages"],
queryFn: async () => {
const data = await GetStudyGroupMessages();
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: async (data: MessageReturnType) => {
if (data[1]) {
await AsyncStorage.setItem("messages", JSON.stringify(data[1]));
setMessages(data[1]);
}
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
// Avatar List
const [users, setUsers] = useState<GroupMessageAvatarType[]>([]);
const AvatarsQuery = useQuery({
refetchInterval: 10000,
enabled:
student_status?.study_group != null ||
(student_status?.study_group != "" &&
studygroup != null &&
studygroup.students != null),
queryKey: ["study_group_avatars"],
queryFn: async () => {
const data = await GetStudyGroupMemberAvatars();
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
}
return data;
},
onSuccess: (data: GroupMessageAvatarReturnType) => {
if (data[1]) {
setUsers(data[1]);
}
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
const scrollViewRef = useRef<ScrollView>(null);
const queryClient = useQueryClient();
const [message, setMessage] = useState("");
const send_message = useMutation({
mutationFn: async (info: MessagePostType) => {
const data = await PostMessage(info);
if (data[0] != true) {
return Promise.reject(new Error(data[1]));
}
return data;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["study_group_messages"] });
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
if (
!StudyGroupQuery.isLoading &&
!AvatarsQuery.isLoading &&
!MessageQuery.isLoading &&
student_status &&
studygroup &&
studygroup.students
) {
return (
<View style={styles.background}>
<AnimatedContainer>
<View
style={{
padding: 15,
alignSelf: "flex-start",
}}
>
<View style={styles.flex_row}>
<Text style={{ ...styles.text_white_medium }}>
{`Group: ${studygroup?.name ? studygroup.name : "Loading..."}`}
</Text>
</View>
{studygroup.landmark ? (
<Text style={{...styles.text_white_tiny_bold,...{textAlign:'left'}}}>
{studygroup.landmark}
</Text>
) : (
<></>
)}
<View style={{ ...styles.flex_row }}>
<Text
style={{
...styles.text_white_small,
textAlign: "left",
paddingRight: 4,
}}
>
{!StudyGroupQuery.isFetching
? studygroup.students.length + " studying"
: "Loading"}
</Text>
{users.map((user: GroupMessageAvatarType, index: number) => {
if (index > 6) {
return <React.Fragment key={index} />;
}
return (
<React.Fragment key={index}>
{user.avatar != null && user.avatar != "" ? (
<Image
source={{ uri: user.avatar }}
style={styles.profile_mini}
/>
) : (
<Image
source={require("../../img/user_profile_placeholder.png")}
style={styles.profile_mini}
/>
)}
</React.Fragment>
);
})}
</View>
</View>
<ScrollView
style={{ width: 320 }}
onContentSizeChange={() => scrollViewRef.current?.scrollToEnd()}
ref={scrollViewRef}
>
{messages.length > 0 ? (
messages.map((message: MessageType, index: number) => {
let avatar = "";
users.filter((user: GroupMessageAvatarType) => {
if (user.username == message.user) {
avatar = user.avatar;
}
});
return (
<View
key={message.id}
style={{
...styles.message_contentContainer,
alignItems:
message.user === user.user.username
? "flex-end"
: "flex-start",
}}
>
<View style={styles.flex_row}>
{avatar != null && avatar != "" ? (
<Image
source={{ uri: avatar }}
style={styles.profile_mini}
/>
) : (
<Image
source={require("../../img/user_profile_placeholder.png")}
style={styles.profile_mini}
/>
)}
<Text style={styles.text_white_small}>
{message.user}
</Text>
<Text
style={{
...styles.text_white_tiny,
...{ marginLeft: 4, alignContent: "center" },
}}
>
{message.timestamp}
</Text>
</View>
<Text style={styles.text_white_small}>
{message.message_content}
</Text>
</View>
);
})
) : (
<Text style={styles.text_white_small}>There are no messages</Text>
)}
</ScrollView>
<View style={styles.flex_row}>
<TextInput
style={styles.chatbox}
placeholder="Send a message..."
placeholderTextColor="white"
value={message}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setMessage(e.nativeEvent.text);
}}
onSubmitEditing={() => {
send_message.mutate({
message_content: message,
});
setMessage("");
}}
/>
<Pressable
style={{
backgroundColor: colors.secondary_3,
borderRadius: 16,
alignSelf: "center",
marginLeft: 16,
}}
onPress={() => {
send_message.mutate({
message_content: message,
});
setMessage("");
}}
>
<CaretRightIcon size={48} />
</Pressable>
</View>
</AnimatedContainer>
</View>
);
} else if (!student_status?.study_group) {
return (
<View style={styles.background}>
<AnimatedContainer>
<Text style={styles.text_white_medium}>
You are not in a study group. Join one to start a conversation!
</Text>
</AnimatedContainer>
</View>
);
}
return (
<View style={styles.background}>
<AnimatedContainer>
<ActivityIndicator size={96} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>Loading...</Text>
</AnimatedContainer>
</View>
);
}

View file

@ -1,192 +0,0 @@
import * as React from "react";
import styles, { Viewport } from "../../styles";
import {
View,
Text,
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
Pressable,
} 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";
import CaretLeftIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
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"] });
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"] });
queryClient.invalidateQueries({ queryKey: ["user_status_list"] });
queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
toast.show(`Joined group ${name} successfully`, {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
// Set a delay before going back to conversation page to hopefully let the queries refresh in time
setTimeout(() => {
navigation.navigate("Conversation");
}, 200);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
if (location) {
return (
<View style={styles.background}>
<AnimatedContainer>
<View style={{ zIndex: -1 }}>
<View style={styles.padding} />
<View style={{ borderRadius: 16, overflow: "hidden" }}>
<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>
<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} />
<View style={styles.flex_row}>
<Pressable onPress={() => navigation.navigate("Home")}>
<CaretLeftIcon size={32} />
</Pressable>
<Button
onPress={() => {
study_group_create.mutate({
name: name,
location: location,
subject: subject,
});
}}
>
<Text style={styles.text_white_small}>Start Studying</Text>
</Button>
</View>
<View style={styles.padding} />
</AnimatedContainer>
</View>
);
}
return <View />;
}

File diff suppressed because it is too large Load diff

View file

@ -1,17 +0,0 @@
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>
);
}

View file

@ -7,13 +7,15 @@ import {
NativeSyntheticEvent,
TextInputChangeEventData,
} from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
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 { GetUserInfo, UserLogin } from "../../components/Api/Api";
import { UserInfo, UserLogin } from "../../components/Api/Api";
import { ParseLoginError } from "../../components/ParseError/ParseError";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import { setUser } from "../../features/redux/slices/UserSlice/UserSlice";
import {
@ -21,24 +23,15 @@ import {
setOnboarding,
unsetOnboarding,
} from "../../features/redux/slices/StatusSlice/StatusSlice";
import { useToast } from "react-native-toast-notifications";
import { RootState } from "../../features/redux/Store/Store";
export default function Login() {
const navigation = useNavigation<RootDrawerParamList>();
const status = useSelector((state: RootState) => state.status);
const [logging_in, setLoggingIn] = useState(false);
const dispatch = useDispatch();
const [creds, setCreds] = useState({
username: "",
password: "",
});
const toast = useToast();
useEffect(() => {
if (status.logged_in) {
navigation.navigate("Home");
}
}, []);
const [error, setError] = useState("");
return (
<View style={styles.background}>
<AnimatedContainer>
@ -67,62 +60,44 @@ 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 () => {
if (!logging_in) {
await UserLogin({
username: creds.username,
password: creds.password,
}).then(async (result) => {
if (result[0]) {
setUser({ ...creds, username: "", password: "", error: "" });
let user_info = await GetUserInfo();
dispatch(login());
dispatch(setUser(user_info[1]));
// Redirect to onboarding if no year level, course, or semester specified
if (
user_info[1].year_level == null ||
user_info[1].course == null ||
user_info[1].semester == null
) {
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));
await UserLogin({
username: creds.username,
password: creds.password,
}).then(async (result) => {
if (result[0]) {
setUser({ ...creds, username: "", password: "", error: "" });
let user_info = await UserInfo();
dispatch(login());
dispatch(setUser(user_info[1]));
// Redirect to onboarding if no year level, course, or semester specified
if (
user_info[1].year_level == null ||
user_info[1].course == null ||
user_info[1].semester == null
) {
dispatch(setOnboarding());
navigation.navigate("Onboarding");
} else {
toast.show(JSON.stringify(result[1]), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
dispatch(unsetOnboarding());
navigation.navigate("Home");
}
setLoggingIn(false);
});
}
console.log(JSON.stringify(user_info));
} else {
console.log("heh", ParseLoginError(JSON.stringify(result[1])));
setError(ParseLoginError(JSON.stringify(result[1])));
}
});
}}
>
<Text style={styles.text_white_small}>Login</Text>

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,
CourseType,
SemesterType,
YearLevelType,
Semester,
YearLevel,
} from "../../interfaces/Interfaces";
import { colors } from "../../styles";
import { MotiView } from "moti";
@ -18,18 +18,18 @@ import {
GetCourses,
GetSemesters,
GetYearLevels,
PatchUserInfo,
OnboardingUpdateStudentInfo,
} 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 toast = useToast();
const [error, setError] = useState("");
// Semesters
const [selected_semester, setSelectedSemester] = useState("");
const [semesterOpen, setSemesterOpen] = useState(false);
@ -39,28 +39,14 @@ export default function Onboarding() {
]);
const semester_query = useQuery({
queryKey: ["semesters"],
queryFn: async () => {
const data = await GetSemesters();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
queryFn: GetSemesters,
onSuccess: (data) => {
let semesters = data[1].map((item: SemesterType) => ({
let semesters = data[1].map((item: Semester) => ({
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("");
@ -71,28 +57,14 @@ export default function Onboarding() {
]);
const yearlevel_query = useQuery({
queryKey: ["year_levels"],
queryFn: async () => {
const data = await GetYearLevels();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
queryFn: GetYearLevels,
onSuccess: (data) => {
let year_levels = data[1].map((item: YearLevelType) => ({
let year_levels = data[1].map((item: YearLevel) => ({
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("");
@ -106,28 +78,14 @@ export default function Onboarding() {
]);
const course_query = useQuery({
queryKey: ["courses"],
queryFn: async () => {
const data = await GetCourses();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
queryFn: GetCourses,
onSuccess: (data) => {
let courses = data[1].map((item: CourseType) => ({
let courses = data[1].map((item: Course) => ({
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 (
@ -195,13 +153,7 @@ export default function Onboarding() {
...styles.text_white_small_bold,
...{ textAlign: "center" },
}}
modalContentContainerStyle={{
backgroundColor: colors.primary_2,
borderWidth: 0,
zIndex: 1000,
}}
dropDownDirection="BOTTOM"
listMode="MODAL"
dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
/>
<DropDownPicker
zIndex={2000}
@ -221,13 +173,7 @@ export default function Onboarding() {
...styles.text_white_small_bold,
...{ textAlign: "center" },
}}
modalContentContainerStyle={{
backgroundColor: colors.primary_2,
borderWidth: 0,
zIndex: 1000,
}}
dropDownDirection="BOTTOM"
listMode="MODAL"
dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
/>
<DropDownPicker
zIndex={1000}
@ -247,15 +193,10 @@ export default function Onboarding() {
...styles.text_white_small_bold,
...{ textAlign: "center" },
}}
modalContentContainerStyle={{
backgroundColor: colors.primary_2,
borderWidth: 0,
zIndex: 1000,
}}
dropDownDirection="BOTTOM"
listMode="MODAL"
dropDownContainerStyle={{ backgroundColor: colors.primary_2 }}
/>
</MotiView>
<Text style={styles.text_white_small}>{error}</Text>
<MotiView
from={{
opacity: 0,
@ -276,7 +217,7 @@ export default function Onboarding() {
!selected_yearlevel || !selected_course || !selected_semester
}
onPress={async () => {
let result = await PatchUserInfo({
let result = await OnboardingUpdateStudentInfo({
semester: selected_semester,
course: selected_course,
year_level: selected_yearlevel,
@ -286,25 +227,11 @@ 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 {
dispatch(setUser(result[1]));
toast.show(
"An error has occured\nChanges have not been saved",
{
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
}
);
setError(result[1]);
}
}}
>

View file

@ -15,16 +15,13 @@ 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";
import { ScrollView } from "react-native-gesture-handler";
export default function Register() {
const navigation = useNavigation<RootDrawerParamList>();
const toast = useToast();
// const dispatch = useDispatch();
// const creds = useSelector((state: RootState) => state.auth.creds);
const [registering, setRegistering] = useState(false);
const [user, setUser] = useState({
first_name: "",
last_name: "",
@ -32,7 +29,7 @@ export default function Register() {
username: "",
email: "",
password: "",
confirm_password: "",
feedback: "",
});
return (
<View style={styles.background}>
@ -116,7 +113,6 @@ export default function Register() {
placeholderTextColor={colors.text_default}
secureTextEntry={true}
value={user.password}
autoCapitalize={"none"}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
@ -124,77 +120,42 @@ export default function Register() {
}}
/>
<View style={{ paddingVertical: 4 }} />
<TextInput
style={styles.text_input}
placeholder="Confirm Password"
placeholderTextColor={colors.text_default}
secureTextEntry={true}
value={user.confirm_password}
autoCapitalize={"none"}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setUser({ ...user, confirm_password: e.nativeEvent.text });
}}
/>
<Text style={styles.text_white_small}>{user.feedback}</Text>
<View style={{ paddingVertical: 4 }} />
<Button
onPress={async () => {
if (!registering) {
if (user.password === user.confirm_password) {
setRegistering(true);
await UserRegister({
username: user.username,
email: user.email,
password: user.password,
student_id_number: user.student_id_number,
first_name: user.first_name,
last_name: user.last_name,
}).then((result: any) => {
console.log(result);
if (result[0]) {
setUser({
...user,
first_name: "",
last_name: "",
student_id_number: "",
username: "",
email: "",
password: "",
});
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 {
toast.show(JSON.parse(JSON.stringify(result[1])), {
type: "warning",
placement: "top",
duration: 6000,
animationType: "slide-in",
});
}
setRegistering(false);
await UserRegister({
username: user.username,
email: user.email,
password: user.password,
student_id_number: user.student_id_number,
first_name: user.first_name,
last_name: user.last_name,
}).then((result) => {
console.log(result);
if (result[0]) {
setUser({
...user,
first_name: "",
last_name: "",
student_id_number: "",
username: "",
email: "",
password: "",
feedback:
"Success! An email has been sent to activate your account",
});
setTimeout(() => {
navigation.navigate("Login");
}, 10000);
} else {
toast.show(
"Password does not match confirm password. Please try again"
),
{
type: "warning",
placement: "top",
duration: 6000,
animationType: "slide-in",
};
setUser({
...user,
feedback: ParseError(JSON.stringify(result[1])),
});
}
});
{
}
}}
>

View file

@ -1,7 +1,7 @@
import * as React from "react";
import styles from "../../styles";
import { View, Text, ActivityIndicator } from "react-native";
import { TokenRefresh, GetUserInfo } from "../../components/Api/Api";
import { TokenRefresh, UserInfo } from "../../components/Api/Api";
import { useDispatch } from "react-redux";
import { colors } from "../../styles";
import { useEffect, useState } from "react";
@ -15,55 +15,37 @@ 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 GetUserInfo();
let user_info = await UserInfo();
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");

View file

@ -1,234 +0,0 @@
import * as React from "react";
import styles, { Viewport } from "../../styles";
import {
View,
Text,
ToastAndroid,
Pressable,
ActivityIndicator,
} 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";
import CaretLeftIcon from "../../icons/CaretLeftIcon/CaretLeftIcon";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
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"] });
queryClient.invalidateQueries({ queryKey: ["user_status_list"] });
queryClient.invalidateQueries({ queryKey: ["study_group_list"] });
toast.show("You are now studying \n" + selected_subject, {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
// Set a delay before going back to homepage to hopefully let the queries refresh in time
setTimeout(() => {
navigation.navigate("Home");
}, 200);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
if (StudentInfo.isLoading) {
return (
<View style={styles.background}>
<AnimatedContainer>
<View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={96} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>Loading...</Text>
</AnimatedContainer>
</View>
);
}
if (location && location.coords) {
return (
<View style={styles.background}>
<AnimatedContainerNoScroll>
<View style={{ zIndex: -1 }}>
<View style={styles.padding} />
<View style={{ borderRadius: 16, overflow: "hidden" }}>
<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>
<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} />
<View style={styles.flex_row}>
<Pressable onPress={() => navigation.navigate("Home")}>
<CaretLeftIcon size={32} />
</Pressable>
<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>
</AnimatedContainerNoScroll>
</View>
);
}
return <View />;
}

View file

@ -1,63 +1,42 @@
import * as React from "react";
import styles from "../../styles";
import { View, Text, ActivityIndicator } from "react-native";
import { useState } from "react";
import {
UserInfoReturnType,
SubjectsReturnType,
SubjectType,
View,
Text,
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
} from "react-native";
import { useEffect, useState } from "react";
import {
SemesterParams,
UserInfoParams,
Semester,
SubjectParams,
Subject,
YearLevel,
Course,
OptionType,
StudentStatusType,
PatchUserInfoType,
StudentStatusPatchType,
Subjects,
} 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,
GetUserInfo,
PatchStudentStatus,
UserInfo,
} from "../../components/Api/Api";
import { colors } from "../../styles";
import DropDownPicker from "react-native-dropdown-picker";
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
import { useSelector } from "react-redux";
import { RootState } from "../../features/redux/Store/Store";
import { useToast } from "react-native-toast-notifications";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import Loading from "../Loading/Loading";
import LoadingFeedback from "../../components/LoadingFeedback/LoadingFeedback";
import BouncyCheckbox from "react-native-bouncy-checkbox";
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: "",
@ -70,18 +49,17 @@ export default function SubjectsPage() {
course_shortname: "",
avatar: "",
student_id_number: "",
subjects: [] as string[],
subjects: [] as Subjects,
});
const [displayName, setDisplayName] = useState({
first_name: "",
last_name: "",
});
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) => {
queryFn: UserInfo,
onSuccess: (data: UserInfoParams) => {
// console.log(data[1]);
setUser({
...user,
first_name: data[1].first_name,
@ -93,50 +71,31 @@ export default function SubjectsPage() {
student_id_number: data[1].student_id_number,
subjects: data[1].subjects,
});
setSelectedSubjects(data[1].subjects);
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
setDisplayName({
first_name: data[1].first_name,
last_name: data[1].last_name,
});
setSelectedSubjects(user.subjects);
},
});
const mutation = useMutation({
mutationFn: async (info: PatchUserInfoType) => {
const data = await PatchUserInfo(info);
if (data[0] != true) {
return Promise.reject(new Error());
}
return data;
},
mutationFn: PatchUserInfo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user"] });
queryClient.invalidateQueries({ queryKey: ["subjects"] });
queryClient.invalidateQueries({ queryKey: ["subjects", viewAll] });
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>([]);
@ -145,31 +104,42 @@ export default function SubjectsPage() {
const Subjects = useQuery({
enabled: StudentInfo.isFetched,
queryKey: ["subjects"],
queryKey: ["subjects", viewAll],
queryFn: async () => {
const data = await GetSubjects();
if (data[0] == false) {
return Promise.reject(new Error(JSON.stringify(data[1])));
let data;
if (
StudentInfo.data &&
StudentInfo.data[1].course_shortname &&
StudentInfo.data[1].yearlevel_shortname &&
StudentInfo.data[1].semester_shortname
) {
data = await GetSubjects(
viewAll,
StudentInfo.data[1].course_shortname,
StudentInfo.data[1].yearlevel_shortname,
StudentInfo.data[1].semester_shortname
);
console.log(JSON.stringify(data));
}
if (data) {
if (!data[0]) {
throw new Error("Error with query" + data[1]);
}
if (!data[1]) {
throw new Error("User has no course, year level, or semester!");
}
// console.log("Subjects available:", data[1]);
}
return data;
},
onSuccess: (data: 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",
});
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);
},
});
@ -186,18 +156,16 @@ export default function SubjectsPage() {
);
}
}
if (StudentInfo.isLoading || Subjects.isLoading) {
return <LoadingFeedback />;
}
return (
<View style={styles.background}>
<AnimatedContainerNoScroll>
<View style={styles.flex_row}>
<Avatar />
<Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
{(logged_in_user.first_name || "Undefined") +
{(displayName.first_name || "Undefined") +
" " +
(logged_in_user.last_name || "User") +
(displayName.last_name || "User") +
"\n" +
user.student_id_number}
</Text>
@ -243,17 +211,29 @@ 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 Changes</Text>
<Text style={styles.text_white_small}>Save Change</Text>
</Button>
<View style={styles.padding} />
</View>
</AnimatedContainerNoScroll>
</View>

View file

@ -6,20 +6,18 @@ import {
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
Pressable,
ActivityIndicator,
} from "react-native";
import { useState } from "react";
import {
SemesterReturnType,
UserInfoReturnType,
SemesterType,
YearLevelType,
CourseType,
SemesterParams,
UserInfoParams,
Semester,
SubjectParams,
Subject,
YearLevel,
Course,
OptionType,
StudentStatusType,
PatchUserInfoType,
StudentStatusPatchType,
Subjects,
} from "../../interfaces/Interfaces";
import Button from "../../components/Button/Button";
import { Image } from "react-native";
@ -27,55 +25,18 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
GetCourses,
GetSemesters,
GetSubjects,
GetYearLevels,
PatchStudentStatus,
PatchUserInfo,
GetUserInfo,
UserInfo,
} 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";
import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
import Loading from "../Loading/Loading";
import LoadingFeedback from "../../components/LoadingFeedback/LoadingFeedback";
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: "",
@ -88,18 +49,15 @@ export default function UserInfoPage() {
course_shortname: "",
avatar: "",
student_id_number: "",
irregular: false,
});
const [displayName, setDisplayName] = useState({
first_name: "",
last_name: "",
});
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) => {
queryFn: UserInfo,
onSuccess: (data: UserInfoParams) => {
// console.log(data[1]);
setUser({
...user,
@ -108,55 +66,23 @@ export default function UserInfoPage() {
year_level: data[1].year_level,
semester: data[1].semester,
course: data[1].course,
student_id_number: data[1].student_id_number,
irregular: data[1].irregular,
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,
});
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: async (info: PatchUserInfoType) => {
const data = await PatchUserInfo(info);
if (data[0] == false) {
return Promise.reject(new Error());
}
return data;
},
mutationFn: PatchUserInfo,
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",
});
},
});
@ -166,15 +92,9 @@ export default function UserInfoPage() {
const [semesters, setSemesters] = useState<OptionType[]>([]);
const Semesters = useQuery({
queryKey: ["semesters"],
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) => ({
queryFn: GetSemesters,
onSuccess: (data: SemesterParams) => {
let semestersData = data[1].map((semester: Semester) => ({
label: semester.name,
value: semester.name,
shortname: semester.shortname,
@ -182,14 +102,6 @@ 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
@ -198,28 +110,14 @@ export default function UserInfoPage() {
const [year_levels, setYearLevels] = useState<OptionType[]>([]);
const yearlevel_query = useQuery({
queryKey: ["year_levels"],
queryFn: async () => {
const data = await GetYearLevels();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
queryFn: GetYearLevels,
onSuccess: (data) => {
let year_levels = data[1].map((yearlevel: YearLevelType) => ({
let year_levels = data[1].map((yearlevel: YearLevel) => ({
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
@ -228,84 +126,40 @@ export default function UserInfoPage() {
const [courses, setCourses] = useState<OptionType[]>([]);
const course_query = useQuery({
queryKey: ["courses"],
queryFn: async () => {
const data = await GetCourses();
if (data[0] == false) {
return Promise.reject(new Error(data[1]));
}
return data;
},
queryFn: GetCourses,
onSuccess: (data) => {
let courses = data[1].map((course: CourseType) => ({
let courses = data[1].map((course: Course) => ({
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 (
<Pressable onPress={pickImage}>
<Image source={{ uri: user.avatar }} style={styles.profile} />
</Pressable>
);
return <Image source={{ uri: user.avatar }} style={styles.profile} />;
} else {
return (
<Pressable onPress={pickImage}>
<Image
source={require("../../img/user_profile_placeholder.png")}
style={{ ...styles.profile, ...{ marginRight: 48 } }}
/>
</Pressable>
<Image
source={require("../../img/user_profile_placeholder.png")}
style={{ ...styles.profile, ...{ marginRight: 48 } }}
/>
);
}
}
if (
StudentInfo.isLoading ||
Semesters.isLoading ||
yearlevel_query.isLoading ||
course_query.isLoading
) {
return <LoadingFeedback />;
}
return (
<View style={styles.background}>
<AnimatedContainerNoScroll>
<View style={styles.flex_row}>
<Avatar />
<Text style={{ ...styles.text_white_small, ...{ marginLeft: 16 } }}>
{(logged_in_user.first_name || "Undefined") +
{(displayName.first_name || "Undefined") +
" " +
(logged_in_user.last_name || "User") +
(displayName.last_name || "User") +
"\n" +
user.student_id_number}
</Text>
@ -319,6 +173,7 @@ export default function UserInfoPage() {
<View style={{ flex: 3 }}>
<TextInput
style={styles.input}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
@ -335,6 +190,7 @@ export default function UserInfoPage() {
<View style={{ flex: 3 }}>
<TextInput
style={styles.input}
editable={isEditable}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
@ -350,7 +206,8 @@ export default function UserInfoPage() {
</View>
<View style={{ flex: 3 }}>
<DropDownPicker
zIndex={1000}
disabled={!isEditable}
zIndex={4000}
open={yearLevelOpen}
value={selected_yearlevel}
items={year_levels}
@ -372,7 +229,7 @@ export default function UserInfoPage() {
}}
dropDownContainerStyle={{
backgroundColor: colors.primary_2,
zIndex: 1000,
zIndex: 4000,
borderWidth: 0,
}}
dropDownDirection="TOP"
@ -385,7 +242,8 @@ export default function UserInfoPage() {
</View>
<View style={{ flex: 3 }}>
<DropDownPicker
zIndex={2000}
disabled={!isEditable}
zIndex={3000}
open={semesterOpen}
value={selected_semester}
items={semesters}
@ -407,7 +265,7 @@ export default function UserInfoPage() {
}}
dropDownContainerStyle={{
backgroundColor: colors.primary_2,
zIndex: 2000,
zIndex: 3000,
borderWidth: 0,
}}
dropDownDirection="TOP"
@ -420,7 +278,8 @@ export default function UserInfoPage() {
</View>
<View style={{ flex: 3 }}>
<DropDownPicker
zIndex={3000}
disabled={!isEditable}
zIndex={2000}
open={courseOpen}
value={selected_course}
items={courses}
@ -442,7 +301,7 @@ export default function UserInfoPage() {
}}
dropDownContainerStyle={{
backgroundColor: colors.primary_2,
zIndex: 3000,
zIndex: 2000,
borderWidth: 0,
}}
dropDownDirection="TOP"
@ -451,37 +310,27 @@ 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={() => {
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,
});
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);
}}
>
<Text style={styles.text_white_small}>Save Changes</Text>
<Text style={styles.text_white_small}>
{isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
</Text>
</Button>
<View style={styles.padding} />
</View>
</AnimatedContainerNoScroll>
</View>

View file

@ -44,9 +44,8 @@ const styles = StyleSheet.create({
justifyContent: "center",
display: "flex",
flexDirection: "column",
flexGrow: 1,
flex: 1,
paddingHorizontal: 4,
paddingVertical: 32,
},
flex_row: {
display: "flex",
@ -172,8 +171,7 @@ const styles = StyleSheet.create({
width: "70%",
},
map: {
marginVertical: 4,
height: Viewport.height * 0.7,
height: Viewport.height * 0.8,
width: Viewport.width * 0.8,
alignSelf: "center",
},
@ -184,18 +182,6 @@ const styles = StyleSheet.create({
borderRadius: 150 / 2,
overflow: "hidden",
padding: 0,
borderColor: colors.primary_2,
borderWidth: 3,
},
profile_mini: {
height: 32,
width: 32,
alignSelf: "center",
borderRadius: 150 / 2,
overflow: "hidden",
padding: 0,
borderColor: colors.primary_2,
borderWidth: 3,
},
input: {
paddingHorizontal: 8,
@ -214,34 +200,5 @@ const styles = StyleSheet.create({
padding: 0,
border: 0,
},
chatbox: {
paddingHorizontal: 8,
height: 50,
marginVertical: 10,
borderWidth: 1,
color: colors.text_default,
backgroundColor: colors.primary_2,
borderRadius: 20,
borderColor: colors.primary_3,
width: 256,
},
messageScrollViewContainer: {
backgroundColor: colors.secondary_1,
padding: 15,
},
message_contentContainer: {
backgroundColor: "#00000038",
margin: 5,
padding: 10,
borderRadius: 20,
},
badge: {
height: 16,
width: 16,
justifyContent: "center",
borderRadius: 10,
marginLeft: 4,
marginRight: 4,
},
});
export default styles;