Improved API, added loading page, initial changes to homepage, and fixed irregular field on user info page not being centered

App.tsx

@@ -1,4 +1,5 @@
 import "react-native-gesture-handler";
+import { Text } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 import { Provider } from "react-redux";
@@ -21,6 +22,7 @@ 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 Loading from "./src/routes/Loading/Loading";
 
 const Drawer = createDrawerNavigator();
 
@@ -28,7 +30,7 @@ const linking = {
   prefixes: [Linking.makeUrl("/")],
   config: {
     screens: {
-      Home: "home",
+      Home: "",
       Login: "login",
       Register: "register",
       Onboarding: "onboarding",
@@ -59,7 +61,7 @@ export default function App() {
       <Provider store={store}>
         <StatusBar style="light" />
 
-        <NavigationContainer linking={linking}>
+        <NavigationContainer linking={linking} fallback={<Loading />}>
           <Drawer.Navigator
             initialRouteName="Revalidation"
             drawerContent={CustomDrawerContent}

package-lock.json

@@ -8,6 +8,7 @@
       "name": "stude_frontend",
       "version": "1.0.0",
       "dependencies": {
+        "@gorhom/bottom-sheet": "^4.4.7",
         "@react-native-async-storage/async-storage": "1.17.11",
         "@react-navigation/drawer": "^6.6.3",
         "@react-navigation/native": "^6.1.7",
@@ -3111,6 +3112,43 @@
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
     },
+    "node_modules/@gorhom/bottom-sheet": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@gorhom/bottom-sheet/-/bottom-sheet-4.4.7.tgz",
+      "integrity": "sha512-ukTuTqDQi2heo68hAJsBpUQeEkdqP9REBcn47OpuvPKhdPuO1RBOOADjqXJNCnZZRcY+HqbnGPMSLFVc31zylQ==",
+      "dependencies": {
+        "@gorhom/portal": "1.0.14",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-native": "*",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">=1.10.1",
+        "react-native-reanimated": ">=2.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@gorhom/portal": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@gorhom/portal/-/portal-1.0.14.tgz",
+      "integrity": "sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==",
+      "dependencies": {
+        "nanoid": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^4.4.7",
     "@react-native-async-storage/async-storage": "1.17.11",
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",

src/components/Api/Api.tsx

@@ -6,7 +6,7 @@ import {
   OnboardingParams,
   PatchStudentData,
   RegistrationParams,
-  StudentData,
+  StudentStatusParams,
 } from "../../interfaces/Interfaces";
 
 export let backendURL = "https://stude.keannu1.duckdns.org";
@@ -17,8 +17,8 @@ if (__DEV__) {
 }
 
 // Switch this on if you wanna run production URLs while in development
-let use_production = true;
-if (use_production) {
+let use_production = false;
+if (__DEV__ && use_production) {
   backendURL = "https://stude.keannu1.duckdns.org";
   backendURLWebsocket = "ws://stude.keannu1.duckdns.org";
 }
@@ -257,3 +257,21 @@ export async function OnboardingUpdateStudentInfo(info: OnboardingParams) {
       return [false, error_message];
     });
 }
+
+export async function PostStudentStatus(info: StudentStatusParams) {
+  const config = await GetConfig();
+  console.log(info);
+  return instance
+    .post("/api/v1/student_status/self/", info, config)
+    .then((response) => {
+      console.log("heh1");
+      return [true, response.data];
+    })
+    .catch((error) => {
+      let error_message = "";
+      if (error.response) error_message = error.response.data;
+      else error_message = "Unable to reach servers";
+      console.log("heh2", error);
+      return [false, error_message];
+    });
+}

src/interfaces/Interfaces.tsx

@@ -138,3 +138,13 @@ export interface StudentData {
 }
 
 export type UserInfoParams = [boolean, StudentData];
+
+interface Location {
+  latitude: number;
+  longtitude: number;
+}
+
+export interface StudentStatusParams {
+  subject: string;
+  location: Location;
+}

src/routes/Home/Home.tsx

@@ -6,6 +6,8 @@ import MapView, { Callout, Marker, UrlTile } from "react-native-maps";
 import * as Location from "expo-location";
 import GetDistance from "../../components/GetDistance/GetDistance";
 import Button from "../../components/Button/Button";
+import { PostStudentStatus } from "../../components/Api/Api";
+import { StudentStatusParams } from "../../interfaces/Interfaces";
 type LocationType = Location.LocationObject;
 export default function Home() {
   const [location, setLocation] = useState<LocationType | null>(null);
@@ -74,85 +76,102 @@ export default function Home() {
       if (dist >= 2) {
         // Just switch this condition for map debugging
         return (
-          <MapView
-            style={styles.map}
-            customMapStyle={[
-              {
-                featureType: "poi",
-                stylers: [
-                  {
-                    visibility: "off",
-                  },
-                ],
-              },
-            ]}
-            mapType="none"
-            scrollEnabled={true}
-            zoomEnabled={true}
-            toolbarEnabled={false}
-            rotateEnabled={false}
-            maxZoomLevel={19}
-            minZoomLevel={19}
-            zoomTapEnabled
-            initialRegion={{
-              latitude: location.coords.latitude,
-              longitude: location.coords.longitude,
-              latitudeDelta: 0.4,
-              longitudeDelta: 0.4,
-            }}
-            loadingBackgroundColor={colors.secondary_2}
-          >
-            <UrlTile
-              urlTemplate={urlProvider}
-              shouldReplaceMapContent={true}
-              maximumZ={19}
-              flipY={false}
-              zIndex={1}
-            />
-            <Marker
-              coordinate={{
+          <View>
+            <MapView
+              style={styles.map}
+              customMapStyle={[
+                {
+                  featureType: "poi",
+                  stylers: [
+                    {
+                      visibility: "off",
+                    },
+                  ],
+                },
+              ]}
+              mapType="none"
+              scrollEnabled={true}
+              zoomEnabled={true}
+              toolbarEnabled={false}
+              rotateEnabled={false}
+              maxZoomLevel={19}
+              minZoomLevel={19}
+              zoomTapEnabled
+              initialRegion={{
                 latitude: location.coords.latitude,
                 longitude: location.coords.longitude,
+                latitudeDelta: 0.4,
+                longitudeDelta: 0.4,
               }}
-              onPress={() => console.log(location)}
-              draggable
-              onDragEnd={(e) => {
-                const newLocation = e.nativeEvent.coordinate;
-                const distance = GetDistance(
-                  newLocation.latitude,
-                  newLocation.longitude,
-                  location.coords.latitude,
-                  location.coords.longitude
-                );
-                console.log("Distance:", distance);
-                if (distance <= 0.1) {
-                  // If the new location is within 100 meters of the actual location, update the location state
-                  setLocation({
-                    ...location,
-                    coords: {
-                      ...location.coords,
-                      latitude: newLocation.latitude,
-                      longitude: newLocation.longitude,
-                    },
-                  });
-                } else {
-                  // If the new location is more than 100 meters away from the actual location, reset the marker to the actual location
-                  setLocation({
-                    ...location,
-                  });
-                }
-              }}
-              pinColor={colors.primary_1}
+              loadingBackgroundColor={colors.secondary_2}
             >
-              <Callout>
-                <Text style={styles.text_black_tiny}>
-                  You are here {"\n"}
-                  X: {Math.round(location.coords.longitude) + "\n"}
-                  Z: {Math.round(location.coords.latitude)}
-                </Text>
-              </Callout>
-            </Marker>
-          </MapView>
+              <UrlTile
+                urlTemplate={urlProvider}
+                shouldReplaceMapContent={true}
+                maximumZ={19}
+                flipY={false}
+                zIndex={1}
+              />
+              <Marker
+                coordinate={{
+                  latitude: location.coords.latitude,
+                  longitude: location.coords.longitude,
+                }}
+                onPress={() => console.log(location)}
+                draggable
+                onDragEnd={(e) => {
+                  const newLocation = e.nativeEvent.coordinate;
+                  const distance = GetDistance(
+                    newLocation.latitude,
+                    newLocation.longitude,
+                    location.coords.latitude,
+                    location.coords.longitude
+                  );
+                  console.log("Distance:", distance);
+                  if (distance <= 0.1) {
+                    // If the new location is within 100 meters of the actual location, update the location state
+                    setLocation({
+                      ...location,
+                      coords: {
+                        ...location.coords,
+                        latitude: newLocation.latitude,
+                        longitude: newLocation.longitude,
+                      },
+                    });
+                  } else {
+                    // If the new location is more than 100 meters away from the actual location, reset the marker to the actual location
+                    setLocation({
+                      ...location,
+                    });
+                  }
+                }}
+                pinColor={colors.primary_1}
+              >
+                <Callout>
+                  <Text style={styles.text_black_medium}>
+                    You are here {"\n"}
+                    X: {Math.round(location.coords.longitude) + "\n"}
+                    Z: {Math.round(location.coords.latitude)}
+                  </Text>
+                </Callout>
+              </Marker>
+            </MapView>
+            <Button
+              onPress={async () => {
+                const postData: StudentStatusParams = {
+                  subject: "System Administration and Maintenance",
+                  location: {
+                    latitude: location.coords.latitude,
+                    longtitude: location.coords.longitude,
+                  },
+                };
+                await PostStudentStatus(postData);
+                console.log(postData);
+              }}
+            >
+              <Text style={styles.text_white_medium}>Start Studying</Text>
+            </Button>
+          </View>
         );
       } else {
         return (

src/routes/Loading/Loading.tsx

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

src/routes/UserInfoPage/UserInfoPage.tsx

@@ -361,7 +361,7 @@ export default function UserInfoPage() {
         </View>
         <View style={styles.padding} />
         <View style={{ zIndex: -1 }}>
-          <View style={styles.flex_row}>
+          <View style={{ ...styles.flex_row, ...{ alignSelf: "center" } }}>
             <BouncyCheckbox
               onPress={() => {
                 mutation.mutate({

src/styles.tsx

@@ -171,7 +171,8 @@ const styles = StyleSheet.create({
     width: "70%",
   },
   map: {
-    height: Viewport.height * 0.8,
+    marginVertical: 4,
+    height: Viewport.height * 0.7,
     width: Viewport.width * 0.8,
     alignSelf: "center",
   },