updates

site/src/components/routes/home.tsx

@@ -1,47 +1,56 @@
-import { useEffect, useState } from 'preact/hooks'
-import { pb } from '@/lib/stores'
-import { SystemRecord } from '@/types'
+import { useEffect } from 'preact/hooks'
+import { $servers, pb } from '@/lib/stores'
 import { DataTable } from '../server-table/data-table'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { useStore } from '@nanostores/preact'
+import { SystemRecord } from '@/types'
 
 export function Home() {
-	const [systems, setSystems] = useState([] as SystemRecord[])
+	const servers = useStore($servers)
+	// const [systems, setSystems] = useState([] as SystemRecord[])
 
 	useEffect(() => {
 		document.title = 'Home'
 	}, [])
 
 	useEffect(() => {
-		pb.collection<SystemRecord>('systems')
-			.getFullList({
-				sort: 'name',
-			})
-			.then((items) => {
-				setSystems(items)
-			})
+		console.log('servers', servers)
+	}, [servers])
 
-		// pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
-		// 	setSystems((curSystems) => {
-		// 		const i = curSystems.findIndex((s) => s.id === e.record.id)
-		// 		if (i > -1) {
-		// 			const newSystems = [...curSystems]
-		// 			newSystems[i] = e.record
-		// 			return newSystems
-		// 		} else {
-		// 			return [...curSystems, e.record]
-		// 		}
-		// 	})
-		// })
-		// return () => pb.collection('systems').unsubscribe('*')
+	useEffect(() => {
+		pb.collection<SystemRecord>('systems').subscribe('*', (e) => {
+			const curServers = $servers.get()
+			const newServers = []
+			console.log('e', e)
+			if (e.action === 'delete') {
+				for (const server of curServers) {
+					if (server.id !== e.record.id) {
+						newServers.push(server)
+					}
+				}
+			} else {
+				let found = 0
+				for (const server of curServers) {
+					if (server.id === e.record.id) {
+						found = newServers.push(e.record)
+					} else {
+						newServers.push(server)
+					}
+				}
+				if (!found) {
+					newServers.push(e.record)
+				}
+			}
+			$servers.set(newServers)
+		})
+		return () => pb.collection('systems').unsubscribe('*')
 	}, [])
 
-	// if (!systems.length) return <>Loading...</>
-
 	return (
 		<>
 			<Card>
 				<CardHeader>
-					<CardTitle className={'mb-3'}>All Systems</CardTitle>
+					<CardTitle className={'mb-3'}>All Servers</CardTitle>
 					<CardDescription>
 						Press{' '}
 						<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
@@ -51,10 +60,9 @@ export function Home() {
 					</CardDescription>
 				</CardHeader>
 				<CardContent>
-					<DataTable data={systems} />
+					<DataTable />
 				</CardContent>
 			</Card>
-			{/* <pre>{JSON.stringify(systems, null, 2)}</pre> */}
 		</>
 	)
 }

site/src/components/routes/server.tsx

@@ -6,7 +6,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui
 
 export function ServerDetail() {
 	const [_, params] = useRoute('/server/:name')
-	const [node, setNode] = useState({} as SystemRecord)
+	const [server, setServer] = useState({} as SystemRecord)
 
 	useEffect(() => {
 		document.title = params!.name
@@ -16,7 +16,7 @@ export function ServerDetail() {
 		pb.collection<SystemRecord>('systems')
 			.getFirstListItem(`name="${params!.name}"`)
 			.then((record) => {
-				setNode(record)
+				setServer(record)
 			})
 	})
 
@@ -24,11 +24,11 @@ export function ServerDetail() {
 		<>
 			<Card>
 				<CardHeader>
-					<CardTitle className={'mb-3'}>{node.name}</CardTitle>
+					<CardTitle className={'mb-3'}>{server.name}</CardTitle>
 					<CardDescription>5.342.34.234</CardDescription>
 				</CardHeader>
 				<CardContent>
-					<pre>{JSON.stringify(node, null, 2)}</pre>
+					<pre>{JSON.stringify(server, null, 2)}</pre>
 				</CardContent>
 			</Card>
 		</>