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 -------------------
 

src/hooks/dbLink.js

@@ -1,3 +0,0 @@
-const API_BASE_URL = 'http://localhost:3000';
-
-export default API_BASE_URL;

src/hooks/useAuthHook.js

@@ -1,6 +1,5 @@
 import {useState} from 'react';
-import API from '../components/API/API';
-import API_BASE_URL from './dbLink';
+import API, {API_BASE_URL} from '../components/API/API';
 import {clearSession, setSessionUser} from './SessionStore';
 
 const useAuthHook = () => {

src/hooks/useGameHook.js

@@ -1,5 +1,4 @@
-import API from '../components/API/API';
-import API_BASE_URL from './dbLink';
+import API, {API_BASE_URL} from '../components/API/API';
 
 const useGameHook = () => {
   //   Initialisation ------------
@@ -59,12 +58,6 @@ const useGameHook = () => {
     return response.isSuccess ? response.result : null;
   };
 
-  const getMapPoints = async (gid, sgid = null) => {
-    let url = `${gameDataEndpoint}/${gid}/caches`;
-    if (sgid !== null) url += `?SGid=${sgid}`;
-    const response = await API.get(url);
-    return response.isSuccess ? response.result : [];
-  };
 
   const getCaches = async (gid, sgid = null) => {
     let url = `${gameDataEndpoint}/${gid}/caches`;
@@ -108,7 +101,6 @@ const useGameHook = () => {
     getTeam,
     createTeam,
     joinTeamByCode,
-    getMapPoints,
     getCaches,
     upsertCache,
     claimCache,

src/models/Cache.js

@@ -1,17 +0,0 @@
-class Cache {
-  constructor(id, latitude, longitude, radius, clue, groupId, subgroupId) {
-    this.id = id;
-    this.coordinates = { latitude, longitude };
-    this.radius = radius;
-    this.clue = clue;
-    this.groupId = groupId;
-    this.subgroupId = subgroupId;
-  }
-
-  toJSON() {
-    return { ...this };
-  }
-}
-
-export default Cache;
-