Fix thread panel filtering (#7126)

This commit is contained in:
Germain 2021-11-12 12:43:41 +00:00 committed by GitHub
parent 646f87b2db
commit 1e50636520
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'; import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread'; import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set'; import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
import { Room } from 'matrix-js-sdk/src/models/room'; import { Room } from 'matrix-js-sdk/src/models/room';
@ -70,46 +70,23 @@ const useFilteredThreadsTimelinePanel = ({
pendingEvents: false, pendingEvents: false,
}), []); }), []);
useEffect(() => { const buildThreadList = useCallback(function(timelineSet: EventTimelineSet) {
let filteredThreads = Array.from(threads); timelineSet.resetLiveTimeline("");
if (filterOption === ThreadFilterType.My) { Array.from(threads)
filteredThreads = filteredThreads.filter(([id, thread]) => { .map(([, thread]) => thread)
return thread.rootEvent.getSender() === userId; .forEach(thread => {
}); const ownEvent = thread.rootEvent.getSender() === userId;
if (filterOption !== ThreadFilterType.My || ownEvent) {
timelineSet.addLiveEvent(thread.rootEvent);
} }
// NOTE: Temporarily reverse the list until https://github.com/vector-im/element-web/issues/19393 gets properly resolved
// The proper list order should be top-to-bottom, like in social-media newsfeeds.
filteredThreads.reverse().forEach(([id, thread]) => {
const event = thread.rootEvent;
if (!event || timelineSet.findEventById(event.getId()) || event.status !== null) return;
timelineSet.addEventToTimeline(
event,
timelineSet.getLiveTimeline(),
true,
);
}); });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [room, timelineSet]);
useEventEmitter(room, ThreadEvent.Update, (thread) => {
const event = thread.rootEvent;
if (
// If that's a reply and not an event
event !== thread.replyToEvent &&
timelineSet.findEventById(event.getId()) ||
event.status !== null
) return;
if (event !== thread.events[thread.events.length - 1]) {
timelineSet.removeEvent(thread.events[thread.events.length - 1]);
timelineSet.removeEvent(event);
}
timelineSet.addEventToTimeline(
event,
timelineSet.getLiveTimeline(),
false,
);
updateTimeline(); updateTimeline();
}); }, [filterOption, threads, updateTimeline, userId]);
useEffect(() => { buildThreadList(timelineSet); }, [timelineSet, buildThreadList]);
useEventEmitter(room, ThreadEvent.Update, () => { buildThreadList(timelineSet); });
useEventEmitter(room, ThreadEvent.New, () => { buildThreadList(timelineSet); });
return timelineSet; return timelineSet;
}; };