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 { 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';
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue