fix: rerender loop of react list modal

update redux related libraries
and update imports to use the RTK ones

package.json

@@ -78,13 +78,12 @@
     "sedtoAppImage": "sed -i 's/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/\"target\": \"AppImage\"/g' package.json",
     "sedtoDeb": "sed -i 's/\"target\": \"AppImage\"/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/g' package.json",
     "ready": "yarn build-everything && yarn lint-full && yarn test",
-
     "postinstall": "yarn patch-package && yarn electron-builder install-app-deps && yarn rebuild-curve25519-js",
     "rebuild-curve25519-js": "cd node_modules/curve25519-js && yarn install && yarn build && cd ../../"
   },
   "dependencies": {
     "@emoji-mart/data": "1.0.2",
-    "@reduxjs/toolkit": "^1.4.0",
+    "@reduxjs/toolkit": "1.8.5",
     "abort-controller": "3.0.0",
     "auto-bind": "^4.0.0",
     "backbone": "1.3.3",
@@ -137,16 +136,15 @@
     "react-mentions": "^4.2.0",
     "react-portal": "^4.2.0",
     "react-qr-svg": "^2.2.1",
-    "react-redux": "7.2.1",
+    "react-redux": "8.0.4",
     "react-toastify": "^6.0.9",
     "react-use": "^17.2.1",
     "react-virtualized": "9.22.3",
     "read-last-lines-ts": "^1.2.1",
-    "redux": "4.0.1",
+    "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-persist": "^6.0.0",
     "redux-promise-middleware": "^6.1.2",
-    "reselect": "4.0.0",
     "rimraf": "2.6.2",
     "sanitize.css": "^12.0.1",
     "semver": "5.4.1",
@@ -186,7 +184,7 @@
     "@types/react-mentions": "^4.1.1",
     "@types/react-mic": "^12.4.1",
     "@types/react-portal": "^4.0.2",
-    "@types/react-redux": "7.1.9",
+    "@types/react-redux": "^7.1.24",
     "@types/react-virtualized": "9.18.12",
     "@types/redux-logger": "3.0.7",
     "@types/rimraf": "2.0.2",

ts/components/conversation/message/message-content/MessageAuthorText.tsx

@@ -5,7 +5,7 @@ import { MessageRenderingProps } from '../../../../models/messageType';
 import { PubKey } from '../../../../session/types';
 import {
   getMessageAuthorProps,
-  isGroupConversation,
+  getSelectedConversationIsGroup,
   isPublicGroupConversation,
 } from '../../../../state/selectors/conversations';
 import { Flex } from '../../../basic/Flex';
@@ -28,7 +28,7 @@ export const MessageAuthorText = (props: Props) => {
   const selected = useSelector(state => getMessageAuthorProps(state as any, props.messageId));
 
   const isPublic = useSelector(isPublicGroupConversation);
-  const isGroup = useSelector(isGroupConversation);
+  const isGroup = useSelector(getSelectedConversationIsGroup);
   if (!selected) {
     return null;
   }

ts/components/conversation/message/message-content/MessageReactions.tsx

@@ -9,6 +9,8 @@ import { nativeEmojiData } from '../../../../util/emoji';
 import { Reaction, ReactionProps } from '../reactions/Reaction';
 import { SessionIcon } from '../../../icon';
 import { useMessageReactsPropsById } from '../../../../hooks/useParamSelector';
+import { getSelectedConversationIsGroup } from '../../../../state/selectors/conversations';
+import { useSelector } from 'react-redux';
 
 export const popupXDefault = -81;
 export const popupYDefault = -90;
@@ -125,7 +127,7 @@ const ExpandedReactions = (props: ExpandReactionsProps): ReactElement => {
 
 export type MessageReactsSelectorProps = Pick<
   MessageRenderingProps,
-  'convoId' | 'conversationType' | 'isPublic' | 'serverId' | 'reacts' | 'sortedReacts'
+  'convoId' | 'serverId' | 'reacts' | 'sortedReacts'
 >;
 
 type Props = {
@@ -162,6 +164,8 @@ export const MessageReactions = (props: Props): ReactElement => {
 
   const msgProps = useMessageReactsPropsById(messageId);
 
+  const inGroup = useSelector(getSelectedConversationIsGroup);
+
   useEffect(() => {
     if (msgProps?.sortedReacts && !isEqual(reactions, msgProps?.sortedReacts)) {
       setReactions(msgProps?.sortedReacts);
@@ -176,8 +180,7 @@ export const MessageReactions = (props: Props): ReactElement => {
     return <></>;
   }
 
-  const { conversationType, sortedReacts } = msgProps;
-  const inGroup = conversationType === 'group';
+  const { sortedReacts } = msgProps;
 
   const reactLimit = 6;
 

ts/components/dialog/ReactListModal.tsx

@@ -1,6 +1,6 @@
 import { isEmpty, isEqual } from 'lodash';
 import React, { ReactElement, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { Data } from '../../data/data';
 import { useMessageReactsPropsById, useWeAreModerator } from '../../hooks/useParamSelector';
@@ -11,6 +11,7 @@ import {
   updateReactListModal,
   updateUserDetailsModal,
 } from '../../state/ducks/modalDialog';
+import { getSelectedConversationIsPublic } from '../../state/selectors/conversations';
 import { SortedReactionList } from '../../types/Reaction';
 import { nativeEmojiData } from '../../util/emoji';
 import { Reactions } from '../../util/reactions';
@@ -169,6 +170,7 @@ const StyledCountText = styled.p`
     color: var(--color-text);
   }
 `;
+// tslint:disable: use-simple-attributes
 
 const CountText = ({ count, emoji }: { count: number; emoji: string }) => {
   return (
@@ -226,6 +228,7 @@ export const ReactListModal = (props: Props): ReactElement => {
   const [senders, setSenders] = useState<Array<string>>([]);
 
   const msgProps = useMessageReactsPropsById(messageId);
+  const isPublic = useSelector(getSelectedConversationIsPublic);
   const weAreModerator = useWeAreModerator(msgProps?.convoId);
   const me = UserUtils.getOurPubKeyStrFromCache();
 
@@ -245,7 +248,8 @@ export const ReactListModal = (props: Props): ReactElement => {
     if (
       reactions &&
       reactions.length > 0 &&
-      (msgProps?.sortedReacts === [] || msgProps?.sortedReacts === undefined)
+      ((msgProps?.sortedReacts && msgProps.sortedReacts.length === 0) ||
+        msgProps?.sortedReacts === undefined)
     ) {
       setReactions([]);
     }
@@ -259,7 +263,11 @@ export const ReactListModal = (props: Props): ReactElement => {
       if (_senders.length > 0) {
         _senders = handleSenders(_senders, me);
       }
-      setSenders(_senders);
+
+      // make sure to deep compare here otherwise we get stuck in a ever rendering look (only happens when we are one of the reactor)
+      if (!isEqual(_senders, senders)) {
+        setSenders(_senders);
+      }
     }
 
     if (senders.length > 0 && (!reactionsMap[currentReact]?.senders || isEmpty(_senders))) {
@@ -284,8 +292,6 @@ export const ReactListModal = (props: Props): ReactElement => {
     return <></>;
   }
 
-  const { isPublic } = msgProps;
-
   const handleSelectedReaction = (emoji: string): boolean => {
     return currentReact === emoji;
   };

ts/components/dialog/SessionConfirm.tsx

@@ -6,7 +6,7 @@ import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { SessionWrapperModal } from '../SessionWrapperModal';
-import { Dispatch } from 'redux';
+import { Dispatch } from '@reduxjs/toolkit';
 import { shell } from 'electron';
 import { MessageInteraction } from '../../interactions';
 

ts/components/leftpane/ActionsPanel.tsx

@@ -28,7 +28,6 @@ import { DURATION } from '../../session/constants';
 
 import { editProfileModal, onionPathModal } from '../../state/ducks/modalDialog';
 import { uploadOurAvatar } from '../../interactions/conversationInteractions';
-import { ModalContainer } from '../dialog/ModalContainer';
 import { debounce, isEmpty, isString } from 'lodash';
 
 // tslint:disable-next-line: no-import-side-effect no-submodule-imports
@@ -39,9 +38,6 @@ import { getOpenGroupManager } from '../../session/apis/open_group_api/opengroup
 import { getSwarmPollingInstance } from '../../session/apis/snode_api';
 import { forceRefreshRandomSnodePool } from '../../session/apis/snode_api/snodePool';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
-import { CallInFullScreenContainer } from '../calling/CallInFullScreenContainer';
-import { DraggableCallContainer } from '../calling/DraggableCallContainer';
-import { IncomingCallDialog } from '../calling/IncomingCallDialog';
 import { SessionIconButton } from '../icon';
 import { SessionToastContainer } from '../SessionToastContainer';
 import { LeftPaneSectionContainer } from './LeftPaneSectionContainer';
@@ -205,16 +201,6 @@ const doAppStartUp = () => {
   debounce(triggerAvatarReUploadIfNeeded, 200);
 };
 
-const CallContainer = () => {
-  return (
-    <>
-      <DraggableCallContainer />
-      <IncomingCallDialog />
-      <CallInFullScreenContainer />
-    </>
-  );
-};
-
 async function fetchReleaseFromFSAndUpdateMain() {
   try {
     window.log.info('[updater] about to fetchReleaseFromFSAndUpdateMain');
@@ -286,9 +272,6 @@ export const ActionsPanel = () => {
 
   return (
     <>
-      <ModalContainer />
-
-      <CallContainer />
       <LeftPaneSectionContainer data-testid="leftpane-section-container">
         <Section type={SectionType.Profile} />
         <Section type={SectionType.Message} />

ts/components/leftpane/LeftPane.tsx

@@ -8,6 +8,10 @@ import { getLeftPaneLists } from '../../state/selectors/conversations';
 import { getSearchResults, isSearching } from '../../state/selectors/search';
 import { getFocusedSection, getOverlayMode } from '../../state/selectors/section';
 import { getHideMessageRequestBanner } from '../../state/selectors/userConfig';
+import { CallInFullScreenContainer } from '../calling/CallInFullScreenContainer';
+import { DraggableCallContainer } from '../calling/DraggableCallContainer';
+import { IncomingCallDialog } from '../calling/IncomingCallDialog';
+import { ModalContainer } from '../dialog/ModalContainer';
 import { ActionsPanel } from './ActionsPanel';
 import { LeftPaneMessageSection } from './LeftPaneMessageSection';
 import { LeftPaneSettingSection } from './LeftPaneSettingSection';
@@ -51,10 +55,22 @@ const LeftPaneSection = () => {
   return null;
 };
 
+const CallContainer = () => {
+  return (
+    <>
+      <DraggableCallContainer />
+      <IncomingCallDialog />
+      <CallInFullScreenContainer />
+    </>
+  );
+};
+
 export const LeftPane = () => {
   return (
     <SessionTheme>
       <div className="module-left-pane-session">
+        <ModalContainer />
+        <CallContainer />
         <ActionsPanel />
 
         <StyledLeftPane className="module-left-pane">

ts/components/menu/ConversationHeaderMenu.tsx

@@ -39,6 +39,7 @@ export const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => {
   if (!selectedConversation) {
     throw new Error('selectedConversation must be set for a header to be visible!');
   }
+
   return (
     <ContextConversationId.Provider value={selectedConversation}>
       <Menu id={triggerId} animation={animation.fade}>

ts/components/registration/RegistrationStages.tsx

@@ -217,20 +217,31 @@ export const RegistrationStages = () => {
     }
   };
 
+  const memoizedValue = React.useMemo(() => {
+    return {
+      registrationPhase,
+      signInMode,
+      signUpMode,
+      setSignInMode,
+      setSignUpMode,
+      setRegistrationPhase,
+      generatedRecoveryPhrase,
+      hexGeneratedPubKey,
+    };
+  }, [
+    registrationPhase,
+    signInMode,
+    signUpMode,
+    setSignInMode,
+    setSignUpMode,
+    setRegistrationPhase,
+    generatedRecoveryPhrase,
+    hexGeneratedPubKey,
+  ]);
+
   return (
     <div className="session-registration-container">
-      <RegistrationContext.Provider
-        value={{
-          registrationPhase,
-          signInMode,
-          signUpMode,
-          setSignInMode,
-          setSignUpMode,
-          setRegistrationPhase,
-          generatedRecoveryPhrase,
-          hexGeneratedPubKey,
-        }}
-      >
+      <RegistrationContext.Provider value={memoizedValue}>
         {(registrationPhase === RegistrationPhase.Start ||
           registrationPhase === RegistrationPhase.SignUp) && <SignUpTab />}
         {(registrationPhase === RegistrationPhase.Start ||

ts/session/utils/Theme.tsx

@@ -1,4 +1,4 @@
-import { Dispatch } from 'redux';
+import { Dispatch } from '@reduxjs/toolkit';
 import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from '../../state/ducks/SessionTheme';
 import { applyTheme, ThemeStateType } from '../../state/ducks/theme';
 

ts/state/actions.ts

@@ -1,4 +1,4 @@
-import { bindActionCreators, Dispatch } from 'redux';
+import { bindActionCreators, Dispatch } from '@reduxjs/toolkit';
 
 import { actions as search } from './ducks/search';
 import { actions as conversations } from './ducks/conversations';

ts/state/reducer.ts

@@ -1,4 +1,4 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from '@reduxjs/toolkit';
 
 import { reducer as search, SearchStateType } from './ducks/search';
 import { ConversationsStateType, reducer as conversations } from './ducks/conversations';

ts/state/selectors/call.ts

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import { CallStateType, CallStatusEnum } from '../ducks/call';
 import { ConversationsStateType, ReduxConversationType } from '../ducks/conversations';
 import { StateType } from '../reducer';

ts/state/selectors/conversations.ts

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { StateType } from '../reducer';
 import {
@@ -94,7 +94,7 @@ export const getIsTypingEnabled = createSelector(
  * Returns true if the current conversation selected is a group conversation.
  * Returns false if the current conversation selected is not a group conversation, or none are selected
  */
-export const isGroupConversation = createSelector(
+export const getSelectedConversationIsGroup = createSelector(
   getSelectedConversation,
   (state: ReduxConversationType | undefined): boolean => {
     return state?.type === 'group' || false;

ts/state/selectors/modal.ts

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { StateType } from '../reducer';
 import {

ts/state/selectors/onions.ts

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { StateType } from '../reducer';
 import { OnionState } from '../ducks/onion';

ts/state/selectors/search.ts

@@ -1,5 +1,5 @@
 import { compact } from 'lodash';
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { StateType } from '../reducer';
 

ts/state/selectors/section.ts

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { StateType } from '../reducer';
 import { OverlayMode, SectionStateType, SectionType } from '../ducks/section';

ts/state/selectors/stagedAttachments.ts

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 import { StagedAttachmentType } from '../../components/conversation/composition/CompositionBox';
 import { StagedAttachmentsStateType } from '../ducks/stagedAttachments';
 import { StateType } from '../reducer';

ts/state/selectors/user.ts

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { LocalizerType } from '../../types/Util';
 

ts/state/selectors/userConfig.ts

@@ -1,6 +1,6 @@
 import { StateType } from '../reducer';
 import { UserConfigState } from '../ducks/userConfig';
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 export const getUserConfig = (state: StateType): UserConfigState => state.userConfig;
 

ts/window.d.ts

@@ -2,7 +2,7 @@ import {} from 'styled-components/cssprop';
 
 import { LocalizerType } from '../ts/types/Util';
 
-import { Store } from 'redux';
+import { Store } from '@reduxjs/toolkit';
 
 import { ConversationCollection, ConversationModel } from './models/conversation';
 import { ConversationType } from './state/ducks/conversations';

yarn.lock

@@ -555,6 +555,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1577,10 +1584,10 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-"@reduxjs/toolkit@^1.4.0":
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.1.tgz#94ee1981b8cf9227cda40163a04704a9544c9a9f"
-  integrity sha512-Q6mzbTpO9nOYRnkwpDlFOAbQnd3g7zj7CtHAZWz5SzE5lcV97Tf8f3SzOO8BoPOMYBFgfZaqTUZqgGu+a0+Fng==
+"@reduxjs/toolkit@1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.5.tgz#c14bece03ee08be88467f22dc0ecf9cf875527cd"
+  integrity sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==
   dependencies:
     immer "^9.0.7"
     redux "^4.1.2"
@@ -1810,7 +1817,7 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -1994,10 +2001,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-redux@7.1.9":
-  version "7.1.9"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.9.tgz#280c13565c9f13ceb727ec21e767abe0e9b4aec3"
-  integrity sha512-mpC0jqxhP4mhmOl3P4ipRsgTgbNofMRXJb08Ms6gekViLj61v1hOZEKWDCyWsdONr6EjEA6ZHXC446wdywDe0w==
+"@types/react-redux@^7.1.24":
+  version "7.1.24"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0"
+  integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==
   dependencies:
     "@types/hoist-non-react-statics" "^3.3.0"
     "@types/react" "*"
@@ -2112,6 +2119,11 @@
   resolved "https://registry.yarnpkg.com/@types/underscore/-/underscore-1.11.4.tgz#62e393f8bc4bd8a06154d110c7d042a93751def3"
   integrity sha512-uO4CD2ELOjw8tasUrAhvnn2W4A0ZECOvMjCivJr4gA9pGgjv+qxKWY9GLTMVEK8ej85BxQOocUyE7hImmSQYcg==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/uuid@8.3.4":
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
@@ -5163,7 +5175,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7612,7 +7624,7 @@ react-intersection-observer@^8.30.3:
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz#6f6e67831c52e6233f6b6cc7eb55814820137c42"
   integrity sha512-TYKh52Zc0Uptp5/b4N91XydfSGKubEhgZRtcg1rhTKABXijc4Sdr1uTp5lJ8TN27jwUsdXxjHXtHa0kPj704sw==
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.9.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7622,6 +7634,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -7652,16 +7669,17 @@ react-qr-svg@^2.2.1:
     prop-types "^15.5.8"
     qr.js "0.0.0"
 
-react-redux@7.2.1:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.1.tgz#8dedf784901014db2feca1ab633864dee68ad985"
-  integrity sha512-T+VfD/bvgGTUA74iW9d2i5THrDQWbweXP0AVNI8tNd1Rk5ch1rnMiJkDD67ejw7YBKM4+REvcvqRuWJb7BLuEg==
+react-redux@8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.4.tgz#80c31dffa8af9526967c4267022ae1525ff0e36a"
+  integrity sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ==
   dependencies:
-    "@babel/runtime" "^7.5.5"
-    hoist-non-react-statics "^3.3.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^16.9.0"
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
 
 react-refresh@^0.9.0:
   version "0.9.0"
@@ -7806,13 +7824,12 @@ redux-thunk@^2.4.1:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
   integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
 
-redux@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"
-  integrity sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg==
+redux@4.2.0, redux@^4.0.0, redux@^4.1.2:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
   dependencies:
-    loose-envify "^1.4.0"
-    symbol-observable "^1.2.0"
+    "@babel/runtime" "^7.9.2"
 
 redux@^3.6.0:
   version "3.7.2"
@@ -7824,13 +7841,6 @@ redux@^3.6.0:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
-redux@^4.0.0, redux@^4.1.2:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
-  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-
 regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
@@ -7886,11 +7896,6 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
-reselect@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
-  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
-
 reselect@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
@@ -8568,7 +8573,7 @@ svgo@^2.4.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
-symbol-observable@^1.0.3, symbol-observable@^1.2.0:
+symbol-observable@^1.0.3:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -8956,6 +8961,11 @@ use-strict@1.0.1:
   resolved "https://registry.yarnpkg.com/use-strict/-/use-strict-1.0.1.tgz#0bb80d94f49a4a05192b84a8c7d34e95f1a7e3a0"
   integrity sha1-C7gNlPSaSgUZK4Sox9NOlfGn46A=
 
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 utf8-byte-length@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"