From 457f28356bd0b82391c8b1bb31cc3a6a716364c3 Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Thu, 7 Mar 2024 10:43:42 +0000 Subject: [PATCH] Refactor review panel context (#17383) GitOrigin-RevId: 23e7ff8632172ebd0bc544a2297d1d4179010832 --- .../hooks/use-review-panel-state.ts | 9 ++--- .../review-panel/review-panel-context.tsx | 23 ----------- .../review-panel/review-panel-provider.tsx | 19 ++++++++++ .../review-panel/types/review-panel-state.ts | 11 ------ .../components/review-panel/review-panel.tsx | 25 ++++++------ .../hooks/use-angular-review-panel-state.ts | 9 ++--- .../review-panel/review-panel-context.tsx | 38 +++---------------- .../review-panel/review-panel-provider.tsx | 20 ++++++++++ .../js/shared/context/project-context.tsx | 2 +- 9 files changed, 66 insertions(+), 90 deletions(-) delete mode 100644 services/web/frontend/js/features/ide-react/context/review-panel/review-panel-context.tsx create mode 100644 services/web/frontend/js/features/ide-react/context/review-panel/review-panel-provider.tsx delete mode 100644 services/web/frontend/js/features/ide-react/context/review-panel/types/review-panel-state.ts create mode 100644 services/web/frontend/js/features/source-editor/context/review-panel/review-panel-provider.tsx diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts index 6059b852fe..82059ad3db 100644 --- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts +++ b/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( + const values = useMemo( () => ({ collapsed, commentThreads, @@ -1567,7 +1566,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde { ] ) - const updaterFns = useMemo( + const updaterFns = useMemo( () => ({ handleSetSubview, handleLayoutChange, diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/review-panel-context.tsx b/services/web/frontend/js/features/ide-react/context/review-panel/review-panel-context.tsx deleted file mode 100644 index 0c40aa036f..0000000000 --- a/services/web/frontend/js/features/ide-react/context/review-panel/review-panel-context.tsx +++ /dev/null @@ -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 ( - - - {children} - - - ) -} diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/review-panel-provider.tsx b/services/web/frontend/js/features/ide-react/context/review-panel/review-panel-provider.tsx new file mode 100644 index 0000000000..611ed0cb35 --- /dev/null +++ b/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 ( + + + {children} + + + ) +} + +export default ReviewPanelReactIdeProvider diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/types/review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/types/review-panel-state.ts deleted file mode 100644 index db33ee14a1..0000000000 --- a/services/web/frontend/js/features/ide-react/context/review-panel/types/review-panel-state.ts +++ /dev/null @@ -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 = - ReviewPanelStateReactIde['values'][T] - -// Getter for stable functions -export type UpdaterFn = - ReviewPanelStateReactIde['updaterFns'][T] diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx index 7fb9e28fcc..b2e2ff35af 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx +++ b/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 { - ReviewPanelProvider, - useReviewPanelValueContext, -} from '../../context/review-panel/review-panel-context' -import { ReviewPanelReactIdeProvider } from '@/features/ide-react/context/review-panel/review-panel-context' +import { useReviewPanelValueContext } from '../../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 ( ) } -export default ReviewPanel +export default memo(ReviewPanel) diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts b/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts index e74c06eb5c..ebbc1469eb 100644 --- a/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts +++ b/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 * as ReviewPanel from '../types/review-panel-state' +import type * 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.subView' ) @@ -155,7 +154,7 @@ function useAngularReviewPanelState(): ReviewPanelState { const [layoutSuspended, setLayoutSuspended] = useState(false) const [unsavedComment, setUnsavedComment] = useState('') - const values = useMemo( + const values = useMemo( () => ({ collapsed, commentThreads, @@ -212,7 +211,7 @@ function useAngularReviewPanelState(): ReviewPanelState { ] ) - const updaterFns = useMemo( + const updaterFns = useMemo( () => ({ handleSetSubview, handleLayoutChange, diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/review-panel-context.tsx b/services/web/frontend/js/features/source-editor/context/review-panel/review-panel-context.tsx index 183d112e6a..79cf6f18df 100644 --- a/services/web/frontend/js/features/source-editor/context/review-panel/review-panel-context.tsx +++ b/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 { - 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' +import type { 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 ( - - - {children} - - - ) -} - export function useReviewPanelValueContext() { - const contextAngularIde = useContext(ReviewPanelValueContext) - const contextReactIde = useContext(ReviewPanelReactIdeValueContext) - const { isReactIde } = useIdeContext() - const context = isReactIde ? contextReactIde : contextAngularIde + const context = useContext(ReviewPanelValueContext) if (!context) { throw new Error( @@ -46,10 +21,7 @@ export function useReviewPanelValueContext() { } export function useReviewPanelUpdaterFnsContext() { - const contextAngularIde = useContext(ReviewPanelUpdaterFnsContext) - const contextReactIde = useContext(ReviewPanelReactIdeUpdaterFnsContext) - const { isReactIde } = useIdeContext() - const context = isReactIde ? contextReactIde : contextAngularIde + const context = useContext(ReviewPanelUpdaterFnsContext) if (!context) { throw new Error( diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/review-panel-provider.tsx b/services/web/frontend/js/features/source-editor/context/review-panel/review-panel-provider.tsx new file mode 100644 index 0000000000..7003dd2fef --- /dev/null +++ b/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 ( + + + {children} + + + ) +} + +export default ReviewPanelProvider diff --git a/services/web/frontend/js/shared/context/project-context.tsx b/services/web/frontend/js/shared/context/project-context.tsx index 7965bdfabc..36f79b45b4 100644 --- a/services/web/frontend/js/shared/context/project-context.tsx +++ b/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< | {