Remove scope suffix from variable name in react-related files since it's an angular-specific concept

GitOrigin-RevId: b8eea8c8113a977f6cbe07649e1338eea8281841
This commit is contained in:
M Fahru 2023-01-04 05:17:50 -07:00 committed by Copybot
parent 03e5614969
commit b2cf833e9d
9 changed files with 92 additions and 96 deletions

View file

@ -3,33 +3,33 @@ import type { PropsWithChildren } 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 { ProjectSettingsScope, UserSettingsScope } from '../utils/api'
import type { ProjectSettings, UserSettings } from '../utils/api'
type ProjectSettingsSetterContextValue = {
setCompiler: (compiler: ProjectSettingsScope['compiler']) => void
setImageName: (imageName: ProjectSettingsScope['imageName']) => void
setRootDocId: (rootDocId: ProjectSettingsScope['rootDocId']) => void
setCompiler: (compiler: ProjectSettings['compiler']) => void
setImageName: (imageName: ProjectSettings['imageName']) => void
setRootDocId: (rootDocId: ProjectSettings['rootDocId']) => void
setSpellCheckLanguage: (
spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']
spellCheckLanguage: ProjectSettings['spellCheckLanguage']
) => void
setAutoComplete: (autoComplete: UserSettingsScope['autoComplete']) => void
setAutoComplete: (autoComplete: UserSettings['autoComplete']) => void
setAutoPairDelimiters: (
autoPairDelimiters: UserSettingsScope['autoPairDelimiters']
autoPairDelimiters: UserSettings['autoPairDelimiters']
) => void
setSyntaxValidation: (
syntaxValidation: UserSettingsScope['syntaxValidation']
syntaxValidation: UserSettings['syntaxValidation']
) => void
setMode: (mode: UserSettingsScope['mode']) => void
setEditorTheme: (editorTheme: UserSettingsScope['editorTheme']) => void
setOverallTheme: (overallTheme: UserSettingsScope['overallTheme']) => void
setFontSize: (fontSize: UserSettingsScope['fontSize']) => void
setFontFamily: (fontFamily: UserSettingsScope['fontFamily']) => void
setLineHeight: (lineHeight: UserSettingsScope['lineHeight']) => void
setPdfViewer: (pdfViewer: UserSettingsScope['pdfViewer']) => 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<ProjectSettingsScope> &
Partial<UserSettingsScope> &
type ProjectSettingsContextValue = Partial<ProjectSettings> &
Partial<UserSettings> &
ProjectSettingsSetterContextValue
export const ProjectSettingsContext = createContext<

View file

@ -1,45 +1,46 @@
import { useCallback, useEffect } from 'react'
import { useIdeContext } from '../../../shared/context/ide-context'
import useScopeValue from '../../../shared/hooks/use-scope-value'
import type { ProjectSettingsScope } from '../utils/api'
import type { ProjectSettings } from '../utils/api'
export default function useProjectWideSettingsSocketListener() {
const ide = useIdeContext()
const [projectScope, setProjectScope] = useScopeValue<
ProjectSettingsScope | undefined
>('project', true)
const [project, setProject] = useScopeValue<ProjectSettings | undefined>(
'project',
true
)
const setCompiler = useCallback(
(compiler: ProjectSettingsScope['compiler']) => {
if (projectScope) {
setProjectScope({ ...projectScope, compiler })
(compiler: ProjectSettings['compiler']) => {
if (project) {
setProject({ ...project, compiler })
}
},
[projectScope, setProjectScope]
[project, setProject]
)
const setImageName = useCallback(
(imageName: ProjectSettingsScope['imageName']) => {
if (projectScope) {
setProjectScope({ ...projectScope, imageName })
(imageName: ProjectSettings['imageName']) => {
if (project) {
setProject({ ...project, imageName })
}
},
[projectScope, setProjectScope]
[project, setProject]
)
const setSpellCheckLanguage = useCallback(
(spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']) => {
if (projectScope) {
setProjectScope({ ...projectScope, spellCheckLanguage })
(spellCheckLanguage: ProjectSettings['spellCheckLanguage']) => {
if (project) {
setProject({ ...project, spellCheckLanguage })
}
},
[projectScope, setProjectScope]
[project, setProject]
)
useEffect(() => {
// data is not available on initial mounting
const dataAvailable = !!projectScope
const dataAvailable = !!project
if (dataAvailable && ide?.socket) {
ide.socket.on('compilerUpdated', setCompiler)
@ -54,11 +55,5 @@ export default function useProjectWideSettingsSocketListener() {
)
}
}
}, [
ide?.socket,
projectScope,
setCompiler,
setImageName,
setSpellCheckLanguage,
])
}, [ide?.socket, project, setCompiler, setImageName, setSpellCheckLanguage])
}

View file

@ -1,20 +1,20 @@
import { useCallback } from 'react'
import { useProjectContext } from '../../../shared/context/project-context'
import useScopeValue from '../../../shared/hooks/use-scope-value'
import { type ProjectSettingsScope, saveProjectSettings } from '../utils/api'
import { type ProjectSettings, saveProjectSettings } from '../utils/api'
import useRootDocId from './use-root-doc-id'
import useSetSpellCheckLanguage from './use-set-spell-check-language'
export default function useProjectWideSettings() {
// The value will be undefined on mount
const [project, setProject] = useScopeValue<ProjectSettingsScope | undefined>(
const [project, setProject] = useScopeValue<ProjectSettings | undefined>(
'project',
true
)
const { _id: projectId } = useProjectContext()
const setCompiler = useCallback(
(compiler: ProjectSettingsScope['compiler']) => {
(compiler: ProjectSettings['compiler']) => {
const allowUpdate = project?.compiler
if (allowUpdate) {
@ -26,7 +26,7 @@ export default function useProjectWideSettings() {
)
const setImageName = useCallback(
(imageName: ProjectSettingsScope['imageName']) => {
(imageName: ProjectSettings['imageName']) => {
const allowUpdate = project?.imageName
if (allowUpdate) {

View file

@ -2,16 +2,16 @@ import { useCallback } from 'react'
import { useEditorContext } from '../../../shared/context/editor-context'
import { useProjectContext } from '../../../shared/context/project-context'
import useScopeValue from '../../../shared/hooks/use-scope-value'
import { type ProjectSettingsScope, saveProjectSettings } from '../utils/api'
import { type ProjectSettings, saveProjectSettings } from '../utils/api'
export default function useRootDocId() {
const [rootDocId, setRootDocId] =
useScopeValue<ProjectSettingsScope['rootDocId']>('project.rootDoc_id')
useScopeValue<ProjectSettings['rootDocId']>('project.rootDoc_id')
const { permissionsLevel } = useEditorContext()
const { _id: projectId } = useProjectContext()
const setRootDocIdFunc = useCallback(
async (newRootDocId: ProjectSettingsScope['rootDocId']) => {
async (newRootDocId: ProjectSettings['rootDocId']) => {
const allowUpdate =
typeof rootDocId !== 'undefined' &&
permissionsLevel !== 'readOnly' &&

View file

@ -1,17 +1,19 @@
import useScopeValue from '../../../shared/hooks/use-scope-value'
import { sendMB } from '../../../infrastructure/event-tracking'
import { saveUserSettings } from '../utils/api'
import type { UserSettingsScope } from '../utils/api'
import type { UserSettings } from '../utils/api'
export default function useSaveUserSettings() {
const [userSettingsScope, setUserSettingsScope] =
useScopeValue<UserSettingsScope>('settings', true)
const [userSettings, setUserSettings] = useScopeValue<UserSettings>(
'settings',
true
)
return (
key: keyof UserSettingsScope,
newSetting: UserSettingsScope[keyof UserSettingsScope]
key: keyof UserSettings,
newSetting: UserSettings[keyof UserSettings]
) => {
const currentSetting = userSettingsScope[key]
const currentSetting = userSettings[key]
sendMB('setting-changed', {
changedSetting: key,
@ -19,7 +21,7 @@ export default function useSaveUserSettings() {
})
if (currentSetting !== newSetting) {
setUserSettingsScope({ ...userSettingsScope, [key]: newSetting })
setUserSettings({ ...userSettings, [key]: newSetting })
saveUserSettings({ [key]: newSetting })
}
}

View file

@ -2,15 +2,15 @@ import { useCallback, useEffect, useState } from 'react'
import _ from 'lodash'
import useScopeValue from '../../../shared/hooks/use-scope-value'
import type { OverallThemeMeta } from '../../../../../types/project-settings'
import { saveUserSettings, type UserSettingsScope } from '../utils/api'
import { saveUserSettings, type UserSettings } from '../utils/api'
export default function useSetOverallTheme() {
const [chosenTheme, setChosenTheme] = useState<OverallThemeMeta | null>(null)
const [loadingStyleSheet, setLoadingStyleSheet] = useScopeValue<boolean>(
'ui.loadingStyleSheet'
)
const [overallThemeScope, setOverallThemeScope] = useScopeValue<
UserSettingsScope['overallTheme']
const [overallTheme, setOverallTheme] = useScopeValue<
UserSettings['overallTheme']
>('settings.overallTheme')
useEffect(() => {
@ -43,24 +43,22 @@ export default function useSetOverallTheme() {
}
}, [loadingStyleSheet, setLoadingStyleSheet, chosenTheme?.path])
const setOverallTheme = useCallback(
(overallTheme: UserSettingsScope['overallTheme']) => {
if (overallThemeScope !== overallTheme) {
return useCallback(
(newOverallTheme: UserSettings['overallTheme']) => {
if (overallTheme !== newOverallTheme) {
const chosenTheme = _.find(
window.overallThemes,
theme => theme.val === overallTheme
theme => theme.val === newOverallTheme
)
if (chosenTheme) {
setLoadingStyleSheet(true)
setChosenTheme(chosenTheme)
setOverallThemeScope(overallTheme)
saveUserSettings({ overallTheme })
setOverallTheme(newOverallTheme)
saveUserSettings({ overallTheme: newOverallTheme })
}
}
},
[overallThemeScope, setLoadingStyleSheet, setOverallThemeScope]
[overallTheme, setLoadingStyleSheet, setOverallTheme]
)
return setOverallTheme
}

View file

@ -3,37 +3,38 @@ import { sendMB } from '../../../infrastructure/event-tracking'
import { useProjectContext } from '../../../shared/context/project-context'
import useScopeValue from '../../../shared/hooks/use-scope-value'
import {
type ProjectSettingsScope,
type ProjectSettings,
saveProjectSettings,
saveUserSettings,
} from '../utils/api'
export default function useSetSpellCheckLanguage() {
const [spellCheckLanguageScope, setSpellCheckLanguageScope] = useScopeValue<
ProjectSettingsScope['spellCheckLanguage']
const [spellCheckLanguage, setSpellCheckLanguage] = useScopeValue<
ProjectSettings['spellCheckLanguage']
>('project.spellCheckLanguage')
const { _id: projectId } = useProjectContext()
const setSpellCheckLanguage = useCallback(
(spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']) => {
return useCallback(
(newSpellCheckLanguage: ProjectSettings['spellCheckLanguage']) => {
const allowUpdate =
spellCheckLanguage && spellCheckLanguage !== spellCheckLanguageScope
newSpellCheckLanguage && newSpellCheckLanguage !== spellCheckLanguage
if (allowUpdate) {
sendMB('setting-changed', {
changedSetting: 'spellCheckLanguage',
changedSettingVal: spellCheckLanguage,
changedSettingVal: newSpellCheckLanguage,
})
setSpellCheckLanguageScope(spellCheckLanguage)
setSpellCheckLanguage(newSpellCheckLanguage)
// save to both project setting and user setting
saveProjectSettings({ projectId, spellCheckLanguage })
saveUserSettings({ spellCheckLanguage })
saveProjectSettings({
projectId,
spellCheckLanguage: newSpellCheckLanguage,
})
saveUserSettings({ spellCheckLanguage: newSpellCheckLanguage })
}
},
[projectId, setSpellCheckLanguageScope, spellCheckLanguageScope]
[projectId, setSpellCheckLanguage, spellCheckLanguage]
)
return setSpellCheckLanguage
}

View file

@ -2,76 +2,76 @@ import { useCallback } from 'react'
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'
import type { UserSettings } from '../utils/api'
export default function useUserWideSettings() {
const saveUserSettings = useSaveUserSettings()
// this may be undefined on test environments
const [userSettings] = useScopeValue<UserSettingsScope | undefined>(
const [userSettings] = useScopeValue<UserSettings | undefined>(
'settings',
true
)
const setOverallTheme = useSetOverallTheme()
const setAutoComplete = useCallback(
(autoComplete: UserSettingsScope['autoComplete']) => {
(autoComplete: UserSettings['autoComplete']) => {
saveUserSettings('autoComplete', autoComplete)
},
[saveUserSettings]
)
const setAutoPairDelimiters = useCallback(
(autoPairDelimiters: UserSettingsScope['autoPairDelimiters']) => {
(autoPairDelimiters: UserSettings['autoPairDelimiters']) => {
saveUserSettings('autoPairDelimiters', autoPairDelimiters)
},
[saveUserSettings]
)
const setSyntaxValidation = useCallback(
(syntaxValidation: UserSettingsScope['syntaxValidation']) => {
(syntaxValidation: UserSettings['syntaxValidation']) => {
saveUserSettings('syntaxValidation', syntaxValidation)
},
[saveUserSettings]
)
const setEditorTheme = useCallback(
(editorTheme: UserSettingsScope['editorTheme']) => {
(editorTheme: UserSettings['editorTheme']) => {
saveUserSettings('editorTheme', editorTheme)
},
[saveUserSettings]
)
const setMode = useCallback(
(mode: UserSettingsScope['mode']) => {
(mode: UserSettings['mode']) => {
saveUserSettings('mode', mode)
},
[saveUserSettings]
)
const setFontSize = useCallback(
(fontSize: UserSettingsScope['fontSize']) => {
(fontSize: UserSettings['fontSize']) => {
saveUserSettings('fontSize', fontSize)
},
[saveUserSettings]
)
const setFontFamily = useCallback(
(fontFamily: UserSettingsScope['fontFamily']) => {
(fontFamily: UserSettings['fontFamily']) => {
saveUserSettings('fontFamily', fontFamily)
},
[saveUserSettings]
)
const setLineHeight = useCallback(
(lineHeight: UserSettingsScope['lineHeight']) => {
(lineHeight: UserSettings['lineHeight']) => {
saveUserSettings('lineHeight', lineHeight)
},
[saveUserSettings]
)
const setPdfViewer = useCallback(
(pdfViewer: UserSettingsScope['pdfViewer']) => {
(pdfViewer: UserSettings['pdfViewer']) => {
saveUserSettings('pdfViewer', pdfViewer)
},
[saveUserSettings]

View file

@ -10,7 +10,7 @@ import type {
} from '../../../../../types/project-settings'
import { postJSON } from '../../../infrastructure/fetch-json'
export type UserSettingsScope = {
export type UserSettings = {
pdfViewer: PdfViewer
autoComplete: boolean
autoPairDelimiters: boolean
@ -23,7 +23,7 @@ export type UserSettingsScope = {
lineHeight: LineHeight
}
export type ProjectSettingsScope = {
export type ProjectSettings = {
compiler: ProjectCompiler
imageName: string
rootDocId: string
@ -31,8 +31,8 @@ export type ProjectSettingsScope = {
}
type SaveUserSettings = Partial<
UserSettingsScope & {
spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']
UserSettings & {
spellCheckLanguage: ProjectSettings['spellCheckLanguage']
}
>
@ -44,7 +44,7 @@ export function saveUserSettings(data: SaveUserSettings) {
type SaveProjectSettings = {
projectId: string
} & Partial<ProjectSettingsScope>
} & Partial<ProjectSettings>
export const saveProjectSettings = async ({
projectId,