Remove unused modals

2026-03-11 08:54:26 +00:00 · 2023-02-27 09:23:04 +08:00 · 2023-02-27 09:23:04 +08:00 · 35b94ee237
commit 35b94ee237
parent f0ec5ba9ea
6 changed files with 100 additions and 211 deletions
--- a/packages/web/components/patterns/ShareArticleView.tsx
+++ b/packages/web/components/patterns/ShareArticleView.tsx
@ -1,54 +0,0 @@
-import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
-import { StyledText } from '../elements/StyledText'
-import { CoverImage } from '../elements/CoverImage'
-import { ArticleSubtitle } from './ArticleSubtitle'
-
-
-type ShareArticleViewProps = {
-  url: string
-  title: string
-  imageURL?: string
-  author?: string
-  description?: string
-  originalArticleUrl: string
-  publishedAt: string
-}
-
-export function ShareArticleView(props: ShareArticleViewProps): JSX.Element {
-  return (
-    <HStack 
-      alignment='start'
-      distribution='start'
-      css={{
-        background: 'white',
-        width: '100%',
-        p: '10px 0px 10px 0px',
-        
-        boxShadow: 'rgb(120 123 134 / 12%) 0px 4px 18px'
-      }}>
-      {props.imageURL && (
-        <CoverImage
-          src={props.imageURL}
-          alt='Preview Image'
-          width={120}
-          height={120}
-          onError={(e) => {
-            (e.target as HTMLElement).style.display = 'none'
-          }}
-        />
-      )}
-      <VStack >
-        <Box css={{ pl: '16px', width: '100%', color: 'black', }}>
-          <StyledText style='shareTitle'>{props.title}</StyledText>
-          <ArticleSubtitle
-            style='shareSubtitle'
-            hideButton={true}
-            author={props.author}
-            rawDisplayDate={props.publishedAt}
-            href={props.originalArticleUrl}
-          />
-        </Box>
-      </VStack>
-    </HStack>
-  )
-}
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@ -404,18 +404,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
          onOpenChange={(open: boolean) => setShowReportIssuesModal(open)}
        />
      ) : null}
-      {/* {showShareModal && (
-        <ShareArticleModal
-          url={`${webBaseURL}/${props.viewerUsername}/${props.article.slug}/highlights?r=true`}
-          title={props.article.title}
-          imageURL={props.article.image}
-          author={props.article.author}
-          publishedAt={props.article.publishedAt ?? props.article.createdAt}
-          description={props.article.description}
-          originalArticleUrl={props.article.originalArticleUrl}
-          onOpenChange={(open: boolean) => setShowShareModal(open)}
-        />
-      )} */}
    </>
  )
 }
