Add socket listener for compiler, imageName, and spellCheckLanguage

GitOrigin-RevId: b12644152387e479e433a014e1a1041ebae36f12

services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx

@@ -12,6 +12,7 @@ import type {
 } from '../../../../../types/project-settings'
 import useSetProjectWideSettings from '../hooks/use-set-project-wide-settings'
 import useUserWideSettings from '../hooks/use-user-wide-settings'
+import useProjectWideSettingsSocketListener from '../hooks/use-project-wide-settings-socket-listener'
 
 type ProjectSettingsContextValue = {
   compiler?: ProjectCompiler
@@ -85,6 +86,8 @@ export function ProjectSettingsProvider({
     setPdfViewer,
   } = useUserWideSettings()
 
+  useProjectWideSettingsSocketListener()
+
   const value: ProjectSettingsContextValue = useMemo(
     () => ({
       compiler,

services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react'
+import { ProjectCompiler } from '../../../../../types/project-settings'
+import { useIdeContext } from '../../../shared/context/ide-context'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+
+export default function useProjectWideSettingsSocketListener() {
+  const ide = useIdeContext()
+
+  const [compiler, setCompiler] =
+    useScopeValue<ProjectCompiler>('project.compiler')
+  const [imageName, setImageName] = useScopeValue<string>('project.imageName')
+  const [spellCheckLanguage, setSpellCheckLanguage] = useScopeValue<string>(
+    'project.spellCheckLanguage'
+  )
+
+  useEffect(() => {
+    // data is not available on initial mounting
+    const dataAvailable = compiler && imageName && spellCheckLanguage
+
+    if (dataAvailable && ide?.socket) {
+      ide.socket.on('compilerUpdated', setCompiler)
+      ide.socket.on('imageNameUpdated', setImageName)
+      ide.socket.on('spellCheckLanguageUpdated', setSpellCheckLanguage)
+      return () => {
+        ide.socket.removeListener('compilerUpdated', setCompiler)
+        ide.socket.removeListener('imageNameUpdated', setImageName)
+        ide.socket.removeListener(
+          'spellCheckLanguageUpdated',
+          setSpellCheckLanguage
+        )
+      }
+    }
+  }, [
+    ide?.socket,
+    compiler,
+    setCompiler,
+    imageName,
+    setImageName,
+    spellCheckLanguage,
+    setSpellCheckLanguage,
+  ])
+}