From 9d6a28cc74f9c753b3e56e6ef40b63002a9b35d6 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 27 Feb 2023 10:34:12 +0800 Subject: [PATCH] More warnings clean up --- .../components/elements/AvatarDropdown.tsx | 3 +- .../components/elements/DropdownElements.tsx | 12 +- .../elements/ExtensionsInstallHelp.tsx | 1 - packages/web/components/elements/InfoLink.tsx | 3 +- .../web/components/elements/LabelChip.tsx | 2 +- .../components/elements/MobileInstallHelp.tsx | 3 +- .../patterns/DeleteItemConfirmationModal.tsx | 2 - .../components/templates/PrimaryLayout.tsx | 10 +- .../templates/article/ArticleActionsMenu.tsx | 22 -- .../article/DisplaySettingsModal.tsx | 25 +- .../templates/article/FontFamiliesOptions.tsx | 64 ++++- .../templates/article/HighlightNoteModal.tsx | 12 - .../templates/article/HighlightsLayer.tsx | 3 +- .../onboarding/OnboardingAddNewsletters.tsx | 89 ------- .../OnboardingHighlightInstructions.tsx | 43 --- .../OnboardingInstallInstructions.tsx | 100 ------- .../onboarding/OnboardingJoinCommunity.tsx | 77 ------ .../OnboardingOrganizeInstructions.tsx | 57 ---- .../onboarding/OnboardingReaderPreview.tsx | 83 ------ .../templates/onboarding/SelectOption.tsx | 244 ------------------ packages/web/lib/hooks/useScrollWatcher.tsx | 10 +- .../keyboardShortcuts/useKeyboardShortcuts.ts | 6 +- .../networking/fragments/highlightFragment.ts | 2 +- .../mutations/uploadFileMutation.ts | 9 +- .../mutations/uploadImportFileMutation.ts | 1 - .../networking/queries/useGetApiKeysQuery.tsx | 2 +- .../useGetArticleOriginalHtmlQuery.tsx | 18 +- .../networking/queries/useGetArticleQuery.tsx | 4 +- .../queries/useGetIntegrationsQuery.tsx | 5 +- .../networking/queries/useGetLabelsQuery.tsx | 2 +- .../queries/useGetNewsletterEmailsQuery.tsx | 2 +- .../networking/queries/useGetRulesQuery.tsx | 13 +- .../queries/useGetSubscriptionsQuery.tsx | 2 +- .../queries/useGetWebhooksQuery.tsx | 2 +- .../[slug]/highlights/[highlightId].tsx | 98 ------- .../highlights/[highlightId]/preview.tsx | 169 ------------ .../[username]/[slug]/highlights/index.tsx | 69 ----- .../web/pages/[username]/[slug]/index.tsx | 4 +- packages/web/pages/_document.tsx | 5 - .../app/[username]/link-request/[id].tsx | 10 +- .../web/pages/auth/confirm-email/[token].tsx | 11 +- packages/web/pages/auth/forgot-password.tsx | 10 +- packages/web/pages/help/labels.tsx | 84 +++--- packages/web/pages/help/search.tsx | 171 ++++++++---- packages/web/pages/settings/api.tsx | 4 +- .../web/pages/settings/delete-my-account.tsx | 21 +- packages/web/pages/settings/emails/index.tsx | 4 +- .../settings/installation/extensions.tsx | 3 +- .../pages/settings/installation/mobile.tsx | 4 +- packages/web/pages/settings/integrations.tsx | 2 +- packages/web/pages/settings/labels.tsx | 2 +- packages/web/pages/tools/bulk.tsx | 2 +- packages/web/pages/tools/import/file.tsx | 6 + packages/web/pages/zh/index.tsx | 38 --- 54 files changed, 322 insertions(+), 1328 deletions(-) delete mode 100644 packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx delete mode 100644 packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx delete mode 100644 packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx delete mode 100644 packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx delete mode 100644 packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx delete mode 100644 packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx delete mode 100644 packages/web/components/templates/onboarding/SelectOption.tsx delete mode 100644 packages/web/pages/[username]/[slug]/highlights/[highlightId].tsx delete mode 100644 packages/web/pages/[username]/[slug]/highlights/[highlightId]/preview.tsx delete mode 100644 packages/web/pages/[username]/[slug]/highlights/index.tsx diff --git a/packages/web/components/elements/AvatarDropdown.tsx b/packages/web/components/elements/AvatarDropdown.tsx index f369d865a..ea43c3f3a 100644 --- a/packages/web/components/elements/AvatarDropdown.tsx +++ b/packages/web/components/elements/AvatarDropdown.tsx @@ -1,5 +1,4 @@ import { Avatar } from './../elements/Avatar' -import { AngleDownIcon } from './../tokens/icons/AngleDownIcon' import { HStack } from '../elements/LayoutPrimitives' type AvatarDropdownProps = { @@ -12,7 +11,7 @@ export function AvatarDropdown(props: AvatarDropdownProps): JSX.Element { diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx index a3fb5e077..0d536960e 100644 --- a/packages/web/components/elements/DropdownElements.tsx +++ b/packages/web/components/elements/DropdownElements.tsx @@ -8,8 +8,8 @@ import { Arrow, Label, } from '@radix-ui/react-dropdown-menu' -import { PopperContentProps } from '@radix-ui/react-popover'; -import { CSS } from '@stitches/react'; +import { PopperContentProps } from '@radix-ui/react-popover' +import { CSS } from '@stitches/react' import { styled } from './../tokens/stitches.config' const itemStyles = { @@ -148,7 +148,9 @@ export function DropdownOption(props: DropdownOptionProps): JSX.Element { ) } -export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element { +export function Dropdown( + props: DropdownProps & PopperContentProps +): JSX.Element { const { children, align, @@ -159,14 +161,14 @@ export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element sideOffset = 0, alignOffset = 0, css, - modal + modal, } = props return ( {triggerElement} { + onInteractOutside={() => { // remove focus from dropdown ;(document.activeElement as HTMLElement).blur() }} diff --git a/packages/web/components/elements/ExtensionsInstallHelp.tsx b/packages/web/components/elements/ExtensionsInstallHelp.tsx index 2b10ddd11..5fc36447a 100644 --- a/packages/web/components/elements/ExtensionsInstallHelp.tsx +++ b/packages/web/components/elements/ExtensionsInstallHelp.tsx @@ -9,7 +9,6 @@ import { EdgeIcon } from './images/EdgeIcon' import { FirefoxIcon } from './images/FirefoxIcon' import { SafariIcon } from './images/SafariIcon' import Link from 'next/link' -import { SaveArticleIcon } from './images/SaveArticleIcon' const icons = { 'Google Chrome': , diff --git a/packages/web/components/elements/InfoLink.tsx b/packages/web/components/elements/InfoLink.tsx index 5146f1bcf..44c0a7bc2 100644 --- a/packages/web/components/elements/InfoLink.tsx +++ b/packages/web/components/elements/InfoLink.tsx @@ -1,6 +1,5 @@ -import Link from 'next/link' import { Info } from 'phosphor-react' -import { Box, VStack } from '../elements/LayoutPrimitives' +import { VStack } from '../elements/LayoutPrimitives' import { theme } from '../tokens/stitches.config' import { TooltipWrapped } from './Tooltip' diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index c822e3eb1..8f52bab0f 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -1,4 +1,4 @@ -import { getLuminance, lighten, toHsla } from 'color2k' +import { getLuminance, lighten } from 'color2k' import { useRouter } from 'next/router' import { Button } from './Button' import { SpanBox } from './LayoutPrimitives' diff --git a/packages/web/components/elements/MobileInstallHelp.tsx b/packages/web/components/elements/MobileInstallHelp.tsx index b57ec2e05..926e6c287 100644 --- a/packages/web/components/elements/MobileInstallHelp.tsx +++ b/packages/web/components/elements/MobileInstallHelp.tsx @@ -5,10 +5,9 @@ import { DeviceMobileCamera, } from 'phosphor-react' import { Box, HStack } from '../elements/LayoutPrimitives' -import { StyledText, StyledImg, StyledAnchor } from '../elements/StyledText' +import { StyledText, StyledAnchor } from '../elements/StyledText' import { TooltipWrapped } from './Tooltip' import Link from 'next/link' -import { InstallationIcon } from './images/InstallationIcon' const TooltipStyle = { backgroundColor: '#F9D354', diff --git a/packages/web/components/patterns/DeleteItemConfirmationModal.tsx b/packages/web/components/patterns/DeleteItemConfirmationModal.tsx index 3a321255c..a5efe5664 100644 --- a/packages/web/components/patterns/DeleteItemConfirmationModal.tsx +++ b/packages/web/components/patterns/DeleteItemConfirmationModal.tsx @@ -6,8 +6,6 @@ import { import { VStack, HStack } from '../elements/LayoutPrimitives' import { Button } from '../elements/Button' import { StyledText } from '../elements/StyledText' -import { useConfirmListener } from '../../lib/keyboardShortcuts/useKeyboardShortcuts' -import { useEffect, useRef } from 'react' type ConfirmationModalProps = { message?: string diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx index 490864528..a0483d2c1 100644 --- a/packages/web/components/templates/PrimaryLayout.tsx +++ b/packages/web/components/templates/PrimaryLayout.tsx @@ -1,18 +1,10 @@ import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData' import { Box } from '../elements/LayoutPrimitives' -import { - ReactNode, - MutableRefObject, - useEffect, - useState, - useCallback, -} from 'react' -import { PrimaryHeader } from './../patterns/PrimaryHeader' +import { ReactNode, useEffect, useState, useCallback } from 'react' import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery' import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts' import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts' import { useRouter } from 'next/router' -import { Analytics } from '@segment/analytics-next' import { ConfirmationModal } from '../patterns/ConfirmationModal' import { KeyboardShortcutListModal } from './KeyboardShortcutListModal' import { logoutMutation } from '../../lib/networking/mutations/logoutMutation' diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx index ce9a47f3b..9812d754b 100644 --- a/packages/web/components/templates/article/ArticleActionsMenu.tsx +++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx @@ -48,28 +48,6 @@ type ActionDropdownProps = { children: JSX.Element } -const ActionDropdown = (props: ActionDropdownProps): JSX.Element => { - return ( - - {props.children} - - ) -} - export function ArticleActionsMenu( props: ArticleActionsMenuProps ): JSX.Element { diff --git a/packages/web/components/templates/article/DisplaySettingsModal.tsx b/packages/web/components/templates/article/DisplaySettingsModal.tsx index 80d506624..fc9acdd68 100644 --- a/packages/web/components/templates/article/DisplaySettingsModal.tsx +++ b/packages/web/components/templates/article/DisplaySettingsModal.tsx @@ -1,12 +1,7 @@ import { VStack } from '../../elements/LayoutPrimitives' -import { - ModalRoot, - ModalOverlay, - ModalContent, -} from '../../elements/ModalPrimitives' +import { ModalRoot, ModalContent } from '../../elements/ModalPrimitives' import { ReaderSettingsControl } from './ReaderSettingsControl' - type DisplaySettingsModalProps = { centerX: boolean onOpenChange: (open: boolean) => void @@ -14,9 +9,13 @@ type DisplaySettingsModalProps = { articleActionHandler: (action: string, arg?: number | string) => void } -export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Element { - const top = props.triggerElementRef?.current?.getBoundingClientRect().bottom ?? 0 - const left = props.triggerElementRef?.current?.getBoundingClientRect().left ?? 0 +export function DisplaySettingsModal( + props: DisplaySettingsModalProps +): JSX.Element { + const top = + props.triggerElementRef?.current?.getBoundingClientRect().bottom ?? 0 + const left = + props.triggerElementRef?.current?.getBoundingClientRect().left ?? 0 return ( @@ -24,8 +23,12 @@ export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Elem css={{ width: '245px', top: props.triggerElementRef?.current ? top : '50%', - left: props.triggerElementRef?.current ? (left - (props.centerX ? 265 / 2 : 0)) : '50%', - transform: props.triggerElementRef?.current ? 'unset' : 'translate(-50%, -50%)', + left: props.triggerElementRef?.current + ? left - (props.centerX ? 265 / 2 : 0) + : '50%', + transform: props.triggerElementRef?.current + ? 'unset' + : 'translate(-50%, -50%)', }} onPointerDownOutside={(event) => { event.preventDefault() diff --git a/packages/web/components/templates/article/FontFamiliesOptions.tsx b/packages/web/components/templates/article/FontFamiliesOptions.tsx index ab0070916..c119d219c 100644 --- a/packages/web/components/templates/article/FontFamiliesOptions.tsx +++ b/packages/web/components/templates/article/FontFamiliesOptions.tsx @@ -1,7 +1,7 @@ import { HStack, Box } from '../../elements/LayoutPrimitives' import { StyledText } from '../../elements/StyledText' import { theme } from '../../tokens/stitches.config' -import { CaretLeft, Check, CheckCircle } from 'phosphor-react' +import { CaretLeft, Check } from 'phosphor-react' const FONT_FAMILIES = [ 'Inter', @@ -12,7 +12,7 @@ const FONT_FAMILIES = [ 'Roboto', 'Crimson Text', 'OpenDyslexic', - 'Source Serif Pro' + 'Source Serif Pro', ] type FontFamiliesListProps = { @@ -27,18 +27,28 @@ type FontOptionProps = { onSelect: (value: string) => void } -function FontOption(props: FontOptionProps):JSX.Element { +function FontOption(props: FontOptionProps): JSX.Element { const isSelected = props.selected === props.family return ( - + props.onSelect(props.family)} > {props.family} {isSelected && ( - + )} ) @@ -47,22 +57,50 @@ function FontOption(props: FontOptionProps):JSX.Element { export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element { return ( <> - - + + props.setShowFontFamilies(false)} > - - Choose Font + + + Choose Font + {FONT_FAMILIES.map((family) => ( - + ))} diff --git a/packages/web/components/templates/article/HighlightNoteModal.tsx b/packages/web/components/templates/article/HighlightNoteModal.tsx index e8a8ecf83..c805fbf1d 100644 --- a/packages/web/components/templates/article/HighlightNoteModal.tsx +++ b/packages/web/components/templates/article/HighlightNoteModal.tsx @@ -30,18 +30,6 @@ export function HighlightNoteModal( props.highlight?.annotation ?? '' ) - useConfirmListener( - () => { - saveNoteChanges() - }, - undefined, - true - ) - - const updatedAtMessage = props.highlight - ? readableUpdatedAtMessage(props.highlight?.updatedAt) - : undefined - const handleNoteContentChange = useCallback( (event: React.ChangeEvent): void => { setNoteContent(event.target.value) diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx index 6155f4117..1bc09ff2d 100644 --- a/packages/web/components/templates/article/HighlightsLayer.tsx +++ b/packages/web/components/templates/article/HighlightsLayer.tsx @@ -224,7 +224,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { setHighlightModalAction(inputs) } }, - [props.highlightBarDisabled, createHighlightFromSelection] + [props.highlightBarDisabled] ) const selectionPercentPos = (selection: Selection): number | undefined => { @@ -289,7 +289,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { setSelectionData, canShareNative, highlightLocations, - createHighlightFromSelection, ] ) diff --git a/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx deleted file mode 100644 index ea472bd40..000000000 --- a/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, { useState } from 'react' -import { subscribeMutation } from '../../../lib/networking/mutations/subscribeMutation' -import { VStack } from '../../elements/LayoutPrimitives' -import { OnboardingLayout } from '../OnboardingLayout' -import { SelectOption } from './SelectOption' - -const newsletterOptions = [ - { - icon: 'AxiosDaily.png', - label: 'Axios Daily Essentials', - description: 'Start and end your day with the stories that matter in your inbox.', - name: 'axios_essentials', - isChecked: false, - }, - { - icon: 'MilkRoad.png', - label: 'Milk Road', - description: '5 minute daily newsletter. Used by 100,000+ people to be better crypto investors 💪', - name: 'morning_brew', - isChecked: false, - }, - { - icon: 'MoneyStuff.png', - label: 'Money Stuff by Matt Levine', - description: 'A daily take on Wall Street, finance, companies and other stuff.', - name: 'milk_road', - isChecked: false, - }, - { - icon: 'OmnivoreBlog.png', - label: 'Omnivore', - description: 'Tips and tricks, plus updates on new features in Omnivore.', - name: 'omnivore_blog', - isChecked: false, - }, -] - -type OnboardingAddNewslettersProps = { - pageNumber: number -} - -export type NewsLetterOption = { - icon: string, - label: string, - name: string, - description: string, - isChecked: boolean, -} - -export const OnboardingAddNewsletters = (props: OnboardingAddNewslettersProps) => { - - const [newsletters, setNewsletters] = useState(newsletterOptions); - - const onCheck = (index: number) => { - const temp = [...newsletters] - temp[index].isChecked = !temp[index].isChecked - setNewsletters(temp) - } - - const onNext = () => { - newsletters.map((newsletter) => { - if (newsletter.isChecked) subscribeMutation(newsletter.name) - }) - } - - return ( - - - {newsletters.map(({ icon, label, description, isChecked }, idx) => ( - - ))} - - - ) -} - diff --git a/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx b/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx deleted file mode 100644 index fbf3614a9..000000000 --- a/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react' -import { OnboardingLayout } from '../OnboardingLayout' -import { Box } from '../../elements/LayoutPrimitives' -import { styled } from '../../tokens/stitches.config' - -const StyledImage = styled('img', { - position: 'relative', - width: '100%', - height: '100%', - '@smDown': { - width: '160%', - height: 'auto', - } -}) - -type OnboardingOrganizeInstructionsProps = { - pageNumber: number -} - -export const OnboardingHighlightInstructions = (props: OnboardingOrganizeInstructionsProps) => { - return ( - - - - - - ) -} diff --git a/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx b/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx deleted file mode 100644 index 301e4d821..000000000 --- a/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react' -import { OnboardingLayout } from '../OnboardingLayout' -import MobileInstallHelp from '../../elements/MobileInstallHelp' -import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp' -import { Box } from '../../elements/LayoutPrimitives' -import { sendInstallInstructions } from '../../../lib/networking/queries/sendInstallInstructions' -import { Button } from '../../elements/Button' -import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers' - -type OnboardingInstallInstructionsProps = { - pageNumber: number -} - -export const OnboardingInstallInstructions = (props: OnboardingInstallInstructionsProps) => { - const onEmailInstructionsClick = async () => { - const res = await sendInstallInstructions() - if (res !== undefined) { - showSuccessToast('Instructions Email Sent', { position: 'bottom-right' }) - } - else { - showErrorToast('Failed to send', { position: 'bottom-right' }) - } - } - - return ( - - } - > - - - - - - - - - - - - Email me instructions - - - - - ) -} - diff --git a/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx b/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx deleted file mode 100644 index c85711f43..000000000 --- a/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react' -import { OnboardingLayout } from '../OnboardingLayout' -import { Box, HStack, VStack } from '../../elements/LayoutPrimitives' -import { styled } from '../../tokens/stitches.config' - -const IconContainer = styled(Box, {width: '30%', justifyContent: 'center', display: 'flex'}) -const Icon = styled('img', {width: 100}) -const Row = styled(HStack, { - width: '100%', - padding: 30, - borderBottom: '1px solid rgba(0, 0, 0, 0.06)', - - '@smDown': { - padding: 20, - } -}) -const Text = styled(Box, { - width: '65%', - alignSelf: 'center', - color: '#0A0806CC', - fontSize: 24, - fontWeight: '700', - '@smDown': { - fontSize: 16, - } -}) -const Container = styled(Box, { - width: 523, - border: '1px solid #0000000F', - background: 'white', - - '@smDown': { - width: '95%', - } -}) - -type OnboardingJoinCommunityProps = { - pageNumber: number -} - -export const OnboardingJoinCommunity = (props: OnboardingJoinCommunityProps) => { - return ( - - - - - - - - - Star us on Github - - - - - - Join us on Discord - - - - - - Like us on Product Hunt - - - - - - ) -} - diff --git a/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx b/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx deleted file mode 100644 index 3704732c2..000000000 --- a/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react' -import { OnboardingLayout } from '../OnboardingLayout' -import { Box } from '../../elements/LayoutPrimitives' -import { styled } from '../../tokens/stitches.config' - -const StyledImage = styled('img', { - position: 'relative', -}) - -type OnboardingOrganizeInstructionsProps = { - pageNumber: number -} - -export const OnboardingOrganizeInstructions = (props: OnboardingOrganizeInstructionsProps) => { - return ( - - - - - - - ) -} diff --git a/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx b/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx deleted file mode 100644 index fac558917..000000000 --- a/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { SelectionOptionCard } from './SelectOption' -import { OnboardingLayout } from '../OnboardingLayout' -import { Box, HStack, VStack } from '../../elements/LayoutPrimitives' - -const articleDetails = [ - { - title: 'Winnebago Electric RV Concept', - author: 'Omnivore', - originText: 'wired.com', - description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …", - image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg", - labels: [] - }, - { - title: 'Winnebago Electric RV Concept', - author: 'Omnivore', - originText: 'wired.com', - description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …", - image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg", - labels: [] - }, - { - title: '21 Phrases You Use Without Realizin…', - author: 'Omnivore', - originText: 'wired.com', - description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …", - image: "", - labels: [], - }, - { - title: '21 Phrases You Use Without Realizin…', - author: 'Omnivore', - originText: 'wired.com', - description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …", - image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg", - labels: [] - }, -] - -type OnboardingReaderPreviewProps = { - pageNumber: number -} - -export const OnboardingReaderPreview = (props: OnboardingReaderPreviewProps) => { - return ( - - } - > - - - - {articleDetails.map(({ title, author, originText, description, image, labels }, idx) => ( - - ))} - - - - - ) -} diff --git a/packages/web/components/templates/onboarding/SelectOption.tsx b/packages/web/components/templates/onboarding/SelectOption.tsx deleted file mode 100644 index 3bd794f44..000000000 --- a/packages/web/components/templates/onboarding/SelectOption.tsx +++ /dev/null @@ -1,244 +0,0 @@ -import React from 'react' -import Checkbox from '../../elements/Checkbox' -import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives' -import { CoverImage } from '../../elements/CoverImage' -import { StyledText } from '../../elements/StyledText' -import { authoredByText } from '../../patterns/ArticleSubtitle' -import { LabelChip } from '../../elements/LabelChip' -import { Label } from '../../../lib/networking/fragments/labelFragment' -import Image from 'next/image' - -export const SelectOption: React.FC<{ - icon: string - label: string - description: string - onCheck: (idx: number) => void - indexNum: number - isChecked: boolean -}> = ({ icon, label, description, onCheck, indexNum, isChecked}) => { - - const toggleChecked = () => { - onCheck(indexNum) - } - - return ( - - undefined} /> - - {`${icon.slice(0, - - - - {label} - - - {description} - - - - ) -} - -export const SelectionOptionCard: React.FC <{ - title: string, - author: string, - originText: string, - description: string, - image: string, - labels: Label[] -}> = ({title, author, originText, description, image, labels}) => { - const [checked, setChecked] = React.useState(false) - const toggleChecked = () => setChecked(!checked) - - return ( - - div': { - borderRadius: '100vmax 100vmax 0 0', - }, - }} - > - - - - - - - - - { - // This is here to prevent menu click events from bubbling - // up and causing us to "click" on the link item. - e.stopPropagation() - }} - > - - - - - {author && ( - - {authoredByText(author)} - - )} - - {originText} - - - - - - - {description} - - {image && ( - { - ;(e.target as HTMLElement).style.display = 'none' - }} - /> - )} - - - {labels?.map(({ name, color }, index) => ( - - ))} - - - ) -} - -type CardTitleProps = { - title: string -} - -function CardTitle(props: CardTitleProps): JSX.Element { - return ( - - {props.title} - - ) -} diff --git a/packages/web/lib/hooks/useScrollWatcher.tsx b/packages/web/lib/hooks/useScrollWatcher.tsx index fb65894e2..19580ed43 100644 --- a/packages/web/lib/hooks/useScrollWatcher.tsx +++ b/packages/web/lib/hooks/useScrollWatcher.tsx @@ -1,4 +1,4 @@ -import { useRef, useEffect, useState, useCallback } from 'react' +import { useRef, useEffect, useState } from 'react' type ScrollOffset = { x: number @@ -12,10 +12,7 @@ export type ScrollOffsetChangeset = { type Effect = (offset: ScrollOffsetChangeset) => void -export function useScrollWatcher( - effect: Effect, - delay: number -): void { +export function useScrollWatcher(effect: Effect, delay: number): void { const throttleTimeout = useRef(undefined) const [currentOffset, setCurrentOffset] = useState({ x: 0, @@ -40,7 +37,6 @@ export function useScrollWatcher( } window.addEventListener('scroll', handleScroll) - return () => - window.removeEventListener('scroll', handleScroll) + return () => window.removeEventListener('scroll', handleScroll) }, [currentOffset, delay, effect]) } diff --git a/packages/web/lib/keyboardShortcuts/useKeyboardShortcuts.ts b/packages/web/lib/keyboardShortcuts/useKeyboardShortcuts.ts index 1834b27c3..35af88f33 100644 --- a/packages/web/lib/keyboardShortcuts/useKeyboardShortcuts.ts +++ b/packages/web/lib/keyboardShortcuts/useKeyboardShortcuts.ts @@ -54,8 +54,8 @@ export const useKeyboardShortcuts = (commands: KeyboardCommand[]): void => { }) }) }) - - KBAR_KEYS.map((key) => currentKeys[key.toLowerCase()] = false) + + KBAR_KEYS.map((key) => (currentKeys[key.toLowerCase()] = false)) return currentKeys }, [commands]) @@ -126,7 +126,7 @@ export const useKeyboardShortcuts = (commands: KeyboardCommand[]): void => { keydownEvent.preventDefault() } }, - [applyCommands, keys] + [applyCommands, keys, metaPressed] ) const keyupListener = useCallback( diff --git a/packages/web/lib/networking/fragments/highlightFragment.ts b/packages/web/lib/networking/fragments/highlightFragment.ts index 47a938a6c..94fdfd341 100644 --- a/packages/web/lib/networking/fragments/highlightFragment.ts +++ b/packages/web/lib/networking/fragments/highlightFragment.ts @@ -1,5 +1,5 @@ import { gql } from 'graphql-request' -import { Label, labelFragment } from './labelFragment' +import { Label } from './labelFragment' export const highlightFragment = gql` fragment HighlightFields on Highlight { diff --git a/packages/web/lib/networking/mutations/uploadFileMutation.ts b/packages/web/lib/networking/mutations/uploadFileMutation.ts index 17625fc9c..85ce6f020 100644 --- a/packages/web/lib/networking/mutations/uploadFileMutation.ts +++ b/packages/web/lib/networking/mutations/uploadFileMutation.ts @@ -1,20 +1,13 @@ import { gqlFetcher } from '../networkHelpers' import { v4 as uuidv4 } from 'uuid' - type UploadFileInput = { url: string - contentType: string + contentType: string createPageEntry?: boolean clientRequestId?: string } -type UploadFileOutput = { - jobId?: string - url?: string - clientRequestId?: string -} - type UploadFileResponseData = { uploadFileRequest?: UploadFileData errorCodes?: unknown[] diff --git a/packages/web/lib/networking/mutations/uploadImportFileMutation.ts b/packages/web/lib/networking/mutations/uploadImportFileMutation.ts index 46ac248d9..055fe9078 100644 --- a/packages/web/lib/networking/mutations/uploadImportFileMutation.ts +++ b/packages/web/lib/networking/mutations/uploadImportFileMutation.ts @@ -1,5 +1,4 @@ import { gqlFetcher } from '../networkHelpers' -import { v4 as uuidv4 } from 'uuid' export enum UploadImportFileType { URL_LIST = 'URL_LIST', diff --git a/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx b/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx index c1b6b0fa8..24a588fb8 100644 --- a/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx +++ b/packages/web/lib/networking/queries/useGetApiKeysQuery.tsx @@ -48,7 +48,7 @@ export function useGetApiKeysQuery(): ApiKeysQueryResponse { } ` - const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher) + const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) try { if (data) { diff --git a/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx b/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx index bfb4c4e14..c12443eec 100644 --- a/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx +++ b/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx @@ -1,8 +1,6 @@ import { gql } from 'graphql-request' -import useSWRImmutable, { Cache } from 'swr' +import useSWRImmutable from 'swr' import { makeGqlFetcher, RequestContext, ssrFetcher } from '../networkHelpers' -import { ScopedMutator } from 'swr/dist/types' -import { LibraryItems } from './useGetLibraryItemsQuery' type ArticleQueryInput = { username?: string @@ -25,10 +23,7 @@ export type ArticleAttributes = { } const query = gql` - query GetArticle( - $username: String! - $slug: String! - ) { + query GetArticle($username: String!, $slug: String!) { article(username: $username, slug: $slug) { ... on ArticleSuccess { article { @@ -58,7 +53,7 @@ export function useGetArticleOriginalHtmlQuery({ ) const resultData: ArticleData | undefined = data as ArticleData - console.log("RESULT", JSON.stringify(data)) + console.log('RESULT', JSON.stringify(data)) return resultData?.article.article.originalHtml } @@ -67,7 +62,12 @@ export async function originalHtmlQuery( context: RequestContext, input: ArticleQueryInput ): Promise { - const resultData = (await ssrFetcher(context, query, input, false)) as ArticleData + const resultData = (await ssrFetcher( + context, + query, + input, + false + )) as ArticleData console.log(JSON.stringify(resultData)) // if (resultData?.article.article.originalHtml) { // return resultData?.article.article.originalHtml diff --git a/packages/web/lib/networking/queries/useGetArticleQuery.tsx b/packages/web/lib/networking/queries/useGetArticleQuery.tsx index f6a361865..20b833a58 100644 --- a/packages/web/lib/networking/queries/useGetArticleQuery.tsx +++ b/packages/web/lib/networking/queries/useGetArticleQuery.tsx @@ -105,7 +105,7 @@ export function useGetArticleQuery({ includeFriendsHighlights, } - const { data, error, mutate } = useSWRImmutable( + const { data, error } = useSWRImmutable( slug ? [query, username, slug, includeFriendsHighlights] : null, makeGqlFetcher(variables) ) @@ -158,7 +158,7 @@ export const removeItemFromCache = ( ) => { try { const mappedCache = cache as Map - mappedCache.forEach((value: any, key) => { + mappedCache.forEach((value: unknown, key) => { if (typeof value == 'object' && 'search' in value) { const search = value.search as LibraryItems const idx = search.edges.findIndex((edge) => edge.node.id == itemId) diff --git a/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx b/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx index 6c0aafbae..e61ef35ae 100644 --- a/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx @@ -11,8 +11,7 @@ export interface Integration { updatedAt: Date } -export type IntegrationType = - | 'READWISE' +export type IntegrationType = 'READWISE' interface IntegrationsQueryResponse { isValidating: boolean @@ -49,7 +48,7 @@ export function useGetIntegrationsQuery(): IntegrationsQueryResponse { } ` - const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher) + const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) console.log('integrations data', data) try { diff --git a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx index 211c53178..a4af02c2c 100644 --- a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx @@ -34,7 +34,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse { ${labelFragment} ` - const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher) + const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) try { if (data) { diff --git a/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx b/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx index a8c57cdd4..f15415193 100644 --- a/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx @@ -45,7 +45,7 @@ export function useGetNewsletterEmailsQuery(): NewsletterEmailsQueryResponse { } ` - const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher) + const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) try { if (data) { diff --git a/packages/web/lib/networking/queries/useGetRulesQuery.tsx b/packages/web/lib/networking/queries/useGetRulesQuery.tsx index cb711fea1..c193196b0 100644 --- a/packages/web/lib/networking/queries/useGetRulesQuery.tsx +++ b/packages/web/lib/networking/queries/useGetRulesQuery.tsx @@ -63,24 +63,13 @@ export function useGetRulesQuery(): RulesQueryResponse { } ` - const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher) + const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) try { if (data) { const result = data as RulesQueryResponseData const rules = result.rules.rules as Rule[] - const actions: RuleAction[] = [ - { - type: RuleActionType.SendNotification, - params: [] as string[], - }, - { - type: RuleActionType.AddLabel, - params: ['2dfd9ce2-cc9f-11ec-b535-3be2782c2107'], - }, - ] - return { isValidating, rules: rules ?? [], diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx index bacb0e5bb..051b20d70 100644 --- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx @@ -56,7 +56,7 @@ export function useGetSubscriptionsQuery(): SubscriptionsQueryResponse { } ` - const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher) + const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) try { if (data) { diff --git a/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx b/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx index dedd16ceb..0ac5c802f 100644 --- a/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx +++ b/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx @@ -58,7 +58,7 @@ export function useGetWebhooksQuery(): WebhooksQueryResponse { } ` - const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher) + const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) console.log('webhooks data', data) try { diff --git a/packages/web/pages/[username]/[slug]/highlights/[highlightId].tsx b/packages/web/pages/[username]/[slug]/highlights/[highlightId].tsx deleted file mode 100644 index 897b5389b..000000000 --- a/packages/web/pages/[username]/[slug]/highlights/[highlightId].tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { GetServerSideProps } from 'next' -import { captureException, flush } from '@sentry/nextjs' -import { ArticleHighlights } from '../../../../components/templates/ArticleHighlights' -import { highlightsBaseURL, webBaseURL } from '../../../../lib/appConfig' -import objectToHash from '../../../../lib/highlights/objectToHash' -import { - PublicArticleAttributes, - publicArticleQuery, -} from '../../../../lib/networking/queries/useGetPublicArticleQuery' -import { useEffect } from 'react' - -type PublicHighlightPageProps = { - publicArticle: PublicArticleAttributes - showAllHighlights: boolean - selectedHighlightId?: string - previewImagePath?: string -} - -export default function PublicHighlightPage( - props: PublicHighlightPageProps -): JSX.Element { - useEffect(() => { - window.analytics?.track('public_highlight_read', { - link: props.publicArticle.id, - slug: props.publicArticle.slug, - url: props.publicArticle.url, - }) - }, [props.publicArticle.url]) - - return ( - <> - - - ) -} - -export const getServerSideProps: GetServerSideProps< - PublicHighlightPageProps -> = async (ctx) => { - const slug = ctx.query.slug as string - const username = ctx.query.username as string - const selectedHighlightId = ctx.query.highlightId as string - - try { - const publicArticle = await publicArticleQuery(ctx, { username, slug }) - - if (publicArticle) { - const selectedHighlight = await publicArticle.highlights.find( - (h) => h.shortId === selectedHighlightId - ) - - if (selectedHighlight) { - const previewImageMeta = { - highlightsCount: publicArticle.highlights.length, - annotationsCount: publicArticle.highlights.filter( - (h) => !!h.annotation - ).length, - quote: selectedHighlight.quote, - prefix: selectedHighlight.prefix, - suffix: selectedHighlight.suffix, - annotation: selectedHighlight.annotation, - } - const previewImageHash = objectToHash(previewImageMeta) - const previewServiceUrl = `${webBaseURL}/${username}/${slug}/highlights/${selectedHighlightId}/preview?pih=${previewImageHash}` - const previewImagePath = `${highlightsBaseURL}/preview?url=${encodeURIComponent( - previewServiceUrl - )}` - - return { - props: { - username, - publicArticle, - selectedHighlightId, - previewImagePath, - showAllHighlights: false, - }, - } - } else { - throw new Error( - 'public article highlights query failed - no highlights' - ) - } - } else { - throw new Error('public article highlights query failed - no article') - } - } catch (error) { - captureException(error) - // Flushing before returning is necessary if deploying to Vercel, see - // https://vercel.com/docs/platform/limits#streaming-responses - await flush(2000) - return { notFound: true } - } -} diff --git a/packages/web/pages/[username]/[slug]/highlights/[highlightId]/preview.tsx b/packages/web/pages/[username]/[slug]/highlights/[highlightId]/preview.tsx deleted file mode 100644 index 40ab40f59..000000000 --- a/packages/web/pages/[username]/[slug]/highlights/[highlightId]/preview.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { GetServerSideProps } from 'next' -import Head from 'next/head' -import { useRouter } from 'next/router' -import { useEffect, useMemo } from 'react' -import { - Box, - SpanBox, -} from '../../../../../components/elements/LayoutPrimitives' -import { - HighlightFooter, - PublicHighlightView, -} from '../../../../../components/patterns/HighlightView' -import objectToHash from '../../../../../lib/highlights/objectToHash' -import { - PublicArticleAttributes, - publicArticleQuery, -} from '../../../../../lib/networking/queries/useGetPublicArticleQuery' -import { captureException, flush } from '@sentry/nextjs' - -type PublicHighlightPageProps = { - publicArticle: PublicArticleAttributes - showAllHighlights: boolean - selectedHighlightId?: string - previewImageFileName?: string -} - -export default function PublicHighlightPage( - props: PublicHighlightPageProps -): JSX.Element { - const router = useRouter() - const selectedHighlight = useMemo(() => { - if (!props.selectedHighlightId) { - return null - } - return props.publicArticle.highlights.find( - (h) => h.shortId === props.selectedHighlightId - ) - }, [props.selectedHighlightId, props.publicArticle]) - - const articleSite = useMemo(() => { - try { - const url = new URL(props.publicArticle.url) - return url.hostname - } catch (e) { - console.log('error ', e) - return '' - } - }, [props.publicArticle.url]) - - // Adjusting the aspect ratio accordingly to the query parameter - useEffect(() => { - if (router.isReady && router.query.adjustAspectRatio) { - const highlightContainer = document.getElementById( - 'selected_highlight_wrapper' - ) - const footer = document.getElementById('selected_highlight_footer') - if (!highlightContainer || !footer) return - - const getTextY = (): number => footer.getBoundingClientRect().bottom - const getContainerY = (): number => - highlightContainer.getBoundingClientRect().bottom - - let widthPercent = 100 - - // We are gradually decreasing the width of the container until the text bottom spacing is reduced in the container - while (getContainerY() - getTextY() > 25) { - widthPercent = widthPercent - 2 - highlightContainer.style.width = widthPercent + '%' - } - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - - return ( - <> - - {props.previewImageFileName && ( - - )} - {props.previewImageFileName && ( - - )} - - {selectedHighlight && ( - - - - - - - - )} - - ) -} - -export const getServerSideProps: GetServerSideProps< - PublicHighlightPageProps -> = async (ctx) => { - const slug = ctx.query.slug as string - const username = ctx.query.username as string - const selectedHighlightId = ctx.query.highlightId as string - - try { - const publicArticle = await publicArticleQuery(ctx, { username, slug }) - - if (publicArticle) { - const selectedHighlight = await publicArticle.highlights.find( - (h) => h.shortId === selectedHighlightId - ) - if (!selectedHighlight) { - return { notFound: true } - } - - const previewImageMeta = { - highlightsCount: publicArticle.highlights.length, - annotationsCount: publicArticle.highlights.filter((h) => !!h.annotation) - .length, - quote: selectedHighlight?.quote, - prefix: selectedHighlight?.prefix, - suffix: selectedHighlight?.suffix, - annotation: selectedHighlight?.annotation, - } - const previewImageHash = objectToHash(previewImageMeta) - const previewImageFileName = `${username}/${slug}/highlights/${selectedHighlightId}/preview_${previewImageHash}.png` - - return { - props: { - username, - publicArticle, - selectedHighlightId, - previewImageFileName, - showAllHighlights: false, - }, - } - } else { - throw new Error('public article query failed') - } - } catch (error) { - captureException(error) - // Flushing before returning is necessary if deploying to Vercel, see - // https://vercel.com/docs/platform/limits#streaming-responses - await flush(2000) - return { notFound: true } - } -} diff --git a/packages/web/pages/[username]/[slug]/highlights/index.tsx b/packages/web/pages/[username]/[slug]/highlights/index.tsx deleted file mode 100644 index 4f15d2203..000000000 --- a/packages/web/pages/[username]/[slug]/highlights/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { GetServerSideProps } from 'next' -import { ArticleHighlights } from '../../../../components/templates/ArticleHighlights' -import { - PublicArticleAttributes, - publicArticleQuery, -} from '../../../../lib/networking/queries/useGetPublicArticleQuery' -import { captureException, flush } from '@sentry/nextjs' -import { useEffect } from 'react' - -type PublicHighlightsPageProps = { - publicArticle: PublicArticleAttributes -} - -export default function PublicHighlightsPage( - props: PublicHighlightsPageProps -): JSX.Element { - - useEffect(() => { - window.analytics?.track('public_link_read', { - link: props.publicArticle.id, - slug: props.publicArticle.slug, - url: props.publicArticle.url - }) - }, [props.publicArticle.url]) - - return ( - - ) -} - -export const getServerSideProps: GetServerSideProps< - PublicHighlightsPageProps -> = async (ctx) => { - const slug = ctx.query.slug as string - const username = ctx.query.username as string - - try { - const publicArticle = await publicArticleQuery(ctx, { username, slug }) - - if (publicArticle) { - if (publicArticle.highlights.length === 0) { - return { - redirect: { - destination: publicArticle.url, - permanent: false, - }, - } - } - - return { - props: { - username, - publicArticle, - }, - } - } else { - throw new Error('article highlights request failed') - } - } catch (error) { - captureException(error) - // Flushing before returning is necessary if deploying to Vercel, see - // https://vercel.com/docs/platform/limits#streaming-responses - await flush(2000) - return { notFound: true } - } -} diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index 8029ff71f..66c8b39cf 100644 --- a/packages/web/pages/[username]/[slug]/index.tsx +++ b/packages/web/pages/[username]/[slug]/index.tsx @@ -9,7 +9,7 @@ import { useRouter } from 'next/router' import { VStack } from './../../../components/elements/LayoutPrimitives' import { ArticleContainer } from './../../../components/templates/article/ArticleContainer' import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer' -import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts' import { articleKeyboardCommands, @@ -192,7 +192,7 @@ export default function Home(): JSX.Element { }) router.push(`/home`) } - }, [article]) + }, [article, cache, mutate, router]) useRegisterActions( [ diff --git a/packages/web/pages/_document.tsx b/packages/web/pages/_document.tsx index c6fb0cf50..e5c96fe8b 100644 --- a/packages/web/pages/_document.tsx +++ b/packages/web/pages/_document.tsx @@ -1,9 +1,7 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /* eslint-disable functional/no-class */ import NextDocument, { Html, Head, Main, NextScript } from 'next/document' -import { useCallback } from 'react' import { getCssText, globalStyles } from '../components/tokens/stitches.config' -import { setupAnalytics } from '../lib/analytics' export default class Document extends NextDocument { render() { @@ -120,6 +118,3 @@ export default class Document extends NextDocument { ) } } -function useEffect(arg0: () => () => void, arg1: (() => void)[]) { - throw new Error('Function not implemented.') -} diff --git a/packages/web/pages/app/[username]/link-request/[id].tsx b/packages/web/pages/app/[username]/link-request/[id].tsx index ff5fb8089..74ba9279c 100644 --- a/packages/web/pages/app/[username]/link-request/[id].tsx +++ b/packages/web/pages/app/[username]/link-request/[id].tsx @@ -7,8 +7,6 @@ import { useSWRConfig } from 'swr' import { cacheArticle } from '../../../../lib/networking/queries/useGetArticleQuery' import { PrimaryLayout } from '../../../../components/templates/PrimaryLayout' import { applyStoredTheme } from '../../../../lib/themeUpdater' -import { StyledText } from '../../../../components/elements/StyledText' -import { theme } from '../../../../components/tokens/stitches.config' export default function LinkRequestPage(): JSX.Element { applyStoredTheme(false) // false to skip server sync @@ -32,7 +30,9 @@ export default function LinkRequestPage(): JSX.Element { hideHeader={true} pageTestId={router.pathname} > - + {requestID && username ? ( ) : ( @@ -44,9 +44,7 @@ export default function LinkRequestPage(): JSX.Element { } function Loader(): JSX.Element { - return ( - - ) + return } type PrimaryContentProps = { diff --git a/packages/web/pages/auth/confirm-email/[token].tsx b/packages/web/pages/auth/confirm-email/[token].tsx index 892fb7c39..3e0ac1cfd 100644 --- a/packages/web/pages/auth/confirm-email/[token].tsx +++ b/packages/web/pages/auth/confirm-email/[token].tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useEffect, useRef } from 'react' import { useRouter } from 'next/router' import { HStack } from '../../../components/elements/LayoutPrimitives' @@ -30,7 +30,14 @@ export default function ConfirmEmail(): JSX.Element { > - + diff --git a/packages/web/pages/auth/forgot-password.tsx b/packages/web/pages/auth/forgot-password.tsx index 05e0c26da..609b40cc8 100644 --- a/packages/web/pages/auth/forgot-password.tsx +++ b/packages/web/pages/auth/forgot-password.tsx @@ -1,15 +1,15 @@ import { PageMetaData } from '../../components/patterns/PageMetaData' import { ProfileLayout } from '../../components/templates/ProfileLayout' import { EmailForgotPassword } from '../../components/templates/auth/EmailForgotPassword' -import { useEffect } from 'react' -import { useRouter } from 'next/router' -import toast, { Toaster } from 'react-hot-toast' -import { showSuccessToast } from '../../lib/toastHelpers' +import { Toaster } from 'react-hot-toast' export default function ForgotPassword(): JSX.Element { return ( <> - +

Introduction

- Labels allow you to group and search for content in Omnivore. A saved page - can have multiple labels and search results can be filtered by label. + Labels allow you to group and search for content in Omnivore. A saved + page can have multiple labels and search results can be filtered by + label.

Adding labels to a page on iOS

- On iOS you add and remove labels from a page using the Assign Labels modal. -

+ On iOS you add and remove labels from a page using the Assign Labels + modal. +

- You can open the Assign Labels modal from the home view or the reader view. - In the home view long press on an item and choose Edit Labels from the dropdowm - menu. In the reader view use the top right menu button. + You can open the Assign Labels modal from the home view or the reader + view. In the home view long press on an item and choose Edit Labels + from the dropdowm menu. In the reader view use the top right menu + button.

Adding labels to a page on the web

- On the web you add and remove labels from a page using the Assign Labels dropdown - or modal depending on your screen size. For larger monitors you will see the Labels - button on the left hand side of the reader view. For smaller monitors you will see - the labels dropdown at the top of your screen. + On the web you add and remove labels from a page using the Assign + Labels dropdown or modal depending on your screen size. For larger + monitors you will see the Labels button on the left hand side of the + reader view. For smaller monitors you will see the labels dropdown at + the top of your screen.

- You can also use keyboard commands to open the assign labels modal. On the reader - view tap the l key. Once open you can use the up/down arrow keys, or the - tab key to navigate the available labels, and the Enter key to toggle a label. + You can also use keyboard commands to open the assign labels modal. On + the reader view tap the l key. Once open you can use the + up/down arrow keys, or the tab key to navigate the available labels, + and the Enter key to toggle a label.

Searching by label on iOS

- On iOS you can use the Labels search chip to search for labels. This will open a modal - allowing you to assign multiple labels to your search. This will become an OR - search, meaning if you add multiple labels to your search, pages that have any of the - labels will be returned. + On iOS you can use the Labels search chip to search for labels. This + will open a modal allowing you to assign multiple labels to your + search. This will become an OR + search, meaning if you add multiple labels to your search, pages that + have any of the labels will be returned.

Searching by label with Advanced Search

- Omnivore's advanced search syntax supports searching for multiple labels using - AND and OR clauses. You can also negate a label search - to find all pages that do not have a certain label. + Omnivore's advanced search syntax supports searching for multiple + labels using + AND and OR clauses. You can also negate a + label search to find all pages that do not have a certain label.

Some examples:

    -
  • -label:Newsletter finds all pages that have the label Newsletter
    • -
  • label:Cooking,Fitness finds all your pages with either the Cooking or Fitness labels
    • -
  • label:Newsletter label:Surfing finds all pages with both the Newsletter and Surfing labels
    • -
  • label:Coding -label:Newsletter finds all pages with the Coding label that do not have the Newsletter label
    • +
  • + -label:Newsletter finds all pages that have the label{' '} + Newsletter +
    • +
  • + label:Cooking,Fitness finds all your pages with either + the Cooking or Fitness labels +
    • +
  • + label:Newsletter label:Surfing finds all pages with + both the Newsletter and Surfing labels +
    • +
  • + label:Coding -label:Newsletter finds all pages with the{' '} + Coding label that do not have the{' '} + Newsletter label +
- +

Editing your list of labels

- The labels page allows you to - edit all of your labels. From here you can create new labels, delete existing - labels, or modify the color and description of a label. + The{' '} + + labels + {' '} + page allows you to edit all of your labels. From here you can create + new labels, delete existing labels, or modify the color and + description of a label.

diff --git a/packages/web/pages/help/search.tsx b/packages/web/pages/help/search.tsx index baa74d432..a9e46c0fc 100644 --- a/packages/web/pages/help/search.tsx +++ b/packages/web/pages/help/search.tsx @@ -1,10 +1,6 @@ /* eslint-disable @next/next/no-img-element */ -import { Box, HStack, SpanBox } from '../../components/elements/LayoutPrimitives' +import { Box } from '../../components/elements/LayoutPrimitives' import { PrimaryLayout } from '../../components/templates/PrimaryLayout' -import { Button } from '../../components/elements/Button' -import Link from 'next/link' -import { Copy, Plus } from 'phosphor-react' -import { theme } from '../../components/tokens/stitches.config' export default function Search(): JSX.Element { return ( @@ -33,64 +29,107 @@ export default function Search(): JSX.Element {

Search

- Omnivore uses search to filter items in your library. You can use a simple - keyword search or our advanced search syntax to find items. + Omnivore uses search to filter items in your library. You can use a + simple keyword search or our advanced search syntax to find items.

Searching for text

- Omnivore will perform full text search across library item's content, title, description, - and site by default. You can search for specific terms by quoting your terms. By default - all results that match your search will be returned in the order they were saved. To change - your search to relevance use the sort:score parameter. + Omnivore will perform full text search across library item's + content, title, description, and site by default. You can search for + specific terms by quoting your terms. By default all results that + match your search will be returned in the order they were saved. To + change your search to relevance use the sort:score{' '} + parameter.

- +

Filtering by label

You can filter your search based on labels using AND and OR clauses. - You can also negate a label search to find pages that do not have a certain label. + You can also negate a label search to find pages that do not have a + certain label.

Some examples:

    -
  • label:Newsletter finds all pages that have the label Newsletter
    • -
  • label:Cooking,Fitness finds all your pages with either the Cooking or Fitness labels
    • -
  • label:Newsletter label:Surfing finds all pages with both the Newsletter and Surfing labels
    • -
  • label:Coding -label:News finds all pages with the Coding label that do not have the News label
    • +
  • + label:Newsletter finds all pages that have the label Newsletter +
    • +
  • + label:Cooking,Fitness finds all your pages with either the Cooking + or Fitness labels +
    • +
  • + label:Newsletter label:Surfing finds all pages with both the + Newsletter and Surfing labels +
    • +
  • + label:Coding -label:News finds all pages with the Coding label that + do not have the News label +

Filtering by archive status

- The in: filter is used to filter search by archive status. - The options are: + The in: filter is used to filter search by archive + status. The options are:

    -
  • in:inbox (the default): show unarchived items
    • -
  • in:archive: show archived items
    • -
  • in:all: Show all items regardless of archive state
    • +
  • + in:inbox (the default): show unarchived items +
    • +
  • + in:archive: show archived items +
    • +
  • + in:all: Show all items regardless of archive state +

Filtering by read state

- The is: filter is used to filter search by read state. Note - that in Omnivore 'read' means fully read, not just opened. + The is: filter is used to filter search by read state. + Note that in Omnivore 'read' means fully read, not just + opened. +

+

+ The is: filter options are:{' '}

-

The is: filter options are:

    -
  • is:read: Show only items that are fully read
    • -
  • is:unread (the default): show unread items
    • +
  • + is:read: Show only items that are fully read +
    • +
  • + is:unread (the default): show unread items +

Filtering by type

@@ -98,41 +137,67 @@ export default function Search(): JSX.Element { The type: filter is used to filter search by type.

    -
  • type:article: Show only articles
    • -
  • type:file: Show only files
    • -
  • type:pdf: Show only PDFs
    • -
  • type:highlights: Show your highlights
    • +
  • + type:article: Show only articles +
    • +
  • + type:file: Show only files +
    • +
  • + type:pdf: Show only PDFs +
    • +
  • + type:highlights: Show your highlights +

Finding highlights

- You can find your highlights by using the type:highlights filter - or find saved items with highlights using the has:highlights filter. + You can find your highlights by using the type:highlights{' '} + filter or find saved items with highlights using the{' '} + has:highlights filter.

Filtering by save/publish dates

- You can filter your searches based on the time they were saved or published using the - saved: and published: filters. These filters take two dates - to create a date range. The * wildcard will accept any date. + You can filter your searches based on the time they were saved or + published using the + saved: and published: filters. These filters + take two dates to create a date range. The * wildcard + will accept any date.

For Example:

    -
  • saved:2022-04-21..* All items saved since 2022-04-21
    • -
  • published:2020-01-01..2022-02-02 All items published between 2020-01-01 and 2022-02-02
    • -
  • published:*..2020-01-01 All items published before 2020-01-01
    • +
  • + saved:2022-04-21..* All items saved since 2022-04-21 +
    • +
  • + published:2020-01-01..2022-02-02 All items published + between 2020-01-01 and 2022-02-02 +
    • +
  • + published:*..2020-01-01 All items published before + 2020-01-01 +

Sorting

- By default all search results in Omnivore are sorted by saved date. This puts the - most recently saved items at the top of your library. You can use sort options - to change the library order: + By default all search results in Omnivore are sorted by saved date. + This puts the most recently saved items at the top of your library. + You can use sort options to change the library order:

    -
  • sort:saved: Sort by saved date
    • -
  • sort:updated: Sort by time the item was updated, for example having a label or highlight added.
    • -
  • sort:score: Sort by query term relevance.
    • +
  • + sort:saved: Sort by saved date +
    • +
  • + sort:updated: Sort by time the item was updated, for + example having a label or highlight added. +
    • +
  • + sort:score: Sort by query term relevance. +
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx index 43d0d20ee..885a63a7a 100644 --- a/packages/web/pages/settings/api.tsx +++ b/packages/web/pages/settings/api.tsx @@ -1,6 +1,4 @@ -import { useEffect, useMemo, useState } from 'react' -import { useRouter } from 'next/router' - +import { useMemo, useState } from 'react' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { applyStoredTheme } from '../../lib/themeUpdater' import { useGetApiKeysQuery } from '../../lib/networking/queries/useGetApiKeysQuery' diff --git a/packages/web/pages/settings/delete-my-account.tsx b/packages/web/pages/settings/delete-my-account.tsx index a0e0c80c0..b2c58654c 100644 --- a/packages/web/pages/settings/delete-my-account.tsx +++ b/packages/web/pages/settings/delete-my-account.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react' +import { useState } from 'react' import { useRouter } from 'next/router' import { Toaster } from 'react-hot-toast' @@ -24,13 +24,13 @@ export default function DeleteMyAccount(): JSX.Element { async function deleteAccount(): Promise { const viewerId = viewer.viewerData?.me?.id if (!viewerId) { - showErrorToast("Error deleting user, no user id found.") + showErrorToast('Error deleting user, no user id found.') return } const result = await deleteAccountMutation(viewerId) if (result) { - showSuccessToast('Account deleted',) + showSuccessToast('Account deleted') setTimeout(() => { window.location.href = '/login' }, 2000) @@ -55,21 +55,22 @@ export default function DeleteMyAccount(): JSX.Element { {showConfirm ? ( setShowConfirm(false)} /> ) : null} - + {viewer && router ? ( - - ) : } + ) : ( + + )} ) diff --git a/packages/web/pages/settings/emails/index.tsx b/packages/web/pages/settings/emails/index.tsx index 2db4a11ad..d76a8b648 100644 --- a/packages/web/pages/settings/emails/index.tsx +++ b/packages/web/pages/settings/emails/index.tsx @@ -49,7 +49,7 @@ const CopyTextBtnWrapper = styled(Box, { }) function CopyTextButton(props: CopyTextButtonProps): JSX.Element { - const { copyLink, isLinkCopied } = useCopyLink( + const { copyLink } = useCopyLink( props.text, 'newsletter_' + (props.type == TextType.EmailAddress @@ -64,7 +64,7 @@ function CopyTextButton(props: CopyTextButtonProps): JSX.Element { ? 'Email Address Copied' : 'Confirmation Code Copied' ) - }, []) + }, [copyLink, props.type]) return (