From 414540af5c8e292a25a5d2c31acadd6494633696 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Fri, 23 Dec 2022 16:43:26 -0700 Subject: [PATCH] Reduce save/setScope user setting duplication by introducing a new shared hooks GitOrigin-RevId: 6054143eb042e4ff336b1f325a8cef693ae8c4bd --- .../context/project-settings-context.tsx | 4 +- .../hooks/use-save-user-settings.tsx | 19 +++ .../hooks/use-set-user-wide-settings.tsx | 131 ------------------ .../hooks/use-user-wide-settings.tsx | 102 ++++++++++++++ 4 files changed, 123 insertions(+), 133 deletions(-) create mode 100644 services/web/frontend/js/features/editor-left-menu/hooks/use-save-user-settings.tsx delete mode 100644 services/web/frontend/js/features/editor-left-menu/hooks/use-set-user-wide-settings.tsx create mode 100644 services/web/frontend/js/features/editor-left-menu/hooks/use-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 5b1c8a6666..797f8f58b5 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 @@ -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( () => ({ diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-save-user-settings.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-save-user-settings.tsx new file mode 100644 index 0000000000..67d3266de0 --- /dev/null +++ b/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( + 'settings', + true + ) + + return (key: keyof UserSettingsScope, newSetting: T) => { + const currentSetting = userSettingsScope[key] + + if (currentSetting !== newSetting) { + setUserSettingsScope({ ...userSettingsScope, [key]: newSetting }) + saveUserSettings({ [key]: newSetting }) + } + } +} 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 deleted file mode 100644 index aa0471d1a9..0000000000 --- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-user-wide-settings.tsx +++ /dev/null @@ -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( - '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, - } -} diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-user-wide-settings.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-user-wide-settings.tsx new file mode 100644 index 0000000000..40b20eb533 --- /dev/null +++ b/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('settings', true) + + const setOverallTheme = useSetOverallTheme() + const setAutoComplete = useCallback( + (autoComplete: boolean) => { + saveUserSettings('autoComplete', autoComplete) + }, + [saveUserSettings] + ) + + const setAutoPairDelimiters = useCallback( + (autoPairDelimiters: boolean) => { + saveUserSettings('autoPairDelimiters', autoPairDelimiters) + }, + [saveUserSettings] + ) + + const setSyntaxValidation = useCallback( + (syntaxValidation: boolean) => { + saveUserSettings('syntaxValidation', syntaxValidation) + }, + [saveUserSettings] + ) + + const setEditorTheme = useCallback( + (editorTheme: string) => { + saveUserSettings('editorTheme', editorTheme) + }, + [saveUserSettings] + ) + + const setMode = useCallback( + (mode: Keybindings) => { + saveUserSettings('mode', mode) + }, + [saveUserSettings] + ) + + const setFontSize = useCallback( + (fontSize: string) => { + saveUserSettings('fontSize', fontSize) + }, + [saveUserSettings] + ) + + const setFontFamily = useCallback( + (fontFamily: FontFamily) => { + saveUserSettings('fontFamily', fontFamily) + }, + [saveUserSettings] + ) + + const setLineHeight = useCallback( + (lineHeight: LineHeight) => { + saveUserSettings('lineHeight', lineHeight) + }, + [saveUserSettings] + ) + + const setPdfViewer = useCallback( + (pdfViewer: PdfViewer) => { + saveUserSettings('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, + } +}