From 7673814fd30500e871485eda80e28f27f97d75c7 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 22 Aug 2022 15:53:22 +0800
Subject: [PATCH] Add a delete page article action, add keyboard ctrls for
 confirm dialogs

---
 packages/web/components/elements/Button.tsx   |  6 +++
 packages/web/components/patterns/CardMenu.tsx |  2 +-
 .../components/patterns/ConfirmationModal.tsx | 21 ++++++++-
 .../templates/article/ArticleActionsMenu.tsx  | 19 +++++++-
 .../templates/homeFeed/HomeFeedContainer.tsx  | 46 +++++++++++++------
 packages/web/lib/hooks/useReaderSettings.tsx  |  7 ++-
 .../web/pages/[username]/[slug]/index.tsx     | 43 +++++++++++++++++
 7 files changed, 124 insertions(+), 20 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 5c956ba29..0ae54959e 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -29,6 +29,9 @@ export const Button = styled('button', {
         color: '$omnivoreGray',
         bg: '$omnivoreCtaYellow',
         p: '10px 13px',
+        '&:focus': {
+          outline: '5px auto -webkit-focus-ring-color',
+        },
       },
       ctaOutlineYellow: {
         boxSizing: 'border-box',
@@ -45,6 +48,9 @@ export const Button = styled('button', {
         color: '$utilityTextDefault',
         bg: 'transparent',
         p: '9px 12px',
+        '&:focus': {
+          outline: '5px auto -webkit-focus-ring-color',
+        },
       },
       ctaLightGray: {
         border: 0,
diff --git a/packages/web/components/patterns/CardMenu.tsx b/packages/web/components/patterns/CardMenu.tsx
index 357de8d8b..c22a9d9c5 100644
--- a/packages/web/components/patterns/CardMenu.tsx
+++ b/packages/web/components/patterns/CardMenu.tsx
@@ -85,7 +85,7 @@ export function CardMenu(props: CardMenuProps): JSX.Element {
         onSelect={() => {
           props.actionHandler('delete')
         }}
-        title="Remove"
+        title="Delete"
       />
       {!!props.item.subscription && (
         <DropdownOption
diff --git a/packages/web/components/patterns/ConfirmationModal.tsx b/packages/web/components/patterns/ConfirmationModal.tsx
index 25b109d90..8e553c8f1 100644
--- a/packages/web/components/patterns/ConfirmationModal.tsx
+++ b/packages/web/components/patterns/ConfirmationModal.tsx
@@ -6,6 +6,8 @@ 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
@@ -25,13 +27,28 @@ export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
           <StyledText>{props.message}</StyledText>
           <HStack distribution="center" css={{ pt: '$2' }}>
             <Button
-              style="ctaPill"
+              style="ctaOutlineYellow"
               css={{ mr: '$2' }}
               onClick={() => props.onOpenChange(false)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault()
+                  props.onOpenChange(false)
+                }
+              }}
             >
               Cancel
             </Button>
-            <Button style="ctaPill" onClick={props.onAccept}>
+            <Button
+              style="ctaDarkYellow"
+              onClick={props.onAccept}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault()
+                  props.onAccept()
+                }
+              }}
+            >
               {props.acceptButtonLabel ?? 'Confirm'}
             </Button>
           </HStack>
diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index ba367f44e..c90cb6262 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -1,5 +1,5 @@
 import { Separator } from "@radix-ui/react-separator"
-import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa, Tray } from "phosphor-react"
+import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa, Trash, Tray } from "phosphor-react"
 import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticleQuery"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
@@ -143,6 +143,23 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
 
       <MenuSeparator layout={props.layout} />
 
