From f85d17f89403d1478bd1cfe442e4ff56cea40222 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Tue, 3 Jan 2023 10:04:34 -0700 Subject: [PATCH] Remove disabling update while listening on socket (ignoreUpdates state) since the logic is more complicated that was originally thought and it will be tested/revisited on a different PR GitOrigin-RevId: 70cee2f0fc565aaebfb3ead2dd1a58fc5371c816 --- .../context/project-settings-context.tsx | 10 ++-- ...-project-wide-settings-socket-listener.tsx | 46 ++++++++----------- .../hooks/use-set-project-wide-settings.tsx | 20 +++----- .../hooks/use-set-root-doc-id.tsx | 15 +----- .../hooks/use-set-spell-check-language.tsx | 19 ++------ 5 files changed, 34 insertions(+), 76 deletions(-) diff --git a/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx b/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx index 2562ecb48d..5a2a5ce7ac 100644 --- a/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx +++ b/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx @@ -1,4 +1,4 @@ -import { createContext, useContext, useMemo, useState } from 'react' +import { createContext, useContext, useMemo } from 'react' import type { PropsWithChildren } from 'react' import type { FontFamily, @@ -52,8 +52,6 @@ export const ProjectSettingsContext = createContext< export function ProjectSettingsProvider({ children, }: PropsWithChildren>) { - const [ignoreUpdates, setIgnoreUpdates] = useState(false) - const { compiler, setCompiler, @@ -63,7 +61,7 @@ export function ProjectSettingsProvider({ setRootDocId, spellCheckLanguage, setSpellCheckLanguage, - } = useSetProjectWideSettings({ ignoreUpdates }) + } = useSetProjectWideSettings() const { autoComplete, @@ -88,9 +86,7 @@ export function ProjectSettingsProvider({ setPdfViewer, } = useUserWideSettings() - useProjectWideSettingsSocketListener({ - onListen: () => setIgnoreUpdates(true), - }) + useProjectWideSettingsSocketListener() const value: ProjectSettingsContextValue = useMemo( () => ({ diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx index 746a6fa6dc..9d75fb6b60 100644 --- a/services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx +++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx @@ -2,51 +2,45 @@ import { useCallback, useEffect } from 'react' import { ProjectCompiler } from '../../../../../types/project-settings' import { useIdeContext } from '../../../shared/context/ide-context' import useScopeValue from '../../../shared/hooks/use-scope-value' +import type { ProjectSettingsScope } from '../utils/api' -type UseProjectWideSettingsSocketListener = { - onListen: () => void -} - -export default function useProjectWideSettingsSocketListener({ - onListen, -}: UseProjectWideSettingsSocketListener) { +export default function useProjectWideSettingsSocketListener() { const ide = useIdeContext() - const [compilerScope, setCompilerScope] = - useScopeValue('project.compiler') - const [imageNameScope, setImageNameScope] = - useScopeValue('project.imageName') - const [spellCheckLanguageScope, setSpellCheckLanguageScope] = - useScopeValue('project.spellCheckLanguage') + const [projectScope, setProjectScope] = useScopeValue< + ProjectSettingsScope | undefined + >('project', true) const setCompiler = useCallback( (compiler: ProjectCompiler) => { - onListen() - setCompilerScope(compiler) + if (projectScope) { + setProjectScope({ ...projectScope, compiler }) + } }, - [setCompilerScope, onListen] + [projectScope, setProjectScope] ) const setImageName = useCallback( (imageName: string) => { - onListen() - setImageNameScope(imageName) + if (projectScope) { + setProjectScope({ ...projectScope, imageName }) + } }, - [setImageNameScope, onListen] + [projectScope, setProjectScope] ) const setSpellCheckLanguage = useCallback( (spellCheckLanguage: string) => { - onListen() - setSpellCheckLanguageScope(spellCheckLanguage) + if (projectScope) { + setProjectScope({ ...projectScope, spellCheckLanguage }) + } }, - [setSpellCheckLanguageScope, onListen] + [projectScope, setProjectScope] ) useEffect(() => { // data is not available on initial mounting - const dataAvailable = - compilerScope && imageNameScope && spellCheckLanguageScope + const dataAvailable = !!projectScope if (dataAvailable && ide?.socket) { ide.socket.on('compilerUpdated', setCompiler) @@ -63,11 +57,9 @@ export default function useProjectWideSettingsSocketListener({ } }, [ ide?.socket, - compilerScope, + projectScope, setCompiler, - imageNameScope, setImageName, - spellCheckLanguageScope, setSpellCheckLanguage, ]) } diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx index 21ded370a3..0ab103d4b2 100644 --- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx +++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-project-wide-settings.tsx @@ -6,13 +6,7 @@ import { ProjectSettingsScope, saveProjectSettings } from '../utils/api' import useSetRootDocId from './use-set-root-doc-id' import useSetSpellCheckLanguage from './use-set-spell-check-language' -type UseSetProjectWideSettings = { - ignoreUpdates: boolean -} - -export default function useSetProjectWideSettings({ - ignoreUpdates, -}: UseSetProjectWideSettings) { +export default function useSetProjectWideSettings() { // The value will be undefined on mount const [project, setProject] = useScopeValue( 'project', @@ -22,30 +16,30 @@ export default function useSetProjectWideSettings({ const setCompiler = useCallback( (compiler: ProjectCompiler) => { - const allowUpdate = !ignoreUpdates && project?.compiler + const allowUpdate = project?.compiler if (allowUpdate) { setProject({ ...project, compiler }) saveProjectSettings({ projectId, compiler }) } }, - [projectId, project, setProject, ignoreUpdates] + [projectId, project, setProject] ) const setImageName = useCallback( (imageName: string) => { - const allowUpdate = !ignoreUpdates && project?.imageName + const allowUpdate = project?.imageName if (allowUpdate) { setProject({ ...project, imageName }) saveProjectSettings({ projectId, imageName }) } }, - [projectId, project, setProject, ignoreUpdates] + [projectId, project, setProject] ) - const setRootDocId = useSetRootDocId({ ignoreUpdates }) - const setSpellCheckLanguage = useSetSpellCheckLanguage({ ignoreUpdates }) + const setRootDocId = useSetRootDocId() + const setSpellCheckLanguage = useSetSpellCheckLanguage() return { compiler: project?.compiler, diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-root-doc-id.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-root-doc-id.tsx index 7268d2fb5b..173b2bbfe2 100644 --- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-root-doc-id.tsx +++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-root-doc-id.tsx @@ -4,11 +4,7 @@ import { useProjectContext } from '../../../shared/context/project-context' import useScopeValue from '../../../shared/hooks/use-scope-value' import { saveProjectSettings } from '../utils/api' -type UseSetRootDocId = { - ignoreUpdates: boolean -} - -export default function useSetRootDocId({ ignoreUpdates }: UseSetRootDocId) { +export default function useSetRootDocId() { const [rootDocIdScope, setRootDocIdScope] = useScopeValue('project.rootDoc_id') const { permissionsLevel } = useEditorContext() @@ -17,7 +13,6 @@ export default function useSetRootDocId({ ignoreUpdates }: UseSetRootDocId) { const setRootDocId = useCallback( async (rootDocId: string) => { const allowUpdate = - !ignoreUpdates && typeof rootDocIdScope !== 'undefined' && permissionsLevel !== 'readOnly' && rootDocIdScope !== rootDocId @@ -31,13 +26,7 @@ export default function useSetRootDocId({ ignoreUpdates }: UseSetRootDocId) { } } }, - [ - permissionsLevel, - projectId, - rootDocIdScope, - setRootDocIdScope, - ignoreUpdates, - ] + [permissionsLevel, projectId, rootDocIdScope, setRootDocIdScope] ) return setRootDocId } diff --git a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx index 61fa12820f..3e8adfb8f8 100644 --- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx +++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx @@ -4,13 +4,7 @@ import { useProjectContext } from '../../../shared/context/project-context' import useScopeValue from '../../../shared/hooks/use-scope-value' import { saveProjectSettings, saveUserSettings } from '../utils/api' -type UseSetSpellCheckLanguage = { - ignoreUpdates: boolean -} - -export default function useSetSpellCheckLanguage({ - ignoreUpdates, -}: UseSetSpellCheckLanguage) { +export default function useSetSpellCheckLanguage() { const [spellCheckLanguageScope, setSpellCheckLanguageScope] = useScopeValue('project.spellCheckLanguage') const { _id: projectId } = useProjectContext() @@ -18,9 +12,7 @@ export default function useSetSpellCheckLanguage({ const setSpellCheckLanguage = useCallback( (spellCheckLanguage: string) => { const allowUpdate = - !ignoreUpdates && - spellCheckLanguage && - spellCheckLanguage !== spellCheckLanguageScope + spellCheckLanguage && spellCheckLanguage !== spellCheckLanguageScope if (allowUpdate) { sendMB('setting-changed', { @@ -35,12 +27,7 @@ export default function useSetSpellCheckLanguage({ saveUserSettings({ spellCheckLanguage }) } }, - [ - projectId, - setSpellCheckLanguageScope, - spellCheckLanguageScope, - ignoreUpdates, - ] + [projectId, setSpellCheckLanguageScope, spellCheckLanguageScope] ) return setSpellCheckLanguage