fix(frontend): 🐛 mounts component before accessing local storage

Only access localStorage on the client side (in the browser) after the component has mounted.

Author: tituschewxj

apps/frontend/src/app/collaboration/[id]/page.tsx

@@ -31,7 +31,18 @@ import CollaborativeEditor, {
 } from "@/components/CollaborativeEditor/CollaborativeEditor";
 import { CreateHistory } from "@/app/services/history";
 import { WebrtcProvider } from "y-webrtc";
-import { ExecuteVisibleAndCustomTests, ExecuteVisibleAndHiddenTestsAndSubmit, ExecutionResults, GetVisibleTests, isTestResult, SubmissionHiddenTestResultsAndStatus, SubmissionResults, Test, TestData, TestResult } from "@/app/services/execute";
+import {
+  ExecuteVisibleAndCustomTests,
+  ExecuteVisibleAndHiddenTestsAndSubmit,
+  ExecutionResults,
+  GetVisibleTests,
+  isTestResult,
+  SubmissionHiddenTestResultsAndStatus,
+  SubmissionResults,
+  Test,
+  TestData,
+  TestResult,
+} from "@/app/services/execute";
 import { QuestionDetailFull } from "@/components/question/QuestionDetailFull/QuestionDetailFull";
 import VideoPanel from "@/components/VideoPanel/VideoPanel";
 
@@ -69,15 +80,17 @@ export default function CollaborationPage(props: CollaborationProps) {
   );
   const [currentUser, setCurrentUser] = useState<string | undefined>(undefined);
   const [matchedUser, setMatchedUser] = useState<string>("Loading...");
-  const [sessionDuration, setSessionDuration] = useState<number>(() => {
-    const storedTime = localStorage.getItem("session-duration");
-    return storedTime ? parseInt(storedTime) : 0;
-  }); // State for count-up timer (TODO: currently using localstorage to store time, change to db stored time in the future)
+  const [sessionDuration, setSessionDuration] = useState<number>(0); // State for count-up timer (TODO: currently using localstorage to store time, change to db stored time in the future)
   const stopwatchRef = useRef<NodeJS.Timeout | null>(null);
   const [matchedTopics, setMatchedTopics] = useState<string[] | undefined>(
     undefined
   );
 
+  useEffect(() => {
+    const storedTime = localStorage.getItem("session-duration");
+    setSessionDuration(storedTime ? parseInt(storedTime) : 0);
+  }, []);
+
   // Chat states
   const [messageToSend, setMessageToSend] = useState<string | undefined>(
     undefined
@@ -89,8 +102,12 @@ export default function CollaborationPage(props: CollaborationProps) {
   );
   const [visibleTestCases, setVisibleTestCases] = useState<Test[]>([]);
   const [isLoadingTestCase, setIsLoadingTestCase] = useState<boolean>(false);
-  const [isLoadingSubmission, setIsLoadingSubmission] = useState<boolean>(false);
-  const [submissionHiddenTestResultsAndStatus, setSubmissionHiddenTestResultsAndStatus] = useState<SubmissionHiddenTestResultsAndStatus | undefined>(undefined);
+  const [isLoadingSubmission, setIsLoadingSubmission] =
+    useState<boolean>(false);
+  const [
+    submissionHiddenTestResultsAndStatus,
+    setSubmissionHiddenTestResultsAndStatus,
+  ] = useState<SubmissionHiddenTestResultsAndStatus | undefined>(undefined);
 
   // End Button Modal state
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
@@ -151,7 +168,7 @@ export default function CollaborationPage(props: CollaborationProps) {
       type: "info",
       content: message,
     });
