Merge pull request #248 from CS3219-AY2425S1/persist-language-change

Persist language changes

Author: ChryslineLim

backend/collaboration/src/routes/collaborationRoutes.ts

@@ -182,6 +182,33 @@ router.post(
   }
 );
 
+// Update a session language by ID
+router.post(
+  "/:id/updateLanguage",
+  async (req: Request, res: Response) => {
+    const { id } = req.params;
+
+    const updateSession: Partial<TSession> = {};
+
+    updateSession.language = req.body.language;
+
+    try {
+      const session = await Session.findOne({ collabid: id }).exec();
+      if (!session) {
+        return res.status(404).json({ message: "Session not found" });
+      }
+
+      const updatedSession = await Session.findOneAndUpdate(
+        { collabid: id },
+        { $set: updateSession }
+      );
+      res.status(200).json(updatedSession);
+    } catch (error) {
+      return res.status(500).send("Internal server error");
+    }
+  }
+);
+
 // Delete a session by ID
 router.delete(
   "/:id",

frontend/src/api/collaboration.tsx

@@ -72,6 +72,28 @@ export const updateSession = async (
   return resp.json();
 };
 
+export const updateSessionLanguage = async (
+  collabid: string,
+  language: string
+): Promise<SessionFull> => {
+  const url = `${COLLABORATION_SERVICE}/${collabid}/updateLanguage`;
+  const resp = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      language: language
+    }),
+  });
+
+  if (!resp.ok) {
+    throw new Error("Failed to update the session");
+  }
+
+  return resp.json();
+};
+
 export const deleteSessionById = async (
   collabid: string
 ): Promise<SessionFull> => {

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

@@ -66,7 +66,7 @@ export const columns: ColumnDef<TCombinedSession>[] = [
   },
   {
     accessorKey: "language",
-    header: () => <Cell>Language</Cell>,
+    header: () => <Cell>Matched Language</Cell>,
     cell: ({ row }) => {
       const language = row.getValue("language") as string;
       return (

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

@@ -208,6 +208,7 @@ function Collaboration({ room, language, code, setLanguage }: Readonly<Props>) {
         theme={editorTheme}
         setTheme={setEditorTheme}
         saving={saving}
+        room={room}
         peerOnline={peerOnline}
       />
       <div className="w-full h-[1px] mx-auto my-2"></div>

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

@@ -7,6 +7,7 @@ import MoonLoader from "react-spinners/MoonLoader";
 import React from 'react';
 import Select, { OptionProps } from 'react-select';
 import { CSSObject } from '@emotion/react';
+import { updateSessionLanguage } from "@/api/collaboration";
 
 type Props = {
   editor: editor.IStandaloneCodeEditor;
@@ -16,6 +17,7 @@ type Props = {
   peerOnline: boolean;
   theme: string;
   setTheme: (theme: string) => void;
+  room: string;
 };
 
 type LanguageOption = {
@@ -28,7 +30,7 @@ type ThemeOption = {
   label: string;
 }
 
-export function Toolbar({ editor, language, saving, setLanguage, peerOnline, theme, setTheme }: Readonly<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' },
@@ -37,6 +39,7 @@ export function Toolbar({ editor, language, saving, setLanguage, peerOnline, the
   const handleLanguageChange = (selectedOption: LanguageOption | null) => {
     if (selectedOption) {
       setLanguage(selectedOption.value);
+      updateSessionLanguage(room, selectedOption.value);
     }
   };