github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Refactor review panel context (#17383)

Browse source 
GitOrigin-RevId: 23e7ff8632172ebd0bc544a2297d1d4179010832
This commit is contained in:
Alf Eaton 2024-03-07 10:43:42 +00:00 committed by Copybot
parent bd2c3a61f3
commit 749660e168
9 changed files with 66 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

19
services/web/frontend/js/features/ide-react/context/review-panel/review-panel-provider.tsx Normal file
View file

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

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

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

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

@ -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 ? (
<ReviewPanelReactIdeProvider>
<ReviewPanelView parentDomNode={view.scrollDOM} />
</ReviewPanelReactIdeProvider>
) : (
return (
<ReviewPanelProvider>
<ReviewPanelView parentDomNode={view.scrollDOM} />
</ReviewPanelProvider>
)
}
export default ReviewPanel
export default memo(ReviewPanel)

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

@ -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.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,

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

@ -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 (
<ReviewPanelValueContext.Provider value={values}>
<ReviewPanelUpdaterFnsContext.Provider value={updaterFns}>
{children}
</ReviewPanelUpdaterFnsContext.Provider>
</ReviewPanelValueContext.Provider>
)
}
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(

20
services/web/frontend/js/features/source-editor/context/review-panel/review-panel-provider.tsx Normal file
View file

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

2
services/web/frontend/js/shared/context/project-context.tsx
View file

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