From 53bb3c490e76c8b31e500e2225a87a105e168205 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Wed, 28 Dec 2022 10:02:43 -0700
Subject: [PATCH] Save spellCheckLanguage to both project-wide and user-wide
 setting

GitOrigin-RevId: 059cc64d0fe2e955814a7192f82d4ff8ea4e2572
---
 .../hooks/use-set-project-wide-settings.tsx   | 12 ++-------
 .../hooks/use-set-spell-check-language.tsx    | 25 +++++++++++++++++++
 .../js/features/editor-left-menu/utils/api.ts | 22 ++++++++++------
 3 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx

diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx
index 294d465770..4b9255f1c5 100644
--- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx
@@ -4,6 +4,7 @@ import { useProjectContext } from '../../../shared/context/project-context'
 import useScopeValue from '../../../shared/hooks/use-scope-value'
 import { ProjectSettingsScope, saveProjectSettings } from '../utils/api'
 import useSetRootDocId from './use-set-root-doc-id'
+import useSetSpellCheckLanguage from './use-set-spell-check-language'
 
 // TODO: handle ignoreUpdates
 export default function useSetProjectWideSettings() {
@@ -35,16 +36,7 @@ export default function useSetProjectWideSettings() {
   )
 
   const setRootDocId = useSetRootDocId()
-
-  const setSpellCheckLanguage = useCallback(
-    (spellCheckLanguage: string) => {
-      if (project?.spellCheckLanguage) {
-        setProject({ ...project, spellCheckLanguage })
-        saveProjectSettings(projectId, { spellCheckLanguage })
-      }
-    },
-    [projectId, project, setProject]
-  )
+  const setSpellCheckLanguage = useSetSpellCheckLanguage()
 
   return {
     compiler: project?.compiler,
diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx
new file mode 100644
index 0000000000..9994fd9dd9
--- /dev/null
+++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx
@@ -0,0 +1,25 @@
+import { useCallback } from 'react'
+import { useProjectContext } from '../../../shared/context/project-context'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+import { saveProjectSettings, saveUserSettings } from '../utils/api'
+
+export default function useSetSpellCheckLanguage() {
+  const [spellCheckLanguageScope, setSpellCheckLanguageScope] =
+    useScopeValue<string>('project.spellCheckLanguage')
+  const { _id: projectId } = useProjectContext()
+
+  const setSpellCheckLanguage = useCallback(
+    (spellCheckLanguage: string) => {
+      if (spellCheckLanguageScope) {
+        setSpellCheckLanguageScope(spellCheckLanguage)
+
+        // save to both project setting and user setting
+        saveProjectSettings(projectId, { spellCheckLanguage })
+        saveUserSettings({ spellCheckLanguage })
+      }
+    },
+    [projectId, setSpellCheckLanguageScope, spellCheckLanguageScope]
+  )
+
+  return setSpellCheckLanguage
+}
diff --git a/services/web/frontend/js/features/editor-left-menu/utils/api.ts b/services/web/frontend/js/features/editor-left-menu/utils/api.ts
index b03bd1d75b..feea512e0c 100644
--- a/services/web/frontend/js/features/editor-left-menu/utils/api.ts
+++ b/services/web/frontend/js/features/editor-left-menu/utils/api.ts
@@ -23,7 +23,20 @@ export type UserSettingsScope = {
   lineHeight: LineHeight
 }
 
-export function saveUserSettings(data: Partial<UserSettingsScope>) {
+export type ProjectSettingsScope = {
+  compiler: ProjectCompiler
+  imageName: string
+  rootDoc_id: string
+  spellCheckLanguage: string
+}
+
+type SaveUserSettings = Partial<
+  UserSettingsScope & {
+    spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']
+  }
+>
+
+export function saveUserSettings(data: SaveUserSettings) {
   postJSON('/user/settings', {
     body: {
       _csrf: window.csrfToken,
@@ -32,13 +45,6 @@ export function saveUserSettings(data: Partial<UserSettingsScope>) {
   })
 }
 
-export type ProjectSettingsScope = {
-  compiler: ProjectCompiler
-  imageName: string
-  rootDoc_id: string
-  spellCheckLanguage: string
-}
-
 // server asks for "rootDocId" but client has "rootDoc_id"
 type ProjectSettingsRequestBody = Partial<
   Omit<ProjectSettingsScope, 'rootDoc_id'> & {