From bdb6007c0cf9bc44aa6f3f20df4ef56f8d214480 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Tue, 27 Dec 2022 13:36:08 -0700
Subject: [PATCH] Add socket listener for compiler, imageName, and
 spellCheckLanguage

GitOrigin-RevId: b12644152387e479e433a014e1a1041ebae36f12
---
 .../context/project-settings-context.tsx      |  3 ++
 ...-project-wide-settings-socket-listener.tsx | 42 +++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx

diff --git a/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx b/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
index 797f8f58b5..012c2a1980 100644
--- a/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
+++ b/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,
diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx
new file mode 100644
index 0000000000..8a2eb0bc0c
--- /dev/null
+++ b/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,
+  ])
+}