syncing w/ firebase

.gitignore

@@ -40,4 +40,4 @@ yarn-error.*
 .env*.local
 
 # typescript
-*.tsbuildinfo
+*.tsbuildinfo

app/api/data.ts

@@ -101,6 +101,20 @@ export function updateNotes(notes: string): Promise<void> {
     });
 }
 
+export function addUnsyncedData(data: MatchData): Promise<void> {
+    return new Promise((resolve, reject) => {
+        AsyncStorage.getItem("unsynced")
+            .then((res) => {
+                if (res !== null) {
+                    const unsynced = JSON.parse(res) as MatchData[];
+                    resolve(AsyncStorage.setItem("unsynced", JSON.stringify([ ...unsynced, data ])));
+                } else {
+                    resolve(AsyncStorage.setItem("unsynced", JSON.stringify([ data ])));
+                }
+            }).catch((err) => reject(`Failed to save unsynced match data: ${err}`));
+    })
+}
+
 export function updateTags(tag: Tag, removeTag?: boolean): Promise<void> {
     return modifyMatchData((data) => {
         const tags = new Set(data["tags"]);

app/components/NavButton.tsx

@@ -8,18 +8,20 @@ interface NavButtonProps {
     text: string;
     pageName?: string;
     disabled?: boolean;
+    onClick?: () => void;
 }
 
-function NavButton({ text, pageName, disabled }: NavButtonProps) {
+function NavButton({ text, pageName, disabled, onClick }: NavButtonProps) {
     pageName ??= "";
     disabled ??= false;
+    onClick ??= () => {};
     const insets = useSafeAreaInsets();
 
     return (
         <View style={[{ flexDirection: 'row-reverse' }]}>
             <Link href={"/" + pageName} asChild>
                 <Button textColor={TEXT_COLOR} buttonColor={BACKGROUND_COLOR} mode="contained"
-                    contentStyle={{ height: 80, width: 80 }} disabled={disabled}>{text}</Button>
+                    contentStyle={{ height: 80, width: 80 }} onPress={onClick} disabled={disabled}>{text}</Button>
             </Link>
         </View>
     )

app/index.tsx

@@ -1,67 +1,91 @@
 import { StatusBar } from 'expo-status-bar';
-import { Keyboard, ScrollView, StyleSheet, View } from 'react-native';
+import { Keyboard, StyleSheet, View, Text, ScrollView } from 'react-native';
 import NavButton from './components/NavButton';
 import PageHeader from './components/Header';
 import LabeledTextInput from './components/LabeledTextInput';
-import { getMatchData, updateMatchNumber, updateName, updateTeamNumber, updateDriverStation } from './api/data';
-import { DRIVER_STATION } from './api/data_types';
-import React, { useEffect, useState } from 'react';
+import { getMatchData, updateMatchNumber, updateName, updateTeamNumber, updateDriverStation, addUnsyncedData } from './api/data';
+import { DRIVER_STATION, MatchData } from './api/data_types';
+import { useEffect, useState } from 'react';
 import RadioButton from './components/RadioButton';
+import { onValue, ref, set } from 'firebase/database';
+import { db } from '../firebaseConfig';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as FileSystem from "expo-file-system";
 
 export default function App() {
     const [ nameFilled, setNameFilled ] = useState(false);
     const [ teamNumberFilled, setTeamNumberFilled ] = useState(false);
     const [ matchFilled, setMatchFilled ] = useState(false);
+    const [ eventCode, setEventCode ] = useState("");
 
     useEffect(() => {
-        const initializeRequirements = () => {
-            getMatchData().then((data) => {
-                setNameFilled(data["scouterName"] !== "");
-                setTeamNumberFilled(data["teamNumber"] !== 0);
-                setMatchFilled(data["matchNumber"] !== 0);
-            })
-        }
+        getMatchData().then((data) => {
+            setNameFilled(data["scouterName"] !== "");
+            setTeamNumberFilled(data["teamNumber"] !== 0);
+            setMatchFilled(data["matchNumber"] !== 0);
+        })
 
-        initializeRequirements();
-    })
+        onValue(ref(db, ".info/connected"), (snap) => {
+            if (snap.val() === false) return;
+
+            onValue(ref(db, "eventCode"), (code) => {
+                setEventCode(code.val());
+
+                // this is nested in here to ensure that the eventCode is properly set, there may be a nicer way to do this that i dont know
+                AsyncStorage.getItem("unsynced").then((res) => {
+                    if (res === null) return; 
+
+                    const unsyncedData = JSON.parse(res) as MatchData[];
+                    AsyncStorage.removeItem("unsynced");
+
+                    unsyncedData.forEach((data) => {
+                        const path = `${code.val()}/${data["teamNumber"]}/${data["matchNumber"]}/${data["scouterName"]}`;
+                        set(ref(db, path), data);
+                        FileSystem.writeAsStringAsync((FileSystem.documentDirectory ?? "") + path.replaceAll("/", "_"), JSON.stringify(data))
+                            .catch((err) => console.error(err));
+                    });
+                });
+            }, { onlyOnce: true }); 
+        });
+    }, [])
 
     return (
         <View style={styles.container} onTouchStart={Keyboard.dismiss}>
             <PageHeader title='Main' pageNumber='1/4' showTeam={false} />
             <ScrollView>
-
-            <LabeledTextInput label="Name" editable={true} submit={(e) => {
-                updateName(e.nativeEvent.text);
-                setNameFilled(e.nativeEvent.text !== "");
-            }} oldValue={
-                getMatchData().then((data) => data["scouterName"])
-            } required />
-
-            <LabeledTextInput label="Team Number" editable={true}
-                inputMode='numeric' submit={(e) => {
-                    updateTeamNumber(Number(e.nativeEvent.text));
-                    setTeamNumberFilled(e.nativeEvent.text !== "" && e.nativeEvent.text !== "0");
+                <Text>Event Code: {eventCode}</Text>
+                <LabeledTextInput label="Name" editable={true} submit={(e) => {
+                    updateName(e.nativeEvent.text);
+                    setNameFilled(e.nativeEvent.text !== "");
                 }} oldValue={
-                    getMatchData().then((data) => data["teamNumber"].toString())
+                    getMatchData().then((data) => data["scouterName"])
                 } required />
 
-            <LabeledTextInput label="Match number" editable={true}
-                inputMode='numeric' submit={(e) => {
-                    updateMatchNumber(Number(e.nativeEvent.text));
-                    setMatchFilled(e.nativeEvent.text !== "" && e.nativeEvent.text !== "0");
-                }} oldValue={
-                    getMatchData().then((data) => data["matchNumber"].toString())
-                } required />
+                <LabeledTextInput label="Team Number" editable={true}
+                    inputMode='numeric' submit={(e) => {
+                        updateTeamNumber(Number(e.nativeEvent.text));
+                        setTeamNumberFilled(e.nativeEvent.text !== "" && e.nativeEvent.text !== "0");
+                    }} oldValue={
+                        getMatchData().then((data) => data["teamNumber"].toString())
+                    } required />
+
+                <LabeledTextInput label="Match number" editable={true}
+                    inputMode='numeric' submit={(e) => {
+                        updateMatchNumber(Number(e.nativeEvent.text));
+                        setMatchFilled(e.nativeEvent.text !== "" && e.nativeEvent.text !== "0");
+                    }} oldValue={
+                        getMatchData().then((data) => data["matchNumber"].toString())
+                    } required />
+
+                <RadioButton
+                    data={["Red 1", "Red 2", "Red 3", "Blue 1", "Blue 2", "Blue 3"]}
+                    onSelect={(selected: string) => { updateDriverStation(selected as DRIVER_STATION) }}
+                    oldSelected={getMatchData().then((data) => data["driverStation"])} />
 
-            <RadioButton
-                data={["Red 1", "Red 2", "Red 3", "Blue 1", "Blue 2", "Blue 3"]}
-                onSelect={(selected: string) => { updateDriverStation(selected as DRIVER_STATION) }}
-                oldSelected={getMatchData().then((data) => data["driverStation"])} />
-
-            <NavButton text="Go" pageName="auto"
-                disabled={ !(nameFilled && teamNumberFilled && matchFilled) } />
+                <NavButton text="Go" pageName="auto"
+                    disabled={ !(nameFilled && teamNumberFilled && matchFilled) } />
 
-            <StatusBar style="auto" />
+                <StatusBar style="auto" />
             </ScrollView>
         </View>
     );

app/summary.tsx

@@ -1,10 +1,11 @@
 import { StatusBar } from 'expo-status-bar';
 import { Keyboard, ScrollView, StyleSheet, View } from 'react-native';
 import LabeledTextInput from './components/LabeledTextInput';
-import { getMatchData, updateNotes } from './api/data';
+import { addUnsyncedData, getMatchData, updateNotes } from './api/data';
 import PageHeader from './components/Header';
 import SummaryTableView from './views/SummaryTableView';
 import Checkbox from './components/Checkbox';
+import NavButton from './components/NavButton';
 
 export default function App() {
     return (
@@ -25,6 +26,11 @@ export default function App() {
             <Checkbox tag='Broke'/>
             <Checkbox tag='Tipped over'/>
             <Checkbox tag='Gamepiece stuck'/>
+            <NavButton text="End" onClick={() => {
+                getMatchData().then((data) => {
+                    addUnsyncedData(data);
+                }).catch((err) => console.error(err));
+            }} />
             <StatusBar style="auto" />
             </ScrollView>
         </View>

firebaseConfig.ts

@@ -0,0 +1,18 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getDatabase } from "firebase/database";
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyDKDbQsh-ttXTBBpewtfiI_6ag_OABlrPE",
+  authDomain: "strategy-programming-7525.firebaseapp.com",
+  databaseURL: "https://strategy-programming-7525-default-rtdb.firebaseio.com",
+  projectId: "strategy-programming-7525",
+  storageBucket: "strategy-programming-7525.firebasestorage.app",
+  messagingSenderId: "611655993814",
+  appId: "1:611655993814:web:7c30807b2ccdf1303e3c77"
+};
+
+// Initialize Firebase
+export const firebase = initializeApp(firebaseConfig);
+export const db = getDatabase(firebase);

metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require('@expo/metro-config');
+
+const defaultConfig = getDefaultConfig(__dirname);
+defaultConfig.resolver.sourceExts.push('cjs');
+
+module.exports = defaultConfig;