mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
migrate user-wide settings post request from angular controller to react
GitOrigin-RevId: b5440178a11b82c5a5840eb310416f1519f85bae
This commit is contained in:
parent
f01a2920cf
commit
6c41a65200
2 changed files with 182 additions and 26 deletions
|
@ -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(
|
||||
() => ({
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue