react + updates

site/src/components/add-server.tsx

@@ -14,29 +14,43 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { $publicKey, pb } from '@/lib/stores'
 import { ClipboardIcon, Plus } from 'lucide-react'
-import { MutableRef, useRef, useState } from 'preact/hooks'
-
-function copyDockerCompose(port: string) {
-	console.log('copying docker compose')
-	navigator.clipboard.writeText(`services:
-  agent:
-    image: 'henrygd/monitor-agent'
-    container_name: 'monitor-agent'
-    restart: unless-stopped
-    ports:
-      - '${port}:45876'
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock`)
-}
+import { useState, useRef, MutableRefObject, useEffect } from 'react'
+import { useStore } from '@nanostores/react'
+import { copyToClipboard } from '@/lib/utils'
 
 export function AddServerButton() {
 	const [open, setOpen] = useState(false)
-	const port = useRef() as MutableRef<HTMLInputElement>
+	const port = useRef() as MutableRefObject<HTMLInputElement>
+	const publicKey = useStore($publicKey)
+
+	function copyDockerCompose(port: string) {
+		copyToClipboard(`services:
+		agent:
+			image: 'henrygd/monitor-agent'
+			container_name: 'monitor-agent'
+			restart: unless-stopped
+			ports:
+				- '${port}:45876'
+			volumes:
+				- /var/run/docker.sock:/var/run/docker.sock`)
+	}
+
+	useEffect(() => {
+		if (publicKey || !open) {
+			return
+		}
+		// get public key
+		pb.send('/getkey', {}).then(({ key }) => {
+			console.log('key', key)
+			$publicKey.set(key)
+		})
+	}, [open])
 
 	async function handleSubmit(e: SubmitEvent) {
 		e.preventDefault()
 		const formData = new FormData(e.target as HTMLFormElement)
-		const stats = {
+		const data = Object.fromEntries(formData) as Record<string, any>
+		data.stats = {
 			cpu: 0,
 			mem: 0,
 			memUsed: 0,
@@ -45,16 +59,10 @@ export function AddServerButton() {
 			diskUsed: 0,
 			diskPct: 0,
 		}
-		const data = { stats } as Record<string, any>
-		for (const [key, value] of formData) {
-			data[key.slice(2)] = value
-		}
-		console.log(data)
-
 		try {
-			const record = await pb.collection('systems').create(data)
-			console.log(record)
 			setOpen(false)
+			await pb.collection('systems').create(data)
+			// console.log(record)
 		} catch (e) {
 			console.log(e)
 		}
@@ -73,57 +81,56 @@ export function AddServerButton() {
 					<DialogTitle>Add New Server</DialogTitle>
 					<DialogDescription>
 						The agent must be running on the server to connect. Copy the{' '}
-						<code class="bg-muted px-1 rounded-sm">docker-compose.yml</code> for the agent below.
+						<code className="bg-muted px-1 rounded-sm">docker-compose.yml</code> for the agent
+						below.
 					</DialogDescription>
 				</DialogHeader>
-				<form name="testing" action="/" onSubmit={handleSubmit}>
+				<form name="testing" action="/" onSubmit={handleSubmit as any}>
 					<div className="grid gap-4 py-4">
 						<div className="grid grid-cols-4 items-center gap-4">
-							<Label for="s-name" className="text-right">
+							<Label htmlFor="name" className="text-right">
 								Name
 							</Label>
-							<Input id="s-name" name="s-name" className="col-span-3" required />
+							<Input id="name" name="name" className="col-span-3" required />
 						</div>
 						<div className="grid grid-cols-4 items-center gap-4">
-							<Label for="s-ip" className="text-right">
+							<Label htmlFor="ip" className="text-right">
 								IP Address
 							</Label>
-							<Input id="s-ip" name="s-ip" className="col-span-3" required />
+							<Input id="ip" name="ip" className="col-span-3" required />
 						</div>
 						<div className="grid grid-cols-4 items-center gap-4">
-							<Label for="s-port" className="text-right">
+							<Label htmlFor="port" className="text-right">
 								Port
 							</Label>
 							<Input
 								ref={port}
-								name="s-port"
-								id="s-port"
+								name="port"
+								id="port"
 								defaultValue="45876"
 								className="col-span-3"
 								required
 							/>
 						</div>
 						<div className="grid grid-cols-4 items-center gap-4 relative">
-							<Label for="s-port" className="text-right">
+							<Label htmlFor="pkey" className="text-right">
 								Public Key
 							</Label>
-							<Input
-								readonly
-								name="s-port"
-								id="s-port"
-								value={$publicKey.get()}
-								className="col-span-3"
-								required
-							></Input>
+							<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
 							<div
 								className={
 									'h-6 w-28 bg-gradient-to-r from-transparent to-background to-70% absolute right-1 pointer-events-none'
 								}
 							></div>
-							<TooltipProvider className="z-10">
+							<TooltipProvider delayDuration={100}>
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<Button type="button" variant={'link'} className="absolute right-0 z-50">
+										<Button
+											type="button"
+											variant={'link'}
+											className="absolute right-0"
+											onClick={() => copyToClipboard(publicKey)}
+										>
 											<ClipboardIcon className="h-4 w-4 " />
 										</Button>
 									</TooltipTrigger>