diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-tabs.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-tabs.tsx index 6eb92fe953..b7a1709b4d 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-tabs.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-tabs.tsx @@ -1,13 +1,16 @@ -import { Dispatch, FC, memo, SetStateAction } from 'react' +import { FC, memo } from 'react' import classnames from 'classnames' -import { SubView } from '../components/review-panel' import MaterialIcon from '@/shared/components/material-icon' import { useTranslation } from 'react-i18next' +import { + useReviewPanelViewActionsContext, + useReviewPanelViewContext, +} from '../context/review-panel-view-context' + +const ReviewPanelTabs: FC = () => { + const subView = useReviewPanelViewContext() + const { setView: setSubView } = useReviewPanelViewActionsContext() -const ReviewPanelTabs: FC<{ - subView: SubView - setSubView: Dispatch> -}> = ({ subView, setSubView }) => { const { t } = useTranslation() return ( diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel.tsx index e905954fba..72250fda24 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel.tsx @@ -1,15 +1,15 @@ -import { FC, memo, useMemo, useState } from 'react' +import { FC, memo, useMemo } from 'react' import ReviewPanelTabs from './review-panel-tabs' import ReviewPanelHeader from './review-panel-header' import ReviewPanelCurrentFile from './review-panel-current-file' import { ReviewPanelOverview } from './review-panel-overview' import classnames from 'classnames' import { useReviewPanelStyles } from '@/features/review-panel-new/hooks/use-review-panel-styles' - -export type SubView = 'cur_file' | 'overview' +import { useReviewPanelViewContext } from '../context/review-panel-view-context' const ReviewPanel: FC<{ mini?: boolean }> = ({ mini = false }) => { - const [choosenSubView, setSubView] = useState('cur_file') + const choosenSubView = useReviewPanelViewContext() + const activeSubView = useMemo( () => (mini ? 'cur_file' : choosenSubView), [choosenSubView, mini] @@ -31,7 +31,7 @@ const ReviewPanel: FC<{ mini?: boolean }> = ({ mini = false }) => { {activeSubView === 'overview' && }
- +
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx b/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx index d472409d72..6bcd80d0dc 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx @@ -13,6 +13,8 @@ import { import { getTooltip } from '@codemirror/view' import useViewerPermissions from '@/shared/hooks/use-viewer-permissions' import usePreviousValue from '@/shared/hooks/use-previous-value' +import { useLayoutContext } from '@/shared/context/layout-context' +import { useReviewPanelViewActionsContext } from '../context/review-panel-view-context' const ReviewTooltipMenu: FC = () => { const state = useCodeMirrorStateContext() @@ -51,13 +53,12 @@ const ReviewTooltipMenuContent: FC<{ const { t } = useTranslation() const view = useCodeMirrorViewContext() const state = useCodeMirrorStateContext() + const { setReviewPanelOpen } = useLayoutContext() + const { setView } = useReviewPanelViewActionsContext() const handleClick = () => { - window.dispatchEvent( - new CustomEvent<{ isOpen: boolean }>('set-review-panel-open', { - detail: { isOpen: true }, - }) - ) + setReviewPanelOpen(true) + setView('cur_file') view.dispatch({ effects: buildAddNewCommentRangeEffect(state.selection.main), diff --git a/services/web/frontend/js/features/review-panel-new/context/review-panel-providers.tsx b/services/web/frontend/js/features/review-panel-new/context/review-panel-providers.tsx index c09aba32b2..4aef7c4cc0 100644 --- a/services/web/frontend/js/features/review-panel-new/context/review-panel-providers.tsx +++ b/services/web/frontend/js/features/review-panel-new/context/review-panel-providers.tsx @@ -4,6 +4,7 @@ import { ChangesUsersProvider } from './changes-users-context' import { TrackChangesStateProvider } from './track-changes-state-context' import { ThreadsProvider } from './threads-context' import { isSplitTestEnabled } from '@/utils/splitTestUtils' +import { ReviewPanelViewProvider } from './review-panel-view-context' export const ReviewPanelProviders: FC = ({ children }) => { if (!isSplitTestEnabled('review-panel-redesign')) { @@ -11,12 +12,14 @@ export const ReviewPanelProviders: FC = ({ children }) => { } return ( - - - - {children} - - - + + + + + {children} + + + + ) } diff --git a/services/web/frontend/js/features/review-panel-new/context/review-panel-view-context.tsx b/services/web/frontend/js/features/review-panel-new/context/review-panel-view-context.tsx new file mode 100644 index 0000000000..7305c68fc0 --- /dev/null +++ b/services/web/frontend/js/features/review-panel-new/context/review-panel-view-context.tsx @@ -0,0 +1,54 @@ +import { + createContext, + Dispatch, + FC, + SetStateAction, + useContext, + useMemo, + useState, +} from 'react' + +export type View = 'cur_file' | 'overview' + +export const ReviewPanelViewContext = createContext('cur_file') + +type ViewActions = { + setView: Dispatch> +} + +const ReviewPanelViewActionsContext = createContext( + undefined +) + +export const ReviewPanelViewProvider: FC = ({ children }) => { + const [view, setView] = useState('cur_file') + + const actions = useMemo( + () => ({ + setView, + }), + [setView] + ) + + return ( + + + {children} + + + ) +} + +export const useReviewPanelViewContext = () => { + return useContext(ReviewPanelViewContext) +} + +export const useReviewPanelViewActionsContext = () => { + const context = useContext(ReviewPanelViewActionsContext) + if (!context) { + throw new Error( + 'useViewActionsContext is only available inside ViewProvider' + ) + } + return context +} diff --git a/services/web/frontend/js/shared/context/layout-context.tsx b/services/web/frontend/js/shared/context/layout-context.tsx index 5e1606a476..3736419a56 100644 --- a/services/web/frontend/js/shared/context/layout-context.tsx +++ b/services/web/frontend/js/shared/context/layout-context.tsx @@ -16,7 +16,6 @@ import { DetachRole } from './detach-context' import { debugConsole } from '@/utils/debugging' import { BinaryFile } from '@/features/file-view/types/binary-file' import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter' -import useEventListener from '../hooks/use-event-listener' export type IdeLayout = 'sideBySide' | 'flat' export type IdeView = 'editor' | 'file' | 'pdf' | 'history' @@ -166,17 +165,6 @@ export const LayoutProvider: FC = ({ children }) => { changeLayout, ]) - const handleSetReviewPanelOpenEvent = useCallback( - (e: Event) => { - const event = e as CustomEvent<{ isOpen: boolean }> - const { isOpen } = event.detail - setReviewPanelOpen(isOpen) - }, - [setReviewPanelOpen] - ) - - useEventListener('set-review-panel-open', handleSetReviewPanelOpenEvent) - const value = useMemo( () => ({ reattach,