From de94d2e64a6374c1cdd2cd4613097e506f84e795 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 14 Oct 2022 14:58:44 +1100
Subject: [PATCH] fix: pr review - create selectors for isDarkTheme and isLight
 Theme

---
 ts/components/conversation/SessionLastSeenIndicator.tsx       | 4 ++--
 .../conversation/message/reactions/ReactionPopup.tsx          | 4 ++--
 ts/components/dialog/BanOrUnbanUserDialog.tsx                 | 4 ++--
 ts/components/dialog/ModeratorsAddDialog.tsx                  | 4 ++--
 ts/state/selectors/theme.ts                                   | 4 ++++
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx
index 3c694d2ac..4036f07e6 100644
--- a/ts/components/conversation/SessionLastSeenIndicator.tsx
+++ b/ts/components/conversation/SessionLastSeenIndicator.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useLayoutEffect } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { getQuotedMessageToAnimate } from '../../state/selectors/conversations';
-import { getTheme } from '../../state/selectors/theme';
+import { isDarkTheme } from '../../state/selectors/theme';
 import { ScrollToLoadedMessageContext } from './SessionMessagesListContainer';
 
 const LastSeenBar = styled.div`
@@ -48,7 +48,7 @@ export const SessionLastSeenIndicator = (props: {
   didScroll: boolean;
   setDidScroll: (scroll: boolean) => void;
 }) => {
-  const darkMode = useSelector(getTheme).includes('dark');
+  const darkMode = useSelector(isDarkTheme);
   // if this unread-indicator is not unique it's going to cause issues
   const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate);
   const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext);
diff --git a/ts/components/conversation/message/reactions/ReactionPopup.tsx b/ts/components/conversation/message/reactions/ReactionPopup.tsx
index e35d27e08..42084f254 100644
--- a/ts/components/conversation/message/reactions/ReactionPopup.tsx
+++ b/ts/components/conversation/message/reactions/ReactionPopup.tsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { Data } from '../../../../data/data';
 import { PubKey } from '../../../../session/types/PubKey';
-import { getTheme } from '../../../../state/selectors/theme';
+import { isDarkTheme } from '../../../../state/selectors/theme';
 import { nativeEmojiData } from '../../../../util/emoji';
 
 export type TipPosition = 'center' | 'left' | 'right';
@@ -96,7 +96,7 @@ const generateContactsString = async (
 };
 
 const Contacts = (contacts: Array<string>, count: number) => {
-  const darkMode = useSelector(getTheme).includes('dark');
+  const darkMode = useSelector(isDarkTheme);
 
   if (!Boolean(contacts?.length > 0)) {
     return;
diff --git a/ts/components/dialog/BanOrUnbanUserDialog.tsx b/ts/components/dialog/BanOrUnbanUserDialog.tsx
index e22162df5..02ed38b93 100644
--- a/ts/components/dialog/BanOrUnbanUserDialog.tsx
+++ b/ts/components/dialog/BanOrUnbanUserDialog.tsx
@@ -17,7 +17,7 @@ import {
   sogsV3UnbanUser,
 } from '../../session/apis/open_group_api/sogsv3/sogsV3BanUnban';
 import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput';
-import { getTheme } from '../../state/selectors/theme';
+import { isDarkTheme } from '../../state/selectors/theme';
 
 // tslint:disable: use-simple-attributes
 
@@ -67,7 +67,7 @@ export const BanOrUnBanUserDialog = (props: {
   const { i18n } = window;
   const isBan = banType === 'ban';
   const dispatch = useDispatch();
-  const darkMode = useSelector(getTheme).includes('dark');
+  const darkMode = useSelector(isDarkTheme);
   const convo = getConversationController().get(conversationId);
   const inputRef = useRef(null);
 
diff --git a/ts/components/dialog/ModeratorsAddDialog.tsx b/ts/components/dialog/ModeratorsAddDialog.tsx
index 34d058057..0aa694a5f 100644
--- a/ts/components/dialog/ModeratorsAddDialog.tsx
+++ b/ts/components/dialog/ModeratorsAddDialog.tsx
@@ -10,7 +10,7 @@ import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { sogsV3AddAdmin } from '../../session/apis/open_group_api/sogsv3/sogsV3AddRemoveMods';
 import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput';
-import { getTheme } from '../../state/selectors/theme';
+import { isDarkTheme } from '../../state/selectors/theme';
 
 type Props = {
   conversationId: string;
@@ -20,7 +20,7 @@ export const AddModeratorsDialog = (props: Props) => {
   const { conversationId } = props;
 
   const dispatch = useDispatch();
-  const darkMode = useSelector(getTheme).includes('dark');
+  const darkMode = useSelector(isDarkTheme);
   const convo = getConversationController().get(conversationId);
 
   const [inputBoxValue, setInputBoxValue] = useState('');
diff --git a/ts/state/selectors/theme.ts b/ts/state/selectors/theme.ts
index 5f24e5471..1cfdcc7fc 100644
--- a/ts/state/selectors/theme.ts
+++ b/ts/state/selectors/theme.ts
@@ -2,3 +2,7 @@ import { ThemeStateType } from '../../themes/constants/colors';
 import { StateType } from '../reducer';
 
 export const getTheme = (state: StateType): ThemeStateType => state.theme;
+
+export const isDarkTheme = (state: StateType): boolean => state.theme.includes('dark');
+
+export const isLightTheme = (state: StateType): boolean => state.theme.includes('light');