From 885f6086003f03f477fc3ab38b00e55112319f49 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Wed, 15 Nov 2023 18:12:52 +0800 Subject: [PATCH] add auto add to library checkbox --- .../mutations/updateSubscriptionMutation.ts | 4 +- .../queries/useGetSubscriptionsQuery.tsx | 4 + packages/web/pages/settings/feeds/index.tsx | 85 ++++++++++++++----- 3 files changed, 71 insertions(+), 22 deletions(-) diff --git a/packages/web/lib/networking/mutations/updateSubscriptionMutation.ts b/packages/web/lib/networking/mutations/updateSubscriptionMutation.ts index 08e06d6e6..e308c77d3 100644 --- a/packages/web/lib/networking/mutations/updateSubscriptionMutation.ts +++ b/packages/web/lib/networking/mutations/updateSubscriptionMutation.ts @@ -20,12 +20,14 @@ interface UpdateSubscription { errorCodes?: UpdateSubscriptionErrorCode[] } -interface UpdateSubscriptionInput { +export interface UpdateSubscriptionInput { id: string lastFetchedAt?: Date name?: string description?: string status?: SubscriptionStatus + autoAddToLibrary?: boolean + isPrivate?: boolean } export async function updateSubscriptionMutation( diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx index ababa6fdb..c229205fd 100644 --- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx @@ -22,6 +22,8 @@ export type Subscription = { createdAt: string updatedAt: string lastFetchedAt?: string + autoAddToLibrary?: boolean + isPrivate?: boolean } type SubscriptionsQueryResponse = { @@ -61,6 +63,8 @@ export function useGetSubscriptionsQuery( createdAt updatedAt lastFetchedAt + autoAddToLibrary + isPrivate } } ... on SubscriptionsError { diff --git a/packages/web/pages/settings/feeds/index.tsx b/packages/web/pages/settings/feeds/index.tsx index e8f1ad578..58407915f 100644 --- a/packages/web/pages/settings/feeds/index.tsx +++ b/packages/web/pages/settings/feeds/index.tsx @@ -1,6 +1,7 @@ import { useRouter } from 'next/router' import { FloppyDisk, Pencil, XCircle } from 'phosphor-react' import { useMemo, useState } from 'react' +import CheckboxComponent from '../../../components/elements/Checkbox' import { FormInput } from '../../../components/elements/FormElements' import { HStack, SpanBox } from '../../../components/elements/LayoutPrimitives' import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal' @@ -12,7 +13,10 @@ import { import { theme } from '../../../components/tokens/stitches.config' import { formattedDateTime } from '../../../lib/dateFormatting' import { unsubscribeMutation } from '../../../lib/networking/mutations/unsubscribeMutation' -import { updateSubscriptionMutation } from '../../../lib/networking/mutations/updateSubscriptionMutation' +import { + UpdateSubscriptionInput, + updateSubscriptionMutation, +} from '../../../lib/networking/mutations/updateSubscriptionMutation' import { SubscriptionStatus, SubscriptionType, @@ -42,11 +46,10 @@ export default function Rss(): JSX.Element { .sort((a, b) => a.name.localeCompare(b.name)) }, [subscriptions]) - async function updateSubscription(): Promise { - const result = await updateSubscriptionMutation({ - id: onEditId, - name: onEditName, - }) + async function updateSubscription( + input: UpdateSubscriptionInput + ): Promise { + const result = await updateSubscriptionMutation(input) if (result.updateSubscription.errorCodes) { const errorMessage = formatMessage({ @@ -107,7 +110,7 @@ export default function Rss(): JSX.Element { suggestionInfo={{ title: 'Add RSS and Atom feeds to your Omnivore account', message: - 'When you add a new feed the last 24hrs of items, or at least one item will be added to your account. Feeds will be checked for updates every hour, and new items will be added to your Following.', + 'When you add a new feed the last 24hrs of items, or at least one item will be added to your account. Feeds will be checked for updates every hour, and new items will be added to your Following. You can also add feeds to your Library by checking the box below.', docs: 'https://docs.omnivore.app/using/feeds.html', key: '--settings-feeds-show-help', CTAText: 'Add a feed', @@ -147,7 +150,10 @@ export default function Rss(): JSX.Element { color={theme.colors.omnivoreCtaYellow.toString()} onClick={async (e) => { e.stopPropagation() - await updateSubscription() + await updateSubscription({ + id: onEditId, + name: onEditName, + }) setOnEditId('') }} /> @@ -193,12 +199,12 @@ export default function Rss(): JSX.Element { console.log('onDelete triggered: ', subscription.id) setOnDeleteId(subscription.id) }} - onEdit={() => { - setOnEditStatus( - subscription.status == 'ACTIVE' ? 'UNSUBSCRIBED' : 'ACTIVE' - ) - setOnPauseId(subscription.id) - }} + // onEdit={() => { + // setOnEditStatus( + // subscription.status == 'ACTIVE' ? 'UNSUBSCRIBED' : 'ACTIVE' + // ) + // setOnPauseId(subscription.id) + // }} deleteTitle="Unsubscribe" // editTitle={subscription.status === 'ACTIVE' ? 'Pause' : 'Resume'} sublineElement={ @@ -216,18 +222,55 @@ export default function Rss(): JSX.Element { }`} } - onClick={() => { - router.push(`/home?q=in:inbox rss:"${subscription.url}"`) - }} + // onClick={() => { + // router.push(`/home?q=in:inbox rss:"${subscription.url}"`) + // }} extraElement={ - - {subscription.status === 'ACTIVE' ? 'Active' : 'Paused'} - + { + await updateSubscriptionMutation({ + id: subscription.id, + autoAddToLibrary: checked, + }) + revalidate() + }} + /> + + Auto add to library + + + + // onChange={() => { + // setOnEditStatus( + // subscription.status == 'ACTIVE' + // ? 'UNSUBSCRIBED' + // : 'ACTIVE' + // ) + // setOnPauseId(subscription.id) + // }} } + // extraElement={ + // + // {subscription.status === 'ACTIVE' ? 'Active' : 'Paused'} + // + // } /> ) })