+      <Button
+        style="articleActionIcon"
+        onClick={() => {
+          props.articleActionHandler('delete')
+        }}
+      >
+        <TooltipWrapped
+          tooltipContent="Delete"
+          tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+        >
+          <Trash
+            size={24}
+            color={theme.colors.readerFont.toString()}
+          />
+        </TooltipWrapped>
+      </Button>
+
       {!props.article?.isArchived ? (
           <Button
             style="articleActionIcon"
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index e500d2db7..7f5f2a126 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -110,6 +110,9 @@ export function HomeFeedContainer(): JSX.Element {
 
   const [showAddLinkModal, setShowAddLinkModal] = useState(false)
   const [showEditTitleModal, setShowEditTitleModal] = useState(false)
+  const [linkToRemove, setLinkToRemove] = useState<LibraryItem>()
+  const [linkToEdit, setLinkToEdit] = useState<LibraryItem>()
+  const [linkToUnsubscribe, setLinkToUnsubscribe] = useState<LibraryItem>()
 
   const [queryInputs, setQueryInputs] =
     useState<LibraryItemsQueryInput>(defaultQuery)
@@ -342,6 +345,10 @@ export function HomeFeedContainer(): JSX.Element {
     }
   }
 
+  const modalTargetItem = useMemo(() => {
+    return (labelsTarget || snoozeTarget || shareTarget || linkToEdit || linkToRemove || linkToUnsubscribe)
+  }, [labelsTarget, snoozeTarget, shareTarget, linkToEdit, linkToRemove, linkToUnsubscribe])
+
   useKeyboardShortcuts(
     libraryListCommands((action) => {
       const columnCount = (container: HTMLDivElement) => {
@@ -353,7 +360,7 @@ export function HomeFeedContainer(): JSX.Element {
       }
 
       // If any of the modals are open we disable handling keyboard shortcuts
-      if (labelsTarget || snoozeTarget || shareTarget) {
+      if (modalTargetItem) {
         return
       }
 
@@ -577,6 +584,12 @@ export function HomeFeedContainer(): JSX.Element {
       setActiveItem={(item: LibraryItem) => {
         activateCard(item.node.id)
       }}
+      linkToRemove={linkToRemove}
+      setLinkToRemove={setLinkToRemove}
+      linkToEdit={linkToEdit}
+      setLinkToEdit={setLinkToEdit}
+      linkToUnsubscribe={linkToUnsubscribe}
+      setLinkToUnsubscribe={setLinkToUnsubscribe}
     />
   )
 }
@@ -602,6 +615,14 @@ type HomeFeedContentProps = {
   showEditTitleModal: boolean
   setShowEditTitleModal: (show: boolean) => void
   setActiveItem: (item: LibraryItem) => void
+
+  linkToRemove: LibraryItem | undefined
+  setLinkToRemove: (set: LibraryItem | undefined) => void
+  linkToEdit: LibraryItem | undefined
+  setLinkToEdit: (set: LibraryItem | undefined) => void
+  linkToUnsubscribe: LibraryItem | undefined
+  setLinkToUnsubscribe: (set: LibraryItem | undefined) => void
+
   actionHandler: (
     action: LinkedItemCardAction,
     item: LibraryItem | undefined
@@ -618,9 +639,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     useState(false)
   const [showUnsubscribeConfirmation, setShowUnsubscribeConfirmation] =
   useState(false)
-  const [linkToRemove, setLinkToRemove] = useState<LibraryItem>()
-  const [linkToEdit, setLinkToEdit] = useState<LibraryItem>()
-  const [linkToUnsubscribe, setLinkToUnsubscribe] = useState<LibraryItem>()
 
   const updateLayout = useCallback(
     async (newLayout: LayoutType) => {
@@ -649,21 +667,21 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
   })
 
   const removeItem = () => {
-    if (!linkToRemove) {
+    if (!props.linkToRemove) {
       return
     }
 
-    props.actionHandler('delete', linkToRemove)
-    setLinkToRemove(undefined)
+    props.actionHandler('delete', props.linkToRemove)
+    props.setLinkToRemove(undefined)
     setShowRemoveLinkConfirmation(false)
   }
 
   const unsubscribe = () => {
-    if (!linkToUnsubscribe) {
+    if (!props.linkToUnsubscribe) {
       return
     }
-    props.actionHandler('unsubscribe', linkToUnsubscribe)
-    setLinkToUnsubscribe(undefined)
+    props.actionHandler('unsubscribe', props.linkToUnsubscribe)
+    props.setLinkToUnsubscribe(undefined)
     setShowUnsubscribeConfirmation(false)
   }
 
@@ -847,13 +865,13 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                     handleAction={(action: LinkedItemCardAction) => {
                       if (action === 'delete') {
                         setShowRemoveLinkConfirmation(true)
-                        setLinkToRemove(linkedItem)
+                        props.setLinkToRemove(linkedItem)
                       } else if (action === 'editTitle') {
                         props.setShowEditTitleModal(true)
-                        setLinkToEdit(linkedItem)
+                        props.setLinkToEdit(linkedItem)
                       } else if (action == 'unsubscribe') {
                         setShowUnsubscribeConfirmation(true)
-                        setLinkToUnsubscribe(linkedItem)
+                        props.setLinkToUnsubscribe(linkedItem)
                       } else {
                         props.actionHandler(action, linkedItem)
                       }
@@ -893,7 +911,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
             props.actionHandler('update-item', item)
           }
           onOpenChange={() => props.setShowEditTitleModal(false)}
-          item={linkToEdit as LibraryItem}
+          item={props.linkToEdit as LibraryItem}
         />
       )}
       {props.shareTarget && viewerData?.me?.profile.username && (
diff --git a/packages/web/lib/hooks/useReaderSettings.tsx b/packages/web/lib/hooks/useReaderSettings.tsx
index 7af7745f5..11c3c5fdf 100644
--- a/packages/web/lib/hooks/useReaderSettings.tsx
+++ b/packages/web/lib/hooks/useReaderSettings.tsx
@@ -17,9 +17,11 @@ export type ReaderSettings = {
   setMarginWidth: (newMarginWidth: number) => void 
 
   showSetLabelsModal: boolean
+  showDeleteConfirmation: boolean
   showEditDisplaySettingsModal: boolean
 
   setShowSetLabelsModal: (showSetLabelsModal: boolean) => void
+  setShowDeleteConfirmation: (showDeleteConfirmation: boolean) => void
   setShowEditDisplaySettingsModal: (showEditDisplaySettingsModal: boolean) => void
 
   actionHandler: (action: string, arg?: unknown) => void
@@ -36,6 +38,7 @@ export const useReaderSettings = (): ReaderSettings => {
   const [fontFamily, setFontFamily] = usePersistedState({ key: 'fontFamily', initialValue: DEFAULT_FONT })
   const [showSetLabelsModal, setShowSetLabelsModal] = useState(false)
   const [showEditDisplaySettingsModal, setShowEditDisplaySettingsModal] = useState(false)
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)
 
   const updateFontSize = async (newFontSize: number) => {
     setFontSize(newFontSize)
@@ -136,8 +139,8 @@ export const useReaderSettings = (): ReaderSettings => {
     preferencesData,
     fontSize, lineHeight, marginWidth,
     setFontSize,  setLineHeight, setMarginWidth,
-    showSetLabelsModal, showEditDisplaySettingsModal,
-    setShowSetLabelsModal, setShowEditDisplaySettingsModal,
+    showDeleteConfirmation, showSetLabelsModal, showEditDisplaySettingsModal,
+    setShowSetLabelsModal, setShowEditDisplaySettingsModal, setShowDeleteConfirmation,
     actionHandler, setFontFamily, fontFamily,
   }
 }
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index a2c9d36c5..75381ab8f 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -29,6 +29,8 @@ import { DisplaySettingsModal } from '../../../components/templates/article/Disp
 import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { SkeletonArticleContainer } from '../../../components/templates/article/SkeletonArticleContainer'
 import { useRegisterActions } from 'kbar'
+import { deleteLinkMutation } from '../../../lib/networking/mutations/deleteLinkMutation'
+import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
 
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
@@ -61,6 +63,8 @@ export default function Home(): JSX.Element {
   useKeyboardShortcuts(navigationCommands(router))
 
   const actionHandler = useCallback(async(action: string, arg?: unknown) => {
+    console.log('handling action: ', action, article)
+
     switch (action) {
       case 'unarchive':
           if (article) {
@@ -103,6 +107,9 @@ export default function Home(): JSX.Element {
           router.push(`/home`)
         }
         break
+      case 'delete':
+        readerSettings.setShowDeleteConfirmation(true)
+        break
       case 'openOriginalArticle':
         const url = article?.url
         if (url) {
@@ -128,8 +135,12 @@ export default function Home(): JSX.Element {
     const openOriginalArticle = () => {
       actionHandler('openOriginalArticle')
     }
+    const deletePage = () => {
+      actionHandler('delete')
+    }
 
     document.addEventListener('archive', archive)
+    document.addEventListener('delete', deletePage)
     document.addEventListener('openOriginalArticle', openOriginalArticle)
 
     return () => {
@@ -155,6 +166,22 @@ export default function Home(): JSX.Element {
     }
   }, [article, viewerData])
   
+  const deleteCurrentItem = useCallback(async () => {
+    if (article) {
+      removeItemFromCache(cache, mutate, article.id)
+      await deleteLinkMutation(article.id)
+      .then((res) => {
+        if (res) {
+          showSuccessToast('Page deleted', { position: 'bottom-right' })
+        } else {
+          // todo: revalidate or put back in cache?
+          showErrorToast('Error deleting page', { position: 'bottom-right' })
+        }
+      })
+      router.push(`/home`)
+    }
+  }, [article])
+
   useRegisterActions([
     {
       id: 'open',
@@ -181,6 +208,15 @@ export default function Home(): JSX.Element {
         document.dispatchEvent(new Event('archive'));
       }
     },
+    {
+      id: 'delete',
+      section: 'Article',
+      name: 'Delete current item',
+      shortcut: ['#'],
+      perform: () => {
+        document.dispatchEvent(new Event('delete'));
+      }
+    },
     {
       id: 'highlight',
       section: 'Article',
@@ -319,6 +355,13 @@ export default function Home(): JSX.Element {
           onOpenChange={() => readerSettings.setShowEditDisplaySettingsModal(false)}
         />
       )}
+      {readerSettings.showDeleteConfirmation && (
+        <ConfirmationModal
+          message={'Are you sure you want to delete this page?'}
+          onAccept={deleteCurrentItem}
+          onOpenChange={() => readerSettings.setShowDeleteConfirmation(false)}
+        />
+      )}
     </PrimaryLayout>
   )
 }