cetirizine

commit 1b4cf57c8df9e694e64e84a0358e87ecd0d21d41
parent 9113747995e855f66ad140abecccd4fa51faab48
Author: MTRNord <mtrnord1@gmail.com>
Date:   Mon, 15 May 2023 02:10:27 +0200

Fix further issues with the logic of the event list

Diffstat:
M
src/components/events/messageEvent.tsx
 | 
10
+++++-----
M
src/components/events/unknownEvent.tsx
 | 
6
+++---
M
src/pages/MainPage.tsx
 | 
33
++++++++++++++++++++++-----------

3 files changed, 30 insertions(+), 19 deletions(-)
diff --git a/src/components/events/messageEvent.tsx b/src/components/events/messageEvent.tsx
@@ -125,7 +125,7 @@ const MessageEvent: FC<MessageEventProps> = memo(({ event, room, hasPreviousEven
                         dm={room?.isDM() || false}
                     />}
                     <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-[3.7rem]"}>
-                        {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
+                        {!hasPreviousEvent && <h2 className="text-xl font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
                         {/* TODO: Loading circle while image is loading */}
                         <img
                             src={url}
@@ -177,7 +177,7 @@ const MessageEvent: FC<MessageEventProps> = memo(({ event, room, hasPreviousEven
                         dm={room?.isDM() || false}
                     />}
                     <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "flex-1 ml-[3.7rem]"}>
-                        {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
+                        {!hasPreviousEvent && <h2 className="text-xl font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
                         {url && <Waveform src_url={url} />}
                     </div>
                 </div>
@@ -192,7 +192,7 @@ const MessageEvent: FC<MessageEventProps> = memo(({ event, room, hasPreviousEven
                         dm={room?.isDM() || false}
                     />}
                     <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-[3.7rem]"}>
-                        {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
+                        {!hasPreviousEvent && <h2 className="text-xl font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
                         <Linkify options={linkifyOptions} as='p' className="text-black text-base font-normal">{event.content.body}</Linkify>
                     </div>
                 </div>
@@ -294,7 +294,7 @@ const TextMessage: FC<TextMessage> = memo(({ event, room, hasPreviousEvent, mess
                     dm={room?.isDM() || false}
                 />}
                 <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-[3.7rem]"}>
-                    {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
+                    {!hasPreviousEvent && <h2 className="text-xl font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
                     {/* TODO: Fixme */}
                     <p className={`${text_color} text-base font-normal`} dangerouslySetInnerHTML={{ __html: linkified }}></p>
                 </div>
@@ -310,7 +310,7 @@ const TextMessage: FC<TextMessage> = memo(({ event, room, hasPreviousEvent, mess
                     dm={room?.isDM() || false}
                 />}
                 <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-[3.7rem]"}>
-                    {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
+                    {!hasPreviousEvent && <h2 className="text-xl font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
                     <Linkify options={linkifyOptions} as='p' className={`${text_color} text-base font-normal`}>{event.content.body}</Linkify>
                 </div>
             </div>
diff --git a/src/components/events/unknownEvent.tsx b/src/components/events/unknownEvent.tsx
@@ -38,7 +38,7 @@ const UnknownEvent: FC<UnknownEventProps> = memo(({ event, room, hasPreviousEven
                 dm={room?.isDM() || false}
             />}
             <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-[3.7rem]"}>
-                {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
+                {!hasPreviousEvent && <h2 className="text-xl font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
                 <Linkify options={linkifyOptions} as='p' className="whitespace-break-spaces text-black text-base font-normal">{JSON.stringify(event, null, 4)}</Linkify>
             </div>
         </div>
@@ -72,7 +72,7 @@ export const UndecryptableEvent: FC<UndecryptableEventProps> = memo(({ event, ro
                 dm={room?.isDM() || false}
             />}
             <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-[3.7rem]"}>
-                {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
+                {!hasPreviousEvent && <h2 className="text-xl font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
                 <Linkify options={linkifyOptions} as='p' className="whitespace-pre-wrap text-base font-normal text-orange-600">Unable to decrypt event</Linkify>
             </div>
         </div>
@@ -108,7 +108,7 @@ export const RedactedEvent: FC<RedactedEventProps> = memo(({ event, redacted_bec
                 dm={room?.isDM() || false}
             />}
             <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-[3.7rem]"}>
-                {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
+                {!hasPreviousEvent && <h2 className="text-xl font-medium text-red-500 whitespace-pre-wrap">{room?.getMemberName(event.sender) || event.sender}</h2>}
                 {redacted_because && <p className="whitespace-pre-wrap text-base font-normal text-blue-600 italic">Message was redacted: {redacted_because}</p>}
                 {!redacted_because && <p className="whitespace-pre-wrap text-base font-normal text-blue-600 italic">Message was redacted</p>}
             </div>
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -119,7 +119,7 @@ const ChatView: FC<ChatViewProps> = memo(({ room, }) => {
             console.log("Resetting events because we changed rooms");
             setEvents([]);
             setEventsFull([]);
-            setFirstItemIndex(undefined);
+            setFirstItemIndex(0);
             setPreviousPathname(pathname);
         }
 
@@ -141,7 +141,7 @@ const ChatView: FC<ChatViewProps> = memo(({ room, }) => {
                     const events = [...no_relations];
                     setEventsFull(() => [...eventsRaw]);
                     setEvents(() => events);
-                    setFirstItemIndex(0);
+                    setFirstItemIndex(events.length);
                 }
             })
         }
@@ -166,21 +166,32 @@ const ChatView: FC<ChatViewProps> = memo(({ room, }) => {
                         event.content["m.relates_to"]?.["rel_type"] !== "m.replace"
                     );
 
-                    if (no_relations.length > 0) {
-                        const events = [...no_relations];
-                        setEventsFull(() => [...eventsRaw]);
-                        setEvents(() => events);
+
+                    // If there are no events or no changes, do nothing
+                    if (no_relations.length > 0 && events.length > 0) {
+                        const newEvents = [...no_relations];
+
+                        if (eventsRaw.length !== eventsFull.length) {
+                            setEventsFull(() => [...eventsRaw]);
+                        }
+                        // Check if newEvents is equal to events
+                        if (newEvents.length !== events.length) {
+                            setEvents(() => events);
+                        }
                     }
                 })
             };
+            console.log("Adding listener for events")
             room.on("events", listenForEvents);
             return () => {
+                console.log("Removing listener for events")
                 room.off("events", listenForEvents);
             }
         }
     }, [room, eventsFull, events, setEventsFull, setEvents, pathname])
 
-    const renderEventPure = useCallback((index: number, event: IRoomEvent) => {
+    const renderEventPure = useCallback((_index: number, event: IRoomEvent) => {
+        const index = eventsFull.findIndex(e => e.event_id === event.event_id);
         if (event.unsigned?.redacted) {
             return (<RedactedEvent event={event} redacted_because={event.unsigned.redacted_because} key={event.unsigned.redaction_id} room={room} hasPreviousEvent={event.unsigned.hasPreviousEvent} />)
         }
@@ -189,7 +200,7 @@ const ChatView: FC<ChatViewProps> = memo(({ room, }) => {
             return (<UndecryptableEvent key={event.event_id} event={event} hasPreviousEvent={event.unsigned.hasPreviousEvent} room={room} />)
         }
 
-        let previousEvent = events?.[index - 1];
+        let previousEvent = eventsFull?.[index - 1];
         const previousEventIsFromSameSender = previousEvent?.sender === event.sender;
 
         let previousEventType = previousEvent?.type;
@@ -239,7 +250,7 @@ const ChatView: FC<ChatViewProps> = memo(({ room, }) => {
     }, [eventsFull])
 
 
-    if (events?.length === 0) {
+    if (events.length === 0 || !room || eventsFull.length === 0) {
         return (
             <></>
         )
@@ -252,12 +263,12 @@ const ChatView: FC<ChatViewProps> = memo(({ room, }) => {
             data={events}
             firstItemIndex={firstItemIndex}
             initialTopMostItemIndex={events.length - 1}
-            overscan={10}
+            overscan={200}
             itemContent={renderEventPure}
             components={{ Header }}
             followOutput={(isAtBottom: boolean) => {
                 if (isAtBottom) {
-                    return 'smooth' // can be 'auto' or false to avoid scrolling
+                    return 'smooth'
                 } else {
                     return false
                 }