Refactor database interaction to use centralized API; update game type retrieval and cache management logic (minor changes lol)

src/components/screens/GameTypeScreen.js

@@ -1,50 +1,68 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {Pressable, StyleSheet, Text, View} from 'react-native';
 import useGameHook from '../../hooks/useGameHook';
 import Screen from '../layout/Screen';
 
 const GameTypeScreen = ({ navigation }) => {
   const { getGameTypes } = useGameHook();
-  const gameTypes = getGameTypes();
+  const [gameTypes, setGameTypes] = useState([]);
+
+  useEffect(() => {
+	let isMounted = true;
+
+	const load = async () => {
+	  const types = await getGameTypes();
+	  if (isMounted) {
+		setGameTypes(types || []);
+	  }
+	};
+
+	load();
+
+	return () => {
+	  isMounted = false;
+	};
+  }, [getGameTypes]);
 
   return (
-    <Screen style={styles.container}>
-      <Text style={styles.title}>Select Game Type</Text>
-      <View style={styles.content}>
-        {gameTypes && gameTypes.map((type) => (
-          <Pressable key={type} style={styles.button} onPress={() => navigation.navigate('GameLobbyScreen')}>
-            <Text style={styles.buttonText}>{type}</Text>
-          </Pressable>
-        ))}
-      </View>
-    </Screen>
+	<Screen style={styles.container}>
+	  <Text style={styles.title}>Select Game Type</Text>
+	  <View style={styles.content}>
+		{gameTypes && gameTypes.map((type) => (
+		  <Pressable key={type} style={styles.button} onPress={() => navigation.navigate('GameLobbyScreen')}>
+			<Text style={styles.buttonText}>{type}</Text>
+		  </Pressable>
+		))}
+	  </View>
+	</Screen>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
+	justifyContent: 'center',
   },
   content: {
-    gap: 12,
-    flex: 1,
+	gap: 12,
+	flex: 1,
   },
   title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    marginBottom: 20,
+	fontSize: 24,
+	fontWeight: 'bold',
+	textAlign: 'center',
+	marginBottom: 20,
   },
   button: {
-    backgroundColor: '#2563eb',
-    borderRadius: 8,
-    paddingVertical: 12,
-    alignItems: 'center',
+	backgroundColor: '#2563eb',
+	borderRadius: 8,
+	paddingVertical: 12,
+	alignItems: 'center',
   },
   buttonText: {
-    color: '#ffffff',
-    fontWeight: '600',
+	color: '#ffffff',
+	fontWeight: '600',
   },
 });
 
 export default GameTypeScreen;
+

src/components/screens/ManageGameScreen.js

@@ -14,12 +14,13 @@ const ManageGameScreen = () => {
   const [error, setError] = useState('');
   const [cacheRecords, setCacheRecords] = useState([]);
 
-  const loadCaches = useCallback(() => {
+  const loadCaches = useCallback(async () => {
     if (!session.currentGid) {
       setCacheRecords([]);
       return;
     }
-    setCacheRecords(getCaches(session.currentGid, null));
+    const rows = await getCaches(session.currentGid, null);
+    setCacheRecords(rows || []);
   }, [getCaches, session.currentGid]);
 
   useEffect(() => {
@@ -63,11 +64,11 @@ const ManageGameScreen = () => {
     };
   }, []);
 
-  const handleAddCache = (coordinate) => {
+  const handleAddCache = async (coordinate) => {
     if (!session.currentGid) {
       return;
     }
-    upsertCache({
+    await upsertCache({
       gid: session.currentGid,
       latitude: coordinate.latitude,
       longitude: coordinate.longitude,
@@ -75,10 +76,10 @@ const ManageGameScreen = () => {
       clue: `Cache ${cacheRecords.length + 1}`,
       subgroupId: 1,
     });
-    loadCaches();
+    await loadCaches();
   };
 
-  const handleMoveCache = (cacheId, coordinate) => {
+  const handleMoveCache = async (cacheId, coordinate) => {
     if (!session.currentGid) {
       return;
     }
@@ -86,7 +87,7 @@ const ManageGameScreen = () => {
     if (!current) {
       return;
     }
-    upsertCache({
+    await upsertCache({
       gid: session.currentGid,
       cacheId,
       latitude: coordinate.latitude,
@@ -95,7 +96,7 @@ const ManageGameScreen = () => {
       clue: current.clue,
       subgroupId: current.subgroupId,
     });
-    loadCaches();
+    await loadCaches();
   };
 
   if (!session.currentGid) {

src/components/screens/MapScreen.js

@@ -40,13 +40,13 @@ const MapScreen = () => {
   const subgroupFilter = session.currentSGid;
   const { visibleCache, isClaiming, setIsClaiming } = usePlayerGame(userLocation, heading, activeCaches);
 
-  const loadCaches = useCallback(() => {
+  const loadCaches = useCallback(async () => {
     if (!session.currentGid) {
       setCacheRecords([]);
       return;
     }
-    const rows = getCaches(session.currentGid, subgroupFilter);
-    setCacheRecords(rows);
+    const rows = await getCaches(session.currentGid, subgroupFilter);
+    setCacheRecords(rows || []);
   }, [getCaches, session.currentGid, subgroupFilter]);
 
   useEffect(() => {
@@ -99,18 +99,18 @@ const MapScreen = () => {
     };
   }, []);
 
-  const handleClaim = (cacheId) => {
+  const handleClaim = async (cacheId) => {
     if (!session.currentGid) {
       return;
     }
-    claimCache({
+    await claimCache({
       gid: session.currentGid,
       cacheId,
       uid: session.currentUid,
       tid: session.currentTid,
     });
     setIsClaiming(false);
-    loadCaches();
+    await loadCaches();
   };
 
   if (!session.currentGid) {