github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
GitOrigin-RevId: 6054143eb042e4ff336b1f325a8cef693ae8c4bd
This commit is contained in:
M Fahru 2022-12-23 16:43:26 -07:00 committed by Copybot
parent 09b1974a3d
commit 414540af5c
4 changed files with 123 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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(
() => ({

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

@ -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 })
}
}
}

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

@ -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,
}
}

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

@ -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,
}
}