From 47808e8f9b53ba1056537cd934eb620170c40479 Mon Sep 17 00:00:00 2001
From: Felix Kunze <felix.kunze@t-online.de>
Date: Fri, 17 Jan 2025 11:58:48 +0100
Subject: [PATCH] fix(automatic): ensure `window.location` is defined

* Replaced custom input logic with reusable SetpointInput component
* Introduced mount-time check
    *   ensure `window.location` is accessed only on the client

issue #29
---
 app/automatic/page.tsx          | 60 ++++++----------------------
 app/automatic/setpointInput.tsx | 70 +++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 48 deletions(-)
 create mode 100644 app/automatic/setpointInput.tsx

diff --git a/app/automatic/page.tsx b/app/automatic/page.tsx
index 31d811a..31289c0 100644
--- a/app/automatic/page.tsx
+++ b/app/automatic/page.tsx
@@ -1,41 +1,15 @@
 "use client";
 
-import { use, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { FlowmeterWidgets } from "../sensors/ui/flowmeterWidgets";
-import { InputConfirmed } from "../actuators/ui/inputConfirmed";
-import useWebSocket from "../hooks/useWebSocket";
-import { handleSetpointChange } from "./apiCalls";
-import { Switch } from "antd";
+import SetpointInput from "./setpointInput";
 
 export default function Page() {
-  let [setpoint, setSetpoint] = useState<number>(0);
-
-  const { data: websocketState, error } = useWebSocket<number | null>({
-    hostname: window.location.hostname,
-    route: "/v1/sensors/flowmeters/ws/setpoint/0",
-  });
+  const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
-    if (typeof websocketState === "number") {
-      setSetpoint(websocketState);
-    }
-  }, [websocketState]);
-
-  const onSetpointChange = (newSetpoint: number) => {
-    setSetpoint(newSetpoint);
-  };
-
-  const onSetpointConfirm = () => {
-    handleSetpointChange(setpoint, 0);
-  };
-
-  const handleToggle = (checked: boolean) => {
-    if (checked) {
-      handleSetpointChange(setpoint, 0);
-    } else {
-      handleSetpointChange(null, 0);
-    }
-  };
+    setIsMounted(true);
+  }, []);
 
   return (
     <div>
@@ -47,23 +21,13 @@ export default function Page() {
           Flowmeters
         </h2>
         <FlowmeterWidgets />
-      </div>
-      <div>
-        <Switch
-          checked={typeof websocketState === "number"}
-          onClick={(checked) => handleToggle(checked)}
-        />
-      </div>
-      <div>
-        <InputConfirmed
-          min={0.0}
-          max={25}
-          precision={2}
-          value={setpoint}
-          onValueChange={onSetpointChange}
-          onConfirm={onSetpointConfirm}
-          disabled={!(typeof websocketState === "number")}
-        />
+
+        {isMounted && (
+          <SetpointInput
+            websocketHostname={window.location.hostname}
+            route="/v1/sensors/flowmeters/ws/setpoint/0"
+          />
+        )}
       </div>
     </div>
   );
diff --git a/app/automatic/setpointInput.tsx b/app/automatic/setpointInput.tsx
new file mode 100644
index 0000000..57d2acb
--- /dev/null
+++ b/app/automatic/setpointInput.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import useWebSocket from "../hooks/useWebSocket";
+import { handleSetpointChange } from "./apiCalls";
+import { Switch } from "antd";
+import { InputConfirmed } from "../actuators/ui/inputConfirmed";
+
+export interface SetpointInputProps {
+  websocketHostname: string;
+  route: string;
+}
+
+const SetpointInput: React.FC<SetpointInputProps> = ({
+  websocketHostname,
+  route,
+}) => {
+  let [setpoint, setSetpoint] = useState<number>(0);
+
+  const { data: websocketState, error } = useWebSocket<number | null>({
+    hostname: websocketHostname,
+    route: route,
+  });
+
+  useEffect(() => {
+    if (typeof websocketState === "number") {
+      setSetpoint(websocketState);
+    }
+  }, [websocketState]);
+
+  const onSetpointChange = (newSetpoint: number) => {
+    setSetpoint(newSetpoint);
+  };
+
+  const onSetpointConfirm = () => {
+    handleSetpointChange(setpoint, 0);
+  };
+
+  const handleToggle = (checked: boolean) => {
+    if (checked) {
+      handleSetpointChange(setpoint, 0);
+    } else {
+      handleSetpointChange(null, 0);
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <Switch
+          checked={typeof websocketState === "number"}
+          onClick={(checked) => handleToggle(checked)}
+        />
+      </div>
+      <div>
+        <InputConfirmed
+          min={0.0}
+          max={25}
+          precision={2}
+          value={setpoint}
+          onValueChange={onSetpointChange}
+          onConfirm={onSetpointConfirm}
+          disabled={!(typeof websocketState === "number")}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SetpointInput;