From 6c41a652009365b68381cd89d32b7620a1062707 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 22 Dec 2022 17:41:16 -0700
Subject: [PATCH] migrate user-wide settings post request from angular
 controller to react

GitOrigin-RevId: b5440178a11b82c5a5840eb310416f1519f85bae
---
 .../context/project-settings-context.tsx      |  49 +++---
 .../hooks/use-set-user-wide-settings.tsx      | 159 ++++++++++++++++++
 2 files changed, 182 insertions(+), 26 deletions(-)
 create mode 100644 services/web/frontend/js/features/editor-left-menu/hooks/use-set-user-wide-settings.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 b834256e89..5b1c8a6666 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
@@ -10,8 +10,8 @@ import type {
   PdfViewer,
   ProjectCompiler,
 } from '../../../../../types/project-settings'
-import useScopeValue from '../../../shared/hooks/use-scope-value'
 import useSetProjectWideSettings from '../hooks/use-set-project-wide-settings'
+import useSetUserWideSettings from '../hooks/use-set-user-wide-settings'
 
 type ProjectSettingsContextValue = {
   compiler?: ProjectCompiler
@@ -62,31 +62,28 @@ export function ProjectSettingsProvider({
     setSpellCheckLanguage,
   } = useSetProjectWideSettings()
 
-  const [autoComplete, setAutoComplete] = useScopeValue<boolean>(
-    'settings.autoComplete'
-  )
-  const [autoPairDelimiters, setAutoPairDelimiters] = useScopeValue<boolean>(
-    'settings.autoPairDelimiters'
-  )
-  const [syntaxValidation, setSyntaxValidation] = useScopeValue<boolean>(
-    'settings.syntaxValidation'
-  )
-  const [editorTheme, setEditorTheme] = useScopeValue<string>(
-    'settings.editorTheme'
-  )
-  const [overallTheme, setOverallTheme] = useScopeValue<OverallTheme>(
-    'settings.overallTheme'
-  )
-  const [mode, setMode] = useScopeValue<Keybindings>('settings.mode')
-  const [fontSize, setFontSize] = useScopeValue<string>('settings.fontSize')
-  const [fontFamily, setFontFamily] = useScopeValue<FontFamily>(
-    'settings.fontFamily'
-  )
-  const [lineHeight, setLineHeight] = useScopeValue<LineHeight>(
-    'settings.lineHeight'
-  )
-  const [pdfViewer, setPdfViewer] =
-    useScopeValue<PdfViewer>('settings.pdfViewer')
+  const {
+    autoComplete,
+    setAutoComplete,
+    autoPairDelimiters,
+    setAutoPairDelimiters,
+    syntaxValidation,
+    setSyntaxValidation,
+    editorTheme,
+    setEditorTheme,
+    overallTheme,
+    setOverallTheme,
+    mode,
+    setMode,
+    fontSize,
+    setFontSize,
+    fontFamily,
+    setFontFamily,
+    lineHeight,
+    setLineHeight,
+    pdfViewer,
+    setPdfViewer,
+  } = useSetUserWideSettings()
 
   const value: ProjectSettingsContextValue = useMemo(
     () => ({
diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-user-wide-settings.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-user-wide-settings.tsx
new file mode 100644
index 0000000000..bdb9b814b5
--- /dev/null
+++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-user-wide-settings.tsx
@@ -0,0 +1,159 @@
+import { useCallback } from 'react'
+import {
+  FontFamily,
+  LineHeight,
+  OverallTheme,
+} from '../../../../../modules/source-editor/frontend/js/extensions/theme'
+import { Keybindings, PdfViewer } from '../../../../../types/project-settings'
+import { postJSON } from '../../../infrastructure/fetch-json'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+
+type UserSettingsScope = {
+  pdfViewer: PdfViewer
+  autoComplete: boolean
+  autoPairDelimiters: boolean
+  syntaxValidation: boolean
+  editorTheme: string
+  overallTheme: OverallTheme
+  mode: Keybindings
+  fontSize: string
+  fontFamily: FontFamily
+  lineHeight: LineHeight
+}
+
+function saveUserSettings(data: Partial<UserSettingsScope>) {
+  postJSON('/user/settings', {
+    body: data,
+  })
+}
+
+export default function useSetUserWideSettings() {
+  const [userSettings, setUserSettings] = useScopeValue<UserSettingsScope>(
+    'settings',
+    true
+  )
+
+  const setAutoComplete = useCallback(
+    (autoComplete: boolean) => {
+      if (userSettings.autoComplete !== autoComplete) {
+        setUserSettings({ ...userSettings, autoComplete })
+        saveUserSettings({ autoComplete })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  const setAutoPairDelimiters = useCallback(
+    (autoPairDelimiters: boolean) => {
+      if (userSettings.autoPairDelimiters !== autoPairDelimiters) {
+        setUserSettings({ ...userSettings, autoPairDelimiters })
+        saveUserSettings({ autoPairDelimiters })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  const setSyntaxValidation = useCallback(
+    (syntaxValidation: boolean) => {
+      if (userSettings.syntaxValidation !== syntaxValidation) {
+        setUserSettings({ ...userSettings, syntaxValidation })
+        saveUserSettings({ syntaxValidation })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  const setEditorTheme = useCallback(
+    (editorTheme: string) => {
+      if (userSettings.editorTheme !== editorTheme) {
+        setUserSettings({ ...userSettings, editorTheme })
+        saveUserSettings({ editorTheme })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  // TODO: business logic
+  const setOverallTheme = useCallback(
+    (overallTheme: OverallTheme) => {
+      if (userSettings.overallTheme !== overallTheme) {
+        setUserSettings({ ...userSettings, overallTheme })
+        saveUserSettings({ overallTheme })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  const setMode = useCallback(
+    (mode: Keybindings) => {
+      if (userSettings.mode !== mode) {
+        setUserSettings({ ...userSettings, mode })
+        saveUserSettings({ mode })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  const setFontSize = useCallback(
+    (fontSize: string) => {
+      if (userSettings.fontSize !== fontSize) {
+        setUserSettings({ ...userSettings, fontSize })
+        saveUserSettings({ fontSize })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  const setFontFamily = useCallback(
+    (fontFamily: FontFamily) => {
+      if (userSettings.fontFamily !== fontFamily) {
+        setUserSettings({ ...userSettings, fontFamily })
+        saveUserSettings({ fontFamily })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  const setLineHeight = useCallback(
+    (lineHeight: LineHeight) => {
+      if (userSettings.lineHeight !== lineHeight) {
+        setUserSettings({ ...userSettings, lineHeight })
+        saveUserSettings({ lineHeight })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  const setPdfViewer = useCallback(
+    (pdfViewer: PdfViewer) => {
+      if (userSettings.pdfViewer !== pdfViewer) {
+        setUserSettings({ ...userSettings, pdfViewer })
+        saveUserSettings({ pdfViewer })
+      }
+    },
+    [userSettings, setUserSettings]
+  )
+
+  return {
+    autoComplete: userSettings.autoComplete,
+    setAutoComplete,
+    autoPairDelimiters: userSettings.autoPairDelimiters,
+    setAutoPairDelimiters,
+    syntaxValidation: userSettings.syntaxValidation,
+    setSyntaxValidation,
+    editorTheme: userSettings.editorTheme,
+    setEditorTheme,
+    overallTheme: userSettings.overallTheme,
+    setOverallTheme,
+    mode: userSettings.mode,
+    setMode,
+    fontSize: userSettings.fontSize,
+    setFontSize,
+    fontFamily: userSettings.fontFamily,
+    setFontFamily,
+    lineHeight: userSettings.lineHeight,
+    setLineHeight,
+    pdfViewer: userSettings.pdfViewer,
+    setPdfViewer,
+  }
+}