Added refresh button to homepage and made it possible to join and leave groups from list view

src/icons/RefreshIcon/RefreshIcon.tsx

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

src/routes/Home/Home.tsx

@@ -43,6 +43,7 @@ import GetDistanceFromUSTP from "../../components/GetDistance/GetDistanceFromUST
 import Modal from "react-native-modal";
 import DropdownIcon from "../../icons/CaretDownIcon/CaretDownIcon";
 import CaretUpIcon from "../../icons/CaretUpIcon/CaretUpIcon";
+import RefreshIcon from "../../icons/RefreshIcon/RefreshIcon";
 
 export default function Home() {
   // Switch this condition to see the main map when debugging
@@ -64,7 +65,6 @@ export default function Home() {
   async function requestLocation() {
     const { status } = await Location.requestForegroundPermissionsAsync();
     if (status !== "granted") {
-      setLocationPermitted(true);
       setFeedback("Allow location permissions to continue");
       toast.show(
         "Location permission was denied. Please allow in order to use StudE",
@@ -78,6 +78,10 @@ export default function Home() {
       return;
     }
     if (status == "granted") {
+      if (locationPermitted === false) {
+        setLocationPermitted(true);
+      }
+
       let newLocation = await Location.getCurrentPositionAsync();
       if (newLocation) {
         // Only update location state if user's location has changed
@@ -357,26 +361,51 @@ export default function Home() {
   });
 
   function CustomMap() {
-    if (dist && location && locationFetched) {
+    if (
-      if (
+      (StudentStatusQuery.isFetching && studying) ||
-        (StudentStatusQuery.isFetching && studying) ||
+      StudentStatusListQuery.isFetching ||
-        StudentStatusListQuery.isFetching ||
+      StudyGroupQuery.isFetching ||
-        StudyGroupQuery.isFetching ||
+      (StudentStatusQuery.isFetching && !studying) ||
-        (StudentStatusQuery.isFetching && !studying) ||
+      StudentStatusListGlobalQuery.isFetching ||
-        StudentStatusListGlobalQuery.isFetching ||
+      StudyGroupGlobalQuery.isFetching
-        StudyGroupGlobalQuery.isFetching
+    ) {
-      ) {
+      return (
-        return (
+        <>
-          <>
+          <View style={{ paddingVertical: 8 }} />
-            <View style={{ paddingVertical: 8 }} />
+          <ActivityIndicator size={96} color={colors.secondary_1} />
-            <ActivityIndicator size={96} color={colors.secondary_1} />
+          <Text style={styles.text_white_medium}>Loading...</Text>
-            <Text style={styles.text_white_medium}>Loading...</Text>
+        </>
-          </>
+      );
-        );
+    } else if (!locationPermitted) {
-      }
+      console.log(locationPermitted);
+      return (
+        <>
+          <Text style={styles.text_white_medium}>{feedback}</Text>
+          <Button onPress={async () => await requestLocation()}>
+            <Text style={styles.text_white_medium}>Allow Access</Text>
+          </Button>
+        </>
+      );
+    } else if (dist && location && locationFetched) {
       if (dist <= 1 || map_distance_override) {
         return (
           <>
+            <View style={{ alignSelf: "flex-end" }}>
+              <Pressable
+                onPress={() => {
+                  queryClient.invalidateQueries({ queryKey: ["user"] });
+                  queryClient.invalidateQueries({ queryKey: ["user_status"] });
+                  queryClient.invalidateQueries({
+                    queryKey: ["user_status_list"],
+                  });
+                  queryClient.invalidateQueries({
+                    queryKey: ["study_group_list"],
+                  });
+                }}
+              >
+                <RefreshIcon size={32} />
+              </Pressable>
+            </View>
             <MapView
               mapType={"none"}
               style={styles.map}
@@ -862,17 +891,14 @@ export default function Home() {
       } else {
         return <MapRendererFar location={location.coords} dist={dist} />;
       }
-    } else if (!locationPermitted) {
+    } else {
       return (
         <>
-          <Text style={styles.text_white_medium}>{feedback}</Text>
+          <View style={{ paddingVertical: 8 }} />
-          <Button onPress={async () => await requestLocation()}>
+          <ActivityIndicator size={96} color={colors.secondary_1} />
-            <Text style={styles.text_white_medium}>Allow Access</Text>
+          <Text style={styles.text_white_medium}>Loading...</Text>
-          </Button>
         </>
       );
-    } else {
-      return <></>;
     }
   }
   return (
@@ -970,6 +996,47 @@ export default function Home() {
                     ) : (
                       <></>
                     )}
+                    {student_status?.study_group != studygroup.name ? (
+                      <Pressable
+                        style={{
+                          ...styles.button_template,
+                          backgroundColor: colors.secondary_2,
+                        }}
+                        onPress={() => {
+                          change_study_group.mutate({
+                            study_group: studygroup.name,
+                            subject: studygroup.subject,
+                          });
+                          setModalOpen(!modalOpen);
+                        }}
+                      >
+                        <Text style={styles.text_white_tiny_bold}>
+                          Join Group
+                        </Text>
+                      </Pressable>
+                    ) : (
+                      <></>
+                    )}
+                    {student_status?.study_group == studygroup.name ? (
+                      <Pressable
+                        style={{
+                          ...styles.button_template,
+                          backgroundColor: colors.secondary_2,
+                        }}
+                        onPress={() => {
+                          change_study_group.mutate({
+                            study_group: "",
+                          });
+                          setModalOpen(!modalOpen);
+                        }}
+                      >
+                        <Text style={styles.text_white_tiny_bold}>
+                          Leave Group
+                        </Text>
+                      </Pressable>
+                    ) : (
+                      <></>
+                    )}
                   </View>
                 );
               })
@@ -979,6 +1046,7 @@ export default function Home() {
           </ScrollView>
         </AnimatedContainer>
       </Modal>
+
       <AnimatedContainer>
         <View style={{ borderRadius: 16, overflow: "hidden" }}>
           <CustomMap />