fixed server status client

README.md

@@ -31,6 +31,8 @@ PGPASSWORD=asdfpassword
 
 ## Server
 
+!only listening on localhost is supported. DO NOT run this on a public ip.  
+
 - `/setup-demo-db`
 - `/nuke-db`
 - `/fetch-all-users`

client/src-tauri/capabilities/default.json

@@ -18,7 +18,7 @@
           "url": "https://*.vomitblood.com"
         },
         {
-          "url": "http://localhost"
+          "url": "http://localhost:*"
         }
       ],
       "identifier": "http:default"

client/src/components/HeaderBar/ServerStatus.tsx

@@ -1,15 +1,12 @@
-import { Box, Button, Chip, CircularProgress, Popover, Stack, useTheme } from "@mui/material";
+import { Box, Button, Chip, CircularProgress, Popover, Stack } from "@mui/material";
 import { fetch } from "@tauri-apps/plugin-http";
 import { useAtom } from "jotai";
-import { MouseEvent, useState } from "react";
+import { MouseEvent, useEffect, useState } from "react";
 import { serverConnectionAtom, serverUrlAtom } from "../../lib/jotai";
 import { defaultSettings } from "../../lib/settings";
 import { ServerUrlInput } from "./ServerUrlInput";
 
 export const ServerStatus = () => {
-  // contexts
-  const theme = useTheme();
-
   // atoms
   const [serverConnection, setServerConnection] = useAtom(serverConnectionAtom);
   const [serverUrl, setServerUrl] = useAtom(serverUrlAtom);
@@ -27,24 +24,48 @@ export const ServerStatus = () => {
 
   // function to check server health
   const checkServerConnection = async () => {
-    fetch(serverUrl + "/health")
-      .then((response) => {
-        if (response.ok) {
-          setServerConnection("connected");
-        } else {
-          setServerConnection("disconnected");
-        }
-      })
-      .catch(() => {
-        setServerConnection("disconnected");
-      });
+    // remove trailing slash
+    setServerUrl(serverUrl.replace(/\/$/, ""));
 
-    // if the server is connected then continue to ping every 5 seconds
-    if (serverConnection === "connected") {
-      setTimeout(checkServerConnection, 5000);
+    try {
+      const response = await fetch(serverUrl + "/health");
+      if (response.ok) {
+        console.log("connected");
+        setServerConnection("connected");
+      } else {
+        console.log("disconnected");
+        setServerConnection("disconnected");
+      }
+    } catch (e) {
+      console.log("disconnected", e);
+      setServerConnection("disconnected");
     }
   };
 
+  const chipProps = {
+    color: serverConnection === "connected" ? "success" : serverConnection === "disconnected" ? "error" : "warning",
+    label:
+      serverConnection === "connected"
+        ? "Server connected"
+        : serverConnection === "disconnected"
+        ? "Server disconnected"
+        : "Connecting...",
+  };
+
+  useEffect(() => {
+    // only start interval if server is connected
+    if (serverConnection === "connected") {
+      const intervalId = setInterval(checkServerConnection, 2000);
+      console.log("Started server ping interval");
+
+      // cleanup interval on disconnection or component unmount
+      return () => {
+        clearInterval(intervalId);
+        console.log("Stopped server ping interval");
+      };
+    }
+  }, [serverConnection, serverUrl]);
+
   return (
     <Box
       sx={{
@@ -62,8 +83,7 @@ export const ServerStatus = () => {
       )}
       {/* @ts-ignore */}
       <Chip
-        color='error'
-        label='Server disconnected'
+        {...chipProps}
         onClick={clickEvent}
         size='small'
       />
@@ -80,36 +100,40 @@ export const ServerStatus = () => {
           horizontal: "center",
         }}
         sx={{
-          "transform": "translate(0px, 4px)",
+          "transform": "translate(0px, 8px)",
           "& .MuiPaper-root": {
             borderRadius: defaultSettings.style.radius + "px",
           },
         }}
       >
-        <Stack
-          alignItems='center'
-          display='flex'
-          direction='row'
-          spacing={1}
+        <Box
           sx={{
             backgroundColor: "#434446",
             p: 2,
           }}
         >
           <form
-            onSubmit={() => {
+            onSubmit={(e) => {
               checkServerConnection();
+              e.preventDefault();
             }}
           >
-            <ServerUrlInput />
-            <Button
-              type='submit'
-              variant='outlined'
+            <Stack
+              alignItems='center'
+              display='flex'
+              direction='row'
+              spacing={1}
             >
-              Connect
-            </Button>
+              <ServerUrlInput />
+              <Button
+                type='submit'
+                variant='outlined'
+              >
+                Connect
+              </Button>
+            </Stack>
           </form>
-        </Stack>
+        </Box>
       </Popover>
     </Box>
   );

client/src/components/HeaderBar/ServerUrlInput.tsx

@@ -9,7 +9,7 @@ export const ServerUrlInput = () => {
   return (
     <TextField
       fullWidth
-      label='Paste your backend URL here (default: http://localhost:5000)'
+      label='Backend server URL'
       onChange={(event) => setServerUrl(event.target.value)}
       size='small'
       value={serverUrl}