diff --git a/ts/components/conversation/right-panel/RightPanel.tsx b/ts/components/conversation/right-panel/RightPanel.tsx index d2a23ac00..56afed854 100644 --- a/ts/components/conversation/right-panel/RightPanel.tsx +++ b/ts/components/conversation/right-panel/RightPanel.tsx @@ -1,12 +1,11 @@ import React from 'react'; -import { useSelector } from 'react-redux'; -import { getRightOverlayMode } from '../../../state/selectors/section'; -import { OverlayDisappearingMessages } from './overlay/disappearing-messages/OverlayDisappearingMessages'; +import { useRightOverlayMode } from '../../../hooks/useUI'; import { OverlayRightPanelSettings } from './overlay/OverlayRightPanelSettings'; +import { OverlayDisappearingMessages } from './overlay/disappearing-messages/OverlayDisappearingMessages'; const ClosableOverlay = () => { - const rightOverlayMode = useSelector(getRightOverlayMode); + const rightOverlayMode = useRightOverlayMode(); switch (rightOverlayMode) { case 'disappearing-messages': diff --git a/ts/hooks/useUI.ts b/ts/hooks/useUI.ts index e1816ac8b..34dfc8de9 100644 --- a/ts/hooks/useUI.ts +++ b/ts/hooks/useUI.ts @@ -1,6 +1,14 @@ import { useSelector } from 'react-redux'; +import { RightOverlayMode } from '../state/ducks/section'; +import { StateType } from '../state/reducer'; import { isRightPanelShowing } from '../state/selectors/conversations'; export function useIsRightPanelShowing(): boolean { return useSelector(isRightPanelShowing); } + +export function useRightOverlayMode(): RightOverlayMode | undefined { + return useSelector((state: StateType): RightOverlayMode | undefined => { + return state.section.rightOverlayMode; + }); +} diff --git a/ts/state/selectors/section.ts b/ts/state/selectors/section.ts index cc42ce1d4..07cc2f042 100644 --- a/ts/state/selectors/section.ts +++ b/ts/state/selectors/section.ts @@ -1,8 +1,8 @@ import { createSelector } from '@reduxjs/toolkit'; -import { StateType } from '../reducer'; -import { OverlayMode, RightOverlayMode, SectionStateType, SectionType } from '../ducks/section'; import { SessionSettingCategory } from '../../components/settings/SessionSettings'; +import { OverlayMode, SectionStateType, SectionType } from '../ducks/section'; +import { StateType } from '../reducer'; export const getSection = (state: StateType): SectionStateType => state.section; @@ -37,7 +37,3 @@ export const getIsMessageRequestOverlayShown = (state: StateType) => { return focusedSection === SectionType.Message && overlayMode === 'message-requests'; }; - -export const getRightOverlayMode = (state: StateType): RightOverlayMode | undefined => { - return state.section.rightOverlayMode; -};