From 6e63f868050aeb01e65141d5c9a62c09fd74bdf2 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Wed, 11 Oct 2023 19:43:59 +0800
Subject: [PATCH] Added back button to create group and start studying pages
 and adding loading indicator for start studying

---
 src/icons/CaretLeftIcon/CaretLeftIcon.tsx  | 28 +++++++++
 src/routes/CreateGroup/CreateGroup.tsx     | 30 ++++++----
 src/routes/StartStudying/StartStudying.tsx | 68 ++++++++++++++--------
 3 files changed, 92 insertions(+), 34 deletions(-)
 create mode 100644 src/icons/CaretLeftIcon/CaretLeftIcon.tsx

diff --git a/src/icons/CaretLeftIcon/CaretLeftIcon.tsx b/src/icons/CaretLeftIcon/CaretLeftIcon.tsx
new file mode 100644
index 0000000..e2caaa5
--- /dev/null
+++ b/src/icons/CaretLeftIcon/CaretLeftIcon.tsx
@@ -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>
+    </>
+  );
+}
diff --git a/src/routes/CreateGroup/CreateGroup.tsx b/src/routes/CreateGroup/CreateGroup.tsx
index 0f4ec15..ac54d3d 100644
--- a/src/routes/CreateGroup/CreateGroup.tsx
+++ b/src/routes/CreateGroup/CreateGroup.tsx
@@ -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>
diff --git a/src/routes/StartStudying/StartStudying.tsx b/src/routes/StartStudying/StartStudying.tsx
index 2aa8677..335d674 100644
--- a/src/routes/StartStudying/StartStudying.tsx
+++ b/src/routes/StartStudying/StartStudying.tsx
@@ -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>
     );