Data model complete

.expo/prebuild/cached-packages.json

@@ -1,4 +1,4 @@
 {
-  "dependencies": "f0b7a67330b4373657842464b944fe650bdb1e9d",
+  "dependencies": "4f452fcb9971e44e33c7d2865818197f89d6f9d3",
   "devDependencies": "33c61dd051763bf66d49625d5b8ab12f6e1b331b"
 }

app.json

@@ -34,7 +34,8 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      ]
+      ],
+      "expo-sqlite"
     ],
     "experiments": {
       "typedRoutes": true

app/index.tsx

@@ -2,122 +2,194 @@ import { Stack } from "expo-router";
 import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity, Platform} from "react-native";
 import {RowMap, SwipeListView} from "react-native-swipe-list-view";
 import {ChevronDown, Plus} from "lucide-react-native";
-import {useRef} from "react";
+import {useEffect, useState} from "react";
-import {MenuComponentRef, MenuView} from "@react-native-menu/menu";
+import {MenuAction, MenuView, NativeActionEvent} from "@react-native-menu/menu";
+import {SQLiteDatabase, SQLiteProvider, useSQLiteContext} from "expo-sqlite";
 
 const servers: Server[] = [
   {
+    key: 0,
     name: "Test Data Server",
     domain: "localhost",
-    computers: [
+  },
-      {
+  {
-        key: 0,
+    key: 1,
-        name: "Test PC",
+    name: "The Other Server",
-        emoji: "💻",
+    domain: "192.168.86.252",
-        background_color: '#D9D9D9',
+  }
-        mac_address: "00:1A:2B:3C:4D:5E",
+];
-      },
+const computers: Computer[] = [
-      {
+  {
-        key: 1,
+    key: 0,
-        name: "Another PC in the basement",
+    server_key: 0,
-        emoji: "💻",
+    name: "Test PC",
-        background_color: '#D9D9D9',
+    emoji: "💻",
-        mac_address: "00:1A:2B:3C:4D:5E",
+    background_color: '#D9D9D9',
-      }
+    mac_address: "00:1A:2B:3C:4D:5E",
-    ]
+  },
+  {
+    key: 1,
+    server_key: 0,
+    name: "Another PC in the basement",
+    emoji: "💻",
+    background_color: '#D9D9D9',
+    mac_address: "00:1A:2B:3C:4D:5E",
+  },
+  {
+    key: 2,
+    server_key: 1,
+    name: "Mom's PC",
+    emoji: "🌹",
+    background_color: '#D9D9D9',
+    mac_address: "00:1A:2B:3C:4D:5E",
+  },
+  {
+    key: 3,
+    server_key: 1,
+    name: "Jordan's PC",
+    emoji: "💪",
+    background_color: '#D9D9D9',
+    mac_address: "00:1A:2B:3C:4D:5E",
   }
 ];
 
+async function migrateDbIfNeeded(db: SQLiteDatabase) {
+  await db.execAsync(`
+    PRAGMA journal_mode = WAL;
+    CREATE TABLE IF NOT EXISTS servers (key INTEGER PRIMARY KEY NOT NULL, name TEXT NOT NULL, domain TEXT NOT NULL);
+    CREATE TABLE IF NOT EXISTS computers (key INTEGER PRIMARY KEY NOT NULL, server_key INTEGER NOT NULL, name, emoji, background_color, mac_address TEXT NOT NULL);
+  `);
+}
+
 export default function Index() {
+  const [ currentServerName, setCurrentServerName ] = useState<string>("None");
+  const [ servers, setServers ] = useState<Server[]>([]);
+  const [ computers, setComputers ] = useState<Computer[]>([]);
+
   return (
     <View>
-      <Stack.Screen
+      <SQLiteProvider databaseName="selfstarter.db" onInit={migrateDbIfNeeded}>
-        options={{
+        <Header servers={servers} setServers={setServers} currentServerName={currentServerName} setCurrentServerName={setCurrentServerName} />
-          title: 'Home',
+        <ComputerList computers={computers} setComputers={setComputers}/>
-          headerTintColor: '#fff',
+      </SQLiteProvider>
-          headerTitleStyle: {
-            fontWeight: 'bold',
-          },
-          headerTitle: props =>
-            <View style={{
-              display: "flex",
-              flexDirection: "row",
-              gap: 10,
-            }}>
-              <Text style={{
-                fontSize: 20,
-                fontWeight: 'bold',
-              }}>{servers[0].name}</Text>
-              <View style={{
-                backgroundColor: "#007AFF",
-                borderRadius: 100,
-              }}>
-                <MenuView
-                  onPressAction={({ nativeEvent }) => {
-                    console.warn(JSON.stringify(nativeEvent));
-                    //TODO: Handle adding computers/servers
-                  }}
-                  actions={[
-                    {
-                      id: 'server0',
-                      title: servers[0].name,
-                      titleColor: '#2367A2',
-                      imageColor: '#2367A2',
-                    },
-                    {
-                      id: 'deleteServer',
-                      title: 'Delete Current Server',
-                      attributes: {
-                        destructive: true,
-                      },
-                      image: Platform.select({
-                        ios: 'trash',
-                        android: 'ic_menu_delete',
-                      }),
-                      imageColor: "red",
-                    },
-                  ]}
-                  shouldOpenOnLongPress={false}
-                >
-                  <ChevronDown color={"#FFFFFF"} />
-                </MenuView>
-              </View>
-            </View>,
-          headerRight: props =>
-            <View>
-              <MenuView
-                onPressAction={({ nativeEvent }) => {
-                  console.warn(JSON.stringify(nativeEvent));
-                  //TODO: Handle adding computers/servers
-                }}
-                actions={[
-                  {
-                    id: 'addComputer',
-                    title: 'Add Computer',
-                    titleColor: '#000000',
-                    image: 'desktopcomputer',
-                    imageColor: '#000000',
-                  },
-                  {
-                    id: 'addServer',
-                    title: 'Add Server',
-                    titleColor: '#000000',
-                    image: 'globe',
-                    imageColor: '#000000',
-                  },
-                ]}
-                shouldOpenOnLongPress={false}
-              >
-                <Plus color={"#007AFF"} />
-              </MenuView>
-            </View>
-        }}
-      />
-      <ComputerList computers={servers[0].computers}/>
     </View>
   );
 }
 
