overleaf/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
Tim Down 38efea39f2 Merge pull request #15707 from overleaf/td-user-settings-context
Move user settings to a context

GitOrigin-RevId: 9a9d55dfee9f71cee323fe64d1442303ac7cfeb2
2023-11-22 09:04:39 +00:00

156 lines
3.9 KiB
TypeScript

import { createContext, FC, useContext, useMemo } from 'react'
import useProjectWideSettings from '../hooks/use-project-wide-settings'
import useUserWideSettings from '../hooks/use-user-wide-settings'
import useProjectWideSettingsSocketListener from '../hooks/use-project-wide-settings-socket-listener'
import type { ProjectSettings } from '../utils/api'
import { UserSettings } from '../../../../../types/user-settings'
type ProjectSettingsSetterContextValue = {
setCompiler: (compiler: ProjectSettings['compiler']) => void
setImageName: (imageName: ProjectSettings['imageName']) => void
setRootDocId: (rootDocId: ProjectSettings['rootDocId']) => void
setSpellCheckLanguage: (
spellCheckLanguage: ProjectSettings['spellCheckLanguage']
) => void
setAutoComplete: (autoComplete: UserSettings['autoComplete']) => void
setAutoPairDelimiters: (
autoPairDelimiters: UserSettings['autoPairDelimiters']
) => void
setSyntaxValidation: (
syntaxValidation: UserSettings['syntaxValidation']
) => void
setMode: (mode: UserSettings['mode']) => void
setEditorTheme: (editorTheme: UserSettings['editorTheme']) => void
setOverallTheme: (overallTheme: UserSettings['overallTheme']) => void
setFontSize: (fontSize: UserSettings['fontSize']) => void
setFontFamily: (fontFamily: UserSettings['fontFamily']) => void
setLineHeight: (lineHeight: UserSettings['lineHeight']) => void
setPdfViewer: (pdfViewer: UserSettings['pdfViewer']) => void
}
type ProjectSettingsContextValue = Partial<ProjectSettings> &
Partial<UserSettings> &
ProjectSettingsSetterContextValue
export const ProjectSettingsContext = createContext<
ProjectSettingsContextValue | undefined
>(undefined)
export const ProjectSettingsProvider: FC = ({ children }) => {
const {
compiler,
setCompiler,
imageName,
setImageName,
rootDocId,
setRootDocId,
spellCheckLanguage,
setSpellCheckLanguage,
} = useProjectWideSettings()
const {
autoComplete,
setAutoComplete,
autoPairDelimiters,
setAutoPairDelimiters,
syntaxValidation,
setSyntaxValidation,
editorTheme,
setEditorTheme,
overallTheme,
setOverallTheme,
mode,
setMode,
fontSize,
setFontSize,
fontFamily,
setFontFamily,
lineHeight,
setLineHeight,
pdfViewer,
setPdfViewer,
} = useUserWideSettings()
useProjectWideSettingsSocketListener()
const value: ProjectSettingsContextValue = useMemo(
() => ({
compiler,
setCompiler,
imageName,
setImageName,
rootDocId,
setRootDocId,
spellCheckLanguage,
setSpellCheckLanguage,
autoComplete,
setAutoComplete,
autoPairDelimiters,
setAutoPairDelimiters,
syntaxValidation,
setSyntaxValidation,
editorTheme,
setEditorTheme,
overallTheme,
setOverallTheme,
mode,
setMode,
fontSize,
setFontSize,
fontFamily,
setFontFamily,
lineHeight,
setLineHeight,
pdfViewer,
setPdfViewer,
}),
[
compiler,
setCompiler,
imageName,
setImageName,
rootDocId,
setRootDocId,
spellCheckLanguage,
setSpellCheckLanguage,
autoComplete,
setAutoComplete,
autoPairDelimiters,
setAutoPairDelimiters,
syntaxValidation,
setSyntaxValidation,
editorTheme,
setEditorTheme,
overallTheme,
setOverallTheme,
mode,
setMode,
fontSize,
setFontSize,
fontFamily,
setFontFamily,
lineHeight,
setLineHeight,
pdfViewer,
setPdfViewer,
]
)
return (
<ProjectSettingsContext.Provider value={value}>
{children}
</ProjectSettingsContext.Provider>
)
}
export function useProjectSettingsContext() {
const context = useContext(ProjectSettingsContext)
if (!context) {
throw new Error(
'useProjectSettingsContext is only available inside ProjectSettingsProvider'
)
}
return context
}