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

Added create group functionality

Browse source
This commit is contained in:
Keannu Bernasol 2023-09-28 21:03:04 +08:00
parent 62cee96b94
commit debaa544bc
5 changed files with 234 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
App.tsx
View file

@ -26,6 +26,7 @@ import Loading from "./src/routes/Loading/Loading";
import StartStudying from "./src/routes/StartStudying/StartStudying";
import { ToastProvider } from "react-native-toast-notifications";
import InfoIcon from "./src/icons/InfoIcon/InfoIcon";
import CreateGroup from "./src/routes/CreateGroup/CreateGroup";
const Drawer = createDrawerNavigator();
@ -83,6 +84,7 @@ export default function App() {
<Drawer.Screen name="User Info" component={UserInfoPage} />
<Drawer.Screen name="Subjects" component={SubjectsPage} />
<Drawer.Screen name="Start Studying" component={StartStudying} />
<Drawer.Screen name="Create Group" component={CreateGroup} />
</Drawer.Navigator>
</NavigationContainer>
</Provider>

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

@ -255,6 +255,7 @@ export async function PatchStudentStatus(info: StudentStatusPatchType) {
})
.catch((error) => {
let error_message = ParseError(error);
console.log("Error!", error.response.data);
return [false, error_message];
});
}

4
src/interfaces/Interfaces.tsx
View file

@ -134,6 +134,7 @@ export interface StudentStatusType {
location: LocationType;
landmark: string | null;
active: boolean;
study_group: string;
}
export interface StudentStatusPatchType {
@ -141,6 +142,7 @@ export interface StudentStatusPatchType {
location?: LocationType;
landmark?: string | null;
active?: boolean;
study_group?: string;
}
export interface StudentStatusFilterType {
@ -168,7 +170,7 @@ export interface StudentStatusFilterTypeFlattened {
export interface StudyGroupType {
name: string;
users: string[];
students: string[];
distance: number;
landmark: string | null;
location: LocationType;

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

@ -0,0 +1,194 @@
import * as React from "react";
import styles, { Viewport } from "../../styles";
import {
View,
Text,
ToastAndroid,
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
} from "react-native";
import { useState } from "react";
import {
UserInfoReturnType,
OptionType,
RootDrawerParamList,
StudentStatusType,
StudentStatusReturnType,
StudentStatusPatchType,
StudyGroupCreateType,
} from "../../interfaces/Interfaces";
import Button from "../../components/Button/Button";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
PatchStudentStatus,
GetUserInfo,
ParseError,
CreateStudyGroup,
} from "../../components/Api/Api";
import { colors } from "../../styles";
import DropDownPicker from "react-native-dropdown-picker";
import AnimatedContainerNoScroll from "../../components/AnimatedContainer/AnimatedContainerNoScroll";
import { urlProvider } from "../../components/Api/Api";
import MapView, { UrlTile, Marker } from "react-native-maps";
import { useNavigation } from "@react-navigation/native";
import { useToast } from "react-native-toast-notifications";
export default function 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"] });
toast.show(`Joined group ${name} successfully`, {
type: "success",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
navigation.navigate("Home");
},
onError: (error: Error) => {
toast.show(String(error), {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
},
});
if (location) {
return (
<View style={styles.background}>
<AnimatedContainerNoScroll>
<View style={{ zIndex: -1 }}>
<View style={styles.padding} />
<MapView
style={{
height: Viewport.height * 0.4,
width: Viewport.width * 0.8,
alignSelf: "center",
}}
customMapStyle={[
{
featureType: "poi",
stylers: [
{
visibility: "off",
},
],
},
]}
mapType="none"
scrollEnabled={false}
zoomEnabled={false}
toolbarEnabled={false}
rotateEnabled={false}
minZoomLevel={18}
initialRegion={{
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
loadingBackgroundColor={colors.secondary_2}
>
<UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker
coordinate={{
latitude: location.latitude,
longitude: location.longitude,
}}
pinColor={colors.primary_1}
/>
</MapView>
<View style={styles.padding} />
</View>
<TextInput
style={styles.text_input}
placeholder="Group Name"
placeholderTextColor="white"
autoCapitalize="none"
value={name}
onChange={(
e: NativeSyntheticEvent<TextInputChangeEventData>
): void => {
setName(e.nativeEvent.text);
}}
/>
<View style={styles.padding} />
<Button
onPress={() => {
console.log({
group_name: name,
location: {
latitude: location.latitude,
longitude: location.longitude,
},
});
study_group_create.mutate({
name: name,
location: location,
subject: subject,
});
}}
>
<Text style={styles.text_white_small}>Start Studying</Text>
</Button>
<View style={styles.padding} />
</AnimatedContainerNoScroll>
</View>
);
}
return <View />;
}

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

@ -416,7 +416,7 @@ export default function Home() {
Subject: {studygroup.subject}
</Text>
<Text style={styles.text_white_tiny_bold}>
Students Studying: {studygroup.users.length}
Students Studying: {studygroup.students.length}
</Text>
<Button
onPress={() => {
@ -485,7 +485,7 @@ export default function Home() {
Subject: {studygroup.subject}
</Text>
<Text style={styles.text_white_tiny_bold}>
Students Studying: {studygroup.users.length}
Students Studying: {studygroup.students.length}
</Text>
<Button
onPress={() => {
@ -580,29 +580,41 @@ export default function Home() {
<Text style={styles.text_white_tiny_bold}>
{"x: " +
(student_status?.location?.longitude != 0
(student_status?.location?.longitude != undefined
? student_status?.location?.longitude.toFixed(4)
: location.coords.longitude.toFixed(4))}
</Text>
<Text style={styles.text_white_tiny_bold}>
{"y: " +
(student_status?.location?.latitude != 0
(student_status?.location?.latitude != undefined
? student_status?.location?.latitude.toFixed(4)
: location.coords.latitude.toFixed(4))}
</Text>
{studying ? (
{student_status?.active &&
!student_status?.study_group ? (
<>
<Text style={styles.text_white_tiny_bold}>
{studying
{student_status?.active
? "Studying " + student_status?.subject
: ""}
</Text>
<Button
onPress={() => {
if (student_status?.subject) {
study_group_create.mutate({
name: "asdasdasdasd",
location: location.coords,
console.log({
location: {
latitude: student_status?.location.latitude,
longitude:
student_status?.location.longitude,
},
subject: student_status?.subject,
});
navigation.navigate("Create Group", {
location: {
latitude: student_status?.location.latitude,
longitude:
student_status?.location.longitude,
},
subject: student_status?.subject,
});
}
@ -616,6 +628,18 @@ export default function Home() {
) : (
<></>
)}
{student_status?.study_group ? (
<>
<Text style={styles.text_white_tiny_bold}>
{`Studying ${student_status?.subject}`}
</Text>
<Text style={styles.text_white_tiny_bold}>
{`In group ${student_status?.study_group}`}
</Text>
</>
) : (
<></>
)}
</View>,
{
type: "normal",
@ -634,7 +658,7 @@ export default function Home() {
</MapView>
<Button
onPress={async () => {
if (!studying) {
if (!student_status?.active) {
navigation.navigate("Start Studying", { location: location });
} else {
mutation.mutate({