Modals finally work

app/index.tsx

@@ -1,59 +1,15 @@
-import { Stack } from "expo-router";
-import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity, Platform} from "react-native";
+import {Href, Stack, useRouter} from "expo-router";
+import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity, Platform, Modal} from "react-native";
 import {RowMap, SwipeListView} from "react-native-swipe-list-view";
 import {ChevronDown, Plus} from "lucide-react-native";
 import {useEffect, useState} from "react";
 import {MenuAction, MenuView, NativeActionEvent} from "@react-native-menu/menu";
 import {SQLiteDatabase, SQLiteProvider, useSQLiteContext} from "expo-sqlite";
+import CreateComputer from "@/app/createComputer";
 
-const servers: Server[] = [
-  {
-    key: 0,
-    name: "Test Data Server",
-    domain: "localhost",
-  },
-  {
-    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',
-    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",
-  }
-];
+export const iOS_HIGHLIGHT = "#007AFF";
 
-async function migrateDbIfNeeded(db: SQLiteDatabase) {
+export 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);
@@ -98,14 +54,25 @@ function Header(props: { servers: Server[], setServers: (value: (((prevState: Se
     setup();
   }, []);
 
+  const [ menuEvent, setMenuEvent ] = useState("");
+  const router = useRouter();
+  useEffect(() => {
+    if (menuEvent === "addComputer") {
+      router.navigate('/createComputer');
+    } else if (menuEvent === "addServer") {
+      router.navigate('/createServer');
+    }
+    setMenuEvent("");
+  }, [menuEvent]);
+
   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',
+        titleColor: '#000000',
+        imageColor: '#000000',
       })
     }
   }
@@ -130,6 +97,25 @@ function Header(props: { servers: Server[], setServers: (value: (((prevState: Se
     props.setCurrentServerName(newName?.name ?? "None");
   };
 
+  const addActions: MenuAction[] = [
+    {
+      id: 'addServer',
+      title: 'Add WoL Server',
+      titleColor: '#000000',
+      image: 'globe',
+      imageColor: '#000000',
+    }
+  ];
+  if (props.currentServerName !== "None") {
+    addActions.push({
+      id: 'addComputer',
+      title: 'Add Computer',
+      titleColor: '#000000',
+      image: 'desktopcomputer',
+      imageColor: '#000000',
+    });
+  }
+
   return <Stack.Screen
     options={{
       title: 'Home',
@@ -147,43 +133,25 @@ function Header(props: { servers: Server[], setServers: (value: (((prevState: Se
             fontSize: 20,
             fontWeight: 'bold',
           }}>{props.currentServerName}</Text>
-          {selectActions.length > 1 &&
+          {props.servers.length > 0 &&
             <View style={{
-            backgroundColor: "#007AFF",
+            backgroundColor: iOS_HIGHLIGHT,
             borderRadius: 100,
           }}>
-            <MenuView onPressAction={handleServerSelect} actions={selectActions}>
-              <ChevronDown color={"#FFFFFF"}/>
-            </MenuView>
-          </View>
+              <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',
-              },
-            ]}
+            onPressAction={({nativeEvent}) => { setMenuEvent(nativeEvent.event); }}
+            actions={addActions}
             shouldOpenOnLongPress={false}
           >
-            <Plus color={"#007AFF"}/>
+            <Plus color={iOS_HIGHLIGHT}/>
           </MenuView>
         </View>
     }}