feat: use custom hook useIsRightPanelShowing

in functional components

ts/components/conversation/header/ConversationHeaderTitle.tsx

@@ -1,9 +1,9 @@
 import { isNumber } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { useIsRightPanelShowing } from '../../../hooks/useUI';
 import { closeRightPanel, openRightPanel } from '../../../state/ducks/conversations';
 import { resetRightOverlayMode, setRightOverlayMode } from '../../../state/ducks/section';
-import { isRightPanelShowing } from '../../../state/selectors/conversations';
 import {
   useSelectedConversationDisappearingMode,
   useSelectedExpireTimer,
@@ -12,9 +12,9 @@ import {
   useSelectedIsNoteToSelf,
   useSelectedIsPublic,
   useSelectedMembers,
+  useSelectedNicknameOrProfileNameOrShortenedPubkey,
   useSelectedNotificationSetting,
   useSelectedSubscriberCount,
-  useSelectedNicknameOrProfileNameOrShortenedPubkey,
 } from '../../../state/selectors/selectedConversation';
 import { ExpirationTimerOptions } from '../../../util/expiringMessages';
 import { ConversationHeaderSubtitle } from './ConversationHeaderSubtitle';
@@ -36,7 +36,7 @@ export const ConversationHeaderTitle = () => {
   const convoName = useSelectedNicknameOrProfileNameOrShortenedPubkey();
 
   const notificationSetting = useSelectedNotificationSetting();
-  const isRightPanelOn = useSelector(isRightPanelShowing);
+  const isRightPanelOn = useIsRightPanelShowing();
   const subscriberCount = useSelectedSubscriberCount();
 
   const isPublic = useSelectedIsPublic();

ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx

@@ -2,12 +2,13 @@ import { compact, flatten, isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
 
 // tslint:disable-next-line: no-submodule-imports
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import useInterval from 'react-use/lib/useInterval';
 import styled from 'styled-components';
 import { Data } from '../../../../data/data';
 import { SessionIconButton } from '../../../icon';
 
+import { useIsRightPanelShowing } from '../../../../hooks/useUI';
 import {
   deleteAllMessagesByConvoIdWithConfirmation,
   showAddModeratorsByConvoId,
@@ -20,7 +21,6 @@ import {
 import { Constants } from '../../../../session';
 import { closeRightPanel } from '../../../../state/ducks/conversations';
 import { setRightOverlayMode } from '../../../../state/ducks/section';
-import { isRightPanelShowing } from '../../../../state/selectors/conversations';
 import {
   useSelectedConversationKey,
   useSelectedDisplayNameInProfile,
@@ -210,7 +210,7 @@ export const OverlayRightPanelSettings = () => {
 
   const selectedConvoKey = useSelectedConversationKey();
   const dispatch = useDispatch();
-  const isShowing = useSelector(isRightPanelShowing);
+  const isShowing = useIsRightPanelShowing();
   const subscriberCount = useSelectedSubscriberCount();
 
   const isActive = useSelectedIsActive();

ts/hooks/useUI.ts

@@ -0,0 +1,6 @@
+import { useSelector } from 'react-redux';
+import { isRightPanelShowing } from '../state/selectors/conversations';
+
+export function useIsRightPanelShowing(): boolean {
+  return useSelector(isRightPanelShowing);
+}

ts/state/selectors/conversations.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 import { createSelector } from '@reduxjs/toolkit';
-import { filter, isEmpty, isNumber, pick, sortBy, toNumber, isFinite } from 'lodash';
+import { filter, isEmpty, isFinite, isNumber, pick, sortBy, toNumber } from 'lodash';
 
 import {
   ConversationLookupType,