Create release 1.3.0

README.md

@@ -14,7 +14,7 @@ Prerequisites for PeerPrep Monorepo:
 
 3. **Node.js:** Check each application's documentation for the recommended
     Node.js version.
-4. **Git (Optional but Recommended):**
+4. **Git**
 5. **Docker (If deploying with Docker):**
 6. **Kubernetes Tools (If deploying with Kubernetes):**
 
@@ -72,7 +72,8 @@ The difference between it and `FIREBASE_SERVICE_ACCOUNT` are shown below:
     pip install pre-commit
     pre-commit install
     ```
-
+This step requires Git to be installed.
+
 **Disclaimer:** There is no guarantee that all secrets will be detected.
 As a tip, if you think a file will eventually store secrets, immediately add it to .gitignore upon creating
 it in case you forget later on when you have a lot more files to commit.
@@ -92,8 +93,11 @@ it in case you forget later on when you have a lot more files to commit.
 
    (if you have hadoop yarn installed)
 
+   If you want to use the exact `yarn.lock` versions without any modification, add a `--frozen-lockfile` flag to the
+   command.
+
    This command will install dependencies for all services and the frontend in a
-   centralized `node_modules` directory at the root.
+   centralized `node_modules` directory at the root as well as within the respective directories.
 
 4. **Adding Dependencies:** To add a dependency to a specific workspace (e.g.,
    `user-service`), use:
@@ -155,11 +159,7 @@ yarn docker:devup
 ```
 This will start all the containers.
 
-3. **Once done, run yarn docker:devdown:** From the root repo, run
-```bash
-yarn docker:devdown 
-```
-This will stop and delete all the containers.
+
 
 #### If you want to do all the above steps at once, see the below section
 
