refactor message container and remove the memo from message/blocks
This commit is contained in:
parent
954e4c3e2d
commit
3e6124d425
|
@ -3,45 +3,31 @@ import React from 'react';
|
|||
import { messageBlockWithContext } from '../UIKit/MessageBlock';
|
||||
import { IMessageBlocks } from './interfaces';
|
||||
|
||||
const Blocks = React.memo(
|
||||
({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => {
|
||||
if (blocks && blocks.length > 0) {
|
||||
const appId = blocks[0]?.appId || '';
|
||||
return React.createElement(
|
||||
messageBlockWithContext({
|
||||
action: async ({ actionId, value, blockId }: { actionId: string; value: string; blockId: string }) => {
|
||||
if (blockAction) {
|
||||
await blockAction({
|
||||
actionId,
|
||||
appId,
|
||||
value,
|
||||
blockId,
|
||||
rid,
|
||||
mid
|
||||
});
|
||||
}
|
||||
},
|
||||
appId,
|
||||
rid
|
||||
}),
|
||||
{ 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;
|
||||
const Blocks = ({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => {
|
||||
if (blocks && blocks.length > 0) {
|
||||
const appId = blocks[0]?.appId || '';
|
||||
return React.createElement(
|
||||
messageBlockWithContext({
|
||||
action: async ({ actionId, value, blockId }: { actionId: string; value: string; blockId: string }) => {
|
||||
if (blockAction) {
|
||||
await blockAction({
|
||||
actionId,
|
||||
appId,
|
||||
value,
|
||||
blockId,
|
||||
rid,
|
||||
mid
|
||||
});
|
||||
}
|
||||
},
|
||||
appId,
|
||||
rid
|
||||
}),
|
||||
{ blocks }
|
||||
);
|
||||
}
|
||||
);
|
||||
return null;
|
||||
};
|
||||
|
||||
Blocks.displayName = 'MessageBlocks';
|
||||
|
||||
|
|
|
@ -76,20 +76,29 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
|
|||
theme: 'light' as TSupportedThemes
|
||||
};
|
||||
|
||||
state = { isManualUnignored: false };
|
||||
|
||||
private subscription?: Subscription;
|
||||
private mounted: boolean;
|
||||
|
||||
constructor(props: IMessageContainerProps) {
|
||||
super(props);
|
||||
this.state = { isManualUnignored: false };
|
||||
this.mounted = false;
|
||||
|
||||
componentDidMount() {
|
||||
const { item } = this.props;
|
||||
if (item && item.observe) {
|
||||
const observable = item.observe();
|
||||
this.subscription = observable.subscribe(() => {
|
||||
this.forceUpdate();
|
||||
if (this.mounted) {
|
||||
this.forceUpdate();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.mounted = true;
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: IMessageContainerProps, nextState: IMessageContainerState) {
|
||||
const { isManualUnignored } = this.state;
|
||||
const { threadBadgeColor, isIgnored, highlighted, previousItem } = this.props;
|
||||
|
|
Loading…
Reference in New Issue