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;
+let use_production = false;
-if (use_production) {
+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,6 +76,7 @@ export default function Home() {
       if (dist >= 2) {
         // Just switch this condition for map debugging
         return (
+          <View>
             <MapView
               style={styles.map}
               customMapStyle={[
@@ -145,7 +148,7 @@ export default function Home() {
                 pinColor={colors.primary_1}
               >
                 <Callout>
-                <Text style={styles.text_black_tiny}>
+                  <Text style={styles.text_black_medium}>
                     You are here {"\n"}
                     X: {Math.round(location.coords.longitude) + "\n"}
                     Z: {Math.round(location.coords.latitude)}
@@ -153,6 +156,22 @@ export default function Home() {
                 </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",
   },