hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve code quality

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-03-12 14:14:56 +05:30
parent 48ec6224e7
commit a76dcb289a
3 changed files with 41 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/organisms/room/EventLimit.js
View file

@ -14,14 +14,10 @@ class EventLimit {
return this._from; return this._from;
} }
get end() { get length() {
return this._from + this.maxEvents; return this._from + this.maxEvents;
} }
setMaxEvents(maxEvents) {
this.maxEvents = maxEvents;
}
setFrom(from) { setFrom(from) {
this._from = from < 0 ? 0 : from; this._from = from < 0 ? 0 : from;
} }
@ -29,7 +25,7 @@ class EventLimit {
paginate(backwards, limit, timelineLength) { paginate(backwards, limit, timelineLength) {
this._from = backwards ? this._from - limit : this._from + limit; this._from = backwards ? this._from - limit : this._from + limit;
if (!backwards && this.end > timelineLength) { if (!backwards && this.length > timelineLength) {
this._from = timelineLength - this.maxEvents; this._from = timelineLength - this.maxEvents;
} }
if (this._from < 0) this._from = 0; if (this._from < 0) this._from = 0;

70
src/app/organisms/room/RoomViewContent.jsx
View 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 [timelineInfo, setTimelineInfo] = useState(null);
const setEventTimeline = async (eId) => { const setEventTimeline = async (eId) => {
@ -145,14 +145,14 @@ function useTimeline(roomTimeline, eventId, readEventStore, eventLimitRef) {
if (isSpecificEvent) { if (isSpecificEvent) {
focusEventIndex = roomTimeline.getEventIndex(eId); focusEventIndex = roomTimeline.getEventIndex(eId);
} else if (!readEventStore.getItem()) { } else if (!readUptoEvtStore.getItem()) {
// either opening live timeline or jump to unread. // either opening live timeline or jump to unread.
focusEventIndex = roomTimeline.getUnreadEventIndex(readUpToId); focusEventIndex = roomTimeline.getUnreadEventIndex(readUpToId);
if (roomTimeline.hasEventInTimeline(readUpToId)) { if (roomTimeline.hasEventInTimeline(readUpToId)) {
readEventStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId)); readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
} }
} else { } else {
focusEventIndex = roomTimeline.getUnreadEventIndex(readEventStore.getItem().getId()); focusEventIndex = roomTimeline.getUnreadEventIndex(readUptoEvtStore.getItem().getId());
} }
if (focusEventIndex > -1) { if (focusEventIndex > -1) {
@ -177,7 +177,7 @@ function useTimeline(roomTimeline, eventId, readEventStore, eventLimitRef) {
function usePaginate( function usePaginate(
roomTimeline, roomTimeline,
readEventStore, readUptoEvtStore,
forceUpdateLimit, forceUpdateLimit,
timelineScrollRef, timelineScrollRef,
eventLimitRef, eventLimitRef,
@ -185,12 +185,12 @@ function usePaginate(
const [info, setInfo] = useState(null); const [info, setInfo] = useState(null);
useEffect(() => { useEffect(() => {
const handleOnPagination = (backwards, loaded) => { const handlePaginatedFromServer = (backwards, loaded) => {
const limit = eventLimitRef.current; const limit = eventLimitRef.current;
if (loaded === 0) return; if (loaded === 0) return;
if (!readEventStore.getItem()) { if (!readUptoEvtStore.getItem()) {
const readUpToId = roomTimeline.getReadUpToEventId(); const readUpToId = roomTimeline.getReadUpToEventId();
readEventStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId)); readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
} }
limit.paginate(backwards, PAG_LIMIT, roomTimeline.timeline.length); limit.paginate(backwards, PAG_LIMIT, roomTimeline.timeline.length);
setTimeout(() => setInfo({ setTimeout(() => setInfo({
@ -198,9 +198,9 @@ function usePaginate(
loaded, loaded,
})); }));
}; };
roomTimeline.on(cons.events.roomTimeline.PAGINATED, handleOnPagination); roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
return () => { return () => {
roomTimeline.on(cons.events.roomTimeline.PAGINATED, handleOnPagination); roomTimeline.on(cons.events.roomTimeline.PAGINATED, handlePaginatedFromServer);
}; };
}, [roomTimeline]); }, [roomTimeline]);
@ -211,7 +211,7 @@ function usePaginate(
const tLength = roomTimeline.timeline.length; const tLength = roomTimeline.timeline.length;
if (timelineScroll.bottom < SCROLL_TRIGGER_POS) { if (timelineScroll.bottom < SCROLL_TRIGGER_POS) {
if (limit.end < tLength) { if (limit.length < tLength) {
// paginate from memory // paginate from memory
limit.paginate(false, PAG_LIMIT, tLength); limit.paginate(false, PAG_LIMIT, tLength);
forceUpdateLimit(); forceUpdateLimit();
@ -239,7 +239,7 @@ function usePaginate(
function useHandleScroll( function useHandleScroll(
roomTimeline, roomTimeline,
autoPaginate, autoPaginate,
readEventStore, readUptoEvtStore,
forceUpdateLimit, forceUpdateLimit,
timelineScrollRef, timelineScrollRef,
eventLimitRef, eventLimitRef,
@ -251,10 +251,10 @@ function useHandleScroll(
// emit event to toggle scrollToBottom button visibility // emit event to toggle scrollToBottom button visibility
const isAtBottom = ( const isAtBottom = (
timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward() timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()
&& limit.end >= roomTimeline.timeline.length && limit.length >= roomTimeline.timeline.length
); );
roomTimeline.emit(cons.events.roomTimeline.AT_BOTTOM, isAtBottom); roomTimeline.emit(cons.events.roomTimeline.AT_BOTTOM, isAtBottom);
if (isAtBottom && readEventStore.getItem()) { if (isAtBottom && readUptoEvtStore.getItem()) {
requestAnimationFrame(() => roomTimeline.markAllAsRead()); requestAnimationFrame(() => roomTimeline.markAllAsRead());
} }
}); });
@ -264,7 +264,7 @@ function useHandleScroll(
const handleScrollToLive = useCallback(() => { const handleScrollToLive = useCallback(() => {
const timelineScroll = timelineScrollRef.current; const timelineScroll = timelineScrollRef.current;
const limit = eventLimitRef.current; const limit = eventLimitRef.current;
if (readEventStore.getItem()) { if (readUptoEvtStore.getItem()) {
requestAnimationFrame(() => roomTimeline.markAllAsRead()); requestAnimationFrame(() => roomTimeline.markAllAsRead());
} }
if (roomTimeline.isServingLiveTimeline()) { if (roomTimeline.isServingLiveTimeline()) {
@ -279,7 +279,7 @@ function useHandleScroll(
return [handleScroll, handleScrollToLive]; return [handleScroll, handleScrollToLive];
} }
function useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLimitRef) { function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef) {
const myUserId = initMatrix.matrixClient.getUserId(); const myUserId = initMatrix.matrixClient.getUserId();
const [newEvent, setEvent] = useState(null); const [newEvent, setEvent] = useState(null);
@ -292,19 +292,19 @@ function useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLi
roomTimeline.markAllAsRead(); roomTimeline.markAllAsRead();
return; return;
} }
const readUpToEvent = readEventStore.getItem(); const readUpToEvent = readUptoEvtStore.getItem();
const readUpToId = roomTimeline.getReadUpToEventId(); const readUpToId = roomTimeline.getReadUpToEventId();
const isUnread = readUpToEvent?.getId() === readUpToId;
// if user doesn't have focus on app don't mark messages as read. // if user doesn't have focus on app don't mark messages as read.
if (document.visibilityState === 'hidden' || timelineScroll.bottom >= 16) { if (document.visibilityState === 'hidden' || timelineScroll.bottom >= 16) {
if (readUpToEvent === readUpToId) return; if (isUnread) return;
readEventStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId)); readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
return; return;
} }
// user has not mark room as read // user has not mark room as read
const isUnreadMsg = readUpToEvent?.getId() === readUpToId; if (!isUnread) {
if (!isUnreadMsg) {
roomTimeline.markAllAsRead(); roomTimeline.markAllAsRead();
} }
const { timeline } = roomTimeline; const { timeline } = roomTimeline;
@ -318,7 +318,7 @@ function useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLi
const tLength = roomTimeline.timeline.length; const tLength = roomTimeline.timeline.length;
const isUserViewingLive = ( const isUserViewingLive = (
roomTimeline.isServingLiveTimeline() roomTimeline.isServingLiveTimeline()
&& limit.end >= tLength - 1 && limit.length >= tLength - 1
&& timelineScroll.bottom < SCROLL_TRIGGER_POS && timelineScroll.bottom < SCROLL_TRIGGER_POS
); );
if (isUserViewingLive) { if (isUserViewingLive) {
@ -334,7 +334,7 @@ function useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLi
} }
const isUserDitchedLive = ( const isUserDitchedLive = (
roomTimeline.isServingLiveTimeline() roomTimeline.isServingLiveTimeline()
&& limit.end >= tLength - 1 && limit.length >= tLength - 1
); );
if (isUserDitchedLive) { if (isUserDitchedLive) {
// This stateUpdate will help to put the // This stateUpdate will help to put the
@ -375,13 +375,13 @@ function RoomViewContent({ eventId, roomTimeline }) {
const timelineScrollRef = useRef(null); const timelineScrollRef = useRef(null);
const eventLimitRef = useRef(null); const eventLimitRef = useRef(null);
const readEventStore = useStore(roomTimeline); const readUptoEvtStore = useStore(roomTimeline);
const [onLimitUpdate, forceUpdateLimit] = useForceUpdate(); const [onLimitUpdate, forceUpdateLimit] = useForceUpdate();
const timelineInfo = useTimeline(roomTimeline, eventId, readEventStore, eventLimitRef); const timelineInfo = useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef);
const [paginateInfo, autoPaginate] = usePaginate( const [paginateInfo, autoPaginate] = usePaginate(
roomTimeline, roomTimeline,
readEventStore, readUptoEvtStore,
forceUpdateLimit, forceUpdateLimit,
timelineScrollRef, timelineScrollRef,
eventLimitRef, eventLimitRef,
@ -389,12 +389,12 @@ function RoomViewContent({ eventId, roomTimeline }) {
const [handleScroll, handleScrollToLive] = useHandleScroll( const [handleScroll, handleScrollToLive] = useHandleScroll(
roomTimeline, roomTimeline,
autoPaginate, autoPaginate,
readEventStore, readUptoEvtStore,
forceUpdateLimit, forceUpdateLimit,
timelineScrollRef, timelineScrollRef,
eventLimitRef, eventLimitRef,
); );
useEventArrive(roomTimeline, readEventStore, timelineScrollRef, eventLimitRef); useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef);
const { timeline } = roomTimeline; const { timeline } = roomTimeline;
@ -418,7 +418,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
} }
if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()) { if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward()) {
const readUpToId = roomTimeline.getReadUpToEventId(); const readUpToId = roomTimeline.getReadUpToEventId();
if (readEventStore.getItem()?.getId() === readUpToId || readUpToId === null) { if (readUptoEvtStore.getItem()?.getId() === readUpToId || readUpToId === null) {
requestAnimationFrame(() => roomTimeline.markAllAsRead()); requestAnimationFrame(() => roomTimeline.markAllAsRead());
} }
} }
@ -465,14 +465,14 @@ function RoomViewContent({ eventId, roomTimeline }) {
let itemCountIndex = 0; let itemCountIndex = 0;
jumpToItemIndex = -1; jumpToItemIndex = -1;
const readEvent = readEventStore.getItem(); const readUptoEvent = readUptoEvtStore.getItem();
let unreadDivider = false; let unreadDivider = false;
if (roomTimeline.canPaginateBackward() || limit.from > 0) { if (roomTimeline.canPaginateBackward() || limit.from > 0) {
tl.push(loadingMsgPlaceholders(1, PLACEHOLDER_COUNT)); tl.push(loadingMsgPlaceholders(1, PLACEHOLDER_COUNT));
itemCountIndex += 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; if (i >= timeline.length) break;
const mEvent = timeline[i]; const mEvent = timeline[i];
const prevMEvent = timeline[i - 1] ?? null; const prevMEvent = timeline[i - 1] ?? null;
@ -491,9 +491,9 @@ function RoomViewContent({ eventId, roomTimeline }) {
let isNewEvent = false; let isNewEvent = false;
if (!unreadDivider) { if (!unreadDivider) {
unreadDivider = (readEvent unreadDivider = (readUptoEvent
&& prevMEvent?.getTs() <= readEvent.getTs() && prevMEvent?.getTs() <= readUptoEvent.getTs()
&& readEvent.getTs() < mEvent.getTs()); && readUptoEvent.getTs() < mEvent.getTs());
if (unreadDivider) { if (unreadDivider) {
isNewEvent = true; isNewEvent = true;
tl.push(<Divider key={`new-${mEvent.getId()}`} variant="positive" text="New messages" />); 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)); tl.push(renderEvent(roomTimeline, mEvent, isNewEvent ? null : prevMEvent, isFocus));
itemCountIndex += 1; itemCountIndex += 1;
} }
if (roomTimeline.canPaginateForward() || limit.end < timeline.length) { if (roomTimeline.canPaginateForward() || limit.length < timeline.length) {
tl.push(loadingMsgPlaceholders(2, PLACEHOLDER_COUNT)); tl.push(loadingMsgPlaceholders(2, PLACEHOLDER_COUNT));
} }

7
src/client/state/RoomTimeline.js
View file

@ -154,19 +154,19 @@ class RoomTimeline extends EventEmitter {
this._populateAllLinkedEvents(this.activeTimeline); this._populateAllLinkedEvents(this.activeTimeline);
} }
async _reset(eventId) { async _reset() {
if (this.isEncrypted()) await this.decryptAllEventsOfTimeline(this.activeTimeline); if (this.isEncrypted()) await this.decryptAllEventsOfTimeline(this.activeTimeline);
this._populateTimelines(); this._populateTimelines();
if (!this.initialized) { if (!this.initialized) {
this.initialized = true; this.initialized = true;
this._listenEvents(); this._listenEvents();
} }
this.emit(cons.events.roomTimeline.READY, eventId ?? null);
} }
async loadLiveTimeline() { async loadLiveTimeline() {
this.activeTimeline = this.liveTimeline; this.activeTimeline = this.liveTimeline;
await this._reset(); await this._reset();
this.emit(cons.events.roomTimeline.READY, null);
return true; return true;
} }
@ -176,7 +176,8 @@ class RoomTimeline extends EventEmitter {
try { try {
const eventTimeline = await this.matrixClient.getEventTimeline(timelineSet, eventId); const eventTimeline = await this.matrixClient.getEventTimeline(timelineSet, eventId);
this.activeTimeline = eventTimeline; this.activeTimeline = eventTimeline;
await this._reset(eventId); await this._reset();
this.emit(cons.events.roomTimeline.READY, eventId);
return true; return true;
} catch { } catch {
return false; return false;