--- a/packages/web/components/templates/article/ArticleHeaderToolbar.tsx
+++ b/packages/web/components/templates/article/ArticleHeaderToolbar.tsx
@ -15,34 +15,11 @@ type ArticleHeaderToolbarProps = {
  articleShareURL: string
  hasHighlights: boolean
  setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
-  setShowShareArticleModal: (showShareModal: boolean) => void
 }

 export function ArticleHeaderToolbar(
  props: ArticleHeaderToolbarProps
 ): JSX.Element {
-  const enablePostAction = false // disable for now
-  const { copyLink, isLinkCopied } = useCopyLink(props.articleShareURL, 'link')
-  const canShareNative = useCanShareNative()
-
-  const shareAction = useCallback(() => {
-    if (canShareNative) {
-      navigator
-        ?.share({
-          title: props.articleTitle,
-          url: props.articleShareURL,
-        })
-        .then(() => {
-          return
-        })
-        .catch(() => {
-          return
-        })
-    } else {
-      props.setShowShareArticleModal(true)
-    }
-  }, [props, canShareNative])
-
  return (
    <HStack distribution="between" alignment="center" css={{ gap: '$2' }}>
      {props.hasHighlights && (
--- a/packages/web/components/templates/article/ShareArticleModal.tsx
+++ b/packages/web/components/templates/article/ShareArticleModal.tsx
@ -1,39 +0,0 @@
-import { ShareModalLayout } from './ShareModal'
-import { ShareArticleView } from '../../patterns/ShareArticleView'
-
-type ShareArticleModalProps = {
-  url: string
-  title: string
-  imageURL?: string
-  author?: string
-  site?: string
-  description?: string
-  publishedAt: string
-  originalArticleUrl: string
-  onOpenChange: (open: boolean) => void
-}
-
-export function ShareArticleModal(
-  props: ShareArticleModalProps
-): JSX.Element {
-  return (
-    <ShareModalLayout
-      url={props.url}
-      type='link'
-      modalTitle='Share Article'
-      title={props.title}
-      description={props.description}
-      onOpenChange={props.onOpenChange}
-    >
-      <ShareArticleView
-        url={props.url}
-        title={props.title}
-        imageURL={props.imageURL}
-        author={props.author}
-        publishedAt={props.publishedAt}
-        originalArticleUrl={props.originalArticleUrl}
-        description={props.description}
-      />
-    </ShareModalLayout>      
-  )
-}
--- a/packages/web/components/templates/article/SnoozeLinkModal.tsx
+++ b/packages/web/components/templates/article/SnoozeLinkModal.tsx
@ -1,4 +1,8 @@
-import { ModalContent, ModalOverlay, ModalRoot } from '../../elements/ModalPrimitives'
+import {
+  ModalContent,
+  ModalOverlay,
+  ModalRoot,
+} from '../../elements/ModalPrimitives'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
@ -6,11 +10,6 @@ import { X, Check } from 'phosphor-react'
 import { useState } from 'react'
 import { showErrorToast } from '../../../lib/toastHelpers'

-type ShareArticleModalProps = {
-  onOpenChange: (open: boolean) => void
-  submit: (option: string, reminder: boolean, msg: string) => void
-}
-
 enum ButtonPosition {
  Top,
  Middle,
@ -49,32 +48,40 @@ function SnoozeOptionButton(props: SnoozeOptionButtonProps): JSX.Element {
  }

  return (
-    <Button style='modalOption'
+    <Button
+      style="modalOption"
      onClick={props.onClick}
-      css={{ 
-      borderRadius,
-      borderWidth,
-      background: props.selected ? '#FDFAEC' : undefined
-    }}>
-      <HStack css={{ pl: '16px', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+      css={{
+        borderRadius,
+        borderWidth,
+        background: props.selected ? '#FDFAEC' : undefined,
+      }}
+    >
+      <HStack
+        css={{
+          pl: '16px',
+          justifyContent: 'space-between',
+          width: '100%',
+          alignItems: 'center',
+        }}
+      >
        <SpanBox>{props.title}</SpanBox>
-        {props.selected && (
-          <Check width={24} height={24} color='#E2B513' />
-        )}
+        {props.selected && <Check width={24} height={24} color="#E2B513" />}
      </HStack>
-    </Button>)
+    </Button>
+  )
 }

-export function SnoozeLinkModal(
-  props: ShareArticleModalProps
-): JSX.Element {
+export function SnoozeLinkModal(props: ShareArticleModalProps): JSX.Element {
  const [sendReminder, setSendReminder] = useState(false)
-  const [snoozeOption, setSnoozeOption] = useState<string | undefined>(undefined)
+  const [snoozeOption, setSnoozeOption] = useState<string | undefined>(
+    undefined
+  )

  const setOption = (option: string) => {
    setSnoozeOption(option)
    setSendReminder(true)
-  };
+  }

  return (
    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
@ -89,12 +96,20 @@ export function SnoozeLinkModal(
          width: '375px',
          height: '388px',
          overflow: 'auto',
-          background: 'white'
+          background: 'white',
        }}
      >
        <VStack css={{ px: '24px', pt: '22px', m: '0px' }}>
-          <HStack alignment='start' distribution='end' css={{ pb: '16px', width: '100%' }}>
-            <StyledText css={{ fontSize: '24px', m: '0px', mr: '0px', color: '#0A0806' }}>Snooze</StyledText>
+          <HStack
+            alignment="start"
+            distribution="end"
+            css={{ pb: '16px', width: '100%' }}
+          >
+            <StyledText
+              css={{ fontSize: '24px', m: '0px', mr: '0px', color: '#0A0806' }}
+            >
+              Snooze
+            </StyledText>
            <Button
              style="ghost"
              onClick={() => {
@ -103,35 +118,74 @@ export function SnoozeLinkModal(
              tabIndex={-1}
              css={{ marginLeft: 'auto', p: '0px' }}
            >
-              <X color='black' width={24} height={24} />
+              <X color="black" width={24} height={24} />
            </Button>
          </HStack>
-          <VStack css={{ width: '100%', background: '#F8F8F8', borderRadius: '8px' }}>
-            <SnoozeOptionButton title='Snooze until tonight' position={ButtonPosition.Top} selected={snoozeOption == 'tonight'} onClick={() => setOption('tonight')} />
-            <SnoozeOptionButton title='Snooze until tomorrow' position={ButtonPosition.Middle} selected={snoozeOption == 'tomorrow'} onClick={() => setOption('tomorrow')} />
-            <SnoozeOptionButton title='Snooze until the weekend' position={ButtonPosition.Bottom} selected={snoozeOption == 'weekend'} onClick={() => setOption('weekend')} />
+          <VStack
+            css={{ width: '100%', background: '#F8F8F8', borderRadius: '8px' }}
+          >
+            <SnoozeOptionButton
+              title="Snooze until tonight"
+              position={ButtonPosition.Top}
+              selected={snoozeOption == 'tonight'}
+              onClick={() => setOption('tonight')}
+            />
+            <SnoozeOptionButton
+              title="Snooze until tomorrow"
+              position={ButtonPosition.Middle}
+              selected={snoozeOption == 'tomorrow'}
+              onClick={() => setOption('tomorrow')}
+            />
+            <SnoozeOptionButton
+              title="Snooze until the weekend"
+              position={ButtonPosition.Bottom}
+              selected={snoozeOption == 'weekend'}
+              onClick={() => setOption('weekend')}
+            />
          </VStack>

-          <Box css={{ mt: '16px', width: '100%', background: '#F8F8F8',  }}>
-            <SnoozeOptionButton title='Send me a reminder' position={ButtonPosition.Standalone} selected={sendReminder} 
+          <Box css={{ mt: '16px', width: '100%', background: '#F8F8F8' }}>
+            <SnoozeOptionButton
+              title="Send me a reminder"
+              position={ButtonPosition.Standalone}
+              selected={sendReminder}
              onClick={() => {
                setSendReminder(!sendReminder)
              }}
            />
          </Box>

-          <HStack css={{ mt: '16px', justifyContent: 'space-between', width: '100%' }}>
+          <HStack
+            css={{ mt: '16px', justifyContent: 'space-between', width: '100%' }}
+          >
            <Button
-              title='Cancel'
-              css={{ fontSize: '16px', width: '158px', height: '52px', background: 'unset', border: 'unset', color: '#0A0806', fontWeight: '400' }}
+              title="Cancel"
+              css={{
+                fontSize: '16px',
+                width: '158px',
+                height: '52px',
+                background: 'unset',
+                border: 'unset',
+                color: '#0A0806',
+                fontWeight: '400',
+              }}
              onClick={() => {
                props.onOpenChange(false)
              }}
-            >Cancel</Button>
+            >
+              Cancel
+            </Button>
            <Button
-              style='ctaDarkYellow'
-              title='Save'
-              css={{ fontSize: '16px', width: '158px', height: '52px', marginLeft: 'auto', color: '#0A0806', fontWeight: '400' }}
+              style="ctaDarkYellow"
+              title="Save"
+              css={{
+                fontSize: '16px',
+                width: '158px',
+                height: '52px',
+                marginLeft: 'auto',
+                color: '#0A0806',
+                fontWeight: '400',
+              }}
              onClick={() => {
                if (snoozeOption) {
                  let msg = 'Link snoozed until '
@ -149,10 +203,14 @@ export function SnoozeLinkModal(
                  props.submit(snoozeOption, sendReminder, msg)
                  props.onOpenChange(false)
                } else {
-                  showErrorToast('No option selected', { position: 'bottom-right' })
+                  showErrorToast('No option selected', {
+                    position: 'bottom-right',
+                  })
                }
              }}
-            >Save</Button>
+            >
+              Save
+            </Button>
          </HStack>
        </VStack>
      </ModalContent>
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@ -26,8 +26,6 @@ import {
  searchBarCommands,
 } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { ShareArticleModal } from '../article/ShareArticleModal'
-import { webBaseURL } from '../../../lib/appConfig'
 import { Toaster } from 'react-hot-toast'
 import { SnoozeLinkModal } from '../article/SnoozeLinkModal'
 import {
@ -106,10 +104,6 @@ export function HomeFeedContainer(): JSX.Element {

  const gridContainerRef = useRef<HTMLDivElement>(null)

-  const [shareTarget, setShareTarget] = useState<LibraryItem | undefined>(
-    undefined
-  )
-
  const [snoozeTarget, setSnoozeTarget] = useState<LibraryItem | undefined>(
    undefined
  )
@ -365,19 +359,11 @@ export function HomeFeedContainer(): JSX.Element {
    return (
      labelsTarget ||
      snoozeTarget ||
-      shareTarget ||
      linkToEdit ||
      linkToRemove ||
      linkToUnsubscribe
    )
-  }, [
-    labelsTarget,
-    snoozeTarget,
-    shareTarget,
-    linkToEdit,
-    linkToRemove,
-    linkToUnsubscribe,
-  ])
+  }, [labelsTarget, snoozeTarget, linkToEdit, linkToRemove, linkToUnsubscribe])

  useKeyboardShortcuts(
    libraryListCommands((action) => {
@ -603,8 +589,6 @@ export function HomeFeedContainer(): JSX.Element {
      hasData={!!itemsPages}
      totalItems={itemsPages?.[0].search.pageInfo.totalCount || 0}
      isValidating={isValidating}
-      shareTarget={shareTarget}
-      setShareTarget={setShareTarget}
      snoozeTarget={snoozeTarget}
      setSnoozeTarget={setSnoozeTarget}
      labelsTarget={labelsTarget}
@ -637,8 +621,6 @@ type HomeFeedContentProps = {
  totalItems: number
  isValidating: boolean
  loadMore: () => void
-  shareTarget: LibraryItem | undefined
-  setShareTarget: (target: LibraryItem | undefined) => void
  snoozeTarget: LibraryItem | undefined
  setSnoozeTarget: (target: LibraryItem | undefined) => void
  labelsTarget: LibraryItem | undefined
@ -1037,29 +1019,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
            item={props.linkToEdit as LibraryItem}
          />
        )}
-        {props.shareTarget && viewerData?.me?.profile.username && (
-          <ShareArticleModal
-            url={`${webBaseURL}${viewerData?.me?.profile.username}/${props.shareTarget.node.slug}/highlights?r=true`}
-            title={props.shareTarget.node.title}
-            imageURL={props.shareTarget.node.image}
-            author={props.shareTarget.node.author}
-            publishedAt={
-              props.shareTarget.node.publishedAt ??
-              props.shareTarget.node.createdAt
-            }
-            description={props.shareTarget.node.description}
-            originalArticleUrl={props.shareTarget.node.originalArticleUrl}
-            onOpenChange={() => {
-              if (props.shareTarget) {
-                const item = document.getElementById(props.shareTarget.node.id)
-                if (item) {
-                  item.focus()
-                }
-                props.setShareTarget(undefined)
-              }
-            }}
-          />
-        )}
        {props.snoozeTarget && (
          <SnoozeLinkModal
            submit={(option: string, sendReminder: boolean, msg: string) => {