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 back button to create group and start studying pages and adding loading indicator for start studying

Browse source
This commit is contained in:
Keannu Bernasol 2023-10-11 19:43:59 +08:00
parent 7ac6a6745f
commit 6e63f86805
3 changed files with 92 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/icons/CaretLeftIcon/CaretLeftIcon.tsx Normal file
View file

@ -0,0 +1,28 @@
import * as React from "react";
import { IconProps } from "../../interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
import { colors } from "../../styles";
export default function CaretLeftIcon(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>
</>
);
}

30
src/routes/CreateGroup/CreateGroup.tsx
View file

@ -6,6 +6,7 @@ import {
TextInput,
NativeSyntheticEvent,
TextInputChangeEventData,
Pressable,
} from "react-native";
import { useState } from "react";
import {
@ -22,6 +23,7 @@ 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";
export default function CreateGroup({ route }: any) {
const { location, subject } = route.params;
@ -157,17 +159,23 @@ export default function CreateGroup({ route }: any) {
}}
/>
<View style={styles.padding} />
<Button
onPress={() => {
study_group_create.mutate({
name: name,
location: location,
subject: subject,
});
}}
>
<Text style={styles.text_white_small}>Start Studying</Text>
</Button>
<View style={styles.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} />
</AnimatedContainerNoScroll>
</View>

68
src/routes/StartStudying/StartStudying.tsx
View file

@ -1,6 +1,12 @@
import * as React from "react";
import styles, { Viewport } from "../../styles";
import { View, Text, ToastAndroid } from "react-native";
import {
View,
Text,
ToastAndroid,
Pressable,
ActivityIndicator,
} from "react-native";
import { useState } from "react";
import {
UserInfoReturnType,
@ -24,6 +30,7 @@ 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";
export default function StartStudying({ route }: any) {
const { location } = route.params;
@ -90,6 +97,17 @@ export default function StartStudying({ route }: any) {
},
});
if (StudentInfo.isLoading) {
return (
<View style={styles.background}>
<AnimatedContainerNoScroll>
<View style={{ paddingVertical: 8 }} />
<ActivityIndicator size={96} color={colors.secondary_1} />
<Text style={styles.text_white_medium}>Loading...</Text>
</AnimatedContainerNoScroll>
</View>
);
}
if (location && location.coords) {
return (
<View style={styles.background}>
@ -174,28 +192,32 @@ export default function StartStudying({ route }: any) {
listMode="MODAL"
/>
<View style={styles.padding} />
<Button
onPress={() => {
console.log({
subject: selected_subject,
location: {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
},
});
mutation.mutate({
active: true,
subject: selected_subject,
location: {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
},
});
}}
>
<Text style={styles.text_white_small}>Start Studying</Text>
</Button>
<View style={styles.padding} />
<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>
);