begin js(x) to ts(x)

src/components/RandomMsg.tsx

@@ -0,0 +1,94 @@
+import { useState, useEffect } from "react";
+import { API_URL } from "../config";
+
+interface RandomMsgResponse {
+  msg?: string;
+}
+
+export default function RandomMsg(): React.ReactElement {
+  const [randomMsg, setRandomMsg] = useState<string>("");
+  const [responseTime, setResponseTime] = useState<number | null>(null);
+  const [showResponseTime, setShowResponseTime] = useState<boolean>(false);
+
+  const getRandomMsg = async (): Promise<void> => {
+    try {
+      const start = performance.now();
+      const response = await fetch(`${API_URL}/randmsg`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json; charset=utf-8" },
+      });
+      const end = performance.now();
+      setResponseTime(Math.round(end - start));
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const data = await response.json();
+      if (data?.msg) setRandomMsg(data.msg.replace(/<br\s*\/?\>/gi, "\n"));
+    } catch (err) {
+      console.error("Failed to fetch random message:", err);
+      setResponseTime(null);
+    }
+  };
+
+  useEffect(() => void getRandomMsg(), []);
+
+  return (
+    <div className="random-msg-container">
+      {randomMsg && (
+        <div className="random-msg" style={{ position: "relative", display: "inline" }}>
+          <small
+            style={{ cursor: responseTime !== null ? "pointer" : "default" }}
+            onClick={() => {
+              if (responseTime !== null) setShowResponseTime((v) => !v);
+            }}
+            tabIndex={0}
+            onBlur={() => setShowResponseTime(false)}
+          >
+            <i>{randomMsg}</i>
+          </small>
+          <button
+            aria-label="New footer message"
+            type="button"
+            className="random-msg-reload"
+            onClick={getRandomMsg}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="12"
+              height="12"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path
+                d="M17.65 6.35a7.95 7.95 0 0 0-5.65-2.35 8 8 0 1 0 7.75 9.94h-2.08a6 6 0 1 1-5.67-7.94 5.94 5.94 0 0 1 4.22 1.78L13 11h7V4z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+          {showResponseTime && responseTime !== null && (
+            <div
+              style={{
+                position: "absolute",
+                left: "50%",
+                top: "100%",
+                transform: "translateX(-50%)",
+                marginTop: 4,
+                background: "#222",
+                color: "#fff",
+                fontSize: "0.75em",
+                padding: "2px 8px",
+                borderRadius: 6,
+                boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+                zIndex: 10,
+                whiteSpace: "nowrap"
+              }}
+              role="status"
+              aria-live="polite"
+            >
+              API response: {responseTime} ms
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}