diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 7fe8339df..fb55e6910 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/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( (preferencesData?.libraryLayoutType as LayoutType) || 'GRID_LAYOUT' ) + const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] = + useState(false) + const [linkToRemove, setLinkToRemove] = useState() 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 ( <> { - 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 && ( + setShowRemoveLinkConfirmation(false)} + /> + )} ) }