From 9c00555ab764d077b34a8a6589e464d24a4d5e07 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 27 Feb 2023 14:01:44 +0800 Subject: [PATCH] Use SettingsLayout instead of Primary layout for the settings items --- .../templates/ArticleHighlights.tsx | 217 ---------------- .../templates/settings/SettingsTable.tsx | 6 +- packages/web/pages/discover.tsx | 15 -- packages/web/pages/help/emails.tsx | 37 ++- packages/web/pages/help/labels.tsx | 12 +- packages/web/pages/help/newsletters.tsx | 239 +++++++++++++----- packages/web/pages/help/saving-links.tsx | 11 +- packages/web/pages/help/search.tsx | 6 +- .../web/pages/settings/delete-my-account.tsx | 6 +- packages/web/pages/settings/integrations.tsx | 6 +- packages/web/pages/settings/labels.tsx | 11 +- packages/web/pages/settings/rules.tsx | 16 +- packages/web/pages/settings/webhooks.tsx | 6 +- 13 files changed, 221 insertions(+), 367 deletions(-) delete mode 100644 packages/web/components/templates/ArticleHighlights.tsx delete mode 100644 packages/web/pages/discover.tsx diff --git a/packages/web/components/templates/ArticleHighlights.tsx b/packages/web/components/templates/ArticleHighlights.tsx deleted file mode 100644 index ad79c7876..000000000 --- a/packages/web/components/templates/ArticleHighlights.tsx +++ /dev/null @@ -1,217 +0,0 @@ -import { useRouter } from 'next/router' -import { PublicArticleAttributes } from '../../lib/networking/queries/useGetPublicArticleQuery' -import { PrimaryLayout } from './PrimaryLayout' -import { StyledText } from '../elements/StyledText' -import { VStack, HStack, Box } from '../elements/LayoutPrimitives' -import { authoredByText } from '../patterns/ArticleSubtitle' -import Image from 'next/image' -import { HighlightFooter, PublicHighlightView } from '../patterns/HighlightView' -import { useMemo, useRef, useState } from 'react' -import { Highlight } from '../../lib/networking/fragments/highlightFragment' -import { Button } from '../elements/Button' - -type ArticleHighlightsProps = { - publicArticle: PublicArticleAttributes - showAllHighlights: boolean - selectedHighlightId?: string - previewImagePath?: string -} - -export function ArticleHighlights(props: ArticleHighlightsProps): JSX.Element { - const router = useRouter() - return ( - - - - - - ) -} - -type LoadedContentProps = { - publicArticle: PublicArticleAttributes - showAllHighlights: boolean - selectedHighlightId?: string -} - -function LoadedContent(props: LoadedContentProps): JSX.Element { - const router = useRouter() - const container = useRef(null) - - const [showAllHighlights, setShowAllHighlights] = useState( - props.showAllHighlights - ) - - const selectedHighlights = - props.publicArticle.highlights.filter((highlight) => { - return highlight.shortId === props.selectedHighlightId - }) ?? ([] as Highlight[]) - - const unselectedHighlights = - props.publicArticle.highlights.filter((highlight) => { - return highlight.shortId !== props.selectedHighlightId - }) ?? ([] as Highlight[]) - - const moreHighlightsCount = useMemo(() => { - return props.publicArticle.highlights.length - 1 - }, [props.publicArticle.highlights]) - - // const sharedBy = useMemo(() => { - // if (moreHighlightsCount < 1) return undefined - // return props.publicArticle.highlights[0].user - // }, [moreHighlightsCount, props.publicArticle.highlights]) - - const articleSite = useMemo(() => { - try { - const url = new URL(props.publicArticle.url) - return url.hostname - } catch (e) { - console.log('error ', e) - return '' - } - }, [props.publicArticle.url]) - - return ( - - {!props.selectedHighlightId && ( - - )} - - {selectedHighlights.map((highlight) => ( - - ))} - - {showAllHighlights && - unselectedHighlights.map((highlight) => ( - - ))} - - - - {!showAllHighlights && moreHighlightsCount > 0 && ( - - )} - - - - ) -} - -type LinkedItemProps = { - publicArticle: PublicArticleAttributes -} - -function LinkedItem(props: LinkedItemProps): JSX.Element { - const originText = new URL(props.publicArticle.url).hostname - - return ( - - - - - Link Preview Image - - - - - {props.publicArticle.title} - - {props.publicArticle.author && ( - - {authoredByText(props.publicArticle.author)} - - )} - - {originText} - - - - - - - {props.publicArticle.description} - - - ) -} diff --git a/packages/web/components/templates/settings/SettingsTable.tsx b/packages/web/components/templates/settings/SettingsTable.tsx index ecc3b673c..29ee9120e 100644 --- a/packages/web/components/templates/settings/SettingsTable.tsx +++ b/packages/web/components/templates/settings/SettingsTable.tsx @@ -7,7 +7,7 @@ import { InfoLink } from '../../elements/InfoLink' import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { StyledText } from '../../elements/StyledText' import { theme } from '../../tokens/stitches.config' -import { PrimaryLayout } from '../PrimaryLayout' +import { SettingsLayout } from '../SettingsLayout' type SettingsTableProps = { pageId: string @@ -235,7 +235,7 @@ const CreateButton = (props: CreateButtonProps): JSX.Element => { export const SettingsTable = (props: SettingsTableProps): JSX.Element => { return ( - + { - + ) } diff --git a/packages/web/pages/discover.tsx b/packages/web/pages/discover.tsx deleted file mode 100644 index 388da35af..000000000 --- a/packages/web/pages/discover.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { PrimaryLayout } from '../components/templates/PrimaryLayout' - -export default function Discover(): JSX.Element { - return ( - - Discover Page - - ) -} diff --git a/packages/web/pages/help/emails.tsx b/packages/web/pages/help/emails.tsx index 40735fb62..b2f4966a4 100644 --- a/packages/web/pages/help/emails.tsx +++ b/packages/web/pages/help/emails.tsx @@ -1,18 +1,12 @@ /* eslint-disable @next/next/no-img-element */ import { Box, HStack } from '../../components/elements/LayoutPrimitives' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { SettingsLayout } from '../../components/templates/SettingsLayout' import { Button } from '../../components/elements/Button' import Link from 'next/link' export default function Emails(): JSX.Element { return ( - + Omnivore Email Addresses

- An Omnivore email address will receive email, detect whether the email is a PDF document or newsletter, - and add the content to your library. + An Omnivore email address will receive email, detect whether the email + is a PDF document or newsletter, and add the content to your library.

- If Omnivore doesn't think the item should be added to your library, - it will be forwarded to the email address you used when you registered - for Omnivore (from msgs@omnivore.app). + If Omnivore doesn't think the item should be added to your + library, it will be forwarded to the email address you used when you + registered for Omnivore (from msgs@omnivore.app).

Sending PDFs to your Omnivore Email Address

- Add PDFs to your Omnivore library by sending them to your Omnivore email address. If there is a subject - line in the email, it will be used as the title of the PDF. If there is no subject line, the filename will - be used as the title. + Add PDFs to your Omnivore library by sending them to your Omnivore + email address. If there is a subject line in the email, it will be + used as the title of the PDF. If there is no subject line, the + filename will be used as the title.

Read all your newsletters in Omnivore

- Subscribe to newsletters with your Omnivore email address and they + Subscribe to newsletters with your Omnivore email address and they will be added to your library when we receive them.

-

Learn more about setting up newsletters

+

+ + Learn more about setting up newsletters + +

@@ -62,6 +61,6 @@ export default function Emails(): JSX.Element { - + ) } diff --git a/packages/web/pages/help/labels.tsx b/packages/web/pages/help/labels.tsx index 91387397e..03176a358 100644 --- a/packages/web/pages/help/labels.tsx +++ b/packages/web/pages/help/labels.tsx @@ -1,17 +1,11 @@ /* eslint-disable @next/next/no-img-element */ import { Box } from '../../components/elements/LayoutPrimitives' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { SettingsLayout } from '../../components/templates/SettingsLayout' import Link from 'next/link' export default function Labels(): JSX.Element { return ( - + - + ) } diff --git a/packages/web/pages/help/newsletters.tsx b/packages/web/pages/help/newsletters.tsx index bfb41236f..af8a6129f 100644 --- a/packages/web/pages/help/newsletters.tsx +++ b/packages/web/pages/help/newsletters.tsx @@ -1,41 +1,50 @@ /* eslint-disable @next/next/no-img-element */ -import { Box, HStack, SpanBox } from '../../components/elements/LayoutPrimitives' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { + Box, + HStack, + SpanBox, +} from '../../components/elements/LayoutPrimitives' +import { SettingsLayout } from '../../components/templates/SettingsLayout' import { Button } from '../../components/elements/Button' import Link from 'next/link' import { Copy, Plus } from 'phosphor-react' import { theme } from '../../components/tokens/stitches.config' const AddEmailButton = () => { - return () + return ( + + ) } const CopyButton = () => { return ( - ) + + ) } export default function Newsletters(): JSX.Element { return ( -

Omnivore supports newsletters from the following providers:

-

If there is a newsletter you would like to read in Omnivore, please let us know.

+

+ If there is a newsletter you would like to read in Omnivore, please + let us know. +

Omnivore Email Addresses

- Omnivore allows you to create unique email addresses for subscribing to newsletters. - You can reuse one address for all your newsletters, or you can create a unique address - for each. + Omnivore allows you to create unique email addresses for subscribing + to newsletters. You can reuse one address for all your newsletters, or + you can create a unique address for each.

- An Omnivore email address will receive email, detect whether the email is a newsletter, - and add the newsletter content to your library. If the email does not appear to be a newsletter, - it will be forwarded to the email address you used when you registered for Omnivore. + An Omnivore email address will receive email, detect whether the email + is a newsletter, and add the newsletter content to your library. If + the email does not appear to be a newsletter, it will be forwarded to + the email address you used when you registered for Omnivore.

-

There are multiple ways to add newsletters to your Omnivore library:

+

+ There are multiple ways to add newsletters to your Omnivore library: +

Updating your account email

- If you want all your substack newsletters sent to Omnivore, you can login and change the - address on your account page in Substack. + If you want all your substack newsletters sent to Omnivore, you can + login and change the address on{' '} + your account page{' '} + in Substack.

Subscribing Directly

- Create your first email address by clicking the button on - the emails page. Copy the email address - to your clipboard using the - copy button, and enter that email address into an email subscription box. + Create your first email address by clicking the {' '} + button on the emails page. Copy + the email address to your clipboard using the + copy button, and enter that email address into an email subscription + box.

@@ -110,53 +176,88 @@ export default function Newsletters(): JSX.Element {

- If you are already logged into Substack you might need to logout to use your new email address. + If you are already logged into Substack you might need to logout to + use your new email address.

Create a Forwarding Rule

- If you are a Gmail user you can create a forwarding rule to send email from your regular account - to your Omnivore email address. This is useful if you have an existing paid newsletter subscription and + If you are a Gmail user you can create a forwarding rule to send email + from your regular account to your Omnivore email address. This is + useful if you have an existing paid newsletter subscription and don't want to update your account email address.

- For free newsletters we recommend subscribing directly to the newsletter with your Omnivore email address - instead of setting up forwarding rules. + For free newsletters we recommend subscribing directly to the + newsletter with your Omnivore email address instead of setting up + forwarding rules.

Before you start:

    -
  • Create an Omnivore Email Address by clicking the button on the emails page.
    • -
  • Make a note of the Newsletter's sender email address. For example omnivore@substack.com.
    • +
  • + Create an Omnivore Email Address by clicking the {' '} + button on the emails page. +
    • +
  • + Make a note of the Newsletter's sender email address. For + example omnivore@substack.com. +

Create a forwarding rule:

  • - On a computer open your Gmail Forwarding Rules. - If this link does not work: click on the Gear icon in the upper right corner of Gmail - and select All Settings, then click the Forwarding and POP/IMAP tab. -
    • -
  • In the Forwarding section click Add a forwarding address.
    • -
  • Enter your Omnivore Email Address (eg username-sdfsd@inbox.omnivore.app) and click Next.
    • -
  • Click Proceed and OK
    • -
  • Refresh the Omnivore Newsletter Emails page and you should see a code appear beside your address (eg 663421251). - Copy this code to your clipboard (click the button). + On a computer open your{' '} + + Gmail Forwarding Rules + + . If this link does not work: click on the Gear icon in the upper + right corner of Gmail and select All Settings, then click the + Forwarding and POP/IMAP tab.
  • - Return to your forwarding rules section and look for the confirm code text box. - Enter the confirmation code you copied and click Verify. + In the Forwarding section click{' '} + Add a forwarding address. +
    • +
  • + Enter your Omnivore Email Address (eg{' '} + username-sdfsd@inbox.omnivore.app) and click Next. +
    • +
  • Click Proceed and OK
    • +
  • + Refresh the Omnivore Newsletter Emails page and you should see a + code appear beside your address (eg 663421251). Copy this code to + your clipboard (click the button). +
    • +
  • + Return to your forwarding rules section and look for the confirm + code text box. Enter the confirmation code you copied and click{' '} + Verify. +
    • +
  • + In the forwarding section of Gmail, Click on{' '} + Creating a Filter +
    • +
  • + Add the email address of your newsletter (eg omnivore@substack.app) + in the From section. +
    • +
  • + Click Create Filter +
    • +
  • + Choose Forward it to and enter your Omnivore Email Address + (eg username-sdfsd@inbox.omnivore.app) +
    • +
  • + Click Create Filter at the bottom of the dialog.
    • -
  • In the forwarding section of Gmail, Click on Creating a Filter
    • -
  • Add the email address of your newsletter (eg omnivore@substack.app) in the From section.
    • -
  • Click Create Filter
    • -
  • Choose Forward it to and enter your Omnivore Email Address (eg username-sdfsd@inbox.omnivore.app)
    • -
  • Click Create Filter at the bottom of the dialog.
- + ) } diff --git a/packages/web/pages/help/saving-links.tsx b/packages/web/pages/help/saving-links.tsx index ff16e56d1..7dbd3098f 100644 --- a/packages/web/pages/help/saving-links.tsx +++ b/packages/web/pages/help/saving-links.tsx @@ -3,16 +3,11 @@ import { Box, HStack } from '../../components/elements/LayoutPrimitives' import { PrimaryLayout } from '../../components/templates/PrimaryLayout' import { Button } from '../../components/elements/Button' import Link from 'next/link' +import { SettingsLayout } from '../../components/templates/SettingsLayout' export default function Colors(): JSX.Element { return ( - + - + ) } diff --git a/packages/web/pages/help/search.tsx b/packages/web/pages/help/search.tsx index a9e46c0fc..f6d11ef6f 100644 --- a/packages/web/pages/help/search.tsx +++ b/packages/web/pages/help/search.tsx @@ -1,10 +1,10 @@ /* eslint-disable @next/next/no-img-element */ import { Box } from '../../components/elements/LayoutPrimitives' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { SettingsLayout } from '../../components/templates/SettingsLayout' export default function Search(): JSX.Element { return ( - - + ) } diff --git a/packages/web/pages/settings/delete-my-account.tsx b/packages/web/pages/settings/delete-my-account.tsx index b2c58654c..c146cb78e 100644 --- a/packages/web/pages/settings/delete-my-account.tsx +++ b/packages/web/pages/settings/delete-my-account.tsx @@ -5,7 +5,7 @@ import { Toaster } from 'react-hot-toast' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { applyStoredTheme } from '../../lib/themeUpdater' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { SettingsLayout } from '../../components/templates/SettingsLayout' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { Button } from '../../components/elements/Button' @@ -46,7 +46,7 @@ export default function DeleteMyAccount(): JSX.Element { } return ( - + )} - + ) } diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx index c0258f943..ff4fb637a 100644 --- a/packages/web/pages/settings/integrations.tsx +++ b/packages/web/pages/settings/integrations.tsx @@ -11,7 +11,7 @@ import { SpanBox, VStack, } from '../../components/elements/LayoutPrimitives' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { SettingsLayout } from '../../components/templates/SettingsLayout' import { applyStoredTheme } from '../../lib/themeUpdater' import { Button } from '../../components/elements/Button' import { useGetIntegrationsQuery } from '../../lib/networking/queries/useGetIntegrationsQuery' @@ -125,7 +125,7 @@ export default function Integrations(): JSX.Element { }, [readwiseConnected, router, webhooks]) return ( - + - + ) } diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 3e377f1f4..70cd4e0c8 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -1,5 +1,5 @@ import { useEffect, useMemo, useState } from 'react' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { SettingsLayout } from '../../components/templates/SettingsLayout' import { Button } from '../../components/elements/Button' import { styled } from '../../components/tokens/stitches.config' import { @@ -155,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 breakpoint = 768 applyStoredTheme(false) @@ -252,7 +251,7 @@ export default function LabelsPage(): JSX.Element { } return ( - + - + ) } diff --git a/packages/web/pages/settings/rules.tsx b/packages/web/pages/settings/rules.tsx index cea7826c6..71aec145a 100644 --- a/packages/web/pages/settings/rules.tsx +++ b/packages/web/pages/settings/rules.tsx @@ -10,7 +10,7 @@ import { useGetRulesQuery, } from '../../lib/networking/queries/useGetRulesQuery' -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { SettingsLayout } from '../../components/templates/SettingsLayout' import { Button, Space, Table, Form, Input, Modal, Tag, Select } from 'antd' // import 'antd/dist/antd.dark.css' @@ -123,9 +123,8 @@ const CreateActionModal = (props: CreateActionModalProps): JSX.Element => { } } - 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) => { @@ -301,7 +299,7 @@ export default function Rules(): JSX.Element { ] return ( - + - + ) } diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 7f976c1b0..46fc982f7 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -1,4 +1,4 @@ -import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { SettingsLayout } from '../../components/templates/SettingsLayout' import { Toaster } from 'react-hot-toast' import { Table } from '../../components/elements/Table' import { applyStoredTheme } from '../../lib/themeUpdater' @@ -88,7 +88,7 @@ export default function Webhooks(): JSX.Element { } return ( - + - + ) }