From 70513b5244e2c5fd201088e70c1d5fc5263a48c0 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 7 Feb 2024 13:02:19 +0800 Subject: [PATCH] Add more information on the feeds page --- .../web/components/elements/SplitButton.tsx | 67 +++++++++++++++++++ .../elements/icons/FollowingIcon.tsx | 44 ++++++++++++ .../elements/icons/HeaderCheckboxIcon.tsx | 40 +++++++++++ .../elements/icons/HeaderSearchIcon.tsx | 47 +++++++++++++ .../elements/icons/HeaderToggleGridIcon.tsx | 61 +++++++++++++++++ .../elements/icons/HeaderToggleListIcon.tsx | 47 +++++++++++++ .../elements/icons/HighlightsIcon.tsx | 44 ++++++++++++ .../components/elements/icons/LibraryIcon.tsx | 33 +++++++++ .../queries/useGetSubscriptionsQuery.tsx | 9 +-- packages/web/pages/settings/feeds/index.tsx | 22 ++++-- 10 files changed, 404 insertions(+), 10 deletions(-) create mode 100644 packages/web/components/elements/SplitButton.tsx create mode 100644 packages/web/components/elements/icons/FollowingIcon.tsx create mode 100644 packages/web/components/elements/icons/HeaderCheckboxIcon.tsx create mode 100644 packages/web/components/elements/icons/HeaderSearchIcon.tsx create mode 100644 packages/web/components/elements/icons/HeaderToggleGridIcon.tsx create mode 100644 packages/web/components/elements/icons/HeaderToggleListIcon.tsx create mode 100644 packages/web/components/elements/icons/HighlightsIcon.tsx create mode 100644 packages/web/components/elements/icons/LibraryIcon.tsx diff --git a/packages/web/components/elements/SplitButton.tsx b/packages/web/components/elements/SplitButton.tsx new file mode 100644 index 000000000..ce6df2b67 --- /dev/null +++ b/packages/web/components/elements/SplitButton.tsx @@ -0,0 +1,67 @@ +import { ReactNode, useEffect, useMemo, useRef } from 'react' +import { styled } from '../tokens/stitches.config' +import { Box, HStack, VStack } from './LayoutPrimitives' +import { Button } from './Button' +import { DropdownMenu } from '@radix-ui/react-dropdown-menu' +import { ArrowDown } from 'phosphor-react' +import { Dropdown, DropdownOption } from './DropdownElements' +import { CaretDownIcon } from './icons/CaretDownIcon' + +type SplitButtonProps = { + title: string +} + +const CaretButton = (): JSX.Element => { + return ( + + + + ) +} + +export const SplitButton = (props: SplitButtonProps): JSX.Element => { + return ( + + + {/* */} + }> + console.log()} title="Archive (e)" /> + + + ) +} diff --git a/packages/web/components/elements/icons/FollowingIcon.tsx b/packages/web/components/elements/icons/FollowingIcon.tsx new file mode 100644 index 000000000..ef882dce2 --- /dev/null +++ b/packages/web/components/elements/icons/FollowingIcon.tsx @@ -0,0 +1,44 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class FollowingIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx new file mode 100644 index 000000000..28620284f --- /dev/null +++ b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx @@ -0,0 +1,40 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class HeaderCheckboxIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/HeaderSearchIcon.tsx b/packages/web/components/elements/icons/HeaderSearchIcon.tsx new file mode 100644 index 000000000..e26a1811e --- /dev/null +++ b/packages/web/components/elements/icons/HeaderSearchIcon.tsx @@ -0,0 +1,47 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class HeaderSearchIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx new file mode 100644 index 000000000..636a0e6fc --- /dev/null +++ b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx @@ -0,0 +1,61 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class HeaderToggleGridIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/HeaderToggleListIcon.tsx b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx new file mode 100644 index 000000000..44ac56613 --- /dev/null +++ b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx @@ -0,0 +1,47 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class HeaderToggleListIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/HighlightsIcon.tsx b/packages/web/components/elements/icons/HighlightsIcon.tsx new file mode 100644 index 000000000..ef882dce2 --- /dev/null +++ b/packages/web/components/elements/icons/HighlightsIcon.tsx @@ -0,0 +1,44 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class FollowingIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + + ) + } +} diff --git a/packages/web/components/elements/icons/LibraryIcon.tsx b/packages/web/components/elements/icons/LibraryIcon.tsx new file mode 100644 index 000000000..c3a24a013 --- /dev/null +++ b/packages/web/components/elements/icons/LibraryIcon.tsx @@ -0,0 +1,33 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class LibraryIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + ) + } +} diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx index c229205fd..50efdebf8 100644 --- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx @@ -22,8 +22,9 @@ export type Subscription = { createdAt: string updatedAt: string lastFetchedAt?: string - autoAddToLibrary?: boolean - isPrivate?: boolean + mostRecentItemDate?: string + + fetchContent?: boolean } type SubscriptionsQueryResponse = { @@ -63,8 +64,8 @@ export function useGetSubscriptionsQuery( createdAt updatedAt lastFetchedAt - autoAddToLibrary - isPrivate + fetchContent + mostRecentItemDate } } ... on SubscriptionsError { diff --git a/packages/web/pages/settings/feeds/index.tsx b/packages/web/pages/settings/feeds/index.tsx index 2570eb504..0935eda1d 100644 --- a/packages/web/pages/settings/feeds/index.tsx +++ b/packages/web/pages/settings/feeds/index.tsx @@ -2,7 +2,11 @@ import { useRouter } from 'next/router' import { FloppyDisk, Pencil, XCircle } from 'phosphor-react' import { useMemo, useState } from 'react' import { FormInput } from '../../../components/elements/FormElements' -import { HStack, SpanBox } from '../../../components/elements/LayoutPrimitives' +import { + HStack, + SpanBox, + VStack, +} from '../../../components/elements/LayoutPrimitives' import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal' import { EmptySettingsRow, @@ -200,19 +204,25 @@ export default function Rss(): JSX.Element { }} deleteTitle="Unsubscribe" sublineElement={ - - {`URL: ${subscription.url}, `} - {`Last fetched: ${ + {`URL: ${subscription.url}`} + {`Last refreshed: ${ subscription.lastFetchedAt ? formattedDateTime(subscription.lastFetchedAt) : 'Never' - }`} - + }`} + + {subscription.mostRecentItemDate && + `Most recent item: ${formattedDateTime( + subscription.mostRecentItemDate + )}`} + + } onClick={() => { router.push(`/home?q=in:inbox rss:"${subscription.url}"`)