Add API base URL and refactor imports; streamline cache handling in hooks. Replaced the DBlink.js because having just one file handle the connection is better, matches other projects. Used dblink coz i didnt know how to do it with graeme's method... sorry!

src/components/API/API.js

@@ -1,3 +1,5 @@
+export const API_BASE_URL = 'http://localhost:3000';
+
 const API = {};
 
 API.get = (endpoint) => callFetch(endpoint, 'GET');

src/components/API/useLoad.js

@@ -1,30 +0,0 @@
-import {useEffect, useState} from "react";
-import API from "./API";
-
-
-const useLoad = (loadEndpoint) => {
-
-    //   State ----------------------
-
-    const [records, setRecords] = useState([]);
-    const [isLoading, setIsLoading] = useState(true);
-
-    //   Loader ----------------------
-    const loadRecords = async (endpoint) => {
-        setIsLoading(true);
-        const response = await API.get(endpoint);
-        if (response.isSuccess) setRecords(response.result);
-        setIsLoading(false);
-    };
-
-    useEffect(() => {
-        loadRecords(loadEndpoint);
-    }, []);
-
-    //   return ----------------------
-
-    return [records, setRecords, isLoading, loadRecords];
-};
-
-export default useLoad;
-

src/components/layout/TopNavbar.js

@@ -3,10 +3,6 @@ import {clearSession} from '../../hooks/SessionStore';
 
 const TopNavbar = ({title, showBack, navigation}) => {
 //   Initialisation ------------
-
-    const routeName = navigation.getState()?.routes?.[navigation.getState().index]?.name;
-    const showLogout = routeName !== 'LoginScreen' && routeName !== 'RegisterScreen';
-
 //   State ----------------------
 //   Handlers -------------------
 
@@ -35,11 +31,9 @@ const TopNavbar = ({title, showBack, navigation}) => {
             </View>
             <Text style={styles.title}>{title}</Text>
             <View style={styles.rightSlot}>
-                {showLogout ? (
-                    <Pressable onPress={handleLogout} style={styles.logoutButton}>
-                        <Text style={styles.logoutText}>Logout</Text>
-                    </Pressable>
-                ) : null}
+                <Pressable onPress={handleLogout} style={styles.logoutButton}>
+                    <Text style={styles.logoutText}>Logout</Text>
+                </Pressable>
             </View>
         </View>
     );

src/components/screens/MapScreen.js

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
 import * as Location from 'expo-location';
 import {Magnetometer} from 'expo-sensors';
@@ -7,7 +7,6 @@ import PlayerMapView from '../gameplay/PlayerMapView';
 import useGameHook from '../../hooks/useGameHook';
 import usePlayerGame from '../../hooks/usePlayerGame';
 import {getSession} from '../../hooks/SessionStore';
-import Cache from '../../models/Cache';
 
 const toHeading = ({x, y}) => {
     const angle = Math.atan2(y, x) * (180 / Math.PI);
@@ -28,20 +27,8 @@ const MapScreen = () => {
     const [cacheRecords, setCacheRecords] = useState([]);
     const [error, setError] = useState('');
 
-    const activeCaches = useMemo(() => (
-        cacheRecords.map((cache) => new Cache(
-            cache.id,
-            cache.coordinates.latitude,
-            cache.coordinates.longitude,
-            cache.radius,
-            cache.clue,
-            cache.groupId,
-            cache.subgroupId,
-        ))
-    ), [cacheRecords]);
-
     const subgroupFilter = session.currentSGid;
-    const {visibleCache, isClaiming, setIsClaiming} = usePlayerGame(userLocation, heading, activeCaches);
+    const {visibleCache, isClaiming, setIsClaiming} = usePlayerGame(userLocation, heading, cacheRecords);
 
 //   Handlers -------------------