fix: fix ui

Author: elroygohjy

frontend/src/app/api/index.ts

@@ -37,8 +37,8 @@ export const FetchAuth = {
     // Perform the fetch request with the modified options
     const res = await fetch(url, options);
     if (!res.ok) {
-      console.log(res);
-      throw Error();
+      // console.log(res);
+      // throw Error();
     }
     return res;
   },

frontend/src/app/components/code-editor/CodeEditor.tsx

@@ -15,6 +15,7 @@ import { yCollab } from "y-codemirror.next";
 import { SocketIOProvider } from "y-socket.io";
 import * as Y from "yjs";
 import Tabs from "../tab/Tabs";
+import { fetchProfileUrl } from "@/app/api";
 
 const CodeMirror = dynamic(() => import("@uiw/react-codemirror"), {
   ssr: false,
@@ -33,19 +34,6 @@ if (typeof window !== "undefined") {
   desiredWidth = window.innerWidth >= 1024 ? "50vw" : "90vw";
 }
 
-// TODO: idk what FE plan is for this, so i just slapped a random text box thing here.
-const UiElementOnClose = () => {
-  return (
-    <div className="flex items-center gap-4 bg-slate-800 p-2">
-      <ExclamationCircleFilled />
-      Your room has been closed.
-      <Button className="btn-accent" onClick={() => window.location.reload()}>
-        Restart
-      </Button>
-    </div>
-  );
-};
-
 const codeLangAtomWrapper = atom(
   (get) => get(codeLangAtom),
   (_get, set, lang: string) => {
@@ -79,6 +67,9 @@ const CodeMirrorEditor = ({
   const [extensions, setExtensions] = useState<any>([]);
 
   useEffect(() => {
+    fetchProfileUrl().then((res) => {
+      setSelectedLanguage(res.payload.preferredLang || "python");
+    });
     if (!innkeeperUrl) {
       console.error(
         "NEXT_PUBLIC_PEERPREP_INNKEEPER_SOCKET_URL not set in .env",
@@ -204,7 +195,6 @@ const CodeMirrorEditor = ({
           </select>
         </div>
       </div>
-      {isMatched !== "MATCHED" && <UiElementOnClose />}
       <CodeMirror
         className="max-h-[70svw] w-[90svw] lg:w-[50svw]"
         height={`${editorHeight}px`}

frontend/src/app/components/status-bar/StatusBar.tsx

@@ -4,6 +4,7 @@ import {
   codeLangAtom,
   codeMirrorValueAtom,
   innkeeperWriteAtom,
+  isMatchedAtom,
   isQuestionModalOpenAtom,
   questionIdAtom,
   resultAtom,
@@ -13,6 +14,7 @@ import { atom, useAtomValue, useSetAtom } from "jotai";
 import Button from "../button/Button";
 import { message } from "antd";
 import UserStateBadge from "./UserStatusBadge";
+import { ExclamationCircleFilled } from "@ant-design/icons";
 
 interface StatusBarProps {
   exitMethod: () => void;
@@ -34,6 +36,7 @@ const triggerExitRoomRequestAtom = atom(null, (get, set) => {
 });
 
 const StatusBar = ({ exitMethod }: StatusBarProps) => {
+  const isMatched = useAtomValue(isMatchedAtom);
   const code = useAtomValue(codeMirrorValueAtom);
   const userStates = useAtomValue(userStatesAtom);
   const questionId = useAtomValue(questionIdAtom);
@@ -42,6 +45,23 @@ const StatusBar = ({ exitMethod }: StatusBarProps) => {
   const setQuestionModalOpen = useSetAtom(isQuestionModalOpenAtom);
   const [api, contextHolder] = message.useMessage();
 
+  const UiElementOnClose = () => {
+    return (
+      <div className="flex items-center gap-2">
+        <div className="mt-1 flex gap-2 rounded-full bg-error px-2 py-1 font-bold text-white">
+          <ExclamationCircleFilled />
+          Your room has been closed.
+        </div>
+        <Button
+          className="btn-accent btn-sm"
+          onClick={() => window.location.reload()}
+        >
+          Back to Matching
+        </Button>
+      </div>
+    );
+  };
+
   return (
     <footer className="fixed bottom-0 left-0 flex w-[100svw] items-center justify-between border-black bg-primary px-4 py-2 shadow-sm lg:static lg:w-full lg:px-12">
       {contextHolder}
@@ -51,42 +71,45 @@ const StatusBar = ({ exitMethod }: StatusBarProps) => {
             <UserStateBadge userState={userState} key={userState.userId} />
           ))}
       </div>
-      <div className="flex items-center gap-4">
-        <Button
-          className="btn-outline btn-sm"
-          onClick={() =>
-            questionId &&
-            completeQuestion(questionId).then((res) =>
-              res.statusMessage.type.toLowerCase() === "success"
-                ? api.success({
-                    type: "success",
-                    content: "Successfully completed question!",
-                  })
-                : api.error({
-                    type: "error",
-                    content: "Failure completing question",
-                  }),
-            )
-          }
-          children={<span>Mark As Complete</span>}
-          disabled={!questionId}
-        />
-        <Button
-          className="btn-success btn-sm"
-          onClick={() => setQuestionModalOpen(true)}
-          children={<span>Select Question</span>}
-        />
-        <Button
-          className="btn-sm"
-          onClick={callExecution}
-          children={<span>Execute</span>}
-        />
-        <Button
-          className="btn-error btn-sm"
-          onClick={callExitRoom}
-          children={<span>Exit</span>}
-        />
-      </div>
+      {isMatched === "MATCHED" && (
+        <div className="flex items-center gap-4">
+          <Button
+            className="btn-outline btn-sm"
+            onClick={() =>
+              questionId &&
+              completeQuestion(questionId).then((res) =>
+                res.statusMessage.type.toLowerCase() === "success"
+                  ? api.success({
+                      type: "success",
+                      content: "Successfully completed question!",
+                    })
+                  : api.error({
+                      type: "error",
+                      content: "Failure completing question",
+                    }),
+              )
+            }
+            children={<span>Mark As Complete</span>}
+            disabled={!questionId}
+          />
+          <Button
+            className="btn-success btn-sm"
+            onClick={() => setQuestionModalOpen(true)}
+            children={<span>Select Question</span>}
+          />
+          <Button
+            className="btn-sm"
+            onClick={callExecution}
+            children={<span>Execute</span>}
+          />
+          <Button
+            className="btn-error btn-sm"
+            onClick={callExitRoom}
+            children={<span>Exit</span>}
+          />
+        </div>
+      )}
+      {isMatched !== "MATCHED" && <UiElementOnClose />}
     </footer>
   );
 };