feat: use custom hook useRightOverlayMode

ts/components/conversation/right-panel/RightPanel.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import { useSelector } from 'react-redux';
+import { useRightOverlayMode } from '../../../hooks/useUI';
-import { getRightOverlayMode } from '../../../state/selectors/section';
-import { OverlayDisappearingMessages } from './overlay/disappearing-messages/OverlayDisappearingMessages';
 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':

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;
+  });
+}

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;
-};