persist language changes to the db

Author: ChryslineLim

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

@@ -64,7 +64,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

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

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;
@@ -15,6 +16,7 @@ type Props = {
   setLanguage: (language: string) => void;
   theme: string;
   setTheme: (theme: string) => void;
+  room: string;
 };
 
 type LanguageOption = {
@@ -27,7 +29,7 @@ type ThemeOption = {
   label: string;
 }
 
-export function Toolbar({ editor, language, saving, setLanguage, theme, setTheme }: Props) {
+export function Toolbar({ editor, language, saving, setLanguage, theme, setTheme, room }: Props) {
   const languages: LanguageOption[] = [
     { value: 'javascript', label: 'JavaScript' },
     { value: 'python', label: 'Python' },
@@ -36,6 +38,7 @@ export function Toolbar({ editor, language, saving, setLanguage, theme, setTheme
   const handleLanguageChange = (selectedOption: LanguageOption | null) => {
     if (selectedOption) {
       setLanguage(selectedOption.value);
+      updateSessionLanguage(room, selectedOption.value);
     }
   };