Refactor review panel context (#17383)

GitOrigin-RevId: 23e7ff8632172ebd0bc544a2297d1d4179010832

services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts

@@ -28,7 +28,7 @@ import { useEditorContext } from '@/shared/context/editor-context'
 import { deleteJSON, getJSON, postJSON } from '@/infrastructure/fetch-json'
 import ColorManager from '@/ide/colors/ColorManager'
 import RangesTracker from '@overleaf/ranges-tracker'
-import * as ReviewPanel from '../types/review-panel-state'
+import type * as ReviewPanel from '@/features/source-editor/context/review-panel/types/review-panel-state'
 import {
   CommentId,
   ReviewPanelCommentThreadMessage,
@@ -39,7 +39,6 @@ import {
 } from '../../../../../../../types/review-panel/review-panel'
 import { UserId } from '../../../../../../../types/user'
 import { PublicAccessLevel } from '../../../../../../../types/public-access-level'
-import { ReviewPanelStateReactIde } from '../types/review-panel-state'
 import {
   DeepReadonly,
   Entries,
@@ -125,7 +124,7 @@ const formatComment = (
   return commentTyped
 }
 
-function useReviewPanelState(): ReviewPanelStateReactIde {
+function useReviewPanelState(): ReviewPanel.ReviewPanelState {
   const { t } = useTranslation()
   const { reviewPanelOpen, setReviewPanelOpen, setMiniReviewPanelVisible } =
     useLayoutContext()
@@ -1510,7 +1509,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     }
   }, [users])
 
-  const values = useMemo<ReviewPanelStateReactIde['values']>(
+  const values = useMemo<ReviewPanel.ReviewPanelState['values']>(
     () => ({
       collapsed,
       commentThreads,
@@ -1567,7 +1566,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     ]
   )
 
-  const updaterFns = useMemo<ReviewPanelStateReactIde['updaterFns']>(
+  const updaterFns = useMemo<ReviewPanel.ReviewPanelState['updaterFns']>(
     () => ({
       handleSetSubview,
       handleLayoutChange,

services/web/frontend/js/features/ide-react/context/review-panel/review-panel-context.tsx

@@ -1,23 +0,0 @@
-import { createContext } from 'react'
-import useReviewPanelState from '@/features/ide-react/context/review-panel/hooks/use-review-panel-state'
-import { ReviewPanelStateReactIde } from '@/features/ide-react/context/review-panel/types/review-panel-state'
-
-export const ReviewPanelReactIdeValueContext = createContext<
-  ReviewPanelStateReactIde['values'] | undefined
->(undefined)
-
-export const ReviewPanelReactIdeUpdaterFnsContext = createContext<
-  ReviewPanelStateReactIde['updaterFns'] | undefined
->(undefined)
-
-export const ReviewPanelReactIdeProvider: React.FC = ({ children }) => {
-  const { values, updaterFns } = useReviewPanelState()
-
-  return (
-    <ReviewPanelReactIdeValueContext.Provider value={values}>
-      <ReviewPanelReactIdeUpdaterFnsContext.Provider value={updaterFns}>
-        {children}
-      </ReviewPanelReactIdeUpdaterFnsContext.Provider>
-    </ReviewPanelReactIdeValueContext.Provider>
-  )
-}

services/web/frontend/js/features/ide-react/context/review-panel/review-panel-provider.tsx

@@ -0,0 +1,19 @@
+import useReviewPanelState from '@/features/ide-react/context/review-panel/hooks/use-review-panel-state'
+import {
+  ReviewPanelUpdaterFnsContext,
+  ReviewPanelValueContext,
+} from '@/features/source-editor/context/review-panel/review-panel-context'
+
+const ReviewPanelReactIdeProvider: React.FC = ({ children }) => {
+  const { values, updaterFns } = useReviewPanelState()
+
+  return (
+    <ReviewPanelValueContext.Provider value={values}>
+      <ReviewPanelUpdaterFnsContext.Provider value={updaterFns}>
+        {children}
+      </ReviewPanelUpdaterFnsContext.Provider>
+    </ReviewPanelValueContext.Provider>
+  )
+}
+
+export default ReviewPanelReactIdeProvider

services/web/frontend/js/features/ide-react/context/review-panel/types/review-panel-state.ts

@@ -1,11 +0,0 @@
-import { ReviewPanelState } from '@/features/source-editor/context/review-panel/types/review-panel-state'
-
-export interface ReviewPanelStateReactIde extends ReviewPanelState {}
-
-// Getter for values
-export type Value<T extends keyof ReviewPanelStateReactIde['values']> =
-  ReviewPanelStateReactIde['values'][T]
-
-// Getter for stable functions
-export type UpdaterFn<T extends keyof ReviewPanelStateReactIde['updaterFns']> =
-  ReviewPanelStateReactIde['updaterFns'][T]

services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx

@@ -3,15 +3,13 @@ import EditorWidgets from './editor-widgets/editor-widgets'
 import CurrentFileContainer from './current-file-container'
 import OverviewContainer from './overview-container'
 import { useCodeMirrorViewContext } from '../codemirror-editor'
-import {
+import { useReviewPanelValueContext } from '../../context/review-panel/review-panel-context'
-  ReviewPanelProvider,
-  useReviewPanelValueContext,
-} from '../../context/review-panel/review-panel-context'
-import { ReviewPanelReactIdeProvider } from '@/features/ide-react/context/review-panel/review-panel-context'
 import { isCurrentFileView } from '../../utils/sub-view'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { useIdeContext } from '@/shared/context/ide-context'
 import classnames from 'classnames'
+import { lazy, memo } from 'react'
+import getMeta from '@/utils/meta'
 
 type ReviewPanelViewProps = {
   parentDomNode: Element
@@ -58,19 +56,22 @@ function ReviewPanelView({ parentDomNode }: ReviewPanelViewProps) {
   )
 }
 
+const isReactIde: boolean = getMeta('ol-idePageReact')
+
+const ReviewPanelProvider = lazy(() =>
+  isReactIde
+    ? import('@/features/ide-react/context/review-panel/review-panel-provider')
+    : import('../../context/review-panel/review-panel-provider')
+)
+
 function ReviewPanel() {
   const view = useCodeMirrorViewContext()
-  const { isReactIde } = useIdeContext()
 
-  return isReactIde ? (
+  return (
-    <ReviewPanelReactIdeProvider>
-      <ReviewPanelView parentDomNode={view.scrollDOM} />
-    </ReviewPanelReactIdeProvider>
-  ) : (
     <ReviewPanelProvider>
       <ReviewPanelView parentDomNode={view.scrollDOM} />
     </ReviewPanelProvider>
   )
 }
 
-export default ReviewPanel
+export default memo(ReviewPanel)

services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts

@@ -2,8 +2,7 @@ import { useState, useMemo, useCallback } from 'react'
 import useScopeValue from '../../../../../shared/hooks/use-scope-value'
 import useLayoutToLeft from '@/features/ide-react/context/review-panel/hooks/useLayoutToLeft'
 import { sendMB } from '../../../../../infrastructure/event-tracking'
-import { ReviewPanelState } from '../types/review-panel-state'
+import type * as ReviewPanel from '../types/review-panel-state'
-import * as ReviewPanel from '../types/review-panel-state'
 import {
   SubView,
   ThreadId,
@@ -11,7 +10,7 @@ import {
 import { DocId } from '../../../../../../../types/project-settings'
 import { dispatchReviewPanelLayout as handleLayoutChange } from '../../../extensions/changes/change-manager'
 
-function useAngularReviewPanelState(): ReviewPanelState {
+function useAngularReviewPanelState(): ReviewPanel.ReviewPanelState {
   const [subView, setSubView] = useScopeValue<ReviewPanel.Value<'subView'>>(
     'reviewPanel.subView'
   )
@@ -155,7 +154,7 @@ function useAngularReviewPanelState(): ReviewPanelState {
   const [layoutSuspended, setLayoutSuspended] = useState(false)
   const [unsavedComment, setUnsavedComment] = useState('')
 
-  const values = useMemo<ReviewPanelState['values']>(
+  const values = useMemo<ReviewPanel.ReviewPanelState['values']>(
     () => ({
       collapsed,
       commentThreads,
@@ -212,7 +211,7 @@ function useAngularReviewPanelState(): ReviewPanelState {
     ]
   )
 
-  const updaterFns = useMemo<ReviewPanelState['updaterFns']>(
+  const updaterFns = useMemo<ReviewPanel.ReviewPanelState['updaterFns']>(
     () => ({
       handleSetSubview,
       handleLayoutChange,

services/web/frontend/js/features/source-editor/context/review-panel/review-panel-context.tsx

@@ -1,41 +1,16 @@
 import { createContext, useContext } from 'react'
-import useAngularReviewPanelState from './hooks/use-angular-review-panel-state'
+import type { ReviewPanelState } from './types/review-panel-state'
-import {
-  ReviewPanelReactIdeUpdaterFnsContext,
-  ReviewPanelReactIdeValueContext,
-} from '@/features/ide-react/context/review-panel/review-panel-context'
-import { useIdeContext } from '@/shared/context/ide-context'
-import { ReviewPanelState } from './types/review-panel-state'
 
-const ReviewPanelValueContext = createContext<
+export const ReviewPanelValueContext = createContext<
   ReviewPanelState['values'] | undefined
 >(undefined)
 
-const ReviewPanelUpdaterFnsContext = createContext<
+export const ReviewPanelUpdaterFnsContext = createContext<
   ReviewPanelState['updaterFns'] | undefined
 >(undefined)
 
-type ReviewPanelProviderProps = {
-  children?: React.ReactNode
-}
-
-export function ReviewPanelProvider({ children }: ReviewPanelProviderProps) {
-  const { values, updaterFns } = useAngularReviewPanelState()
-
-  return (
-    <ReviewPanelValueContext.Provider value={values}>
-      <ReviewPanelUpdaterFnsContext.Provider value={updaterFns}>
-        {children}
-      </ReviewPanelUpdaterFnsContext.Provider>
-    </ReviewPanelValueContext.Provider>
-  )
-}
-
 export function useReviewPanelValueContext() {
-  const contextAngularIde = useContext(ReviewPanelValueContext)
+  const context = useContext(ReviewPanelValueContext)
-  const contextReactIde = useContext(ReviewPanelReactIdeValueContext)
-  const { isReactIde } = useIdeContext()
-  const context = isReactIde ? contextReactIde : contextAngularIde
 
   if (!context) {
     throw new Error(
@@ -46,10 +21,7 @@ export function useReviewPanelValueContext() {
 }
 
 export function useReviewPanelUpdaterFnsContext() {
-  const contextAngularIde = useContext(ReviewPanelUpdaterFnsContext)
+  const context = useContext(ReviewPanelUpdaterFnsContext)
-  const contextReactIde = useContext(ReviewPanelReactIdeUpdaterFnsContext)
-  const { isReactIde } = useIdeContext()
-  const context = isReactIde ? contextReactIde : contextAngularIde
 
   if (!context) {
     throw new Error(

services/web/frontend/js/features/source-editor/context/review-panel/review-panel-provider.tsx

@@ -0,0 +1,20 @@
+import useAngularReviewPanelState from '@/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state'
+import { FC } from 'react'
+import {
+  ReviewPanelUpdaterFnsContext,
+  ReviewPanelValueContext,
+} from './review-panel-context'
+
+const ReviewPanelProvider: FC = ({ children }) => {
+  const { values, updaterFns } = useAngularReviewPanelState()
+
+  return (
+    <ReviewPanelValueContext.Provider value={values}>
+      <ReviewPanelUpdaterFnsContext.Provider value={updaterFns}>
+        {children}
+      </ReviewPanelUpdaterFnsContext.Provider>
+    </ReviewPanelValueContext.Provider>
+  )
+}
+
+export default ReviewPanelProvider

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

@@ -3,7 +3,7 @@ import useScopeValue from '../hooks/use-scope-value'
 import getMeta from '@/utils/meta'
 import { UserId } from '../../../../types/user'
 import { PublicAccessLevel } from '../../../../types/public-access-level'
-import * as ReviewPanel from '@/features/ide-react/context/review-panel/types/review-panel-state'
+import type * as ReviewPanel from '@/features/source-editor/context/review-panel/types/review-panel-state'
 
 const ProjectContext = createContext<
   | {