Skip to content

Commit 51e03cf

Browse files
BilbBilb
committed
fix: rerender loop of react list modal
update redux related libraries and update imports to use the RTK ones
1 parent bffc9ed commit 51e03cf

23 files changed

+127
-99
lines changed

‎package.json‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,12 @@
7878
"sedtoAppImage": "sed -i 's/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/\"target\": \"AppImage\"/g' package.json",
7979
"sedtoDeb": "sed -i 's/\"target\": \"AppImage\"/\"target\": \\[\"deb\", \"rpm\", \"freebsd\"\\]/g' package.json",
8080
"ready": "yarn build-everything && yarn lint-full && yarn test",
81-
8281
"postinstall": "yarn patch-package && yarn electron-builder install-app-deps && yarn rebuild-curve25519-js",
8382
"rebuild-curve25519-js": "cd node_modules/curve25519-js && yarn install && yarn build && cd ../../"
8483
},
8584
"dependencies": {
8685
"@emoji-mart/data": "1.0.2",
87-
"@reduxjs/toolkit": "^1.4.0",
86+
"@reduxjs/toolkit": "1.8.5",
8887
"abort-controller": "3.0.0",
8988
"auto-bind": "^4.0.0",
9089
"backbone": "1.3.3",
@@ -137,16 +136,15 @@
137136
"react-mentions": "^4.2.0",
138137
"react-portal": "^4.2.0",
139138
"react-qr-svg": "^2.2.1",
140-
"react-redux": "7.2.1",
139+
"react-redux": "8.0.4",
141140
"react-toastify": "^6.0.9",
142141
"react-use": "^17.2.1",
143142
"react-virtualized": "9.22.3",
144143
"read-last-lines-ts": "^1.2.1",
145-
"redux": "4.0.1",
144+
"redux": "4.2.0",
146145
"redux-logger": "3.0.6",
147146
"redux-persist": "^6.0.0",
148147
"redux-promise-middleware": "^6.1.2",
149-
"reselect": "4.0.0",
150148
"rimraf": "2.6.2",
151149
"sanitize.css": "^12.0.1",
152150
"semver": "5.4.1",
@@ -186,7 +184,7 @@
186184
"@types/react-mentions": "^4.1.1",
187185
"@types/react-mic": "^12.4.1",
188186
"@types/react-portal": "^4.0.2",
189-
"@types/react-redux": "7.1.9",
187+
"@types/react-redux": "^7.1.24",
190188
"@types/react-virtualized": "9.18.12",
191189
"@types/redux-logger": "3.0.7",
192190
"@types/rimraf": "2.0.2",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { MessageRenderingProps } from '../../../../models/messageType';
55
import { PubKey } from '../../../../session/types';
66
import {
77
getMessageAuthorProps,
8-
isGroupConversation,
8+
getSelectedConversationIsGroup,
99
isPublicGroupConversation,
1010
} from '../../../../state/selectors/conversations';
1111
import { Flex } from '../../../basic/Flex';
@@ -28,7 +28,7 @@ export const MessageAuthorText = (props: Props) => {
2828
const selected = useSelector(state => getMessageAuthorProps(state as any, props.messageId));
2929

3030
const isPublic = useSelector(isPublicGroupConversation);
31-
const isGroup = useSelector(isGroupConversation);
31+
const isGroup = useSelector(getSelectedConversationIsGroup);
3232
if (!selected) {
3333
return null;
3434
}

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { nativeEmojiData } from '../../../../util/emoji';
99
import { Reaction, ReactionProps } from '../reactions/Reaction';
1010
import { SessionIcon } from '../../../icon';
1111
import { useMessageReactsPropsById } from '../../../../hooks/useParamSelector';
12+
import { getSelectedConversationIsGroup } from '../../../../state/selectors/conversations';
13+
import { useSelector } from 'react-redux';
1214

1315
export const popupXDefault = -81;
1416
export const popupYDefault = -90;
@@ -125,7 +127,7 @@ const ExpandedReactions = (props: ExpandReactionsProps): ReactElement => {
125127

126128
export type MessageReactsSelectorProps = Pick<
127129
MessageRenderingProps,
128-
'convoId' | 'conversationType' | 'isPublic' | 'serverId' | 'reacts' | 'sortedReacts'
130+
'convoId' | 'serverId' | 'reacts' | 'sortedReacts'
129131
>;
130132

131133
type Props = {
@@ -162,6 +164,8 @@ export const MessageReactions = (props: Props): ReactElement => {
162164

163165
const msgProps = useMessageReactsPropsById(messageId);
164166

167+
const inGroup = useSelector(getSelectedConversationIsGroup);
168+
165169
useEffect(() => {
166170
if (msgProps?.sortedReacts && !isEqual(reactions, msgProps?.sortedReacts)) {
167171
setReactions(msgProps?.sortedReacts);
@@ -176,8 +180,7 @@ export const MessageReactions = (props: Props): ReactElement => {
176180
return <></>;
177181
}
178182

179-
const { conversationType, sortedReacts } = msgProps;
180-
const inGroup = conversationType === 'group';
183+
const { sortedReacts } = msgProps;
181184

182185
const reactLimit = 6;
183186

‎ts/components/dialog/ReactListModal.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { isEmpty, isEqual } from 'lodash';
22
import React, { ReactElement, useEffect, useState } from 'react';
3-
import { useDispatch } from 'react-redux';
3+
import { useDispatch, useSelector } from 'react-redux';
44
import styled from 'styled-components';
55
import { Data } from '../../data/data';
66
import { useMessageReactsPropsById, useWeAreModerator } from '../../hooks/useParamSelector';
@@ -11,6 +11,7 @@ import {
1111
updateReactListModal,
1212
updateUserDetailsModal,
1313
} from '../../state/ducks/modalDialog';
14+
import { getSelectedConversationIsPublic } from '../../state/selectors/conversations';
1415
import { SortedReactionList } from '../../types/Reaction';
1516
import { nativeEmojiData } from '../../util/emoji';
1617
import { Reactions } from '../../util/reactions';
@@ -169,6 +170,7 @@ const StyledCountText = styled.p`
169170
color: var(--color-text);
170171
}
171172
`;
173+
// tslint:disable: use-simple-attributes
172174

173175
const CountText = ({ count, emoji }: { count: number; emoji: string }) => {
174176
return (
@@ -226,6 +228,7 @@ export const ReactListModal = (props: Props): ReactElement => {
226228
const [senders, setSenders] = useState<Array<string>>([]);
227229

228230
const msgProps = useMessageReactsPropsById(messageId);
231+
const isPublic = useSelector(getSelectedConversationIsPublic);
229232
const weAreModerator = useWeAreModerator(msgProps?.convoId);
230233
const me = UserUtils.getOurPubKeyStrFromCache();
231234

@@ -245,7 +248,8 @@ export const ReactListModal = (props: Props): ReactElement => {
245248
if (
246249
reactions &&
247250
reactions.length > 0 &&
248-
(msgProps?.sortedReacts === [] || msgProps?.sortedReacts === undefined)
251+
((msgProps?.sortedReacts && msgProps.sortedReacts.length === 0) ||
252+
msgProps?.sortedReacts === undefined)
249253
) {
250254
setReactions([]);
251255
}
@@ -259,7 +263,11 @@ export const ReactListModal = (props: Props): ReactElement => {
259263
if (_senders.length > 0) {
260264
_senders = handleSenders(_senders, me);
261265
}
262-
setSenders(_senders);
266+
267+
// make sure to deep compare here otherwise we get stuck in a ever rendering look (only happens when we are one of the reactor)
268+
if (!isEqual(_senders, senders)) {
269+
setSenders(_senders);
270+
}
263271
}
264272

265273
if (senders.length > 0 && (!reactionsMap[currentReact]?.senders || isEmpty(_senders))) {
@@ -284,8 +292,6 @@ export const ReactListModal = (props: Props): ReactElement => {
284292
return <></>;
285293
}
286294

287-
const { isPublic } = msgProps;
288-
289295
const handleSelectedReaction = (emoji: string): boolean => {
290296
return currentReact === emoji;
291297
};

‎ts/components/dialog/SessionConfirm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
66
import { SessionSpinner } from '../basic/SessionSpinner';
77
import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
88
import { SessionWrapperModal } from '../SessionWrapperModal';
9-
import { Dispatch } from 'redux';
9+
import { Dispatch } from '@reduxjs/toolkit';
1010
import { shell } from 'electron';
1111
import { MessageInteraction } from '../../interactions';
1212

‎ts/components/leftpane/ActionsPanel.tsx‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import { DURATION } from '../../session/constants';
2828

2929
import { editProfileModal, onionPathModal } from '../../state/ducks/modalDialog';
3030
import { uploadOurAvatar } from '../../interactions/conversationInteractions';
31-
import { ModalContainer } from '../dialog/ModalContainer';
3231
import { debounce, isEmpty, isString } from 'lodash';
3332

3433
// tslint:disable-next-line: no-import-side-effect no-submodule-imports
@@ -39,9 +38,6 @@ import { getOpenGroupManager } from '../../session/apis/open_group_api/opengroup
3938
import { getSwarmPollingInstance } from '../../session/apis/snode_api';
4039
import { forceRefreshRandomSnodePool } from '../../session/apis/snode_api/snodePool';
4140
import { Avatar, AvatarSize } from '../avatar/Avatar';
42-
import { CallInFullScreenContainer } from '../calling/CallInFullScreenContainer';
43-
import { DraggableCallContainer } from '../calling/DraggableCallContainer';
44-
import { IncomingCallDialog } from '../calling/IncomingCallDialog';
4541
import { SessionIconButton } from '../icon';
4642
import { SessionToastContainer } from '../SessionToastContainer';
4743
import { LeftPaneSectionContainer } from './LeftPaneSectionContainer';
@@ -205,16 +201,6 @@ const doAppStartUp = () => {
205201
debounce(triggerAvatarReUploadIfNeeded, 200);
206202
};
207203

208-
const CallContainer = () => {
209-
return (
210-
<>
211-
<DraggableCallContainer />
212-
<IncomingCallDialog />
213-
<CallInFullScreenContainer />
214-
</>
215-
);
216-
};
217-
218204
async function fetchReleaseFromFSAndUpdateMain() {
219205
try {
220206
window.log.info('[updater] about to fetchReleaseFromFSAndUpdateMain');
@@ -286,9 +272,6 @@ export const ActionsPanel = () => {
286272

287273
return (
288274
<>
289-
<ModalContainer />
290-
291-
<CallContainer />
292275
<LeftPaneSectionContainer data-testid="leftpane-section-container">
293276
<Section type={SectionType.Profile} />
294277
<Section type={SectionType.Message} />

‎ts/components/leftpane/LeftPane.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import { getLeftPaneLists } from '../../state/selectors/conversations';
88
import { getSearchResults, isSearching } from '../../state/selectors/search';
99
import { getFocusedSection, getOverlayMode } from '../../state/selectors/section';
1010
import { getHideMessageRequestBanner } from '../../state/selectors/userConfig';
11+
import { CallInFullScreenContainer } from '../calling/CallInFullScreenContainer';
12+
import { DraggableCallContainer } from '../calling/DraggableCallContainer';
13+
import { IncomingCallDialog } from '../calling/IncomingCallDialog';
14+
import { ModalContainer } from '../dialog/ModalContainer';
1115
import { ActionsPanel } from './ActionsPanel';
1216
import { LeftPaneMessageSection } from './LeftPaneMessageSection';
1317
import { LeftPaneSettingSection } from './LeftPaneSettingSection';
@@ -51,10 +55,22 @@ const LeftPaneSection = () => {
5155
return null;
5256
};
5357

58+
const CallContainer = () => {
59+
return (
60+
<>
61+
<DraggableCallContainer />
62+
<IncomingCallDialog />
63+
<CallInFullScreenContainer />
64+
</>
65+
);
66+
};
67+
5468
export const LeftPane = () => {
5569
return (
5670
<SessionTheme>
5771
<div className="module-left-pane-session">
72+
<ModalContainer />
73+
<CallContainer />
5874
<ActionsPanel />
5975

6076
<StyledLeftPane className="module-left-pane">

‎ts/components/menu/ConversationHeaderMenu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => {
3939
if (!selectedConversation) {
4040
throw new Error('selectedConversation must be set for a header to be visible!');
4141
}
42+
4243
return (
4344
<ContextConversationId.Provider value={selectedConversation}>
4445
<Menu id={triggerId} animation={animation.fade}>

‎ts/components/registration/RegistrationStages.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -217,20 +217,31 @@ export const RegistrationStages = () => {
217217
}
218218
};
219219

220+
const memoizedValue = React.useMemo(() => {
221+
return {
222+
registrationPhase,
223+
signInMode,
224+
signUpMode,
225+
setSignInMode,
226+
setSignUpMode,
227+
setRegistrationPhase,
228+
generatedRecoveryPhrase,
229+
hexGeneratedPubKey,
230+
};
231+
}, [
232+
registrationPhase,
233+
signInMode,
234+
signUpMode,
235+
setSignInMode,
236+
setSignUpMode,
237+
setRegistrationPhase,
238+
generatedRecoveryPhrase,
239+
hexGeneratedPubKey,
240+
]);
241+
220242
return (
221243
<div className="session-registration-container">
222-
<RegistrationContext.Provider
223-
value={{
224-
registrationPhase,
225-
signInMode,
226-
signUpMode,
227-
setSignInMode,
228-
setSignUpMode,
229-
setRegistrationPhase,
230-
generatedRecoveryPhrase,
231-
hexGeneratedPubKey,
232-
}}
233-
>
244+
<RegistrationContext.Provider value={memoizedValue}>
234245
{(registrationPhase === RegistrationPhase.Start ||
235246
registrationPhase === RegistrationPhase.SignUp) && <SignUpTab />}
236247
{(registrationPhase === RegistrationPhase.Start ||

‎ts/session/utils/Theme.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dispatch } from 'redux';
1+
import { Dispatch } from '@reduxjs/toolkit';
22
import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from '../../state/ducks/SessionTheme';
33
import { applyTheme, ThemeStateType } from '../../state/ducks/theme';
44

0 commit comments

Comments
 (0)