Merge branch 'main' of https://github.com/CS3219-AY2425S1/cs3219-ay2425s1-project-g15 into persist-language-change

Author: ChryslineLim

backend/collaboration/src/models/Session.ts

@@ -7,9 +7,10 @@ import mongoose, { Document, Schema } from "mongoose";
 export type TSession = {
   collabid: string;
   users: [string];
-  language: [string];
+  language: string;
   question_id: number;
   code: string;
+  createdAt: Date;
 };
 
 // Document provides an id field
@@ -37,6 +38,10 @@ const sessionSchema: Schema = new Schema(
       type: String,
       required: false,
     },
+    createdAt: {
+      type: Date,
+      required: false,
+    }
   },
   { collection: "sessions" }
 );

backend/collaboration/src/routes/collaborationRoutes.ts

@@ -46,6 +46,7 @@ router.post(
         language,
         question_id,
         code: "",
+        createdAt: new Date(),
       };
 
       const newSession = new Session(session);
@@ -75,7 +76,7 @@ router.get("/sessions", async (req: Request, res: Response) => {
 router.post("/sessions/:id", async (req: Request, res: Response) => {
   try {
     const { id } = req.params;
-    const sessions: TSession[] = await Session.find({ users: id }).exec();
+    const sessions: TSession[] = await Session.find({ users: id }).sort({ createdAt: -1 }).exec();
 
     return res.status(200).json(sessions);
   } catch (error) {

frontend/package-lock.json

@@ -28,6 +28,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
     "framer-motion": "^11.9.0",
     "js-base64": "^3.7.7",

frontend/package.json

@@ -6,16 +6,18 @@ import { useEffect, useState, useRef } from "react";
 
 const CodeSnippetHighlight = () => {
   const code = `
-  class Solution:
-    def twoSum(self, nums: List[int], target: int) -> List[int]:
-        idxDict = {}
-        for i, num in enumerate(nums):
-            idxDict[num] = i
-        
-        for i, num in enumerate(nums):
-            diff = target - num
-            if diff in idxDict and i != idxDict[diff]:
-                return [i, idxDict[diff]]`;
+class Solution:
+  def twoSum(self, nums: List[int], target: int) -> List[int]:
+      idxDict = {}
+      for i, num in enumerate(nums):
+          idxDict[num] = i
+      
+      for i, num in enumerate(nums):
+          diff = target - num
+          if diff in idxDict and i != idxDict[diff]:
+              return [i, idxDict[diff]]
+              
+              `;
 
   const [displayedText, setDisplayedText] = useState(""); // Store the currently displayed text
   const currentCharIndexRef = useRef(0); // Track the current character index
@@ -52,7 +54,8 @@ const CodeSnippetHighlight = () => {
         borderRadius: "10px",
       }}
     >
-      {displayedText}
+        {displayedText}
+
     </SyntaxHighlighter>
   );
 };

frontend/src/app/(home)/components/code-snippet/CodeSnippetHighlight.tsx

@@ -27,7 +27,7 @@ const LandingPage = () => {
   return (
     <div className="flex flex-col min-h-full">
       <Navbar />
-      <div className="grid grid-cols-2 gap-10 h-full items-center justify-center pl-10 pr-10">
+      <div className="grid grid-cols-[1.45fr,1.55fr] gap-10 h-full items-center justify-center pl-10 pr-10">
         <div className="">
           <h1 className="text-6xl font-extrabold text-white pb-8">
             Collaborative Coding, <br></br> Competitive Results.

frontend/src/app/(home)/components/landing-page/LandingPage.tsx

@@ -10,6 +10,8 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
+import { format } from 'date-fns';
+
 import { Button } from "@/components/ui/button";
 import {
   Table,
@@ -92,6 +94,19 @@ export const columns: ColumnDef<TCombinedSession>[] = [
       );
     },
   },
+  {
+    accessorKey: "createdAt",
+    header: () => <Cell>Date</Cell>,
+    cell: ({ row }) => {
+      const date: Date = row.getValue("createdAt");
+
+      return (
+        <Cell>
+          {format(date, 'dd-MM-yyyy HH:mm:ss')}
+        </Cell>
+      );
+    },
+  },
   {
     accessorKey: "collabid",
     header: () => <Cell>Collab Space</Cell>,
@@ -133,8 +148,8 @@ export function DashboardDataTable({ data }: { data: TCombinedSession[] }) {
       <div>
         <Table className="font-light">
           <TableHeader className="w-full">
-            <TableRow className="text-white bg-primary-900 font-medium hover:bg-transparent h-[5rem] text-md">
-              <TableCell colSpan={6} className="pl-10">
+            <TableRow className="text-white w-full bg-primary-900 font-medium hover:bg-transparent h-[5rem] text-md">
+              <TableCell colSpan={7} className="pl-10">
                 Past Collaborations
               </TableCell>
             </TableRow>

frontend/src/app/(user)/dashboard/components/DashboardDataTable.tsx

@@ -27,6 +27,7 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
   const [username, setUsername] = useState<string | null>(null);
   const [selectionRange, setSelectionRange] = useState(null);
   const [saving, setSaving] = useState(false);
+  const [peerOnline, setPeerOnline] = useState(false);
   const [editorTheme, setEditorTheme] = useState("dark-plus");
 
   // Fetch username on component mount
@@ -88,6 +89,35 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
     }
   }, [code]);
 
+  useEffect(() => {
+    const awarenessListener = ({
+      added,
+      removed,
+    }: {
+      added: number[];
+      removed: number[];
+    }) => {
+      added.forEach((clientId) => {
+        if (clientId !== providerRef.current?.awareness.clientID) {
+          setPeerOnline(true);
+        }
+      });
+
+      removed.forEach((clientId) => {
+        if (clientId !== providerRef.current?.awareness.clientID) {
+            setPeerOnline(false);
+          }
+        }
+      )
+    };
+
+    providerRef.current?.awareness.on("change", awarenessListener);
+
+    return () => {
+      providerRef.current?.awareness.off("change", awarenessListener);
+    };
+  }, [providerRef.current]);
+
   async function initializeShiki(monaco: any, editor: any) {
     const highlighter = await createHighlighter({
       themes: ["dark-plus", "light-plus"],
@@ -179,6 +209,7 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
         setTheme={setEditorTheme}
         saving={saving}
         room={room}
+        peerOnline={peerOnline}
       />
       <div className="w-full h-[1px] mx-auto my-2"></div>
       <Editor

frontend/src/app/collaboration/components/editor.tsx

@@ -63,11 +63,12 @@ const Question = ({
   console.log(question);
 
   const packageMessage = (message: SingleChatLogApiResponse): ChatLog => {
+    const userId = getUserId();
     return {
       text: message.message,
-      title: collaborator,
+      title: message.senderId === userId ? username : collaborator,
       date: new Date(message.timestamp),
-      position: message.senderId === getUserId() ? "right" : "left",
+      position: message.senderId === userId ? "right" : "left",
       type: "text",
     };
   };
@@ -117,9 +118,22 @@ const Question = ({
   }, [collaboratorId]);
 
   useEffect(() => {
+    const scrollToPercentage = (percentage: number) => {
+      if (chatLogsListRef.current && hasMoreMessages.current) {
+        const chatContainer = chatLogsListRef.current;
+        const targetPosition = chatContainer.scrollHeight * percentage;
+        chatContainer.scrollTop = targetPosition - chatContainer.clientHeight;
+      }
+    };
+
     const handleScroll = () => {
       if (chatLogsListRef.current && chatLogsListRef.current.scrollTop === 0) {
-        fetchChatLogs();
+        fetchChatLogs().then(() => {
+          requestAnimationFrame(() => {
+            const percentage = Math.min(1 - (chatLogsPage - 1) / chatLogsPage);
+            scrollToPercentage(percentage);
+          });
+        });
       }
     };
 
@@ -152,7 +166,9 @@ const Question = ({
         });
 
         client.subscribe("/user/queue/language", (message) => {
-          const messageReceived: SingleChatLogApiResponse = JSON.parse(message.body);
+          const messageReceived: SingleChatLogApiResponse = JSON.parse(
+            message.body
+          );
           isLanguageChangeActive.current = false;
           setLanguage(messageReceived.message);
           Swal.fire({
@@ -360,7 +376,9 @@ const Question = ({
         </Button>
       </div>
       <span className="row-span-1 text-primary-300 text-md max-h-[100%] h-full overflow-y-auto flex flex-col gap-2 bg-primary-800 p-3  rounded-md">
-        <span className="text-yellow-500 font-bold text-md">Question Description</span>
+        <span className="text-yellow-500 font-bold text-md">
+          Question Description
+        </span>
         <span className="text-white py-2 text-xs">{question?.description}</span>
         <span className="text-yellow-500 font-bold text-md">Examples</span>
         {question?.examples?.map((example, idx) => (
@@ -394,7 +412,7 @@ const Question = ({
           className="mb-3"
         >
           {showAnswer ? "Hide" : "Show"} Answer
-          {showAnswer ? " ▼" : " ▲"}
+          {showAnswer ? " ▲" : " ▼"}
         </Button>
         {showAnswer && question?.solution && (
           <div className="h-[50px] text-sm">

frontend/src/app/collaboration/components/question.tsx

@@ -14,6 +14,7 @@ type Props = {
   language: string;
   saving: boolean;
   setLanguage: (language: string) => void;
+  peerOnline: boolean;
   theme: string;
   setTheme: (theme: string) => void;
   room: string;
@@ -29,7 +30,7 @@ type ThemeOption = {
   label: string;
 }
 
-export function Toolbar({ editor, language, saving, setLanguage, theme, setTheme, room }: Props) {
+export function Toolbar({ editor, language, saving, setLanguage, peerOnline, theme, setTheme, room }: Readonly<Props>) {
   const languages: LanguageOption[] = [
     { value: 'javascript', label: 'JavaScript' },
     { value: 'python', label: 'Python' },
@@ -85,6 +86,15 @@ export function Toolbar({ editor, language, saving, setLanguage, theme, setTheme
       >
         <RedoIcon />
       </button>
+      <div className="flex items-center justify-items-center mx-4">
+        <div
+          className={`${
+            peerOnline ? 'bg-green' : 'bg-red'
+          } text-black text-xs font-semibold px-2 py-1 rounded-2xl`}
+        >
+          {peerOnline ? "Peer Online" : "Peer Offline"}
+        </div>
+      </div>
       <div className="text-grey-300 h-6 py-1 px-2 ml-auto mr-2 gap-4 rounded-full text-xs flex items-center justify-center">
         {saving && (
           <div className="flex flex-row gap-1 items-center">