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() {
+  const [randomMsg, setRandomMsg] = useState("");
+
+  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"
+      <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()}>
+        onClick={getRandomMsg}
-                    <ReplayIcon size="sm" />
+      >
+        <ReplayIcon fontSize="small" />
       </button>
     </div>
   );
 }
-