@@ -172,14 +172,32 @@ This will stop and delete all the containers.
 ```
 This will create new Docker images everytime it is run. Be careful of how much disk space you have left.
 
+3. **Once done, run yarn docker:devdown:** From the root repo, run
+```bash
+yarn docker:devdown 
+```
+This will stop and delete all the containers. You must run this to delete containers regardless of whether you used
+`./start-app-with-docker.sh` or `yarn docker:devup`.
+
 Any edits you make to the source code will not be automatically reflected on the site. We recommend using Docker
 Compose to check if your changes are likely to work on the production environment once they have been proven to work
 in your local development environment.
 
-### Notes:
+### Playing around with the app locally
+
+- To test all features of the application, you will need 2 GitHub accounts. 
+- You must login on both accounts on the same computer, since the setup assumes that services are centralised
+services just like in the production environment. 
+- You can do the login for your second account by opening a new browser tab in 
+incognito mode.
+
+#### Note on NUS WiFi:
+
+Access to remote databases may be blocked when using NUS WiFi. You will need a VPN to overcome this limitation if you
+are running the local app on campus.
+
+### Dependency Notes:
 
-- After setting up Yarn Workspaces, any `node_modules` directories in individual
-  services or applications can be safely removed.
 - Always ensure thorough testing after adding or updating dependencies to ensure
   all parts of the system function as expected.
 

frontend/src/components/interviews/leaderboard/columns.tsx

@@ -4,16 +4,17 @@ import { Button } from "@/components/ui/button";
 import { ColumnDef } from "@tanstack/react-table";
 
 export type PublicUser = {
+  uid: string;
   displayName: string;
   attempts: number;
-  photoURL: string;
+  photoUrl: string;
 };
 
 const getInitials = (name: string) => {
   const names = name.split(" ");
   let initials = "";
   names.forEach((n) => {
-    initials += n[0].toUpperCase();
+    initials += n[0]?.toUpperCase() || "";
   });
   return initials;
 };
@@ -24,13 +25,14 @@ export const columns: ColumnDef<PublicUser>[] = [
     header: "User",
     cell: ({ row }) => {
       const displayName = row.getValue("displayName") as string;
-      const photoURL = row.original.photoURL;
+      const photoURL = row.original.photoUrl;
+      const uid = row.original.uid;
 
       return (
         <Button
           variant="ghost"
           onClick={() => {
-            window.location.href = `/profile/Y4sCNQ4ZBqOlHjqoXmCAFAHnBWU2`;
+            window.location.href = `/profile/${uid}`;
           }}
           className="w-64"
         >
@@ -47,7 +49,7 @@ export const columns: ColumnDef<PublicUser>[] = [
   },
   {
     accessorKey: "attempts",
-    header: "Solved",
+    header: "Attempts",
     invertSorting: true,
   },
 ];

frontend/src/components/interviews/loader.tsx

@@ -1,6 +1,6 @@
 export default function Loader() {
   return (
-    <div className="loader">
+    <div className="loader z-0">
       <div className="box box0">
         <div></div>
       </div>

frontend/src/components/room/code-editor.tsx

@@ -39,6 +39,7 @@ type CodeEditorProps = {
   hasRoom?: boolean;
   onSubmitClick?: (param: string, solved: boolean) => void;
   onLeaveRoomClick?: () => void;
+  onLanguageChange?: (param: string) => void;
 };
 
 export const languages = [
@@ -69,6 +70,7 @@ export default function CodeEditor({
   hasRoom = true,
   onSubmitClick = () => {},
   onLeaveRoomClick = () => {},
+  onLanguageChange,
 }: CodeEditorProps) {
   const [open, setOpen] = React.useState(false);
   const [value, setValue] = React.useState("");
@@ -82,6 +84,8 @@ export default function CodeEditor({
     setMonacoInstance(editorL);
   };
 
+  const [previousText, setPreviousText] = React.useState(text);
+
   const setCursorPosition = React.useCallback(
     (cursor: number) => {
       if (!monacoInstance) return;
@@ -92,11 +96,33 @@ export default function CodeEditor({
     [monacoInstance]
   );
 
+  const updateCursorPosition = (prevText: any, newText: any) => {
+    if (!monacoInstance) return;
+    if (!cursor) return;
+    if (prevText.slice(0, cursor) !== newText.slice(0, cursor)) {
+      return true;
+    }
+    return false;
+  };
+
   React.useEffect(() => {
     if (cursor !== undefined) {
-      setCursorPosition(cursor);
+      console.log(cursor);
+      if (updateCursorPosition(previousText, text)) {
+        setCursorPosition(cursor + 1);
+      } else {
+        setCursorPosition(cursor);
+      }
     }
-  }, [cursor, setCursorPosition]);
+
+    monacoInstance?.onDidChangeCursorPosition((e) => {
+      if (onCursorChange === undefined) return;
+      const cursor = monacoInstance
+        .getModel()!
+        .getOffsetAt(monacoInstance.getPosition()!);
+      onCursorChange(cursor);
+    });
+  }, [text, cursor, setCursorPosition, monacoInstance, onCursorChange]);
 
   const editorOnChange = React.useCallback(
     (value: string | undefined) => {
@@ -111,6 +137,7 @@ export default function CodeEditor({
         onCursorChange(cursor);
       }
       onChange(value);
+      setPreviousText(value);
     },
     [onChange, onCursorChange, monacoInstance]
   );
@@ -157,6 +184,11 @@ export default function CodeEditor({
                       setFrameWork(
                         currentValue === frameWork ? "" : currentValue
                       );
+                      if (onLanguageChange) {
+                        onLanguageChange(
+                          currentValue === frameWork ? "" : currentValue
+                        );
+                      }
                       setOpen(false);
                     }}
                   >

frontend/src/components/room/solution.tsx

@@ -28,7 +28,7 @@ export default function Solution({
       <div className="pb-6 w-[43vw]">
         <TypographySmall>
           <SyntaxHighlighter language="python" style={vscDarkPlus} showLineNumbers wrapLines>
-            { question.solution ? question.solution : `# Sample solution code to demo syntax highlighting.
+            { question.solution?.python ? question.solution.python : `# Sample solution code to demo syntax highlighting.
 import sys
 class Solution(object):
     def isValidBST(self, root):

frontend/src/hooks/useCollaboration.tsx

@@ -110,6 +110,7 @@ const useCollaboration = ({
               setRoom(room);
             })
             .catch((err) => {
+              toast.error("An error occured when starting video: " + (err as Error).message);
               console.log(err, token, userId, roomId);
             });
         });

frontend/src/hooks/useLeaderboard.tsx

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+import { AuthContext } from "@/contexts/AuthContext";
+import {
+  getLeaderboard,
+} from "@/pages/api/leaderboardHandler";
+
+export const useLeaderboard = () => {
+  const { user: currentUser, authIsReady } = useContext(AuthContext);
+
+  const fetchLeaderboard = async () => {
+    if (authIsReady) {
+      return getLeaderboard(currentUser);
+    }
+  }
+
+  return { fetchLeaderboard };
+};

frontend/src/pages/api/leaderboardHandler.ts

@@ -0,0 +1,31 @@
+import { userApiPathAddress } from "@/gateway-address/gateway-address";
+
+export const getLeaderboard = async (user: any) => {
+  try {
+    const url = `${userApiPathAddress}leaderboard`;
+    const idToken = await user.getIdToken(true);
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "User-Id-Token": idToken,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`Unable to get leaderboard: ${await response.text()}`);
+    }
+    return response.json().then((arr: Array<any>) => {
+      return arr.map((obj) => {
+        obj["time_saved_at"] = new Date(obj["time_saved_at"]);
+        obj["time_updated"] = new Date(obj["time_updated"]);
+        obj["time_created"] = new Date(obj["time_created"]);
+        return obj;
+      });
+    });
+  } catch (error) {
+    console.error("There was an error fetching the leaderboard", error);
+    throw error;
+  }
+};

frontend/src/pages/api/questionHandler.ts

@@ -39,7 +39,7 @@ export const fetchRandomQuestion = async (
       difficulty: data.difficulty,
       topics: data.topics,
       description: data.content,
-      solution: "", // Not supported atm
+      solution: data.solution || {}, // Not supported atm
       author: data.author, // Author id
       defaultCode: {
           ...data.defaultCode
@@ -139,14 +139,14 @@ export const fetchQuestion = async (currentUser: User, questionId: string) => {
       difficulty: data.difficulty,
       topics: data.topics,
       description: data.content,
-      solution: "", // Not supported atm
+      solution: data.solution || {}, // Not supported atm
       author: data.author, // Author id
       defaultCode: {
           ...data.defaultCode
       },
       testCasesInputs: data.testCasesInputs,
       testCasesOutputs: data.testCasesOutputs
-    }
+    };
   } catch (error) {
     console.error("There was an error fetching the questions", error);
   }
@@ -167,7 +167,8 @@ export const postQuestion = async (user: any, question: z.infer<typeof formSchem
         content: question.description,
         testCasesInputs: question.testCasesInputs,
         testCasesOutputs: question.testCasesOutputs,
-        defaultCode: question.defaultCode
+        defaultCode: question.defaultCode,
+        solution: question.solution,
       }),
       headers: {
         "Content-Type": "application/json",
@@ -199,7 +200,8 @@ export const putQuestion = async (user: any, question: z.infer<typeof formSchema
         content: question.description,
         testCasesInputs: question.testCasesInputs,
         testCasesOutputs: question.testCasesOutputs,
-        defaultCode: question.defaultCode
+        defaultCode: question.defaultCode,
+        solution: question.solution,
       }),
       headers: {
         "Content-Type": "application/json",

frontend/src/pages/attempt/[id]/index.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { TypographyBody, TypographyCode, TypographyH2 } from "@/components/ui/typography";
+import { TypographyBody, TypographyH2 } from "@/components/ui/typography";
 import { ArrowLeft } from "lucide-react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -10,6 +9,7 @@ import { useHistory } from "@/hooks/useHistory";
 import { useQuestions } from "@/hooks/useQuestions";
 import { Question } from "@/types/QuestionTypes";
 import { DotWave } from "@uiball/loaders";
+import { Editor } from "@monaco-editor/react";
 
 export default function Page() {
   const router = useRouter();
@@ -84,8 +84,7 @@ export default function Page() {
       <div>
         <Label className="text-primary">Solution</Label>
         <TypographyBody>{attempt?.solved ? "Solved": "Unsolved"}</TypographyBody>
-        <Textarea disabled={true} className="my-4" rows={10} defaultValue={attempt?.answer || ""}>
-        </Textarea>
+        <Editor className="my-4" height="50vh" defaultLanguage="plaintext" defaultValue={attempt?.answer || ""} options={{readOnly: true}} theme="vs-dark" />
       </div></>}
     </div> 
   )

frontend/src/pages/interviews/find-match.tsx

@@ -58,7 +58,7 @@ export default function FindMatch() {
 
       <Loader />
 
-      <Button variant="secondary" onClick={onClickCancel}>
+      <Button className="z-50" variant="secondary" onClick={onClickCancel}>
         Cancel Search
       </Button>
     </div>