verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix message update

This commit is contained in:
Diego Mello 2022-11-25 14:52:03 -03:00
parent e4f0fdb525
commit 537cd0032e
8 changed files with 94 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/containers/message/Attachments.tsx
View File

@ -68,7 +68,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
if (file && file.image_url) {
return (
<Image
key={file.image_url}
key={index}
file={file}
showAttachment={showAttachment}
getCustomEmoji={getCustomEmoji}
@ -81,7 +81,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
if (file && file.audio_url) {
return (
<Audio
key={file.audio_url}
key={index}
file={file}
getCustomEmoji={getCustomEmoji}
isReply={isReply}
@ -95,7 +95,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
if (file.video_url) {
return (
<Video
key={file.video_url}
key={index}
file={file}
showAttachment={showAttachment}
getCustomEmoji={getCustomEmoji}

4
app/containers/message/Components/CollapsibleQuote/index.tsx
View File

@ -90,8 +90,8 @@ const Fields = React.memo(
return (
<>
{attachment.fields.map(field => (
<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
{attachment.fields.map((field, index) => (
<View key={index} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>
{field.title}
</Text>

2
app/containers/message/Emoji.tsx
View File

@ -10,7 +10,7 @@ const Emoji = React.memo(
const parsedContent = content.replace(/^:|:$/g, '');
const emoji = getCustomEmoji(parsedContent);
if (emoji) {
return <CustomEmoji key={content} style={customEmojiStyle} emoji={emoji} />;
return <CustomEmoji style={customEmojiStyle} emoji={emoji} />;
}
return <Text style={standardEmojiStyle}>{shortnameToUnicode(content)}</Text>;
},

5
app/containers/message/Reactions.tsx
View File

@ -53,7 +53,6 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
<Touchable
onPress={() => onReactionPress(reaction.emoji)}
onLongPress={onReactionLongPress}
key={reaction.emoji}
testID={`message-reaction-${reaction.emoji}`}
style={[
styles.reactionButton,
@ -83,8 +82,8 @@ const Reactions = React.memo(({ reactions, getCustomEmoji }: IMessageReactions)
}
return (
<View style={styles.reactionsContainer}>
{reactions.map(reaction => (
<Reaction key={reaction.emoji} reaction={reaction} getCustomEmoji={getCustomEmoji} theme={theme} />
{reactions.map((reaction, index) => (
<Reaction key={index} reaction={reaction} getCustomEmoji={getCustomEmoji} theme={theme} />
))}
<AddReaction theme={theme} />
</View>

4
app/containers/message/Reply.tsx
View File

@ -184,8 +184,8 @@ const Fields = React.memo(
return (
<View style={styles.fieldsContainer}>
{attachment.fields.map(field => (
<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
{attachment.fields.map((field, index) => (
<View key={index} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
<Markdown msg={field?.value || ''} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />
</View>

2
app/containers/message/Urls.tsx
View File

@ -141,7 +141,7 @@ const Urls = React.memo(
return null;
}
return urls.map((url: IUrl, index: number) => <Url url={url} key={url.url} index={index} theme={theme} />);
return urls.map((url: IUrl, index: number) => <Url url={url} key={index} index={index} theme={theme} />);
},
(oldProps, newProps) => dequal(oldProps.urls, newProps.urls)
);

34
app/containers/message/index.tsx
View File

@ -81,15 +81,21 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
private subscription?: Subscription;
componentDidMount() {
const { item } = this.props;
if (item && item.observe) {
const observable = item.observe();
this.subscription = observable.subscribe(() => {
this.forceUpdate();
});
}
}
// componentDidMount() {
// const { item } = this.props;
// console.log(`did mount ${item.id}`);
// let isFirstRender = true;
// if (item && item.observe) {
// const observable = item.observe();
// this.subscription = observable.subscribe(msg => {
// // console.log('🚀 ~ file: index.tsx ~ line 90 ~ MessageContainer ~ componentDidMount ~ msg', msg);
// if (!isFirstRender) {
// this.forceUpdate();
// }
// isFirstRender = false;
// });
// }
// }
// shouldComponentUpdate(nextProps: IMessageContainerProps, nextState: IMessageContainerState) {
// const { isManualUnignored } = this.state;
@ -112,11 +118,11 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
// return false;
// }
componentWillUnmount() {
if (this.subscription && this.subscription.unsubscribe) {
this.subscription.unsubscribe();
}
}
// componentWillUnmount() {
// if (this.subscription && this.subscription.unsubscribe) {
// this.subscription.unsubscribe();
// }
// }
onPressAction = () => {
const { closeEmojiAndAction } = this.props;

90
app/views/RoomView/List/index.tsx
View File

@ -97,29 +97,29 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
console.timeEnd(`${this.constructor.name} mount`);
}
shouldComponentUpdate(nextProps: IListContainerProps, nextState: IListContainerState) {
const { refreshing, highlightedMessage } = this.state;
const { hideSystemMessages, tunread, ignored, loading } = this.props;
if (loading !== nextProps.loading) {
return true;
}
if (highlightedMessage !== nextState.highlightedMessage) {
return true;
}
if (refreshing !== nextState.refreshing) {
return true;
}
if (!dequal(hideSystemMessages, nextProps.hideSystemMessages)) {
return true;
}
if (!dequal(tunread, nextProps.tunread)) {
return true;
}
if (!dequal(ignored, nextProps.ignored)) {
return true;
}
return false;
}
// shouldComponentUpdate(nextProps: IListContainerProps, nextState: IListContainerState) {
// const { refreshing, highlightedMessage } = this.state;
// const { hideSystemMessages, tunread, ignored, loading } = this.props;
// if (loading !== nextProps.loading) {
// return true;
// }
// if (highlightedMessage !== nextState.highlightedMessage) {
// return true;
// }
// if (refreshing !== nextState.refreshing) {
// return true;
// }
// if (!dequal(hideSystemMessages, nextProps.hideSystemMessages)) {
// return true;
// }
// if (!dequal(tunread, nextProps.tunread)) {
// return true;
// }
// if (!dequal(ignored, nextProps.ignored)) {
// return true;
// }
// return false;
// }
componentDidUpdate(prevProps: IListContainerProps) {
const { hideSystemMessages } = this.props;
@ -165,7 +165,7 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
this.messagesObservable = db
.get('thread_messages')
.query(Q.where('rid', tmid), Q.experimentalSortBy('ts', Q.desc), Q.experimentalSkip(0), Q.experimentalTake(this.count))
.observe();
.observeWithColumns(['_updated_at']);
} else if (rid) {
const whereClause = [
Q.where('rid', rid),
@ -179,12 +179,44 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
this.messagesObservable = db
.get('messages')
.query(...whereClause)
.observe();
.observeWithColumns(['_updated_at', 'status']);
}
if (rid) {
this.unsubscribeMessages();
this.messagesSubscription = this.messagesObservable?.subscribe(messages => {
// @ts-ignore is this enough cols?
messages = messages.map(m => ({
id: m.id,
msg: m.msg,
ts: m.ts,
status: m.status,
attachments: m.attachments,
urls: m.urls,
reactions: m.reactions,
t: m.t,
avatar: m.avatar,
emoji: m.emoji,
u: m.u,
alias: m.alias,
editedBy: m.editedBy,
role: m.role,
drid: m.drid,
dcount: m.dcount,
dlm: m.dlm,
tmid: m.tmid,
tcount: m.tcount,
tlm: m.tlm,
tmsg: m.tmsg,
mentions: m.mentions,
channels: m.channels,
unread: m.unread,
blocks: m.blocks,
autoTranslate: m.autoTranslate,
replies: m.replies,
md: m.md,
comment: m.comment
}));
if (tmid && this.thread) {
messages = [...messages, this.thread];
}
@ -198,7 +230,11 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
}
if (this.mounted) {
this.setState({ messages }, () => this.update());
// if (this.animated) {
// animateNextTransition();
// }
// this.setState({ messages }, () => this.update());
this.setState({ messages });
} else {
// @ts-ignore
this.state.messages = messages;
@ -252,7 +288,7 @@ class ListContainer extends React.Component<IListContainerProps, IListContainerS
if (this.animated) {
animateNextTransition();
}
this.forceUpdate();
// this.forceUpdate();
};
unsubscribeMessages = () => {