Merge pull request oxen-io#2531 from Bilb/fix-rerenders-reactListModal

fix: rerender loop of react list modal

Author: Bilb

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