Ajay Bura
f9de1e276b
* add pinned room events hook * room pinned message - WIP * add room event hook * fetch pinned messages before displaying * use react-query in room event hook * disable staleTime and gc to 1 hour in room event hook * use room event hook in reply component * render pinned messages * add option to pin/unpin messages * remove message base from message placeholders and add variant * display message placeholder while loading pinned messages * render pinned event error * show no pinned message placeholder * fix message placeholder flickering
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { MatrixEvent, Room } from 'matrix-js-sdk';
|
|
import { useCallback, useMemo } from 'react';
|
|
import to from 'await-to-js';
|
|
import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useMatrixClient } from './useMatrixClient';
|
|
|
|
const useFetchEvent = (room: Room, eventId: string) => {
|
|
const mx = useMatrixClient();
|
|
|
|
const fetchEventCallback = useCallback(async () => {
|
|
const evt = await mx.fetchRoomEvent(room.roomId, eventId);
|
|
const mEvent = new MatrixEvent(evt);
|
|
|
|
if (mEvent.isEncrypted() && mx.getCrypto()) {
|
|
await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
|
|
}
|
|
|
|
return mEvent;
|
|
}, [mx, room.roomId, eventId]);
|
|
|
|
return fetchEventCallback;
|
|
};
|
|
|
|
/**
|
|
*
|
|
* @param room
|
|
* @param eventId
|
|
* @returns `MatrixEvent`, `undefined` means loading, `null` means failure
|
|
*/
|
|
export const useRoomEvent = (
|
|
room: Room,
|
|
eventId: string,
|
|
getLocally?: () => MatrixEvent | undefined
|
|
) => {
|
|
const event = useMemo(() => {
|
|
if (getLocally) return getLocally();
|
|
return room.findEventById(eventId);
|
|
}, [room, eventId, getLocally]);
|
|
|
|
const fetchEvent = useFetchEvent(room, eventId);
|
|
|
|
const { data, error } = useQuery({
|
|
enabled: event === undefined,
|
|
queryKey: [room.roomId, eventId],
|
|
queryFn: fetchEvent,
|
|
staleTime: Infinity,
|
|
gcTime: 60 * 60 * 1000, // 1hour
|
|
});
|
|
|
|
if (event) return event;
|
|
if (data) return data;
|
|
if (error) return null;
|
|
|
|
return undefined;
|
|
};
|