Skip to content

Commit a950d3e

Browse files
f-r00tf-r00t
committed
Fix issue with printing messages in rooms
1 parent 884d2be commit a950d3e

3 files changed

Lines changed: 81 additions & 52 deletions

File tree

‎src/contexts/appProvider.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -447,10 +447,18 @@ export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
447447
MessageSync.restart_sync();
448448
joining = true;
449449
Rooms.idle(false, false);
450+
450451
const room = getThisRoom();
452+
const currentState = useGlobalStore.getState();
453+
const shouldRefetchMessages = currentState.thisRoom !== room || !currentState.roomMessages?.length;
454+
451455
setStoreCurrentRoom(room);
452456
setThisRoom(room);
453-
setRoomMessages(room, 0);
457+
458+
if (shouldRefetchMessages) {
459+
setRoomMessages(room, 0);
460+
}
461+
454462
Wallet.active?.start();
455463
joining = false;
456464
console.log('**** Successfully joined rooms after inactivity ****');

‎src/lib/rpc.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,11 @@ export class Bridge {
315315
case 'history-update':
316316
await sleep(500);
317317
if (getCurrentRoom() === json.key) {
318-
setRoomMessages(json.key, 0);
318+
const currentState = useGlobalStore.getState();
319+
// This might need to be checked, may cause history sync not to show messages immediately
320+
if (!currentState.roomMessages || currentState.roomMessages.length === 0) {
321+
setRoomMessages(json.key, 0);
322+
}
319323
if (json.history && !json.background) {
320324
Toast.show({
321325
type: 'success',

‎src/screens/group-chat-screen.tsx‎

Lines changed: 67 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,10 @@ export const GroupChatScreen: React.FC<Props> = ({ route }) => {
9696
const { roomKey, name, call } = route.params;
9797
const messages = useGlobalStore((state) => state.roomMessages);//.filter((a) => a.room === roomKey,
9898

99+
const reversedMessages = useMemo(() => {
100+
return messages ? [...messages].reverse() : [];
101+
}, [messages]);
102+
99103
const [imagePath, setImagePath] = useState<string | null>(null);
100104
const [tipping, setTipping] = useState(false);
101105
const [tipAmount, setTipAmount] = useState<string>('0');
@@ -122,16 +126,23 @@ export const GroupChatScreen: React.FC<Props> = ({ route }) => {
122126
if (!messages?.length) return;
123127
setUnreadCounted(true);
124128

125-
setUnreadIndex(messages.findIndex(m => !m.read) - 1);
126-
if (messages.findIndex(m => !m.read) !== -1) {
127-
flatListRef.current?.scrollToIndex({
128-
index: messages.findIndex(m => !m.read),
129-
animated: false,
130-
viewPosition: 0.5
131-
});
132-
} else {
133-
scrollToBottom();
134-
}
129+
const firstUnreadOriginal = messages.findIndex(m => !m.read);
130+
131+
if (firstUnreadOriginal !== -1) {
132+
const revIndex = messages.length - 1 - firstUnreadOriginal;
133+
setUnreadIndex(revIndex);
134+
135+
setTimeout(() => {
136+
flatListRef.current?.scrollToIndex({
137+
index: revIndex,
138+
animated: false,
139+
viewPosition: 0.5
140+
});
141+
}, 100);
142+
} else {
143+
setUnreadIndex(-1);
144+
scrollToBottom();
145+
}
135146
}, [messages])
136147

137148

@@ -284,10 +295,7 @@ export const GroupChatScreen: React.FC<Props> = ({ route }) => {
284295

285296
setTipping(false);
286297
if (sent.success) {
287-
const to = messages
288-
.slice()
289-
.reverse()
290-
.find((a) => a.address === tipAddress);
298+
const to = reversedMessages.find((a) => a.address === tipAddress);
291299

292300
onSend('', null, '', false, {
293301
amount, // TODO fix this
@@ -328,17 +336,27 @@ export const GroupChatScreen: React.FC<Props> = ({ route }) => {
328336
useFocusEffect(
329337
React.useCallback(() => {
330338
let cancelled = false;
331-
setStoreRoomMessages([]);
332-
setStoreCurrentRoom(roomKey);
333-
setIsLoadingRoom(true);
334-
setRoomMessages(roomKey, 0)
335-
.catch((e) => console.log('[group-chat] Error loading messages:', e))
336-
.finally(() => {
337-
if (!cancelled) {
338-
setIsLoadingRoom(false);
339-
setHasLoadedOnce(true);
340-
}
341-
});
339+
340+
const currentState = useGlobalStore.getState();
341+
const needsReload = currentState.thisRoom !== roomKey || !currentState.roomMessages?.length;
342+
343+
if (needsReload) {
344+
setStoreRoomMessages([]);
345+
setStoreCurrentRoom(roomKey);
346+
setIsLoadingRoom(true);
347+
setRoomMessages(roomKey, 0)
348+
.catch((e) => console.log('[group-chat] Error loading messages:', e))
349+
.finally(() => {
350+
if (!cancelled) {
351+
setIsLoadingRoom(false);
352+
setHasLoadedOnce(true);
353+
}
354+
});
355+
} else {
356+
setIsLoadingRoom(false);
357+
setHasLoadedOnce(true);
358+
}
359+
342360
const timeout = setTimeout(() => {
343361
if (!cancelled) {
344362
setIsLoadingRoom(false);
@@ -348,7 +366,6 @@ export const GroupChatScreen: React.FC<Props> = ({ route }) => {
348366
return () => {
349367
cancelled = true;
350368
clearTimeout(timeout);
351-
setStoreRoomMessages([]);
352369
};
353370
}, [roomKey]),
354371
);
@@ -581,22 +598,22 @@ export const GroupChatScreen: React.FC<Props> = ({ route }) => {
581598
setTipAmount('0');
582599
}
583600

584-
const messagesRef = useRef(messages);
585-
messagesRef.current = messages;
601+
const reversedMessagesRef = useRef(reversedMessages);
602+
reversedMessagesRef.current = reversedMessages;
586603

587604
const scrollToMessage = useCallback((hash: string) => {
588-
const index = messagesRef.current.findIndex((m) => m.hash === hash);
605+
const index = reversedMessagesRef.current.findIndex((m) => m.hash === hash);
589606
if (index !== -1 && flatListRef.current) {
590-
flatListRef.current.scrollToIndex({ index: index + 1, animated: true });
607+
flatListRef.current.scrollToIndex({ index: index, animated: true });
591608
}
592609
}, []);
593610

594-
const handleRetryPress = useCallback((hashStr: string) => {
595-
const item = messagesRef.current.find(m => m.hash === hashStr);
596-
if (item) {
597-
onSend(item.message, null, undefined, false, undefined, hashStr);
598-
}
599-
}, [onSend]);
611+
const handleRetryPress = useCallback((hashStr: string) => {
612+
const item = reversedMessagesRef.current.find(m => m.hash === hashStr);
613+
if (item) {
614+
onSend(item.message, null, undefined, false, undefined, hashStr);
615+
}
616+
}, [onSend]);
600617

601618
return (
602619
<ScreenLayout>
@@ -637,18 +654,17 @@ const handleRetryPress = useCallback((hashStr: string) => {
637654
style={{ flex: 1 }}
638655
inverted
639656
ref={flatListRef}
640-
data={messages}
657+
data={reversedMessages}
641658
keyExtractor={(item: Message) => item.hash}
642659
renderItem={({ item, index }) => {
643-
const previousMessage = messages[index - 1];
644-
const nextMessage = messages[index + 1];
660+
const olderMessage = reversedMessages[index + 1];
645661

646662
const onlyMessage =
647-
!!previousMessage &&
648-
previousMessage.address === item.address && item.timestamp - previousMessage.timestamp < 500000 && !item.tip;
663+
!!olderMessage &&
664+
olderMessage.address === item.address && item.timestamp - olderMessage.timestamp < 500000 && !item.tip;
649665

650666
const isLastInCluster = true;
651-
const isNewestMessage = index === messages.length - 1;
667+
const isNewestMessage = index === 0;
652668
const isFirstUnread = index === unreadIndex;
653669
const content = (
654670
<>
@@ -699,13 +715,8 @@ const handleRetryPress = useCallback((hashStr: string) => {
699715
windowSize={21}
700716
onEndReached={loadMoreMessages}
701717
onEndReachedThreshold={0.1}
718+
ListHeaderComponentStyle={{height: 20}}
702719
ListHeaderComponent={
703-
isLoadingMore ? (
704-
<ActivityIndicator size="small" color={color} />
705-
) : null
706-
}
707-
ListFooterComponentStyle={{height: 20}}
708-
ListFooterComponent={
709720
typingUsers?.length > 0 ?
710721
(
711722
<View style={{height: 20, justifyContent: 'center', alignItems: 'center' }}>
@@ -718,7 +729,14 @@ const handleRetryPress = useCallback((hashStr: string) => {
718729
) :
719730
<View style={{height: 20}}>
720731
</View>
721-
}
732+
}
733+
ListFooterComponent={
734+
isLoadingMore ? (
735+
<View style={{ marginVertical: 10 }}>
736+
<ActivityIndicator size="small" color={color} />
737+
</View>
738+
) : null
739+
}
722740
onScrollToIndexFailed={info => {
723741
setTimeout(() => {
724742
flatListRef.current?.scrollToIndex({
@@ -765,7 +783,6 @@ const styles = StyleSheet.create({
765783
flex: 1,
766784
},
767785
flatListContent: {
768-
flexDirection: 'column-reverse',
769786
paddingTop: 75,
770787
maxWidth: '100%',
771788
},

0 commit comments

Comments
 (0)