Merge pull request #1049 from omnivore-app/fix/ask-unsubscribe-confirmation

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -616,8 +616,11 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
   })
   const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] =
     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) => {
@@ -655,6 +658,15 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     setShowRemoveLinkConfirmation(false)
   }
 
+  const unsubscribe = () => {
+    if (!linkToUnsubscribe) {
+      return
+    }
+    props.actionHandler('unsubscribe', linkToUnsubscribe)
+    setLinkToUnsubscribe(undefined)
+    setShowUnsubscribeConfirmation(false)
+  }
+
   return (
     <>
       <VStack
@@ -839,6 +851,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                       } else if (action === 'editTitle') {
                         props.setShowEditTitleModal(true)
                         setLinkToEdit(linkedItem)
+                      } else if (action == 'unsubscribe') {
+                        setShowUnsubscribeConfirmation(true)
+                        setLinkToUnsubscribe(linkedItem)
                       } else {
                         props.actionHandler(action, linkedItem)
                       }
@@ -944,6 +959,13 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           onOpenChange={() => setShowRemoveLinkConfirmation(false)}
         />
       )}
+      {showUnsubscribeConfirmation && (
+        <ConfirmationModal
+          message={'Are you sure you want to unsubscribe?'}
+          onAccept={unsubscribe}
+          onOpenChange={() => setShowUnsubscribeConfirmation(false)}
+        />
+      )}
       {props.labelsTarget?.node.id && (
         <SetLabelsModal
           linkId={props.labelsTarget.node.id}