Add lang / execution sync

Author: bharathcs

frontend/src/app/components/code-editor/CodeEditor.tsx

@@ -2,11 +2,12 @@
 import {
   codeLangAtom,
   codeMirrorValueAtom,
+  innkeeperWriteAtom,
   isMatchedAtom,
 } from "@/libs/room-jotai";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import { Button } from "antd";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 import Skeleton from "react-loading-skeleton";
@@ -45,6 +46,17 @@ const UiElementOnClose = () => {
   );
 };
 
+const codeLangAtomWrapper = atom(
+  (get) => get(codeLangAtom),
+  (_get, set, lang: string) => {
+    set(codeLangAtom, lang);
+    set(innkeeperWriteAtom, {
+      eventName: "sendUpdate",
+      eventArgs: [{ language: lang }],
+    });
+  },
+);
+
 const CodeMirrorEditor = ({
   userId,
   authToken,
@@ -58,7 +70,7 @@ const CodeMirrorEditor = ({
   const setCodeMirrorValue = useSetAtom(codeMirrorValueAtom);
   const isMatched = useAtomValue(isMatchedAtom);
 
-  const [selectedLanguage, setSelectedLanguage] = useAtom(codeLangAtom);
+  const [selectedLanguage, setSelectedLanguage] = useAtom(codeLangAtomWrapper);
   const [languageExtension, setLanguageExtension] = useState<any>(null);
   const [dragging, setDragging] = useState<boolean>(false);
   const [startY, setStartY] = useState<number>(0); // To track the Y position where drag started

frontend/src/app/components/status-bar/StatusBar.tsx

@@ -21,6 +21,10 @@ const triggerExecutionRequestAtom = atom(null, async (get, set) => {
   const codeLang = get(codeLangAtom);
   const result = await executeCode(code, codeLang);
   set(resultAtom, result);
+  set(innkeeperWriteAtom, {
+    eventName: "sendUpdate",
+    eventArgs: [{ executionResult: code }],
+  });
 });
 
 const triggerExitRoomRequestAtom = atom(null, (get, set) => {

frontend/src/app/hooks/useInnKeeper.tsx

@@ -1,9 +1,11 @@
 import {
   JotaiInnkeeperListenAdapter,
   chatHistoryAtom,
+  codeLangAtom,
   isConnectedAtom,
   isMatchedAtom,
   questionIdAtom,
+  resultAtom,
   roomStateAtom,
   socketAtom,
   userStatesAtom,
@@ -22,6 +24,8 @@ function _useInnkeeperSocket(authToken: string | null) {
   const setUserStates = useSetAtom(userStatesAtom);
   const setQuestionId = useSetAtom(questionIdAtom);
   const setChatHistory = useSetAtom(chatHistoryAtom);
+  const setLanguage = useSetAtom(codeLangAtom);
+  const setResult = useSetAtom(resultAtom);
 
   const jotaiAdapter: JotaiInnkeeperListenAdapter = {
     connect() {
@@ -69,6 +73,9 @@ function _useInnkeeperSocket(authToken: string | null) {
       if (partialUpdate.chatHistory) setChatHistory(partialUpdate.chatHistory);
       if (partialUpdate.userStates) setUserStates(partialUpdate.userStates);
       if (partialUpdate.questionId) setQuestionId(partialUpdate.questionId);
+      if (partialUpdate.language) setLanguage(partialUpdate.language);
+      if (partialUpdate.executionResult)
+        setResult(partialUpdate.executionResult);
     },
 
     closeRoom(finalUpdate) {

frontend/src/libs/innkeeper-api-types.ts

@@ -49,6 +49,8 @@ export type PartialRoomState = {
   questionId?: string;
   userStates?: [UserState, UserState];
   chatHistory?: ChatMessage[];
+  executionResult?: string;
+  language?: string;
   questionDifficulty?: "EASY" | "MEDIUM" | "HARD";
 };
 

innkeeper/src/types/innkeeper-api-types.ts

@@ -49,6 +49,8 @@ export type PartialRoomState = {
   questionId?: string;
   userStates?: [UserState, UserState];
   chatHistory?: ChatMessage[];
+  executionResult?: string;
+  language?: string;
   questionDifficulty?: 'EASY' | 'MEDIUM' | 'HARD';
 };