Separated distance calculation and far map renderer into own components

src/components/Api/Api.tsx

@@ -6,6 +6,7 @@ import {
   OnboardingType,
   PatchUserInfoType,
   RegistrationType,
+  StudentStatusPatchType,
   StudentStatusType,
 } from "../../interfaces/Interfaces";
 
@@ -243,7 +244,7 @@ export async function GetStudentStatus() {
     });
 }
 
-export async function PatchStudentStatus(info: StudentStatusType) {
+export async function PatchStudentStatus(info: StudentStatusPatchType) {
   const config = await GetConfig();
   console.log(info);
   return instance

src/components/GetDistance/GetDistanceFromUSTP.tsx

@@ -0,0 +1,20 @@
+import { LocationType } from "../../interfaces/Interfaces";
+import GetDistance from "./GetDistance";
+
+export default function GetDistanceFromUSTP(location: LocationType) {
+  const ustpCoords = {
+    latitude: 8.4857,
+    longitude: 124.6565,
+    latitudeDelta: 0.000235,
+    longitudeDelta: 0.000067,
+  };
+
+  let dist = GetDistance(
+    location.latitude,
+    location.longitude,
+    ustpCoords.latitude,
+    ustpCoords.longitude
+  );
+  dist = Math.round(dist);
+  return dist;
+}

src/components/MapRenderer/MapRendererFar.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import MapView, { UrlTile, Callout, Marker } from "react-native-maps";
+import styles, { Viewport, colors } from "../../styles";
+import { urlProvider } from "../Api/Api";
+import { LocationType, RawLocationType } from "../../interfaces/Interfaces";
+import GetDistance from "../../components/GetDistance/GetDistance";
+
+type props = {
+  location: LocationType;
+  dist: any;
+};
+
+export default function MapRendererFar(props: props) {
+  return (
+    <View>
+      <Text style={styles.text_white_medium}>
+        You are too far from USTP {"\n"}
+        Get closer to use Stud-E
+      </Text>
+      <MapView
+        style={{
+          height: Viewport.height * 0.5,
+          width: Viewport.width * 0.8,
+          alignSelf: "center",
+        }}
+        customMapStyle={[
+          {
+            featureType: "poi",
+            stylers: [
+              {
+                visibility: "off",
+              },
+            ],
+          },
+        ]}
+        mapType="none"
+        scrollEnabled={false}
+        zoomEnabled={false}
+        toolbarEnabled={false}
+        rotateEnabled={false}
+        minZoomLevel={18}
+        initialRegion={{
+          latitude: props.location.latitude,
+          longitude: props.location.longitude,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421,
+        }}
+        loadingBackgroundColor={colors.secondary_2}
+      >
+        <UrlTile
+          urlTemplate={urlProvider}
+          shouldReplaceMapContent={true}
+          maximumZ={19}
+          flipY={false}
+          zIndex={1}
+        />
+        <Marker
+          coordinate={{
+            latitude: props.location.latitude,
+            longitude: props.location.longitude,
+          }}
+          pinColor={colors.primary_1}
+        >
+          <Callout>
+            <Text style={styles.text_black_tiny}>
+              You are here {"\n"}
+              X: {Math.round(props.location.longitude) + "\n"}
+              Z: {Math.round(props.location.latitude)}
+            </Text>
+          </Callout>
+        </Marker>
+      </MapView>
+      <Text style={styles.text_white_small}>
+        {props.dist}km away from USTP {"\n"}
+      </Text>
+    </View>
+  );
+}