[OMN-320] - Ask for confirmation when removing links

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

@@ -36,6 +36,7 @@ import {
 import { useFetchMoreScroll } from '../../../lib/hooks/useFetchMoreScroll'
 import { usePersistedState } from '../../../lib/hooks/usePersistedState'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
@@ -437,6 +438,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
   const [layout, setLayout] = useState<LayoutType>(
     (preferencesData?.libraryLayoutType as LayoutType) || 'GRID_LAYOUT'
   )
+  const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] =
+    useState(false)
+  const [linkToRemove, setLinkToRemove] = useState<LibraryItem>()
 
   const updateLayout = useCallback(
     async (newLayout: LayoutType) => {
@@ -463,6 +467,16 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     },
   })
 
+  const removeItem = () => {
+    if (!linkToRemove) {
+      return
+    }
+
+    props.actionHandler('delete', linkToRemove)
+    setLinkToRemove(undefined)
+    setShowRemoveLinkConfirmation(false)
+  }
+
   return (
     <>
       <VStack
@@ -609,7 +623,12 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                   item={linkedItem.node}
                   viewer={viewerData.me}
                   handleAction={(action: LinkedItemCardAction) => {
-                    props.actionHandler(action, linkedItem)
+                    if (action === 'delete') {
+                      setShowRemoveLinkConfirmation(true)
+                      setLinkToRemove(linkedItem)
+                    } else {
+                      props.actionHandler(action, linkedItem)
+                    }
                   }}
                 />
               )}
@@ -695,6 +714,13 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           }}
         />
       )}
+      {showRemoveLinkConfirmation && (
+        <ConfirmationModal
+          message={'Are you sure you want to remove this link?'}
+          onAccept={removeItem}
+          onOpenChange={() => setShowRemoveLinkConfirmation(false)}
+        />
+      )}
     </>
   )
 }