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

GitOrigin-RevId: b8eea8c8113a977f6cbe07649e1338eea8281841

services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx

@@ -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
+  setCompiler: (compiler: ProjectSettings['compiler']) => void
-  setImageName: (imageName: ProjectSettingsScope['imageName']) => void
+  setImageName: (imageName: ProjectSettings['imageName']) => void
-  setRootDocId: (rootDocId: ProjectSettingsScope['rootDocId']) => 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
+  setMode: (mode: UserSettings['mode']) => void
-  setEditorTheme: (editorTheme: UserSettingsScope['editorTheme']) => void
+  setEditorTheme: (editorTheme: UserSettings['editorTheme']) => void
-  setOverallTheme: (overallTheme: UserSettingsScope['overallTheme']) => void
+  setOverallTheme: (overallTheme: UserSettings['overallTheme']) => void
-  setFontSize: (fontSize: UserSettingsScope['fontSize']) => void
+  setFontSize: (fontSize: UserSettings['fontSize']) => void
-  setFontFamily: (fontFamily: UserSettingsScope['fontFamily']) => void
+  setFontFamily: (fontFamily: UserSettings['fontFamily']) => void
-  setLineHeight: (lineHeight: UserSettingsScope['lineHeight']) => void
+  setLineHeight: (lineHeight: UserSettings['lineHeight']) => void
-  setPdfViewer: (pdfViewer: UserSettingsScope['pdfViewer']) => void
+  setPdfViewer: (pdfViewer: UserSettings['pdfViewer']) => void
 }
 
-type ProjectSettingsContextValue = Partial<ProjectSettingsScope> &
+type ProjectSettingsContextValue = Partial<ProjectSettings> &
-  Partial<UserSettingsScope> &
+  Partial<UserSettings> &
   ProjectSettingsSetterContextValue
 
 export const ProjectSettingsContext = createContext<

services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings-socket-listener.tsx

@@ -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<
+  const [project, setProject] = useScopeValue<ProjectSettings | undefined>(
-    ProjectSettingsScope | undefined
+    'project',
-  >('project', true)
+    true
+  )
 
   const setCompiler = useCallback(
-    (compiler: ProjectSettingsScope['compiler']) => {
+    (compiler: ProjectSettings['compiler']) => {
-      if (projectScope) {
+      if (project) {
-        setProjectScope({ ...projectScope, compiler })
+        setProject({ ...project, compiler })
       }
     },
-    [projectScope, setProjectScope]
+    [project, setProject]
   )
 
   const setImageName = useCallback(
-    (imageName: ProjectSettingsScope['imageName']) => {
+    (imageName: ProjectSettings['imageName']) => {
-      if (projectScope) {
+      if (project) {
-        setProjectScope({ ...projectScope, imageName })
+        setProject({ ...project, imageName })
       }
     },
-    [projectScope, setProjectScope]
+    [project, setProject]
   )
 
   const setSpellCheckLanguage = useCallback(
-    (spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']) => {
+    (spellCheckLanguage: ProjectSettings['spellCheckLanguage']) => {
-      if (projectScope) {
+      if (project) {
-        setProjectScope({ ...projectScope, spellCheckLanguage })
+        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, project, setCompiler, setImageName, setSpellCheckLanguage])
-    ide?.socket,
-    projectScope,
-    setCompiler,
-    setImageName,
-    setSpellCheckLanguage,
-  ])
 }

services/web/frontend/js/features/editor-left-menu/hooks/use-project-wide-settings.tsx

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

services/web/frontend/js/features/editor-left-menu/hooks/use-root-doc-id.tsx

@@ -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' &&

services/web/frontend/js/features/editor-left-menu/hooks/use-save-user-settings.tsx

@@ -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] =
+  const [userSettings, setUserSettings] = useScopeValue<UserSettings>(
-    useScopeValue<UserSettingsScope>('settings', true)
+    'settings',
+    true
+  )
 
   return (
-    key: keyof UserSettingsScope,
+    key: keyof UserSettings,
-    newSetting: UserSettingsScope[keyof UserSettingsScope]
+    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 })
     }
   }

services/web/frontend/js/features/editor-left-menu/hooks/use-set-overall-theme.tsx

@@ -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<
+  const [overallTheme, setOverallTheme] = useScopeValue<
-    UserSettingsScope['overallTheme']
+    UserSettings['overallTheme']
   >('settings.overallTheme')
 
   useEffect(() => {
@@ -43,24 +43,22 @@ export default function useSetOverallTheme() {
     }
   }, [loadingStyleSheet, setLoadingStyleSheet, chosenTheme?.path])
 
-  const setOverallTheme = useCallback(
+  return useCallback(
-    (overallTheme: UserSettingsScope['overallTheme']) => {
+    (newOverallTheme: UserSettings['overallTheme']) => {
-      if (overallThemeScope !== 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)
+          setOverallTheme(newOverallTheme)
-          saveUserSettings({ overallTheme })
+          saveUserSettings({ overallTheme: newOverallTheme })
         }
       }
     },
-    [overallThemeScope, setLoadingStyleSheet, setOverallThemeScope]
+    [overallTheme, setLoadingStyleSheet, setOverallTheme]
   )
-
-  return setOverallTheme
 }

services/web/frontend/js/features/editor-left-menu/hooks/use-set-spell-check-language.tsx

@@ -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<
+  const [spellCheckLanguage, setSpellCheckLanguage] = useScopeValue<
-    ProjectSettingsScope['spellCheckLanguage']
+    ProjectSettings['spellCheckLanguage']
   >('project.spellCheckLanguage')
   const { _id: projectId } = useProjectContext()
 
-  const setSpellCheckLanguage = useCallback(
+  return useCallback(
-    (spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']) => {
+    (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 })
+        saveProjectSettings({
-        saveUserSettings({ spellCheckLanguage })
+          projectId,
+          spellCheckLanguage: newSpellCheckLanguage,
+        })
+        saveUserSettings({ spellCheckLanguage: newSpellCheckLanguage })
       }
     },
-    [projectId, setSpellCheckLanguageScope, spellCheckLanguageScope]
+    [projectId, setSpellCheckLanguage, spellCheckLanguage]
   )
-
-  return setSpellCheckLanguage
 }

services/web/frontend/js/features/editor-left-menu/hooks/use-user-wide-settings.tsx

@@ -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]

services/web/frontend/js/features/editor-left-menu/utils/api.ts

@@ -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 & {
+  UserSettings & {
-    spellCheckLanguage: ProjectSettingsScope['spellCheckLanguage']
+    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,