From 6bea0bf8f1ce5e009dd2be7f40d24739905b0a68 Mon Sep 17 00:00:00 2001 From: smolgrrr Date: Mon, 12 Aug 2024 18:36:07 +1000 Subject: [PATCH] pfp cache --- client/src/components/Home.tsx | 42 ++++++- .../Modals/CardModals/LinkPreview.tsx | 112 +++++++++--------- .../Modals/CardModals/TextModal.tsx | 2 +- client/src/components/Modals/NoteCard.tsx | 6 +- client/src/components/Modals/OptionsBar.tsx | 2 +- client/src/components/Modals/RepostCard.tsx | 43 +++++-- client/src/components/Thread.tsx | 9 +- client/src/utils/otherUtils.ts | 11 +- 8 files changed, 147 insertions(+), 80 deletions(-) diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index 430501b..af0f05e 100644 --- a/client/src/components/Home.tsx +++ b/client/src/components/Home.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, useCallback } from "react"; +import { useEffect, useState, useCallback, useMemo } from "react"; import PostCard from "./Modals/NoteCard"; import { uniqBy } from "../utils/otherUtils"; // Assume getPow is a correct import now import { subGlobalFeed } from "../utils/subscriptions"; @@ -14,8 +14,36 @@ const useUniqEvents = () => { const [events, setEvents] = useState([]); const age = Number(localStorage.getItem("age")) || 24; + // Load cached metadataEvents from localStorage + const [cachedMetadataEvents, setCachedMetadataEvents] = useState( + JSON.parse(localStorage.getItem("cachedMetadataEvents") || "[]") + ); + useEffect(() => { - const onEvent = (event: Event) => setEvents((prevEvents) => [...prevEvents, event]); + const onEvent = (event: Event) => { + setEvents((prevEvents) => [...prevEvents, event]); + + // If the new event is a metadata event, add it to the cached metadata events + if (event.kind === 0) { + setCachedMetadataEvents((prevMetadataEvents) => { + // Check if the event already exists in the cached metadata events + const existingEvent = prevMetadataEvents.find((e) => e.id === event.id || e.pubkey === event.pubkey) + if (!existingEvent) { + // If the event doesn't exist, add it to the cached metadata events + return [...prevMetadataEvents, event]; + } else if (existingEvent && existingEvent.created_at < event.created_at) { + // Remove any existing metadata event with the same pubkey and id + const updatedMetadataEvents = prevMetadataEvents.filter( + (e) => e.id !== existingEvent.id + ); + // Add the new metadata event + return [...updatedMetadataEvents, event]; + } + // If the event already exists, return the previous cached metadata events + return prevMetadataEvents; + }); + } + }; const unsubscribe = subGlobalFeed(onEvent, age); return unsubscribe; @@ -24,14 +52,18 @@ const useUniqEvents = () => { const uniqEvents = uniqBy(events, "id"); const noteEvents = uniqEvents.filter(event => event.kind === 1 || event.kind === 6); - const metadataEvents = uniqEvents.filter(event => event.kind === 0); + const metadataEvents = [...cachedMetadataEvents, ...uniqEvents.filter(event => event.kind === 0)]; + // Save the cached metadataEvents to localStorage + useEffect(() => { + localStorage.setItem("cachedMetadataEvents", JSON.stringify(cachedMetadataEvents)); + }, [cachedMetadataEvents]); return { noteEvents, metadataEvents }; }; const Home = () => { const filterDifficulty = localStorage.getItem("filterDifficulty") || DEFAULT_DIFFICULTY; - const [sortByTime, setSortByTime] = useState(localStorage.getItem('sortBy') !== 'false'); + const [sortByTime, setSortByTime] = useState(localStorage.getItem('sortBy') !== 'true'); const [setAnon, setSetAnon] = useState(localStorage.getItem('anonMode') !== 'true'); const {noteEvents, metadataEvents } = useUniqEvents(); const [delayedSort, setDelayedSort] = useState(false) @@ -54,7 +86,7 @@ const Home = () => { let sortedEvents = [...postEvents] .sort((a, b) => - sortByTime ? b.created_at - a.created_at : verifyPow(b) - verifyPow(a) + sortByTime ? verifyPow(b) - verifyPow(a) : b.created_at - a.created_at ) if (delayedSort) { diff --git a/client/src/components/Modals/CardModals/LinkPreview.tsx b/client/src/components/Modals/CardModals/LinkPreview.tsx index b547ca6..4736203 100644 --- a/client/src/components/Modals/CardModals/LinkPreview.tsx +++ b/client/src/components/Modals/CardModals/LinkPreview.tsx @@ -1,68 +1,68 @@ -import { getLinkPreview } from 'link-preview-js'; -import { useState, useEffect } from 'react'; +// import { getLinkPreview } from 'link-preview-js'; +// import { useState, useEffect } from 'react'; const LinkModal = ({ url }: { url: string }) => { - const [linkPreview, setLinkPreview] = useState(null); - const [error, setError] = useState(null); + // const [linkPreview, setLinkPreview] = useState(null); + // const [error, setError] = useState(null); - const fetchWithProxy = (url: string) => { - const proxyUrl = 'https://api.allorigins.win/raw?url='; - return getLinkPreview(proxyUrl + url) - .then((preview) => setLinkPreview(preview as LinkPreview)) - .catch((error) => { - console.error("Error fetching URL with proxy:", error); - setError('Unable to fetch URL with proxy.'); - }); - }; + // const fetchWithProxy = (url: string) => { + // const proxyUrl = 'https://api.allorigins.win/raw?url='; + // return getLinkPreview(proxyUrl + url) + // .then((preview) => setLinkPreview(preview as LinkPreview)) + // .catch((error) => { + // console.error("Error fetching URL with proxy:", error); + // setError('Unable to fetch URL with proxy.'); + // }); + // }; - useEffect(() => { - getLinkPreview(url) - .then((preview) => setLinkPreview(preview as LinkPreview)) - .catch(error => { - console.error("Error fetching original URL, trying with proxy:", error); - setError('Error fetching original URL. Trying with proxy...'); - return fetchWithProxy(url); - }); - }, [url]); + // useEffect(() => { + // getLinkPreview(url) + // .then((preview) => setLinkPreview(preview as LinkPreview)) + // .catch(error => { + // console.error("Error fetching original URL, trying with proxy:", error); + // setError('Error fetching original URL. Trying with proxy...'); + // return fetchWithProxy(url); + // }); + // }, [url]); - if (error) { + // if (error) { + // return {url}; // or some loading state + // } + + // if (!linkPreview) { return {url}; // or some loading state - } + // } - if (!linkPreview) { - return {url}; // or some loading state - } - - return ( - - ); + // return ( + // + // ); }; -interface LinkPreview { - url: string; - title: string; - siteName?: string; - description?: string; - mediaType: string; - contentType?: string; - images: string[]; - videos: { - url?: string; - secureUrl?: string; - type?: string; - width?: string; - height?: string; - [key: string]: any; - }[]; - [key: string]: any; -} +// interface LinkPreview { +// url: string; +// title: string; +// siteName?: string; +// description?: string; +// mediaType: string; +// contentType?: string; +// images: string[]; +// videos: { +// url?: string; +// secureUrl?: string; +// type?: string; +// width?: string; +// height?: string; +// [key: string]: any; +// }[]; +// [key: string]: any; +// } export default LinkModal; \ No newline at end of file diff --git a/client/src/components/Modals/CardModals/TextModal.tsx b/client/src/components/Modals/CardModals/TextModal.tsx index 71ae36a..842be81 100644 --- a/client/src/components/Modals/CardModals/TextModal.tsx +++ b/client/src/components/Modals/CardModals/TextModal.tsx @@ -85,7 +85,7 @@ const ContentPreview = ({ key, eventdata }: { key: string; eventdata: Event }) = {isExpanded ? "...Read less" : "...Read more"} )} - {/* {url !== "" && } */} + {url !== "" && } {quoteEvents[0] && quoteEvents.length > 0 && ( { - const { files } = parseContent(event); + // const { files } = parseContent(event); const icon = getIconFromHash(event.pubkey); const metadataParsed = metadata ? getMetadata(metadata) : null; diff --git a/client/src/components/Modals/OptionsBar.tsx b/client/src/components/Modals/OptionsBar.tsx index 3c9b936..a2edff8 100644 --- a/client/src/components/Modals/OptionsBar.tsx +++ b/client/src/components/Modals/OptionsBar.tsx @@ -30,7 +30,7 @@ const OptionsBar: React.FC = ({ sortByTime, setAnon, toggleSort
- {sortByTime ? 'Time' : 'PoW'} + {sortByTime ? 'PoW' : 'Time'}
} {toggleAnon &&
+ {(showForm && postType) &&
diff --git a/client/src/utils/otherUtils.ts b/client/src/utils/otherUtils.ts index e0a2306..c368142 100644 --- a/client/src/utils/otherUtils.ts +++ b/client/src/utils/otherUtils.ts @@ -36,7 +36,12 @@ export interface Metadata { } export const getMetadata = (event: Event) => { - const content = event.content.replace(/[\n\r\t]/g, '') - const metadata: Metadata = JSON.parse(content) - return metadata + try { + const content = event.content.replace(/[\n\r\t]/g, '') + const metadata: Metadata = JSON.parse(content) + return metadata + } catch (error) { + console.error(`Error parsing metadata for event: ${event.id}`, error) + return {} + } } \ No newline at end of file