Improve code quality
authorAjay Bura <ajbura@gmail.com>
Sat, 12 Mar 2022 08:44:56 +0000 (14:14 +0530)
committerAjay Bura <ajbura@gmail.com>
Sat, 12 Mar 2022 08:44:56 +0000 (14:14 +0530)
Signed-off-by: Ajay Bura <ajbura@gmail.com>
src/app/organisms/room/EventLimit.js
src/app/organisms/room/RoomViewContent.jsx
src/client/state/RoomTimeline.js

index 8efb8999dcef00ec8c2eef98a50832a7a750c22b..de87da37739215ca243b6e86539ca5fc45be6328 100644 (file)
@@ -14,14 +14,10 @@ class EventLimit {
     return this._from;
   }
 
-  get end() {
+  get length() {
     return this._from + this.maxEvents;
   }
 
-  setMaxEvents(maxEvents) {
-    this.maxEvents = maxEvents;
-  }
-
   setFrom(from) {
     this._from = from < 0 ? 0 : from;
   }
@@ -29,7 +25,7 @@ class EventLimit {
   paginate(backwards, limit, timelineLength) {
     this._from = backwards ? this._from - limit : this._from + limit;
 
-    if (!backwards && this.end > timelineLength) {
+    if (!backwards && this.length > timelineLength) {
       this._from = timelineLength - this.maxEvents;
     }
     if (this._from < 0) this._from = 0;
index 417f16056f534746c45d02fa48bccbc1179b4a42..751e83544e6215cbe713103f6b66cacd604f74e3 100644 (file)
@@ -119,7 +119,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) {
   );
 }
 
-function useTimeline(roomTimeline, eventId, readEventStore, eventLimitRef) {
+function useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef) {
   const [timelineInfo, setTimelineInfo] = useState(null);
 
   const setEventTimeline = async (eId) => {
@@ -145,14 +145,14 @@ function useTimeline(roomTimeline, eventId, readEventStore, eventLimitRef) {
 
       if (isSpecificEvent) {
         focusEventIndex = roomTimeline.getEventIndex(eId);
-      } else if (!readEventStore.getItem()) {
+      } else if (!readUptoEvtStore.getItem()) {
         // either opening live timeline or jump to unread.
         focusEventIndex = roomTimeline.getUnreadEventIndex(readUpToId);
         if (roomTimeline.hasEventInTimeline(readUpToId)) {
-          readEventStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
+          readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
         }
       } else {
-        focusEventIndex = roomTimeline.getUnreadEventIndex(readEventStore.getItem().getId());
+        focusEventIndex = roomTimeline.getUnreadEventIndex(readUptoEvtStore.getItem().getId());
       }
 
       if (focusEventIndex > -1) {
@@ -177,7 +177,7 @@ function useTimeline(roomTimeline, eventId, readEventStore, eventLimitRef) {
 
 function usePaginate(
   roomTimeline,
-  readEventStore,
+  readUptoEvtStore,
   forceUpdateLimit,
   timelineScrollRef,
   eventLimitRef,
@@ -185,12 +185,12 @@ function usePaginate(
   const [info, setInfo] = useState(null);
 
   useEffect(() => {
-    const handleOnPagination = (backwards, loaded) => {
+    const handlePaginatedFromServer = (backwards, loaded) => {
       const limit = eventLimitRef.current;
       if (loaded === 0) return;
-      if (!readEventStore.getItem()) {
+      if (!readUptoEvtStore.getItem()) {
         const readUpToId = roomTimeline.getReadUpToEventId();
-        readEventStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
+        readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
       }
       limit.paginate(backwards, PAG_LIMIT, roomTimeline.timeline.length);
       setTimeout(() => setInfo({
@@ -198,9 +198,9 @@ function usePaginate(
         loaded,
       }));
     };
-    roomTimeline.on(cons.events.roomTimeline.PAGINATED, handleOnPagination);
+    roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
     return () => {
-      roomTimeline.on(cons.events.roomTimeline.PAGINATED, handleOnPagination);
+      roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
     };
   }, [roomTimeline]);
 
@@ -211,7 +211,7 @@ function usePaginate(
     const tLength = roomTimeline.timeline.length;
 
     if (timelineScroll.bottom < SCROLL_TRIGGER_POS) {
-      if (limit.end < tLength) {
+      if (limit.length < tLength) {
         // paginate from memory
         limit.paginate(false, PAG_LIMIT, tLength);
         forceUpdateLimit();
@@ -239,7 +239,7 @@ function usePaginate(
 function useHandleScroll(
   roomTimeline,
   autoPaginate,
-  readEventStore,
+  readUptoEvtStore,
   forceUpdateLimit,
   timelineScrollRef,
   eventLimitRef,
@@ -251,10 +251,10 @@ function useHandleScroll(
       // emit event to toggle scrollToBottom button visibility
       const isAtBottom = (
         timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()
-        && limit.end >= roomTimeline.timeline.length
+        && limit.length >= roomTimeline.timeline.length
       );
       roomTimeline.emit(cons.events.roomTimeline.AT_BOTTOM, isAtBottom);
-      if (isAtBottom && readEventStore.getItem()) {
+      if (isAtBottom && readUptoEvtStore.getItem()) {
         requestAnimationFrame(() => roomTimeline.markAllAsRead());
       }
     });
@@ -264,7 +264,7 @@ function useHandleScroll(
   const handleScrollToLive = useCallback(() => {
     const timelineScroll = timelineScrollRef.current;
     const limit = eventLimitRef.current;
-    if (readEventStore.getItem()) {
+    if (readUptoEvtStore.getItem()) {
       requestAnimationFrame(() => roomTimeline.markAllAsRead());
     }
     if (roomTimeline.isServingLiveTimeline()) {
@@ -279,7 +279,7 @@ function useHandleScroll(
   return [handleScroll, handleScrollToLive];
 }
 
-function useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLimitRef) {
+function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef) {
   const myUserId = initMatrix.matrixClient.getUserId();
   const [newEvent, setEvent] = useState(null);
 
@@ -292,19 +292,19 @@ function useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLi
         roomTimeline.markAllAsRead();
         return;
       }
-      const readUpToEvent = readEventStore.getItem();
+      const readUpToEvent = readUptoEvtStore.getItem();
       const readUpToId = roomTimeline.getReadUpToEventId();
+      const isUnread = readUpToEvent?.getId() === readUpToId;
 
       // if user doesn't have focus on app don't mark messages as read.
       if (document.visibilityState === 'hidden' || timelineScroll.bottom >= 16) {
-        if (readUpToEvent === readUpToId) return;
-        readEventStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
+        if (isUnread) return;
+        readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
         return;
       }
 
       // user has not mark room as read
-      const isUnreadMsg = readUpToEvent?.getId() === readUpToId;
-      if (!isUnreadMsg) {
+      if (!isUnread) {
         roomTimeline.markAllAsRead();
       }
       const { timeline } = roomTimeline;
@@ -318,7 +318,7 @@ function useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLi
       const tLength = roomTimeline.timeline.length;
       const isUserViewingLive = (
         roomTimeline.isServingLiveTimeline()
-        && limit.end >= tLength - 1
+        && limit.length >= tLength - 1
         && timelineScroll.bottom < SCROLL_TRIGGER_POS
       );
       if (isUserViewingLive) {
@@ -334,7 +334,7 @@ function useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLi
       }
       const isUserDitchedLive = (
         roomTimeline.isServingLiveTimeline()
-        && limit.end >= tLength - 1
+        && limit.length >= tLength - 1
       );
       if (isUserDitchedLive) {
         // This stateUpdate will help to put the
@@ -375,13 +375,13 @@ function RoomViewContent({ eventId, roomTimeline }) {
   const timelineScrollRef = useRef(null);
   const eventLimitRef = useRef(null);
 
-  const readEventStore = useStore(roomTimeline);
+  const readUptoEvtStore = useStore(roomTimeline);
   const [onLimitUpdate, forceUpdateLimit] = useForceUpdate();
 
-  const timelineInfo = useTimeline(roomTimeline, eventId, readEventStore, eventLimitRef);
+  const timelineInfo = useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef);
   const [paginateInfo, autoPaginate] = usePaginate(
     roomTimeline,
-    readEventStore,
+    readUptoEvtStore,
     forceUpdateLimit,
     timelineScrollRef,
     eventLimitRef,
@@ -389,12 +389,12 @@ function RoomViewContent({ eventId, roomTimeline }) {
   const [handleScroll, handleScrollToLive] = useHandleScroll(
     roomTimeline,
     autoPaginate,
-    readEventStore,
+    readUptoEvtStore,
     forceUpdateLimit,
     timelineScrollRef,
     eventLimitRef,
   );
-  useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLimitRef);
+  useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef);
 
   const { timeline } = roomTimeline;
 
@@ -418,7 +418,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
       }
       if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()) {
         const readUpToId = roomTimeline.getReadUpToEventId();
-        if (readEventStore.getItem()?.getId() === readUpToId || readUpToId === null) {
+        if (readUptoEvtStore.getItem()?.getId() === readUpToId || readUpToId === null) {
           requestAnimationFrame(() => roomTimeline.markAllAsRead());
         }
       }
@@ -465,14 +465,14 @@ function RoomViewContent({ eventId, roomTimeline }) {
 
     let itemCountIndex = 0;
     jumpToItemIndex = -1;
-    const readEvent = readEventStore.getItem();
+    const readUptoEvent = readUptoEvtStore.getItem();
     let unreadDivider = false;
 
     if (roomTimeline.canPaginateBackward() || limit.from > 0) {
       tl.push(loadingMsgPlaceholders(1, PLACEHOLDER_COUNT));
       itemCountIndex += PLACEHOLDER_COUNT;
     }
-    for (let i = limit.from; i < limit.end; i += 1) {
+    for (let i = limit.from; i < limit.length; i += 1) {
       if (i >= timeline.length) break;
       const mEvent = timeline[i];
       const prevMEvent = timeline[i - 1] ?? null;
@@ -491,9 +491,9 @@ function RoomViewContent({ eventId, roomTimeline }) {
 
       let isNewEvent = false;
       if (!unreadDivider) {
-        unreadDivider = (readEvent
-          && prevMEvent?.getTs() <= readEvent.getTs()
-          && readEvent.getTs() < mEvent.getTs());
+        unreadDivider = (readUptoEvent
+          && prevMEvent?.getTs() <= readUptoEvent.getTs()
+          && readUptoEvent.getTs() < mEvent.getTs());
         if (unreadDivider) {
           isNewEvent = true;
           tl.push(<Divider key={`new-${mEvent.getId()}`} variant="positive" text="New messages" />);
@@ -514,7 +514,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
       tl.push(renderEvent(roomTimeline, mEvent, isNewEvent ? null : prevMEvent, isFocus));
       itemCountIndex += 1;
     }
-    if (roomTimeline.canPaginateForward() || limit.end < timeline.length) {
+    if (roomTimeline.canPaginateForward() || limit.length < timeline.length) {
       tl.push(loadingMsgPlaceholders(2, PLACEHOLDER_COUNT));
     }
 
index 4f5c803de1e576eb17cbdbcc4bd8c0782f2c8978..f491186482b568ce57311e175d3c4545a2060e1c 100644 (file)
@@ -154,19 +154,19 @@ class RoomTimeline extends EventEmitter {
     this._populateAllLinkedEvents(this.activeTimeline);
   }
 
-  async _reset(eventId) {
+  async _reset() {
     if (this.isEncrypted()) await this.decryptAllEventsOfTimeline(this.activeTimeline);
     this._populateTimelines();
     if (!this.initialized) {
       this.initialized = true;
       this._listenEvents();
     }
-    this.emit(cons.events.roomTimeline.READY, eventId ?? null);
   }
 
   async loadLiveTimeline() {
     this.activeTimeline = this.liveTimeline;
     await this._reset();
+    this.emit(cons.events.roomTimeline.READY, null);
     return true;
   }
 
@@ -176,7 +176,8 @@ class RoomTimeline extends EventEmitter {
     try {
       const eventTimeline = await this.matrixClient.getEventTimeline(timelineSet, eventId);
       this.activeTimeline = eventTimeline;
-      await this._reset(eventId);
+      await this._reset();
+      this.emit(cons.events.roomTimeline.READY, eventId);
       return true;
     } catch {
       return false;