-  }
+  };
 
   const sendSubmissionResultsToMatchedUser = (data: SubmissionResults) => {
     if (!providerRef.current) {
@@ -161,7 +178,7 @@ export default function CollaborationPage(props: CollaborationProps) {
       submissionResults: data,
       id: Date.now(),
     });
-  }
+  };
 
   const sendExecutingStateToMatchedUser = (executing: boolean) => {
     if (!providerRef.current) {
@@ -171,7 +188,7 @@ export default function CollaborationPage(props: CollaborationProps) {
       executing: executing,
       id: Date.now(),
     });
-  }
+  };
 
   const sendSubmittingStateToMatchedUser = (submitting: boolean) => {
     if (!providerRef.current) {
@@ -181,7 +198,7 @@ export default function CollaborationPage(props: CollaborationProps) {
       submitting: submitting,
       id: Date.now(),
     });
-  }
+  };
 
   const sendExecutionResultsToMatchedUser = (data: ExecutionResults) => {
     if (!providerRef.current) {
@@ -191,60 +208,54 @@ export default function CollaborationPage(props: CollaborationProps) {
       executionResults: data,
       id: Date.now(),
     });
-  }
+  };
 
   const updateSubmissionResults = (data: SubmissionResults) => {
     setSubmissionHiddenTestResultsAndStatus({
       hiddenTestResults: data.hiddenTestResults,
       status: data.status,
     });
     setVisibleTestCases(data.visibleTestResults);
-  }
+  };
 
   const updateExecutionResults = (data: ExecutionResults) => {
     setVisibleTestCases(data.visibleTestResults);
-  }
+  };
 
   const handleRunTestCases = async () => {
     if (!questionDocRefId) {
       throw new Error("Question ID not found");
     }
     setIsLoadingTestCase(true);
     sendExecutingStateToMatchedUser(true);
-    const data = await ExecuteVisibleAndCustomTests(
-      questionDocRefId,
-      {
-        code: code,
-        language: selectedLanguage,
-        customTestCases: "",
-      }
-    );
+    const data = await ExecuteVisibleAndCustomTests(questionDocRefId, {
+      code: code,
+      language: selectedLanguage,
+      customTestCases: "",
+    });
     setVisibleTestCases(data.visibleTestResults);
-    infoMessage("Test cases executed. Review the results below.")
+    infoMessage("Test cases executed. Review the results below.");
     sendExecutionResultsToMatchedUser(data);
     setIsLoadingTestCase(false);
     sendExecutingStateToMatchedUser(false);
-  }
+  };
 
   const handleSubmitCode = async () => {
     if (!questionDocRefId) {
       throw new Error("Question ID not found");
     }
     setIsLoadingSubmission(true);
     sendSubmittingStateToMatchedUser(true);
-    const data = await ExecuteVisibleAndHiddenTestsAndSubmit(
-      questionDocRefId,
-      {
-        code: code,
-        language: selectedLanguage,
-        user: currentUser ?? "",
-        matchedUser: matchedUser ?? "",
-        matchedTopics: matchedTopics ?? [],
-        title: questionTitle ?? "",
-        questionDifficulty: complexity ?? "",
-        questionTopics: categories,
-      }
-    );
+    const data = await ExecuteVisibleAndHiddenTestsAndSubmit(questionDocRefId, {
+      code: code,
+      language: selectedLanguage,
+      user: currentUser ?? "",
+      matchedUser: matchedUser ?? "",
+      matchedTopics: matchedTopics ?? [],
+      title: questionTitle ?? "",
+      questionDifficulty: complexity ?? "",
+      questionTopics: categories,
+    });
     setVisibleTestCases(data.visibleTestResults);
     setSubmissionHiddenTestResultsAndStatus({
       hiddenTestResults: data.hiddenTestResults,
@@ -254,7 +265,7 @@ export default function CollaborationPage(props: CollaborationProps) {
     successMessage("Code saved successfully!");
     setIsLoadingSubmission(false);
     sendSubmittingStateToMatchedUser(false);
-  }
+  };
 
   const handleCodeChange = (code: string) => {
     setCode(code);
@@ -317,9 +328,7 @@ export default function CollaborationPage(props: CollaborationProps) {
       label: (
         <span
           style={{
-            color: !isTestResult(item) 
-              ? "" 
-              : (item.passed ? "green" : "red"),
+            color: !isTestResult(item) ? "" : item.passed ? "green" : "red",
           }}
         >
           Case {index + 1}
@@ -335,21 +344,20 @@ export default function CollaborationPage(props: CollaborationProps) {
           {isTestResult(item) && (
             <div className="test-result-container">
               <InfoCircleFilled className="hidden-test-icon" />
-              <Typography.Text 
-                strong 
+              <Typography.Text
+                strong
                 style={{ color: item.passed ? "green" : "red" }}
               >
                 {item.passed ? "Passed" : "Failed"}
               </Typography.Text>
               <br />
-              <Typography.Text strong>Actual Output:</Typography.Text> {item.actual}
+              <Typography.Text strong>Actual Output:</Typography.Text>{" "}
+              {item.actual}
               <br />
               {item.error && (
                 <>
                   <Typography.Text strong>Error:</Typography.Text>
-                  <div className="error-message">
-                    {item.error}
-                  </div>
+                  <div className="error-message">{item.error}</div>
                 </>
               )}
             </div>
@@ -487,31 +495,50 @@ export default function CollaborationPage(props: CollaborationProps) {
                 )}
                 <div className="hidden-test-results">
                   <InfoCircleFilled className="hidden-test-icon" />
-                  <Typography.Text 
+                  <Typography.Text
                     strong
                     style={{
                       color: submissionHiddenTestResultsAndStatus
-                        ? submissionHiddenTestResultsAndStatus.status === "Accepted"
+                        ? submissionHiddenTestResultsAndStatus.status ===
+                          "Accepted"
                           ? "green"
-                          : submissionHiddenTestResultsAndStatus.status === "Attempted"
+                          : submissionHiddenTestResultsAndStatus.status ===
+                            "Attempted"
                           ? "orange"
                           : "black" // default color for any other status
                         : "gray", // color for "Not Attempted"
                     }}
                   >
-                    Session Status: {submissionHiddenTestResultsAndStatus ? submissionHiddenTestResultsAndStatus.status : "Not Attempted"}
+                    Session Status:{" "}
+                    {submissionHiddenTestResultsAndStatus
+                      ? submissionHiddenTestResultsAndStatus.status
+                      : "Not Attempted"}
                   </Typography.Text>
                   <br />
                   {submissionHiddenTestResultsAndStatus && (
                     <Typography.Text
                       strong
                       style={{
-                        color: submissionHiddenTestResultsAndStatus.hiddenTestResults.passed === submissionHiddenTestResultsAndStatus.hiddenTestResults.total
-                          ? "green" // All test cases passed
-                          : "red"   // Some test cases failed
+                        color:
+                          submissionHiddenTestResultsAndStatus.hiddenTestResults
+                            .passed ===
+                          submissionHiddenTestResultsAndStatus.hiddenTestResults
+                            .total
+                            ? "green" // All test cases passed
+                            : "red", // Some test cases failed
                       }}
                     >
-                      Passed {submissionHiddenTestResultsAndStatus.hiddenTestResults.passed} / {submissionHiddenTestResultsAndStatus.hiddenTestResults.total} hidden test cases
+                      Passed{" "}
+                      {
+                        submissionHiddenTestResultsAndStatus.hiddenTestResults
+                          .passed
+                      }{" "}
+                      /{" "}
+                      {
+                        submissionHiddenTestResultsAndStatus.hiddenTestResults
+                          .total
+                      }{" "}
+                      hidden test cases
                     </Typography.Text>
                   )}
                 </div>