Data model complete

2025-04-17 22:45:32 -04:00
parent 2f76539e1c
commit 567791df7e
7 changed files with 214 additions and 109 deletions
--- a/.expo/prebuild/cached-packages.json
+++ b/.expo/prebuild/cached-packages.json
@@ -1,4 +1,4 @@
 {
-  "dependencies": "f0b7a67330b4373657842464b944fe650bdb1e9d",
+  "dependencies": "4f452fcb9971e44e33c7d2865818197f89d6f9d3",
  "devDependencies": "33c61dd051763bf66d49625d5b8ab12f6e1b331b"
 }
--- a/app.json
+++ b/app.json
@@ -34,7 +34,8 @@
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
-      ]
+      ],
+      "expo-sqlite"
    ],
    "experiments": {
      "typedRoutes": true
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -2,16 +2,26 @@ 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 {MenuComponentRef, MenuView} from "@react-native-menu/menu";
+import {useEffect, useState} from "react";
+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: 1,
+    name: "The Other Server",
+    domain: "192.168.86.252",
+  }
+];
+const computers: Computer[] = [
  {
    key: 0,
+    server_key: 0,
    name: "Test PC",
    emoji: "💻",
    background_color: '#D9D9D9',
@@ -19,52 +29,87 @@ const servers: Server[] = [
  },
  {
    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
-        options={{
-          title: 'Home',
-          headerTintColor: '#fff',
-          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,
+      <SQLiteProvider databaseName="selfstarter.db" onInit={migrateDbIfNeeded}>
+        <Header servers={servers} setServers={setServers} currentServerName={currentServerName} setCurrentServerName={setCurrentServerName} />
+        <ComputerList computers={computers} setComputers={setComputers}/>
+      </SQLiteProvider>
+    </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: {
@@ -75,19 +120,49 @@ export default function Index() {
      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',
      },
-                  ]}
-                  shouldOpenOnLongPress={false}
-                >
-                  <ChevronDown color={"#FFFFFF"} />
+      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.warn(JSON.stringify(nativeEvent));
+            onPressAction={({nativeEvent}) => {
+              console.log(JSON.stringify(nativeEvent));
              //TODO: Handle adding computers/servers
            }}
            actions={[
@@ -108,14 +183,11 @@ export default function Index() {
            ]}
            shouldOpenOnLongPress={false}
          >
-                <Plus color={"#007AFF"} />
+            <Plus color={"#007AFF"}/>
          </MenuView>
        </View>
    }}
  />
-      <ComputerList computers={servers[0].computers}/>
-    </View>
-  );
 }

 const styles = StyleSheet.create({
@@ -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,
--- a/ios/Podfile.lock
+++ b/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
--- a/ios/selfstarter.xcodeproj/project.pbxproj
+++ b/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";
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",