reactify RandomMsg component

src/components/RandomMsg.jsx

@@ -1,39 +1,51 @@
+import { useState, useEffect } from "react";
 import { API_URL } from "../config";
-import { default as $ } from "jquery";
+import ReplayIcon from "@mui/icons-material/Replay";
-import ReplayIcon from '@mui/icons-material/Replay';
-
-
-var randomMsg;
-
-const getRandomMsg = () => {
-        $.ajax({
-            url: API_URL+'/randmsg',
-            method: "POST",
-            contentType: "application/json; charset=utf-8"
-        }).done(function (data) {
-            if (! data.msg) {
-                return;
-            } else {
-                randomMsg = data.msg.replace("<br>", "\n");
-                $('.random-msg').html(`<small><i>${randomMsg}</i></small>`);
-            }
-        });
-}
 
 export default function RandomMsg() {
-    getRandomMsg();
+  const [randomMsg, setRandomMsg] = useState("");
-        return (
-            <div className="random-msg-container">
-                <div className="random-msg">
-                </div>
-                <button id="new-msg"
-                aria-label="New footer message"
-                type="button"
-                className="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-opacity new-msg-button"
-                onClick={() => getRandomMsg()}>
-                    <ReplayIcon size="sm" />
-                </button>                
-            </div>
-        ); 
-}
 
+  const getRandomMsg = async () => {
+    try {
+      const response = await fetch(`${API_URL}/randmsg`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+      });
+
+      const data = await response.json();
+      if (data?.msg) {
+        const formattedMsg = data.msg.replace(/<br\s*\/?>/gi, "\n");
+        setRandomMsg(formattedMsg);
+      }
+    } catch (err) {
+      console.error("Failed to fetch random message:", err);
+    }
+  };
+
+  useEffect(() => {
+    getRandomMsg();
+  }, []);
+
+  return (
+    <div className="random-msg-container">
+      <div className="random-msg">
+        {randomMsg && (
+          <small>
+            <i>{randomMsg}</i>
+          </small>
+        )}
+      </div>
+      <button
+        id="new-msg"
+        aria-label="New footer message"
+        type="button"
+        className="flex items-center justify-center px-2 py-1 rounded-md hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-opacity new-msg-button"
+        onClick={getRandomMsg}
+      >
+        <ReplayIcon fontSize="small" />
+      </button>
+    </div>
+  );
+}