refactor message container and remove the memo from message/blocks

This commit is contained in:
Reinaldo Neto 2023-04-28 10:59:09 -03:00
parent 954e4c3e2d
commit 3e6124d425
2 changed files with 37 additions and 42 deletions

View File

@ -3,45 +3,31 @@ import React from 'react';
import { messageBlockWithContext } from '../UIKit/MessageBlock'; import { messageBlockWithContext } from '../UIKit/MessageBlock';
import { IMessageBlocks } from './interfaces'; import { IMessageBlocks } from './interfaces';
const Blocks = React.memo( const Blocks = ({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => {
({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => { if (blocks && blocks.length > 0) {
if (blocks && blocks.length > 0) { const appId = blocks[0]?.appId || '';
const appId = blocks[0]?.appId || ''; return React.createElement(
return React.createElement( messageBlockWithContext({
messageBlockWithContext({ action: async ({ actionId, value, blockId }: { actionId: string; value: string; blockId: string }) => {
action: async ({ actionId, value, blockId }: { actionId: string; value: string; blockId: string }) => { if (blockAction) {
if (blockAction) { await blockAction({
await blockAction({ actionId,
actionId, appId,
appId, value,
value, blockId,
blockId, rid,
rid, mid
mid });
}); }
} },
}, appId,
appId, rid
rid }),
}), { blocks }
{ blocks } );
);
}
return null;
},
(prevProps, nextProps) => {
if (
// @ts-ignore
('type' in prevProps.blocks[0] && prevProps.blocks[0].type === 'video_conf') ||
// @ts-ignore
('type' in nextProps.blocks[0] && nextProps.blocks[0].type === 'video_conf')
) {
// Avoid multiple request on the VideoConferenceBlock
return true;
}
return false;
} }
); return null;
};
Blocks.displayName = 'MessageBlocks'; Blocks.displayName = 'MessageBlocks';

View File

@ -76,20 +76,29 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
theme: 'light' as TSupportedThemes theme: 'light' as TSupportedThemes
}; };
state = { isManualUnignored: false };
private subscription?: Subscription; private subscription?: Subscription;
private mounted: boolean;
constructor(props: IMessageContainerProps) {
super(props);
this.state = { isManualUnignored: false };
this.mounted = false;
componentDidMount() {
const { item } = this.props; const { item } = this.props;
if (item && item.observe) { if (item && item.observe) {
const observable = item.observe(); const observable = item.observe();
this.subscription = observable.subscribe(() => { this.subscription = observable.subscribe(() => {
this.forceUpdate(); if (this.mounted) {
this.forceUpdate();
}
}); });
} }
} }
componentDidMount() {
this.mounted = true;
}
shouldComponentUpdate(nextProps: IMessageContainerProps, nextState: IMessageContainerState) { shouldComponentUpdate(nextProps: IMessageContainerProps, nextState: IMessageContainerState) {
const { isManualUnignored } = this.state; const { isManualUnignored } = this.state;
const { threadBadgeColor, isIgnored, highlighted, previousItem } = this.props; const { threadBadgeColor, isIgnored, highlighted, previousItem } = this.props;