Reduce save/setScope user setting duplication by introducing a new shared hooks

GitOrigin-RevId: 6054143eb042e4ff336b1f325a8cef693ae8c4bd

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

@@ -11,7 +11,7 @@ import type {
   ProjectCompiler,
 } from '../../../../../types/project-settings'
 import useSetProjectWideSettings from '../hooks/use-set-project-wide-settings'
-import useSetUserWideSettings from '../hooks/use-set-user-wide-settings'
+import useUserWideSettings from '../hooks/use-user-wide-settings'
 
 type ProjectSettingsContextValue = {
   compiler?: ProjectCompiler
@@ -83,7 +83,7 @@ export function ProjectSettingsProvider({
     setLineHeight,
     pdfViewer,
     setPdfViewer,
-  } = useSetUserWideSettings()
+  } = useUserWideSettings()
 
   const value: ProjectSettingsContextValue = useMemo(
     () => ({

services/web/frontend/js/features/editor-left-menu/hooks/use-save-user-settings.tsx

@@ -0,0 +1,19 @@
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+import { saveUserSettings } from '../utils/api'
+import type { UserSettingsScope } from '../utils/api'
+
+export default function useSaveUserSettings() {
+  const [userSettingsScope, setUserSettingsScope] = useScopeValue<UserSettingsScope>(
+    'settings',
+    true
+  )
+
+  return <T,>(key: keyof UserSettingsScope, newSetting: T) => {
+    const currentSetting = userSettingsScope[key]
+
+    if (currentSetting !== newSetting) {
+      setUserSettingsScope({ ...userSettingsScope, [key]: newSetting })
+      saveUserSettings({ [key]: newSetting })
+    }
+  }
+}

services/web/frontend/js/features/editor-left-menu/hooks/use-set-user-wide-settings.tsx

@@ -1,131 +0,0 @@
-import { useCallback } from 'react'
-import {
-  FontFamily,
-  LineHeight,
-} from '../../../../../modules/source-editor/frontend/js/extensions/theme'
-import { Keybindings, PdfViewer } from '../../../../../types/project-settings'
-import useScopeValue from '../../../shared/hooks/use-scope-value'
-import { saveUserSettings } from '../utils/api'
-import type { UserSettingsScope } from '../utils/api'
-import useSetOverallTheme from './use-set-overall-theme'
-
-export default function useSetUserWideSettings() {
-  const [userSettings, setUserSettings] = useScopeValue<UserSettingsScope>(
-    'settings',
-    true
-  )
-
-  const setOverallTheme = useSetOverallTheme()
-  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]
-  )
-
-  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,
-  }
-}

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

@@ -0,0 +1,102 @@
+import { useCallback } from 'react'
+import {
+  FontFamily,
+  LineHeight,
+} from '../../../../../modules/source-editor/frontend/js/extensions/theme'
+import { Keybindings, PdfViewer } from '../../../../../types/project-settings'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
+import useSetOverallTheme from './use-set-overall-theme'
+import useSaveUserSettings from './use-save-user-settings'
+import type { UserSettingsScope } from '../utils/api'
+
+export default function useUserWideSettings() {
+  const saveUserSettings = useSaveUserSettings()
+  const [userSettings] = useScopeValue<UserSettingsScope>('settings', true)
+
+  const setOverallTheme = useSetOverallTheme()
+  const setAutoComplete = useCallback(
+    (autoComplete: boolean) => {
+      saveUserSettings<boolean>('autoComplete', autoComplete)
+    },
+    [saveUserSettings]
+  )
+
+  const setAutoPairDelimiters = useCallback(
+    (autoPairDelimiters: boolean) => {
+      saveUserSettings<boolean>('autoPairDelimiters', autoPairDelimiters)
+    },
+    [saveUserSettings]
+  )
+
+  const setSyntaxValidation = useCallback(
+    (syntaxValidation: boolean) => {
+      saveUserSettings<boolean>('syntaxValidation', syntaxValidation)
+    },
+    [saveUserSettings]
+  )
+
+  const setEditorTheme = useCallback(
+    (editorTheme: string) => {
+      saveUserSettings<string>('editorTheme', editorTheme)
+    },
+    [saveUserSettings]
+  )
+
+  const setMode = useCallback(
+    (mode: Keybindings) => {
+      saveUserSettings<Keybindings>('mode', mode)
+    },
+    [saveUserSettings]
+  )
+
+  const setFontSize = useCallback(
+    (fontSize: string) => {
+      saveUserSettings<string>('fontSize', fontSize)
+    },
+    [saveUserSettings]
+  )
+
+  const setFontFamily = useCallback(
+    (fontFamily: FontFamily) => {
+      saveUserSettings<FontFamily>('fontFamily', fontFamily)
+    },
+    [saveUserSettings]
+  )
+
+  const setLineHeight = useCallback(
+    (lineHeight: LineHeight) => {
+      saveUserSettings<LineHeight>('lineHeight', lineHeight)
+    },
+    [saveUserSettings]
+  )
+
+  const setPdfViewer = useCallback(
+    (pdfViewer: PdfViewer) => {
+      saveUserSettings<PdfViewer>('pdfViewer', pdfViewer)
+    },
+    [saveUserSettings]
+  )
+
+  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,
+  }
+}