From 31614f3f02c36d9e918e62112476916695c53447 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 26 Aug 2024 12:58:24 +0800 Subject: [PATCH 1/5] Move text utils into single place --- .../nav-containers/HighlightsContainer.tsx | 9 +- .../nav-containers/HomeContainer.tsx | 2 +- .../components/patterns/ArticleSubtitle.tsx | 10 +- .../LibraryCards/LibraryCardStyles.tsx | 47 +-- .../patterns/LibraryCards/LibraryGridCard.tsx | 2 +- .../LibraryCards/LibraryHighlightGridCard.tsx | 3 +- .../patterns/LibraryCards/LibraryListCard.tsx | 2 +- .../DiscoverItems/DiscoverItemGridCard.tsx | 2 +- .../DiscoverItems/DiscoverItemListCard.tsx | 2 +- .../DiscoverItems/DiscoverItemMetadata.tsx | 4 +- .../templates/homeFeed/HighlightsLayout.tsx | 11 +- .../templates/homeFeed/TLDRLayout.tsx | 317 ------------------ packages/web/pages/home/debug.tsx | 31 +- 13 files changed, 20 insertions(+), 422 deletions(-) delete mode 100644 packages/web/components/templates/homeFeed/TLDRLayout.tsx diff --git a/packages/web/components/nav-containers/HighlightsContainer.tsx b/packages/web/components/nav-containers/HighlightsContainer.tsx index bc35a9d9f..c10d18454 100644 --- a/packages/web/components/nav-containers/HighlightsContainer.tsx +++ b/packages/web/components/nav-containers/HighlightsContainer.tsx @@ -1,23 +1,18 @@ -import { NavigationLayout } from '../templates/NavigationLayout' import { Box, HStack, VStack } from '../elements/LayoutPrimitives' import { useFetchMore } from '../../lib/hooks/useFetchMoreScroll' import { useCallback, useMemo, useState } from 'react' import { useGetHighlights } from '../../lib/networking/queries/useGetHighlights' import { Highlight } from '../../lib/networking/fragments/highlightFragment' import { NextRouter, useRouter } from 'next/router' -import { - UserBasicData, - useGetViewerQuery, -} from '../../lib/networking/queries/useGetViewerQuery' +import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery' import { SetHighlightLabelsModalPresenter } from '../templates/article/SetLabelsModalPresenter' import { TrashIcon } from '../elements/icons/TrashIcon' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { ConfirmationModal } from '../patterns/ConfirmationModal' -import { deleteHighlightMutation } from '../../lib/networking/mutations/deleteHighlightMutation' import { LabelChip } from '../elements/LabelChip' import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' -import { timeAgo } from '../patterns/LibraryCards/LibraryCardStyles' +import { timeAgo } from '../../lib/textFormatting' import { HighlightHoverActions } from '../patterns/HighlightHoverActions' import { autoUpdate, diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx index e4dabc403..bf4c111d1 100644 --- a/packages/web/components/nav-containers/HomeContainer.tsx +++ b/packages/web/components/nav-containers/HomeContainer.tsx @@ -16,7 +16,7 @@ import { ArchiveActionIcon } from '../elements/icons/home/ArchiveActionIcon' import { RemoveActionIcon } from '../elements/icons/home/RemoveActionIcon' import { ShareActionIcon } from '../elements/icons/home/ShareActionIcon' import Pagination from '../elements/Pagination' -import { timeAgo } from '../patterns/LibraryCards/LibraryCardStyles' +import { timeAgo } from '../../lib/textFormatting' import { theme } from '../tokens/stitches.config' import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme' import { useGetHiddenHomeSection } from '../../lib/networking/queries/useGetHiddenHomeSection' diff --git a/packages/web/components/patterns/ArticleSubtitle.tsx b/packages/web/components/patterns/ArticleSubtitle.tsx index dbda5b69c..d04e32ca3 100644 --- a/packages/web/components/patterns/ArticleSubtitle.tsx +++ b/packages/web/components/patterns/ArticleSubtitle.tsx @@ -1,6 +1,7 @@ import { Box, StyledLink } from './../elements/LayoutPrimitives' import { StyledText } from './../../components/elements/StyledText' import { formattedLongDate } from './../../lib/dateFormatting' +import { shouldHideUrl } from '../../lib/textFormatting' type SubtitleStyle = 'footnote' | 'shareSubtitle' @@ -67,15 +68,6 @@ export function ReaderSavedInfo(props: ReaderSavedInfoProps): JSX.Element { ) } -function shouldHideUrl(url: string): boolean { - const origin = new URL(url).origin - const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app'] - if (hideHosts.indexOf(origin) != -1) { - return true - } - return false -} - function articleSubtitle(url: string, author?: string): string | undefined { const origin = new URL(url).origin const hideUrl = shouldHideUrl(url) diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index 2765ec919..7c17ef340 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -1,6 +1,3 @@ -import dayjs from 'dayjs' -import relativeTime from 'dayjs/plugin/relativeTime' -import { useMemo } from 'react' import { LibraryItemNode } from '../../../lib/networking/library_items/useLibraryItems' import { HStack, SpanBox } from '../../elements/LayoutPrimitives' import { RecommendedFlairIcon } from '../../elements/icons/RecommendedFlairIcon' @@ -9,8 +6,7 @@ import { FavoriteFlairIcon } from '../../elements/icons/FavoriteFlairIcon' import { NewsletterFlairIcon } from '../../elements/icons/NewsletterFlairIcon' import { FeedFlairIcon } from '../../elements/icons/FeedFlairIcon' import { Label } from '../../../lib/networking/fragments/labelFragment' - -dayjs.extend(relativeTime) +import { timeAgo } from '../../../lib/textFormatting' export const MenuStyle = { display: 'flex', @@ -69,26 +65,6 @@ export const AuthorInfoStyle = { textOverflow: 'ellipsis', } -export const timeAgo = (date: string | undefined): string => { - if (!date) { - return '' - } - return dayjs(date).fromNow() -} - -const shouldHideUrl = (url: string): boolean => { - try { - const origin = new URL(url).origin - const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app'] - if (hideHosts.indexOf(origin) != -1) { - return true - } - } catch { - console.log('invalid url item', url) - } - return false -} - export const FLAIR_ICON_NAMES = [ 'favorite', 'pinned', @@ -148,27 +124,6 @@ export function FlairIcon(props: FlairIconProps): JSX.Element { ) } -export const siteName = ( - originalArticleUrl: string, - itemUrl: string, - siteName?: string -): string => { - if (siteName) { - return siteName - } - - if (shouldHideUrl(originalArticleUrl)) { - return '' - } - try { - return new URL(originalArticleUrl).hostname.replace(/^www\./, '') - } catch {} - try { - return new URL(itemUrl).hostname.replace(/^www\./, '') - } catch {} - return '' -} - type LibraryItemMetadataProps = { item: LibraryItemNode showProgress?: boolean diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index f8b1fe399..f47eede82 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -10,11 +10,11 @@ import { CardCheckbox, LibraryItemMetadata, MetaStyle, - siteName, TitleStyle, MenuStyle, FLAIR_ICON_NAMES, } from './LibraryCardStyles' +import { siteName } from '../../../lib/textFormatting' import { sortedLabels } from '../../../lib/labelsSort' import { LibraryHoverActions } from './LibraryHoverActions' import { diff --git a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx index 828935989..5c2f7a83d 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx @@ -1,7 +1,7 @@ import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives' import { useCallback, useMemo, useState } from 'react' import { CaretDown, CaretUp } from '@phosphor-icons/react' -import { MetaStyle, timeAgo, TitleStyle } from './LibraryCardStyles' +import { MetaStyle, TitleStyle } from './LibraryCardStyles' import { styled } from '@stitches/react' import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' import { LibraryItemNode } from '../../../lib/networking/library_items/useLibraryItems' @@ -12,6 +12,7 @@ import { HighlightView } from '../HighlightView' import { useRouter } from 'next/router' import { showErrorToast } from '../../../lib/toastHelpers' import { sortHighlights } from '../../../lib/highlights/sortHighlights' +import { timeAgo } from '../../../lib/textFormatting' export const GridSeparator = styled(Box, { height: '1px', diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index 7b15be1b5..6681c6abe 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -7,11 +7,11 @@ import { CardCheckbox, LibraryItemMetadata, MetaStyle, - siteName, TitleStyle, MenuStyle, FLAIR_ICON_NAMES, } from './LibraryCardStyles' +import { siteName } from '../../../lib/textFormatting' import { sortedLabels } from '../../../lib/labelsSort' import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/navMenu/LibraryMenu' import { LibraryHoverActions } from './LibraryHoverActions' diff --git a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemGridCard.tsx b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemGridCard.tsx index 68c3dd2b9..755f9c7c8 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemGridCard.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemGridCard.tsx @@ -19,9 +19,9 @@ import { CoverImage } from '../../../elements/CoverImage' import { AuthorInfoStyle, MetaStyle, - siteName, TitleStyle, } from '../../../patterns/LibraryCards/LibraryCardStyles' +import { siteName } from '../../../../lib/textFormatting' import { DiscoverItemCardProps, DiscoverItemSubCardProps, diff --git a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemListCard.tsx b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemListCard.tsx index 14756f17a..b6127b539 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemListCard.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemListCard.tsx @@ -20,9 +20,9 @@ import { CoverImage } from '../../../elements/CoverImage' import { AuthorInfoStyle, MetaStyle, - siteName, TitleStyle, } from '../../../patterns/LibraryCards/LibraryCardStyles' +import { siteName } from '../../../../lib/textFormatting' import { CheckCircle, Circle } from '@phosphor-icons/react' import { DiscoverItemCardProps, diff --git a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemMetadata.tsx b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemMetadata.tsx index 05faa426c..beffc41f1 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemMetadata.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemMetadata.tsx @@ -1,6 +1,6 @@ import { HStack } from '../../../elements/LayoutPrimitives' -import { timeAgo } from '../../../patterns/LibraryCards/LibraryCardStyles' -import { DiscoverFeedItem } from "../../../../lib/networking/queries/useGetDiscoverFeedItems" +import { DiscoverFeedItem } from '../../../../lib/networking/queries/useGetDiscoverFeedItems' +import { timeAgo } from '../../../../lib/textFormatting' type DiscoverItemMetadataProps = { item: DiscoverFeedItem diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx index 593dfdc1e..f8e5e3158 100644 --- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx +++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx @@ -13,10 +13,8 @@ import { Dropdown, DropdownOption } from '../../elements/DropdownElements' import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { MenuTrigger } from '../../elements/MenuTrigger' -import { - MetaStyle, - timeAgo, -} from '../../patterns/LibraryCards/LibraryCardStyles' +import { MetaStyle } from '../../patterns/LibraryCards/LibraryCardStyles' +import { timeAgo } from '../../../lib/textFormatting' import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard' import { NotebookContent } from '../article/Notebook' import { EmptyHighlights } from './EmptyHighlights' @@ -36,9 +34,8 @@ type HighlightItemsLayoutProps = { export function HighlightItemsLayout( props: HighlightItemsLayoutProps ): JSX.Element { - const [currentItem, setCurrentItem] = useState( - undefined - ) + const [currentItem, setCurrentItem] = + useState(undefined) const listReducer = ( state: LibraryItem[], diff --git a/packages/web/components/templates/homeFeed/TLDRLayout.tsx b/packages/web/components/templates/homeFeed/TLDRLayout.tsx deleted file mode 100644 index 7274c8f31..000000000 --- a/packages/web/components/templates/homeFeed/TLDRLayout.tsx +++ /dev/null @@ -1,317 +0,0 @@ -import { LayoutType } from './HomeFeedContainer' -import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' -import { LibraryItem } from '../../../lib/networking/library_items/useLibraryItems' -import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' -import { Toaster } from 'react-hot-toast' -import TopBarProgress from 'react-topbar-progress-indicator' -import { StyledText } from '../../elements/StyledText' -import { Button } from '../../elements/Button' -import { ArchiveIcon } from '../../elements/icons/ArchiveIcon' -import { TrashIcon } from '../../elements/icons/TrashIcon' -import { BrowserIcon } from '../../elements/icons/BrowserIcon' -import { styled } from '@stitches/react' -import { siteName } from '../../patterns/LibraryCards/LibraryCardStyles' -import { theme } from '../../tokens/stitches.config' -import { DotsThree } from '@phosphor-icons/react' -import { useState } from 'react' - -type TLDRLayoutProps = { - layout: LayoutType - viewer?: UserBasicData - - items: LibraryItem[] - isValidating: boolean - - hasMore: boolean - totalItems: number - - loadMore: () => void -} - -const SiteIcon = styled('img', { - width: '22px', - height: '22px', - borderRadius: '100px', -}) - -export function TLDRLayout(props: TLDRLayoutProps): JSX.Element { - return ( - <> - - - - {props.isValidating && props.items.length == 0 && } - - {props.items.map((item) => { - const sourceName = siteName( - item.node.originalArticleUrl, - item.node.url, - item.node.siteName - ) - const source = - sourceName == item.node.author ? undefined : item.node.author - - return ( - - - - - - {source && ( - - {item.node.siteName} - - )} - {source && item.node.author && ( - - • - - )} - {item.node.author && ( - - {item.node.author} - - )} - - - - - - - - {item.node.title} - - - {item.node.aiSummary} - - - - - - - - - - ) - })} - - - {props.hasMore ? ( - - ) : ( - - )} - - - - ) -} - -const ArchiveButton = (): JSX.Element => { - const [foreground, setForegroundColor] = useState( - theme.colors.thTextContrast2.toString() - ) - return ( - - ) -} - -const RemoveButton = (): JSX.Element => { - const [foreground, setForegroundColor] = useState( - theme.colors.thTextContrast2.toString() - ) - return ( - - ) -} - -const OpenOriginalButton = (): JSX.Element => { - const [foreground, setForegroundColor] = useState( - theme.colors.thTextContrast2.toString() - ) - return ( - - ) -} diff --git a/packages/web/pages/home/debug.tsx b/packages/web/pages/home/debug.tsx index 376afe110..6132bf81d 100644 --- a/packages/web/pages/home/debug.tsx +++ b/packages/web/pages/home/debug.tsx @@ -1,33 +1,8 @@ -import { styled } from '@stitches/react' -import { AddToLibraryActionIcon } from '../../components/elements/icons/home/AddToLibraryActionIcon' -import { ArchiveActionIcon } from '../../components/elements/icons/home/ArchiveActionIcon' -import { CommentActionIcon } from '../../components/elements/icons/home/CommentActionIcon' -import { RemoveActionIcon } from '../../components/elements/icons/home/RemoveActionIcon' -import { ShareActionIcon } from '../../components/elements/icons/home/ShareActionIcon' import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme' -import { - HStack, - SpanBox, - VStack, -} from './../../components/elements/LayoutPrimitives' - -import * as HoverCard from '@radix-ui/react-hover-card' +import { SpanBox, VStack } from './../../components/elements/LayoutPrimitives' import { Button } from '../../components/elements/Button' -import { - HomeItem, - HomeItemSource, - HomeItemSourceType, - HomeSection, - useGetHomeItems, -} from '../../lib/networking/queries/useGetHome' -import { timeAgo } from '../../components/patterns/LibraryCards/LibraryCardStyles' -import { theme } from '../../components/tokens/stitches.config' -import { useRouter } from 'next/router' -import { - SubscriptionType, - useGetSubscriptionsQuery, -} from '../../lib/networking/queries/useGetSubscriptionsQuery' -import { useCallback, useMemo } from 'react' +import { useGetHomeItems } from '../../lib/networking/queries/useGetHome' +import { useCallback } from 'react' import { refreshHomeMutation } from '../../lib/networking/mutations/refreshHome' export default function DebugHome(): JSX.Element { From 441b22d4ab339399d91057151ef721ba0beed915 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 26 Aug 2024 13:01:14 +0800 Subject: [PATCH 2/5] Add text formatting, make sure we hide if siteName is omnivore.app --- packages/web/lib/textFormatting.ts | 45 ++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 packages/web/lib/textFormatting.ts diff --git a/packages/web/lib/textFormatting.ts b/packages/web/lib/textFormatting.ts new file mode 100644 index 000000000..1f4ecf79a --- /dev/null +++ b/packages/web/lib/textFormatting.ts @@ -0,0 +1,45 @@ +import dayjs from 'dayjs' +import relativeTime from 'dayjs/plugin/relativeTime' + +dayjs.extend(relativeTime) + +export const timeAgo = (date: string | undefined): string => { + if (!date) { + return '' + } + return dayjs(date).fromNow() +} + +export const shouldHideUrl = (url: string): boolean => { + try { + const origin = new URL(url).origin + const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app'] + if (hideHosts.indexOf(origin) != -1) { + return true + } + } catch { + console.log('invalid url item', url) + } + return false +} + +export const siteName = ( + originalArticleUrl: string, + itemUrl: string, + siteName?: string +): string => { + if (siteName) { + return shouldHideUrl(siteName) ? '' : siteName + } + + if (shouldHideUrl(originalArticleUrl)) { + return '' + } + try { + return new URL(originalArticleUrl).hostname.replace(/^www\./, '') + } catch {} + try { + return new URL(itemUrl).hostname.replace(/^www\./, '') + } catch {} + return '' +} From 35341d2a738f66b64538147ece4db6c5f0b9e5e3 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 26 Aug 2024 13:26:32 +0800 Subject: [PATCH 3/5] Move react toast --- .../nav-containers/HomeContainer.tsx | 2 - .../components/templates/OnboardingLayout.tsx | 258 ------------------ .../DiscoverFeed/DiscoverFeed.tsx | 14 +- .../templates/homeFeed/HighlightsLayout.tsx | 2 - .../templates/library/LibraryContainer.tsx | 3 - .../templates/settings/SettingsTable.tsx | 6 - .../keyboardShortcuts/navigationShortcuts.ts | 1 - .../web/pages/[username]/[slug]/index.tsx | 9 +- packages/web/pages/_app.tsx | 2 + packages/web/pages/_document.tsx | 1 + packages/web/pages/auth/forgot-password.tsx | 6 - packages/web/pages/settings/account.tsx | 7 - .../web/pages/settings/delete-my-account.tsx | 6 - packages/web/pages/settings/features/beta.tsx | 24 +- packages/web/pages/settings/integrations.tsx | 9 - packages/web/pages/settings/labels.tsx | 11 +- .../web/pages/settings/pinned-searches.tsx | 6 - packages/web/pages/settings/rules.tsx | 17 +- .../web/pages/settings/saved-searches.tsx | 37 ++- packages/web/pages/settings/shortcuts.tsx | 23 +- packages/web/pages/settings/webhooks.tsx | 6 - packages/web/stories/Snackbar.stories.tsx | 53 ---- 22 files changed, 36 insertions(+), 467 deletions(-) delete mode 100644 packages/web/components/templates/OnboardingLayout.tsx delete mode 100644 packages/web/stories/Snackbar.stories.tsx diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx index bf4c111d1..c5cbbabc5 100644 --- a/packages/web/components/nav-containers/HomeContainer.tsx +++ b/packages/web/components/nav-containers/HomeContainer.tsx @@ -33,7 +33,6 @@ import { useGetSubscriptionsQuery, } from '../../lib/networking/queries/useGetSubscriptionsQuery' import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives' -import { Toaster } from 'react-hot-toast' import useLibraryItemActions from '../../lib/hooks/useLibraryItemActions' import { SyncLoader } from 'react-spinners' import { useGetLibraryItems } from '../../lib/networking/library_items/useLibraryItems' @@ -423,7 +422,6 @@ export function HomeContainer(): JSX.Element { }, }} > - void | Promise -} - -export const OnboardingLayout = ({ - pageNumber, - title, - subTitle, - description, - image, - children, - nextPage, - reduceSpace, - onNext, -}: OnboardingLayoutProps) => { - const router = useRouter() - - const NextButton = () => { - const handleNext = async () => { - onNext && (await onNext()) - router.push(nextPage ?? `/onboarding/0${pageNumber + 1}`) - } - - return ( - - ) - } - - return ( - <> - - - - - - - - - - Omnivore - - - - {title} - - - {subTitle} - - {image && ( - - {image} - - )} - - - - - - - - {description && ( - - {description} - - )} - {children} - - - - - - - - ) -} diff --git a/packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx b/packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx index 0d2844d3b..04c3222de 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx @@ -1,13 +1,12 @@ -import { HStack, VStack } from "../../../elements/LayoutPrimitives" -import { Toaster } from 'react-hot-toast' +import { HStack, VStack } from '../../../elements/LayoutPrimitives' import { LayoutType } from '../../homeFeed/HomeFeedContainer' import { UserBasicData } from '../../../../lib/networking/queries/useGetViewerQuery' import { DiscoverItems } from '../DiscoverItems/DiscoverItems' -import { SaveDiscoverArticleOutput } from "../../../../lib/networking/mutations/saveDiscoverArticle" -import { HeaderText } from "../DiscoverHeader/HeaderText" -import React from "react" -import { TopicTabData } from "../DiscoverContainer" -import { DiscoverFeedItem } from "../../../../lib/networking/queries/useGetDiscoverFeedItems" +import { SaveDiscoverArticleOutput } from '../../../../lib/networking/mutations/saveDiscoverArticle' +import { HeaderText } from '../DiscoverHeader/HeaderText' +import React from 'react' +import { TopicTabData } from '../DiscoverContainer' +import { DiscoverFeedItem } from '../../../../lib/networking/queries/useGetDiscoverFeedItems' type DiscoverItemFeedProps = { items: DiscoverFeedItem[] @@ -33,7 +32,6 @@ export const DiscoverItemFeed = (props: DiscoverItemFeedProps) => { minHeight: '100vh', }} > - - - - { export const SettingsTable = (props: SettingsTableProps): JSX.Element => { return ( - - - + -
diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx index 40d215c91..a863a1543 100644 --- a/packages/web/pages/settings/account.tsx +++ b/packages/web/pages/settings/account.tsx @@ -1,5 +1,4 @@ import { useCallback, useEffect, useMemo, useState } from 'react' -import { Toaster } from 'react-hot-toast' import { Button } from '../../components/elements/Button' import { Box, @@ -224,12 +223,6 @@ export default function Account(): JSX.Element { return ( - - - - - - -
Integrations diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 149673484..83e006e13 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -8,7 +8,6 @@ import { HStack, VStack, } from '../../components/elements/LayoutPrimitives' -import { Toaster } from 'react-hot-toast' import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { Label, LabelColor } from '../../lib/networking/fragments/labelFragment' @@ -156,9 +155,8 @@ export default function LabelsPage(): JSX.Element { const [descriptionInputText, setDescriptionInputText] = useState('') const [isCreateMode, setIsCreateMode] = useState(false) const [windowWidth, setWindowWidth] = useState(0) - const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState< - string | null - >(null) + const [confirmRemoveLabelId, setConfirmRemoveLabelId] = + useState(null) const [showLabelPageHelp, setShowLabelPageHelp] = usePersistedState({ key: `--settings-labels-show-help`, initialValue: true, @@ -262,11 +260,6 @@ export default function LabelsPage(): JSX.Element { return ( - - { } } - const [actionType, setActionType] = useState( - undefined - ) + const [actionType, setActionType] = + useState(undefined) return ( ( - undefined - ) + const [createActionRule, setCreateActionRule] = + useState(undefined) const dataSource = useMemo(() => { return rules.map((rule: Rule) => { @@ -435,12 +432,6 @@ export default function Rules(): JSX.Element { return ( - - (null) const [isCreateMode, setIsCreateMode] = useState(false) const [windowWidth, setWindowWidth] = useState(0) - const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = useState< - string | null - >(null) + const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = + useState(null) const [draggedElementId, setDraggedElementId] = useState(null) - const [draggedElementPosition, setDraggedElementPosition] = useState<{ - x: number - y: number - } | null>(null) + const [draggedElementPosition, setDraggedElementPosition] = + useState<{ + x: number + y: number + } | null>(null) const [sortedSavedSearch, setSortedSavedSearch] = useState([]) // Some theming stuff here. @@ -330,11 +329,6 @@ export default function SavedSearchesPage(): JSX.Element { return ( - - >(DEFAULT_STYLE) + const [style, setStyle] = + useState< + Partial<{ + position: string | null + top: string + left: string + maxWidth: string + }> + >(DEFAULT_STYLE) const handleEdit = () => { editingId && updateSavedSearch(editingId) setEditingId(null) diff --git a/packages/web/pages/settings/shortcuts.tsx b/packages/web/pages/settings/shortcuts.tsx index cc1b14569..11835475c 100644 --- a/packages/web/pages/settings/shortcuts.tsx +++ b/packages/web/pages/settings/shortcuts.tsx @@ -7,12 +7,7 @@ import { useRef, useState, } from 'react' -import { applyStoredTheme } from '../../lib/themeUpdater' - import { SettingsLayout } from '../../components/templates/SettingsLayout' -import { NavigationLayout } from '../../components/templates/NavigationLayout' - -import { Toaster } from 'react-hot-toast' import { Box, VStack, @@ -20,36 +15,24 @@ import { SpanBox, Separator, } from '../../components/elements/LayoutPrimitives' -import { LabelChip } from '../../components/elements/LabelChip' import { StyledText } from '../../components/elements/StyledText' -import { - Subscription, - SubscriptionType, - useGetSubscriptionsQuery, -} from '../../lib/networking/queries/useGetSubscriptionsQuery' -import { DragIcon } from '../../components/elements/icons/DragIcon' +import { SubscriptionType } from '../../lib/networking/queries/useGetSubscriptionsQuery' import { CoverImage } from '../../components/elements/CoverImage' import { Label } from '../../lib/networking/fragments/labelFragment' -import { usePersistedState } from '../../lib/hooks/usePersistedState' -import { CheckSquare, Square, Tag } from '@phosphor-icons/react' -import { Button } from '../../components/elements/Button' -import { styled } from '@stitches/react' -import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment' -import { escapeQuotes } from '../../utils/helper' import { useGetLabels } from '../../lib/networking/labels/useLabels' import { useGetSavedSearches } from '../../lib/networking/savedsearches/useSavedSearches' import { Shortcut, ShortcutType, useGetShortcuts, - useResetShortcuts, useSetShortcuts, } from '../../lib/networking/shortcuts/useShortcuts' import * as Switch from '@radix-ui/react-switch' import { useGetSubscriptions } from '../../lib/networking/subscriptions/useGetSubscriptions' import { NewsletterIcon } from '../../components/elements/icons/NewsletterIcon' import { FollowingIcon } from '../../components/elements/icons/FollowingIcon' -import { LIBRARY_LEFT_MENU_WIDTH } from '../../components/templates/navMenu/NavigationMenu' +import { escapeQuotes } from '../../utils/helper' +import { Tag } from '@phosphor-icons/react' function flattenShortcuts(shortcuts: Shortcut[]): string[] { let result: string[] = [] diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 6a27518be..75b92d4ef 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -1,5 +1,4 @@ import { SettingsLayout } from '../../components/templates/SettingsLayout' -import { Toaster } from 'react-hot-toast' import { VStack } from '../../components/elements/LayoutPrimitives' import Link from 'next/link' import { StyledText } from '../../components/elements/StyledText' @@ -7,11 +6,6 @@ import { StyledText } from '../../components/elements/StyledText' export default function Webhooks(): JSX.Element { return ( - - -const Template = ({ showToast, position }: { showToast: () => void; position?: ToastPosition }) => ( -
- -
- -
-
-) - -export const SuccessSnackbar: ComponentStory = (args: any) => { - return ( -