migrate user-wide settings post request from angular controller to react

GitOrigin-RevId: b5440178a11b82c5a5840eb310416f1519f85bae
This commit is contained in:
M Fahru 2022-12-22 17:41:16 -07:00 committed by Copybot
parent f01a2920cf
commit 6c41a65200
2 changed files with 182 additions and 26 deletions

View file

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

View file

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