diff --git a/.changeset/big-crabs-care.md b/.changeset/big-crabs-care.md new file mode 100644 index 00000000..57def58c --- /dev/null +++ b/.changeset/big-crabs-care.md @@ -0,0 +1,6 @@ +--- +"@xmtp/react-sdk": minor +--- + +- Added filter to `useMessages` hook that removes messages with unsupported content types without fallback content +- Added `disableUnsupportedNoFallbackFiltering` option to `useMessages` hook to allow for disabling of the filter diff --git a/packages/react-sdk/src/hooks/useMessages.ts b/packages/react-sdk/src/hooks/useMessages.ts index f2f3707b..6c9478e6 100644 --- a/packages/react-sdk/src/hooks/useMessages.ts +++ b/packages/react-sdk/src/hooks/useMessages.ts @@ -1,5 +1,5 @@ import { SortDirection, type DecodedMessage } from "@xmtp/xmtp-js"; -import { useCallback, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { min, subSeconds } from "date-fns"; import type { OnError } from "../sharedTypes"; import { useCachedMessages } from "./useCachedMessages"; @@ -21,6 +21,11 @@ export type UseMessagesOptions = OnError & { * browser tab becomes visible */ disableAutoSync?: boolean; + /** + * Whether or not to disable filtering of messages with an unsupported + * content type and no content fallback + */ + disableUnsupportedNoFallbackFiltering?: boolean; }; /** @@ -45,7 +50,12 @@ export const useMessages = ( const loadingRef = useRef(false); // destructure options for more granular dependency arrays - const { disableAutoSync, onError, onMessages } = options ?? {}; + const { + disableAutoSync, + disableUnsupportedNoFallbackFiltering, + onError, + onMessages, + } = options ?? {}; const getMessages = useCallback(async () => { // already in progress @@ -163,10 +173,23 @@ export const useMessages = ( }; }, [getMessages, disableAutoSync]); + const filteredMessages = useMemo(() => { + if (!disableUnsupportedNoFallbackFiltering) { + return messages; + } + return messages.filter( + (message) => + // content type is supported, or + message.content || + // content type is not supported but there is a fallback + (message.content === undefined && message.contentFallback), + ); + }, [disableUnsupportedNoFallbackFiltering, messages]); + return { error, isLoaded, isLoading, - messages, + messages: filteredMessages, }; };