diff --git a/ts/components/conversation/header/ConversationHeaderTitle.tsx b/ts/components/conversation/header/ConversationHeaderTitle.tsx index dc5a19d33..c25a9d9c2 100644 --- a/ts/components/conversation/header/ConversationHeaderTitle.tsx +++ b/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(); diff --git a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx index feb0b8e91..598c92157 100644 --- a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx +++ b/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(); diff --git a/ts/hooks/useUI.ts b/ts/hooks/useUI.ts new file mode 100644 index 000000000..e1816ac8b --- /dev/null +++ b/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); +} diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 42df21273..c44f180be 100644 --- a/ts/state/selectors/conversations.ts +++ b/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,