\n {sensor.name}\n

\n \n {sensor.port}\n \n \n registered {formatDate(sensor.created_at)}\n \n

\n \n Edit\n \n \n View Dashboard →\n \n

\n );\n}\n\nfunction App() {\n const [sensors, setSensors] = useState(null);\n const [lastUpdated, setLastUpdated] = useState(null);\n const [error, setError] = useState(null);\n\n const fetchSensors = useCallback(async () => {\n try {\n const res = await fetch(`${BASE_URL}/sensors`);\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\n const data: Sensor[] = await res.json();\n setSensors(data);\n setLastUpdated(new Date());\n setError(null);\n } catch (e: any) {\n setError(e.message);\n }\n }, []);\n\n useEffect(() => {\n fetchSensors();\n const id = setInterval(fetchSensors, POLL_INTERVAL_MS);\n return () => clearInterval(id);\n }, [fetchSensors]);\n\n return (\n

\n {/* Header */}\n

ESP32 Sensors

\n {sensors === null\n ? \"Loading…\"\n : `${sensors.length} sensor${\n sensors.length !== 1 ? \"s\" : \"\"\n } registered`}\n

\n {lastUpdated\n ? (\n <>\n Last updated\n
\n {lastUpdated.toLocaleTimeString()}\n \n )\n : (\n \"Loading…\"\n )}\n

\n\n {/* Error banner */}\n {error && (\n

\n ❌ {error}\n

\n )}\n\n {/* Sensor list */}\n {sensors === null\n ?

Loading…

\n : sensors.length === 0\n ? (\n

\n No sensors registered yet.\n

\n )\n : (\n

\n {sensors.map((s) => )}\n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n ESP32 Sensors\n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}","deleted","label",[181,163],"web","permalink","https://www.val.town/x/nmsilva/esp32-sensors/code/web/sensors.tsx","extension","actionData","errors"]