Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18

GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8

services/web/frontend/js/shared/context/detach-compile-context.tsx

@@ -9,7 +9,9 @@ export const DetachCompileContext = createContext<CompileContext | undefined>(
   undefined
 )
 
-export const DetachCompileProvider: FC = ({ children }) => {
+export const DetachCompileProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const localCompileContext = useLocalCompileContext()
   if (!localCompileContext) {
     throw new Error(

services/web/frontend/js/shared/context/detach-context.tsx

@@ -40,7 +40,7 @@ export const detachChannel =
     ? new BroadcastChannel(detachChannelId)
     : undefined
 
-export const DetachProvider: FC = ({ children }) => {
+export const DetachProvider: FC<React.PropsWithChildren> = ({ children }) => {
   const [lastDetachedConnectedAt, setLastDetachedConnectedAt] = useState<Date>()
   const [role, setRole] = useState(() => getMeta('ol-detachRole') || null)
   const {

services/web/frontend/js/shared/context/editor-context.tsx

@@ -61,7 +61,7 @@ export const EditorContext = createContext<
   | undefined
 >(undefined)
 
-export const EditorProvider: FC = ({ children }) => {
+export const EditorProvider: FC<React.PropsWithChildren> = ({ children }) => {
   const { socket } = useIdeContext()
   const { id: userId, featureUsage } = useUserContext()
   const { role } = useDetachContext()
@@ -125,7 +125,7 @@ export const EditorProvider: FC = ({ children }) => {
   )
 
   const deactivateTutorial = useCallback(
-    tutorialKey => {
+    (tutorialKey: string) => {
       setInactiveTutorials([...inactiveTutorials, tutorialKey])
     },
     [inactiveTutorials]

services/web/frontend/js/shared/context/file-tree-data-context.tsx

@@ -176,7 +176,9 @@ export function useFileTreeData() {
   return context
 }
 
-export const FileTreeDataProvider: FC = ({ children }) => {
+export const FileTreeDataProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const [project] = useScopeValue<Project>('project')
   const [currentDocumentId] = useScopeValue('editor.open_doc_id')
   const [, setOpenDocName] = useScopeValueSetterOnly('editor.open_doc_name')
@@ -227,14 +229,17 @@ export const FileTreeDataProvider: FC = ({ children }) => {
     })
   }, [rootFolder])
 
-  const dispatchCreateFolder = useCallback((parentFolderId, entity) => {
-    entity.type = 'folder'
-    dispatch({
-      type: ACTION_TYPES.CREATE,
-      parentFolderId,
-      entity,
-    })
-  }, [])
+  const dispatchCreateFolder = useCallback(
+    (parentFolderId: string, entity: any) => {
+      entity.type = 'folder'
+      dispatch({
+        type: ACTION_TYPES.CREATE,
+        parentFolderId,
+        entity,
+      })
+    },
+    []
+  )
 
   const dispatchCreateDoc = useCallback(
     (parentFolderId: string, entity: any) => {

services/web/frontend/js/shared/context/ide-context.tsx

@@ -15,11 +15,13 @@ type IdeContextValue = Ide & {
 
 export const IdeContext = createContext<IdeContextValue | undefined>(undefined)
 
-export const IdeProvider: FC<{
-  ide: Ide
-  scopeStore: ScopeValueStore
-  scopeEventEmitter: ScopeEventEmitter
-}> = ({ ide, scopeStore, scopeEventEmitter, children }) => {
+export const IdeProvider: FC<
+  React.PropsWithChildren<{
+    ide: Ide
+    scopeStore: ScopeValueStore
+    scopeEventEmitter: ScopeEventEmitter
+  }>
+> = ({ ide, scopeStore, scopeEventEmitter, children }) => {
   /**
    * Expose scopeStore via `window.overleaf.unstable.store`, so it can be accessed by external extensions.
    *

services/web/frontend/js/shared/context/layout-context.tsx

@@ -71,7 +71,7 @@ function setLayoutInLocalStorage(pdfLayout: IdeLayout) {
   )
 }
 
-export const LayoutProvider: FC = ({ children }) => {
+export const LayoutProvider: FC<React.PropsWithChildren> = ({ children }) => {
   // what to show in the "flat" view (editor or pdf)
   const [view, _setView] = useScopeValue<IdeView | null>('ui.view')
   const [openFile] = useScopeValue<BinaryFile | null>('openFile')
@@ -139,8 +139,8 @@ export const LayoutProvider: FC = ({ children }) => {
   useEventListener(
     'ui.toggle-left-menu',
     useCallback(
-      event => {
-        setLeftMenuShown((event as CustomEvent<boolean>).detail)
+      (event: CustomEvent<boolean>) => {
+        setLeftMenuShown(event.detail)
       },
       [setLeftMenuShown]
     )

services/web/frontend/js/shared/context/local-compile-context.tsx

@@ -118,7 +118,9 @@ export const LocalCompileContext = createContext<CompileContext | undefined>(
   undefined
 )
 
-export const LocalCompileProvider: FC = ({ children }) => {
+export const LocalCompileProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const { hasPremiumCompile, isProjectOwner } = useEditorContext()
   const { openDocWithId, openDocs, currentDocument } = useEditorManagerContext()
   const { role } = useDetachContext()
@@ -296,7 +298,7 @@ export const LocalCompileProvider: FC = ({ children }) => {
   }, [compiling])
 
   const _buildLogEntryAnnotations = useCallback(
-    entries =>
+    (entries: any) =>
       buildLogEntryAnnotations(entries, fileTreeData, lastCompileRootDocId),
     [fileTreeData, lastCompileRootDocId]
   )
@@ -686,7 +688,7 @@ export const LocalCompileProvider: FC = ({ children }) => {
 
   // start a compile manually
   const startCompile = useCallback(
-    options => {
+    (options: any) => {
       setCompiledOnce(true)
       compiler.compile(options)
     },
@@ -714,7 +716,7 @@ export const LocalCompileProvider: FC = ({ children }) => {
   }, [compiler])
 
   const syncToEntry = useCallback(
-    (entry, keepCurrentView = false) => {
+    (entry: any, keepCurrentView = false) => {
       const result = findEntityByPath(entry.file)
 
       if (result && result.type === 'doc') {

services/web/frontend/js/shared/context/nestable-dropdown-context.tsx

@@ -10,10 +10,9 @@ export const NestableDropdownContext = createContext<
   NestableDropdownContextType | undefined
 >(undefined)
 
-export const NestableDropdownContextProvider: FC<{ id: string }> = ({
-  id,
-  children,
-}) => {
+export const NestableDropdownContextProvider: FC<
+  React.PropsWithChildren<{ id: string }>
+> = ({ id, children }) => {
   const [selected, setSelected] = useState<string | null>(null)
   return (
     <NestableDropdownContext.Provider

services/web/frontend/js/shared/context/project-context.tsx

@@ -27,7 +27,7 @@ const projectFallback = {
   features: {},
 }
 
-export const ProjectProvider: FC = ({ children }) => {
+export const ProjectProvider: FC<React.PropsWithChildren> = ({ children }) => {
   const [project] = useScopeValue('project')
   const joinedOnce = !!project
 

services/web/frontend/js/shared/context/split-test-context.tsx

@@ -10,7 +10,9 @@ export const SplitTestContext = createContext<
   | undefined
 >(undefined)
 
-export const SplitTestProvider: FC = ({ children }) => {
+export const SplitTestProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const value = useMemo(
     () => ({
       splitTestVariants: getMeta('ol-splitTestVariants') || {},

services/web/frontend/js/shared/context/user-context.tsx

@@ -6,7 +6,7 @@ export const UserContext = createContext<User | LoggedOutUser | undefined>(
   undefined
 )
 
-export const UserProvider: FC = ({ children }) => {
+export const UserProvider: FC<React.PropsWithChildren> = ({ children }) => {
   const user = useMemo(() => getMeta('ol-user'), [])
 
   return <UserContext.Provider value={user}>{children}</UserContext.Provider>

services/web/frontend/js/shared/context/user-settings-context.tsx

@@ -51,7 +51,9 @@ export const UserSettingsContext = createContext<
   UserSettingsContextValue | undefined
 >(undefined)
 
-export const UserSettingsProvider: FC = ({ children }) => {
+export const UserSettingsProvider: FC<React.PropsWithChildren> = ({
+  children,
+}) => {
   const [userSettings, setUserSettings] = useState<UserSettings>(
     () => getMeta('ol-userSettings') || defaultSettings
   )