+function Header(props: { servers: Server[], setServers: (value: (((prevState: Server[]) => Server[]) | Server[])) => void, currentServerName: string, setCurrentServerName: (value: (((prevState: string) => string) | string)) => void }) {
+  const db = useSQLiteContext();
+
+  useEffect(() => {
+    async function setup() {
+      const result = await db.getFirstAsync<Server>(`SELECT * FROM servers`);
+      props.setCurrentServerName(result?.name || "None");
+    }
+
+    if (props.currentServerName === "None") {
+      setup();
+    }
+  }, []);
+
+  useEffect(() => {
+    async function setup() {
+      const result = await db.getAllAsync<Server>(`SELECT * FROM servers`);
+      props.setServers(result);
+    }
+    setup();
+  }, []);
+
+  const selectActions: MenuAction[] = [];
+  for (const server of props.servers) {
+    if (server.name !== props.currentServerName) {
+      selectActions.push({
+        id: server.domain,
+        title: server.name,
+        titleColor: '#2367A2',
+        imageColor: '#2367A2',
+      })
+    }
+  }
+  selectActions.push({
+    id: 'deleteServer',
+    title: 'Delete Current Server',
+    attributes: {
+      destructive: true,
+    },
+    image: Platform.select({
+      ios: 'trash',
+      android: 'ic_menu_delete',
+    }),
+    imageColor: "red",
+  })
+
+
+  const handleServerSelect = ({nativeEvent}: NativeActionEvent) => {
+    const newName = props.servers.find((server) =>  {
+      return server.name === nativeEvent.event;
+    })
+    props.setCurrentServerName(newName?.name ?? "None");
+  };
+
+  return <Stack.Screen
+    options={{
+      title: 'Home',
+      headerTintColor: '#fff',
+      headerTitleStyle: {
+        fontWeight: 'bold',
+      },
+      headerTitle: _ =>
+        <View style={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 10,
+        }}>
+          <Text style={{
+            fontSize: 20,
+            fontWeight: 'bold',
+          }}>{props.currentServerName}</Text>
+          {selectActions.length > 1 &&
+            <View style={{
+            backgroundColor: "#007AFF",
+            borderRadius: 100,
+          }}>
+            <MenuView onPressAction={handleServerSelect} actions={selectActions}>
+              <ChevronDown color={"#FFFFFF"}/>
+            </MenuView>
+          </View>
+          }
+        </View>,
+      headerRight: props =>
+        <View>
+          <MenuView
+            onPressAction={({nativeEvent}) => {
+              console.log(JSON.stringify(nativeEvent));
+              //TODO: Handle adding computers/servers
+            }}
+            actions={[
+              {
+                id: 'addComputer',
+                title: 'Add Computer',
+                titleColor: '#000000',
+                image: 'desktopcomputer',
+                imageColor: '#000000',
+              },
+              {
+                id: 'addServer',
+                title: 'Add Server',
+                titleColor: '#000000',
+                image: 'globe',
+                imageColor: '#000000',
+              },
+            ]}
+            shouldOpenOnLongPress={false}
+          >
+            <Plus color={"#007AFF"}/>
+          </MenuView>
+        </View>
+    }}
+  />
+}
+
 const styles = StyleSheet.create({
   computerElement: {
     display: "flex",
@@ -161,7 +233,17 @@ const styles = StyleSheet.create({
   },
 });
 
-function ComputerList(computers: { computers: Computer[] }) {
+function ComputerList(props: {computers: Computer[], setComputers: (value: (((prevState: Computer[]) => Computer[]) | Computer[])) => void }) {
+  const db = useSQLiteContext();
+
+  useEffect(() => {
+    async function setup() {
+      const result = await db.getAllAsync<Computer>(`SELECT * FROM computers`);
+      props.setComputers(result);
+    }
+    setup();
+  }, []);
+
   const renderHiddenItem = (data: ListRenderItemInfo<Computer>, rowMap: RowMap<Computer>) => (
     <View style={styles.rowBack}>
       <TouchableOpacity
@@ -176,7 +258,7 @@ function ComputerList(computers: { computers: Computer[] }) {
 
   return (
     <SwipeListView
-      data={computers.computers}
+      data={props.computers}
       renderItem={({item}: ListRenderItemInfo<Computer>) =>
         <View style={styles.computerElement}>
           <View style={{
@@ -207,13 +289,14 @@ function ComputerList(computers: { computers: Computer[] }) {
 }
 
 type Server = {
+  key: number,
   name: string,
   domain: string,
-  computers: Computer[],
 }
 
 type Computer = {
   key: number,
+  server_key: number,
   name: string,
   emoji: string,
   background_color: ColorValue,

ios/Podfile.lock

@@ -46,6 +46,8 @@ PODS:
     - Yoga
   - ExpoSplashScreen (0.29.24):
     - ExpoModulesCore
+  - ExpoSQLite (15.1.4):
+    - ExpoModulesCore
   - ExpoSymbols (0.2.2):
     - ExpoModulesCore
   - ExpoSystemUI (4.0.9):
@@ -1931,6 +1933,7 @@ DEPENDENCIES:
   - ExpoLinking (from `../node_modules/expo-linking/ios`)
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
   - ExpoSplashScreen (from `../node_modules/expo-splash-screen/ios`)
+  - ExpoSQLite (from `../node_modules/expo-sqlite/ios`)
   - ExpoSymbols (from `../node_modules/expo-symbols/ios`)
   - ExpoSystemUI (from `../node_modules/expo-system-ui/ios`)
   - ExpoWebBrowser (from `../node_modules/expo-web-browser/ios`)
@@ -2039,6 +2042,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-modules-core"
   ExpoSplashScreen:
     :path: "../node_modules/expo-splash-screen/ios"
+  ExpoSQLite:
+    :path: "../node_modules/expo-sqlite/ios"
   ExpoSymbols:
     :path: "../node_modules/expo-symbols/ios"
   ExpoSystemUI:
@@ -2200,6 +2205,7 @@ SPEC CHECKSUMS:
   ExpoLinking: 8d12bee174ba0cdf31239706578e29e74a417402
   ExpoModulesCore: c25d77625038b1968ea1afefc719862c0d8dd993
   ExpoSplashScreen: 8261985ce9778f904abc7e31bed3538dce67ed4d
+  ExpoSQLite: 10fceac6748e9e8f010c70733e0e704fa67399ab
   ExpoSymbols: f3002db15156cd4e505c77b6ea1df5c984db9965
   ExpoSystemUI: b82a45cf0f6a4fa18d07c46deba8725dd27688b4
   ExpoWebBrowser: a212e6b480d8857d3e441fba51e0c968333803b3

ios/selfstarter.xcodeproj/project.pbxproj

@@ -254,10 +254,12 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-selfstarter/Pods-selfstarter-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ExpoSQLite/crsqlite.framework/crsqlite",
 				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/crsqlite.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -361,7 +363,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = com.anonymous.selfstarter;
-				PRODUCT_NAME = "selfstarter";
+				PRODUCT_NAME = selfstarter;
 				SWIFT_OBJC_BRIDGING_HEADER = "selfstarter/selfstarter-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -389,7 +391,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.anonymous.selfstarter;
-				PRODUCT_NAME = "selfstarter";
+				PRODUCT_NAME = selfstarter;
 				SWIFT_OBJC_BRIDGING_HEADER = "selfstarter/selfstarter-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";

package-lock.json

@@ -20,6 +20,7 @@
         "expo-linking": "~7.0.5",
         "expo-router": "~4.0.20",
         "expo-splash-screen": "~0.29.24",
+        "expo-sqlite": "~15.1.4",
         "expo-status-bar": "~2.0.1",
         "expo-symbols": "~0.2.2",
         "expo-system-ui": "~4.0.9",
@@ -6994,6 +6995,17 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-sqlite": {
+      "version": "15.1.4",
+      "resolved": "https://registry.npmjs.org/expo-sqlite/-/expo-sqlite-15.1.4.tgz",
+      "integrity": "sha512-1SG5Qi6/L2SK/o5EKtvEmlMVGdra/wYYh/intI94/ovsUfZGFrDG31YGtTt4rLpE95M6FwHUVpALO8g9/G9B2Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-status-bar": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-2.0.1.tgz",

package.json

@@ -42,7 +42,8 @@
     "react-native-svg": "^15.11.2",
     "react-native-swipe-list-view": "^3.2.9",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
+    "react-native-webview": "13.12.5",
+    "expo-sqlite": "~15.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",