From 698582c5b5f645c20d3f3c9f43501a5f203b8539 Mon Sep 17 00:00:00 2001 From: Thomas Rogers Date: Fri, 22 Nov 2024 14:36:18 +0100 Subject: [PATCH] Fix RSS Hiding --- .../discoverFeed/DiscoverContainer.tsx | 2 + .../DiscoverFeed/DiscoverFeed.tsx | 8 ++++ .../DiscoverItems/DiscoverItemCard.tsx | 9 ++-- .../DiscoverItems/DiscoverItems.tsx | 13 ++++-- .../mutations/hideDiscoverArticle.ts | 35 --------------- .../queries/useGetDiscoverFeedItems.tsx | 44 ++++++++++++++++++- .../queries/useGetDiscoverFeeds.tsx | 14 +++++- 7 files changed, 77 insertions(+), 48 deletions(-) delete mode 100644 packages/web/lib/networking/mutations/hideDiscoverArticle.ts diff --git a/packages/web/components/templates/discoverFeed/DiscoverContainer.tsx b/packages/web/components/templates/discoverFeed/DiscoverContainer.tsx index 55e0b594c..637048c3f 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverContainer.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverContainer.tsx @@ -85,6 +85,7 @@ export function DiscoverContainer(): JSX.Element { hasMore, setPage, page, + hideDiscoverArticleMutation } = useGetDiscoverFeedItems(topics[0], selectedFeed, 10,discoverVisibility == 'SHOW_ALL') const handleFetchMore = useCallback(() => { if (isLoading || !hasMore) { @@ -216,6 +217,7 @@ export function DiscoverContainer(): JSX.Element { handleLinkSubmission={handleSaveDiscover} items={discoverItems ?? []} viewer={viewer.viewerData?.me} + hideDiscoverArticle={hideDiscoverArticleMutation} /> {showAddLinkModal && ( Promise + hideDiscoverArticle: ( + input: HideDiscoverArticleInput + ) => Promise } + export const DiscoverItemFeed = (props: DiscoverItemFeedProps) => { return ( <> diff --git a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemCard.tsx b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemCard.tsx index d094ecc00..f2e37a5c7 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemCard.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemCard.tsx @@ -4,11 +4,11 @@ import { DiscoverGridCard } from './DiscoverItemGridCard' import { DiscoverItemListCard } from './DiscoverItemListCard' import { SaveDiscoverArticleOutput } from "../../../../lib/networking/mutations/saveDiscoverArticle" import { deleteDiscoverArticleMutation } from "../../../../lib/networking/mutations/deleteDiscoverArticle" -import { hideDiscoverArticleMutation } from "../../../../lib/networking/mutations/hideDiscoverArticle" import { showErrorToast, showSuccessToast } from "../../../../lib/toastHelpers" import { useState } from "react" import { DiscoverFeedItem } from "../../../../lib/networking/queries/useGetDiscoverFeedItems" import { DiscoverVisibilityType } from "../DiscoverContainer" +import { HideDiscoverArticleOutput } from '../../../../lib/networking/queries/useGetDiscoverFeeds' export type DiscoverItemCardProps = { item: DiscoverFeedItem @@ -16,7 +16,7 @@ export type DiscoverItemCardProps = { visibility: DiscoverVisibilityType viewer?: UserBasicData isHovered?: boolean - hideDiscoverItem(item: DiscoverFeedItem): void + hideDiscoverItem(item: DiscoverFeedItem, setHidden: boolean): Promise handleLinkSubmission: ( link: string, timezone: string, @@ -56,14 +56,11 @@ export function DiscoverItemCard(props: DiscoverItemCardProps): JSX.Element | nu } const setHiddenDiscoverItem = (item: DiscoverFeedItem, setHidden: boolean) : Promise => { - return hideDiscoverArticleMutation({ discoverArticleId: item.id, setHidden }) + return props.hideDiscoverItem(item, setHidden) .then(it => { if (it?.hideDiscoverArticle.id) { showSuccessToast(`Discover Article ${setHidden ? 'Hidden' : 'Unhidden'}`, { position: 'bottom-right' }) setArticleHidden(setHidden) - if (props.visibility == 'HIDE_HIDDEN') { - props.hideDiscoverItem(item) - } } else { showErrorToast('Unable to hide Article', { position: 'bottom-right' }) } diff --git a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItems.tsx b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItems.tsx index ebcead0c1..f3fc53647 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItems.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItems.tsx @@ -6,6 +6,10 @@ import { SaveDiscoverArticleOutput } from "../../../../lib/networking/mutations/ import { DiscoverFeedItem } from "../../../../lib/networking/queries/useGetDiscoverFeedItems" import { DiscoverVisibilityType } from "../DiscoverContainer" import { useEffect, useState } from "react" +import { + HideDiscoverArticleInput, + HideDiscoverArticleOutput +} from '../../../../lib/networking/queries/useGetDiscoverFeeds' type DiscoverItemsProps = { items: DiscoverFeedItem[] @@ -17,14 +21,17 @@ type DiscoverItemsProps = { timezone: string, locale: string ) => Promise + hideDiscoverArticle: ( + input: HideDiscoverArticleInput + ) => Promise } export function DiscoverItems(props: DiscoverItemsProps): JSX.Element { const [discoverItems, setDiscoveryItems] = useState(props.items); - const hideDiscoverItem = (item: DiscoverFeedItem) => { - const hiddenDiscoveryList = discoverItems.filter(it => it.id != item.id); - setDiscoveryItems(hiddenDiscoveryList); + const hideDiscoverItem = (item: DiscoverFeedItem, setHidden: boolean) => { + + return props.hideDiscoverArticle({ discoverArticleId: item.id, setHidden}); } useEffect(() => { diff --git a/packages/web/lib/networking/mutations/hideDiscoverArticle.ts b/packages/web/lib/networking/mutations/hideDiscoverArticle.ts deleted file mode 100644 index bf7a834ef..000000000 --- a/packages/web/lib/networking/mutations/hideDiscoverArticle.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { gql } from 'graphql-request' -import { gqlFetcher } from '../networkHelpers' - -export type HideDiscoverArticleInput = { - discoverArticleId: string - setHidden: boolean -} - -export type HideDiscoverArticleOutput = { - hideDiscoverArticle: { id: string } -} - -export async function hideDiscoverArticleMutation( - input: HideDiscoverArticleInput -): Promise { - const mutation = gql` - mutation HideDiscoverArticle($input: HideDiscoverArticleInput!) { - hideDiscoverArticle(input: $input) { - ... on HideDiscoverArticleSuccess { - id - } - - ... on HideDiscoverArticleError { - errorCodes - } - } - } - ` - - const data = (await gqlFetcher(mutation, { - input, - })) as HideDiscoverArticleOutput - - return data -} diff --git a/packages/web/lib/networking/queries/useGetDiscoverFeedItems.tsx b/packages/web/lib/networking/queries/useGetDiscoverFeedItems.tsx index 9d53d50d6..539966935 100644 --- a/packages/web/lib/networking/queries/useGetDiscoverFeedItems.tsx +++ b/packages/web/lib/networking/queries/useGetDiscoverFeedItems.tsx @@ -1,7 +1,8 @@ import { gql } from 'graphql-request' -import { publicGqlFetcher } from '../networkHelpers' +import { gqlFetcher, publicGqlFetcher } from '../networkHelpers' import { useEffect, useState } from 'react' import { TopicTabData } from '../../../components/templates/discoverFeed/DiscoverContainer' +import { HideDiscoverArticleInput, HideDiscoverArticleOutput } from './useGetDiscoverFeeds' const OMNIVORE_COMMUNITY_ID = '8217d320-aa5a-11ee-bbfe-a7cde356f524' @@ -31,7 +32,10 @@ type DiscoverItemResponse = { activeTopic: TopicTabData hasMore: boolean page: number - setPage: (page: number) => void + setPage: (page: number) => void, + hideDiscoverArticleMutation :( + input: HideDiscoverArticleInput + ) => Promise } export function useGetDiscoverFeedItems( @@ -115,6 +119,41 @@ export function useGetDiscoverFeedItems( }) }, [page]) + const hideDiscoverArticleMutation = async( + input: HideDiscoverArticleInput + ): Promise => { + const mutation = gql` + mutation HideDiscoverArticle($input: HideDiscoverArticleInput!) { + hideDiscoverArticle(input: $input) { + ... on HideDiscoverArticleSuccess { + id + } + + ... on HideDiscoverArticleError { + errorCodes + } + } + } + ` + + const data = (await gqlFetcher(mutation, { + input, + })) as HideDiscoverArticleOutput + + const hiddenDiscoveryList = discoverItems. + map(it => { + if (it.id == data.hideDiscoverArticle.id) { + return { ...it, hidden: input.setHidden } + } + + return it + }) + + setDiscoverItems(hiddenDiscoveryList) + + return data + } + return { setTopic, activeTopic, @@ -123,5 +162,6 @@ export function useGetDiscoverFeedItems( hasMore, page, setPage, + hideDiscoverArticleMutation } } diff --git a/packages/web/lib/networking/queries/useGetDiscoverFeeds.tsx b/packages/web/lib/networking/queries/useGetDiscoverFeeds.tsx index 3423847b3..f0172cf8d 100644 --- a/packages/web/lib/networking/queries/useGetDiscoverFeeds.tsx +++ b/packages/web/lib/networking/queries/useGetDiscoverFeeds.tsx @@ -1,13 +1,14 @@ import { gql } from 'graphql-request' import useSWR from 'swr' -import { makeGqlFetcher } from '../networkHelpers' +import { gqlFetcher, makeGqlFetcher } from '../networkHelpers' type DiscoverFeedsQueryResponse = { error: any isLoading: boolean isValidating: boolean feeds: DiscoverFeed[] - revalidate: () => void + revalidate: () => void, + } export type DiscoverFeed = { @@ -20,6 +21,15 @@ export type DiscoverFeed = { type: 'rss' | 'atom' } +export type HideDiscoverArticleInput = { + discoverArticleId: string + setHidden: boolean +} + +export type HideDiscoverArticleOutput = { + hideDiscoverArticle: { id: string } +} + export function useGetDiscoverFeeds(): DiscoverFeedsQueryResponse { const query = gql` query GetDiscoverFeeds {