diff --git a/src/pages/feed/FeedTabBlogs.tsx b/src/pages/feed/FeedTabBlogs.tsx index d7f762e..371abc3 100644 --- a/src/pages/feed/FeedTabBlogs.tsx +++ b/src/pages/feed/FeedTabBlogs.tsx @@ -29,12 +29,91 @@ export const FeedTabBlogs = () => { const [isLoadMoreVisible, setIsLoadMoreVisible] = useState(true) const [showing, setShowing] = useState(SHOWING_STEP) + useEffect(() => { + if (!userPubkey) return + + setIsFetching(true) + setIsLoadMoreVisible(true) + const filter: NDKFilter = { + authors: [...followList, userPubkey], + kinds: [NDKKind.Article], + limit: 50 + } + + if (filterOptions.nsfw === NSFWFilter.Only_NSFW) { + filter['#L'] = ['content-warning'] + } + + if (filterOptions.source === window.location.host) { + filter['#r'] = [window.location.host] + } + + ndk + .fetchEvents(filter, { + closeOnEose: true, + cacheUsage: NDKSubscriptionCacheUsage.PARALLEL + }) + .then((ndkEventSet) => { + const ndkEvents = Array.from(ndkEventSet) + setBlogs(ndkEvents.map(extractBlogCardDetails)) + }) + .finally(() => { + setIsFetching(false) + }) + }, [filterOptions.nsfw, filterOptions.source, followList, ndk, userPubkey]) + + const filteredBlogs = useMemo(() => { + let _blogs = blogs || [] + + // Add nsfw tag to blogs included in nsfwList + if (filterOptions.nsfw !== NSFWFilter.Hide_NSFW) { + _blogs = _blogs.map((b) => { + return !b.nsfw && b.aTag && nsfwList.includes(b.aTag) + ? { ...b, nsfw: true } + : b + }) + } + // Filter nsfw (Hide_NSFW option) + _blogs = _blogs.filter( + (b) => !(b.nsfw && filterOptions.nsfw === NSFWFilter.Hide_NSFW) + ) + + _blogs = _blogs.filter( + (b) => + !muteLists.admin.authors.includes(b.author!) && + !muteLists.admin.replaceableEvents.includes(b.aTag!) + ) + + if (filterOptions.sort === SortBy.Latest) { + _blogs.sort((a, b) => + a.published_at && b.published_at ? b.published_at - a.published_at : 0 + ) + } else if (filterOptions.sort === SortBy.Oldest) { + _blogs.sort((a, b) => + a.published_at && b.published_at ? a.published_at - b.published_at : 0 + ) + } + + showing > 0 && _blogs.splice(showing) + return _blogs + }, [ + blogs, + filterOptions.nsfw, + filterOptions.sort, + muteLists.admin.authors, + muteLists.admin.replaceableEvents, + nsfwList, + showing + ]) + + if (!userPubkey) return null + const handleLoadMore = () => { const LOAD_MORE_STEP = SHOWING_STEP * 2 setShowing((prev) => prev + SHOWING_STEP) const lastBlog = filteredBlogs[filteredBlogs.length - 1] const filter: NDKFilter = { - authors: [...followList], + authors: [...followList, userPubkey], kinds: [NDKKind.Article], limit: LOAD_MORE_STEP } @@ -84,82 +163,6 @@ export const FeedTabBlogs = () => { }) } - useEffect(() => { - setIsFetching(true) - setIsLoadMoreVisible(true) - const filter: NDKFilter = { - authors: [...followList], - kinds: [NDKKind.Article], - limit: 50 - } - - if (filterOptions.nsfw === NSFWFilter.Only_NSFW) { - filter['#L'] = ['content-warning'] - } - - if (filterOptions.source === window.location.host) { - filter['#r'] = [window.location.host] - } - - ndk - .fetchEvents(filter, { - closeOnEose: true, - cacheUsage: NDKSubscriptionCacheUsage.PARALLEL - }) - .then((ndkEventSet) => { - const ndkEvents = Array.from(ndkEventSet) - setBlogs(ndkEvents.map(extractBlogCardDetails)) - }) - .finally(() => { - setIsFetching(false) - }) - }, [filterOptions.nsfw, filterOptions.source, followList, ndk]) - - const filteredBlogs = useMemo(() => { - let _blogs = blogs || [] - - // Add nsfw tag to blogs included in nsfwList - if (filterOptions.nsfw !== NSFWFilter.Hide_NSFW) { - _blogs = _blogs.map((b) => { - return !b.nsfw && b.aTag && nsfwList.includes(b.aTag) - ? { ...b, nsfw: true } - : b - }) - } - // Filter nsfw (Hide_NSFW option) - _blogs = _blogs.filter( - (b) => !(b.nsfw && filterOptions.nsfw === NSFWFilter.Hide_NSFW) - ) - - _blogs = _blogs.filter( - (b) => - !muteLists.admin.authors.includes(b.author!) && - !muteLists.admin.replaceableEvents.includes(b.aTag!) - ) - - if (filterOptions.sort === SortBy.Latest) { - _blogs.sort((a, b) => - a.published_at && b.published_at ? b.published_at - a.published_at : 0 - ) - } else if (filterOptions.sort === SortBy.Oldest) { - _blogs.sort((a, b) => - a.published_at && b.published_at ? a.published_at - b.published_at : 0 - ) - } - - showing > 0 && _blogs.splice(showing) - return _blogs - }, [ - blogs, - filterOptions.nsfw, - filterOptions.sort, - muteLists.admin.authors, - muteLists.admin.replaceableEvents, - nsfwList, - showing - ]) - - if (!userPubkey) return null return ( <> {isFetching && ( diff --git a/src/pages/feed/FeedTabMods.tsx b/src/pages/feed/FeedTabMods.tsx index c4f6932..0e42527 100644 --- a/src/pages/feed/FeedTabMods.tsx +++ b/src/pages/feed/FeedTabMods.tsx @@ -39,64 +39,13 @@ export const FeedTabMods = () => { const [isLoadMoreVisible, setIsLoadMoreVisible] = useState(true) const [showing, setShowing] = useState(SHOWING_STEP) - const handleLoadMore = () => { - const LOAD_MORE_STEP = SHOWING_STEP * 2 - setShowing((prev) => prev + SHOWING_STEP) - const lastMod = filteredModList[filteredModList.length - 1] - const filter: NDKFilter = { - authors: [...followList], - kinds: [NDKKind.Classified], - limit: LOAD_MORE_STEP - } - - if (filterOptions.source === window.location.host) { - filter['#r'] = [window.location.host] - } - - if (filterOptions.sort === SortBy.Latest) { - filter.until = lastMod.published_at - } else if (filterOptions.sort === SortBy.Oldest) { - filter.since = lastMod.published_at - } - - setIsFetching(true) - ndk - .fetchEvents(filter, { - closeOnEose: true, - cacheUsage: NDKSubscriptionCacheUsage.PARALLEL - }) - .then((ndkEventSet) => { - const ndkEvents = Array.from(ndkEventSet) - orderEventsChronologically( - ndkEvents, - filterOptions.sort === SortBy.Latest - ) - setMods((prevMods) => { - const newMods = constructModListFromEvents(ndkEvents) - const combinedMods = [...prevMods, ...newMods] - const uniqueMods = Array.from( - new Set(combinedMods.map((mod) => mod.id)) - ) - .map((id) => combinedMods.find((mod) => mod.id === id)) - .filter((mod): mod is ModDetails => mod !== undefined) - - if (newMods.length < LOAD_MORE_STEP) { - setIsLoadMoreVisible(false) - } - - return uniqueMods - }) - }) - .finally(() => { - setIsFetching(false) - }) - } - useEffect(() => { + if (!userPubkey) return + setIsFetching(true) setIsLoadMoreVisible(true) const filter: NDKFilter = { - authors: [...followList], + authors: [...followList, userPubkey], kinds: [NDKKind.Classified], limit: 50 } @@ -117,7 +66,7 @@ export const FeedTabMods = () => { .finally(() => { setIsFetching(false) }) - }, [filterOptions.source, followList, ndk]) + }, [filterOptions.source, followList, ndk, userPubkey]) const filteredModList = useMemo(() => { const nsfwFilter = (mods: ModDetails[]) => { @@ -198,6 +147,60 @@ export const FeedTabMods = () => { ]) if (!userPubkey) return null + + const handleLoadMore = () => { + const LOAD_MORE_STEP = SHOWING_STEP * 2 + setShowing((prev) => prev + SHOWING_STEP) + const lastMod = filteredModList[filteredModList.length - 1] + const filter: NDKFilter = { + authors: [...followList, userPubkey], + kinds: [NDKKind.Classified], + limit: LOAD_MORE_STEP + } + + if (filterOptions.source === window.location.host) { + filter['#r'] = [window.location.host] + } + + if (filterOptions.sort === SortBy.Latest) { + filter.until = lastMod.published_at + } else if (filterOptions.sort === SortBy.Oldest) { + filter.since = lastMod.published_at + } + + setIsFetching(true) + ndk + .fetchEvents(filter, { + closeOnEose: true, + cacheUsage: NDKSubscriptionCacheUsage.PARALLEL + }) + .then((ndkEventSet) => { + const ndkEvents = Array.from(ndkEventSet) + orderEventsChronologically( + ndkEvents, + filterOptions.sort === SortBy.Latest + ) + setMods((prevMods) => { + const newMods = constructModListFromEvents(ndkEvents) + const combinedMods = [...prevMods, ...newMods] + const uniqueMods = Array.from( + new Set(combinedMods.map((mod) => mod.id)) + ) + .map((id) => combinedMods.find((mod) => mod.id === id)) + .filter((mod): mod is ModDetails => mod !== undefined) + + if (newMods.length < LOAD_MORE_STEP) { + setIsLoadMoreVisible(false) + } + + return uniqueMods + }) + }) + .finally(() => { + setIsFetching(false) + }) + } + return ( <> {isFetching && }