imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display an empty pinned message banner when loading

Browse source
This commit is contained in:
Florian Duros 2024-12-04 11:34:37 +01:00
parent 1d51323451
commit c73be9d87c
No known key found for this signature in database
GPG key ID: A5BBB4041B493F15
2 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/rooms/PinnedMessageBanner.tsx
View file

@ -46,7 +46,7 @@ interface PinnedMessageBannerProps {
export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBannerProps): JSX.Element | null {
const pinnedEventIds = usePinnedEvents(room);
const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
const eventCount = pinnedEvents.length;
const eventCount = pinnedEvents?.length || 0;
const isSinglePinnedEvent = eventCount === 1;
const [currentEventIndex, setCurrentEventIndex] = useState(eventCount - 1);
@ -55,8 +55,19 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
setCurrentEventIndex(() => eventCount - 1);
}, [eventCount]);
const pinnedEvent = pinnedEvents[currentEventIndex];
if (!pinnedEvent) return null;
const pinnedEvent = pinnedEvents?.[currentEventIndex];
// We are fetching the pinned messages
if (!pinnedEvents)
return (
<div
className="mx_PinnedMessageBanner"
aria-label={_t("room|pinned_message_banner|description")}
data-testid="pinned-message-banner"
/>
);
// No pinned messages, we don't display the banner
else if (!pinnedEvent) return null;
const shouldUseMessageEvent = pinnedEvent.isRedacted() || pinnedEvent.isDecryptionFailure();

6
src/hooks/usePinnedEvents.ts
View file

@ -169,6 +169,7 @@ async function fetchPinnedEvent(room: Room, pinnedEventId: string, cli: MatrixCl
/**
* Fetch the pinned events
* Returns null if the pinned events are not fetched yet
* @param room
* @param pinnedEventIds
*/
@ -189,13 +190,14 @@ export function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Ar
/**
* Fetch the pinned events and sort them by from the oldest to the newest
* The order is determined by the event timestamp
* Returns null if the pinned events are not fetched yet
* @param room
* @param pinnedEventIds
*/
export function useSortedFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> {
export function useSortedFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> | null {
const pinnedEvents = useFetchedPinnedEvents(room, pinnedEventIds);
return useMemo(() => {
if (!pinnedEvents) return [];
if (!pinnedEvents) return null;
return pinnedEvents.sort((a, b) => {
if (!a) return -1;