From dabc13c98fbcad659a89a84dfc22e5bd4e1b01b1 Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Mon, 27 Sep 2021 16:32:01 +0100 Subject: [PATCH 1/2] Extract logic to a function For better readability of the call to useAsyncMemo() Signed-off-by: Paulo Pinto --- .../views/rooms/LinkPreviewGroup.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx index c9842bdd33b..f9d0c76e996 100644 --- a/src/components/views/rooms/LinkPreviewGroup.tsx +++ b/src/components/views/rooms/LinkPreviewGroup.tsx @@ -16,7 +16,7 @@ limitations under the License. import React, { useContext, useEffect } from "react"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; -import { IPreviewUrlResponse } from "matrix-js-sdk/src/client"; +import { IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/client"; import { useStateToggle } from "../../../hooks/useStateToggle"; import LinkPreviewWidget from "./LinkPreviewWidget"; @@ -40,13 +40,7 @@ const LinkPreviewGroup: React.FC = ({ links, mxEvent, onCancelClick, onH const ts = mxEvent.getTs(); const previews = useAsyncMemo<[string, IPreviewUrlResponse][]>(async () => { - return Promise.all<[string, IPreviewUrlResponse] | void>(links.map(async link => { - try { - return [link, await cli.getUrlPreview(link, ts)]; - } catch (error) { - console.error("Failed to get URL preview: " + error); - } - })).then(a => a.filter(Boolean)) as Promise<[string, IPreviewUrlResponse][]>; + return fetchPreviews(cli, links, ts); }, [links, ts], []); useEffect(() => { @@ -89,4 +83,15 @@ const LinkPreviewGroup: React.FC = ({ links, mxEvent, onCancelClick, onH ; }; +const fetchPreviews = (cli: MatrixClient, links: string[], ts: number): + Promise<[string, IPreviewUrlResponse][]> => { + return Promise.all<[string, IPreviewUrlResponse] | void>(links.map(async link => { + try { + return [link, await cli.getUrlPreview(link, ts)]; + } catch (error) { + console.error("Failed to get URL preview: " + error); + } + })).then(a => a.filter(Boolean)) as Promise<[string, IPreviewUrlResponse][]>; +}; + export default LinkPreviewGroup; From 432dd994bdf70add062235c3c6aa5e2cc158fe4c Mon Sep 17 00:00:00 2001 From: Paulo Pinto Date: Mon, 27 Sep 2021 18:03:15 +0100 Subject: [PATCH 2/2] Filter out invalid previews The call to cli.getUrlPreview() might return an empty object ({}), which means there is in fact no preview for that URL. Signed-off-by: Paulo Pinto --- src/components/views/rooms/LinkPreviewGroup.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx index f9d0c76e996..eed13aff0fc 100644 --- a/src/components/views/rooms/LinkPreviewGroup.tsx +++ b/src/components/views/rooms/LinkPreviewGroup.tsx @@ -87,7 +87,10 @@ const fetchPreviews = (cli: MatrixClient, links: string[], ts: number): Promise<[string, IPreviewUrlResponse][]> => { return Promise.all<[string, IPreviewUrlResponse] | void>(links.map(async link => { try { - return [link, await cli.getUrlPreview(link, ts)]; + const preview = await cli.getUrlPreview(link, ts); + if (preview && Object.keys(preview).length > 0) { + return [link, preview]; + } } catch (error) { console.error("Failed to get URL preview: " + error); }