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")
+    // remove trailing slash
-      .then((response) => {
+    setServerUrl(serverUrl.replace(/\/$/, ""));
+
+    try {
+      const response = await fetch(serverUrl + "/health");
       if (response.ok) {
+        console.log("connected");
         setServerConnection("connected");
       } else {
+        console.log("disconnected");
         setServerConnection("disconnected");
       }
-      })
+    } catch (e) {
-      .catch(() => {
+      console.log("disconnected", e);
       setServerConnection("disconnected");
-      });
-
-    // if the server is connected then continue to ping every 5 seconds
-    if (serverConnection === "connected") {
-      setTimeout(checkServerConnection, 5000);
     }
   };
 
+  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'
+        {...chipProps}
-        label='Server disconnected'
         onClick={clickEvent}
         size='small'
       />
@@ -80,26 +100,29 @@ export const ServerStatus = () => {
           horizontal: "center",
         }}
         sx={{
-          "transform": "translate(0px, 4px)",
+          "transform": "translate(0px, 8px)",
           "& .MuiPaper-root": {
             borderRadius: defaultSettings.style.radius + "px",
           },
         }}
+      >
+        <Box
+          sx={{
+            backgroundColor: "#434446",
+            p: 2,
+          }}
+        >
+          <form
+            onSubmit={(e) => {
+              checkServerConnection();
+              e.preventDefault();
+            }}
           >
             <Stack
               alignItems='center'
               display='flex'
               direction='row'
               spacing={1}
-          sx={{
-            backgroundColor: "#434446",
-            p: 2,
-          }}
-        >
-          <form
-            onSubmit={() => {
-              checkServerConnection();
-            }}
             >
               <ServerUrlInput />
               <Button
@@ -108,8 +131,9 @@ export const ServerStatus = () => {
               >
                 Connect
               </Button>
-          </form>
             </Stack>
+          </form>
+        </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}