Something went wrong. Try again.
A social knowledge tool for research trails, built on ATProto semble.so
research-tool social-network tools-for-thought atproto
Something went wrong. Try again.
semble src webapp features cards components removeCardFromCollectionModal RemoveCardFromCollectionModal.tsx
1.6 kB · 59 lines
TSX
at development
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960import { Button, Stack, Modal } from '@mantine/core';import useRemoveCardFromCollections from '../../lib/mutations/useRemoveCardFromCollections';import { notifications } from '@mantine/notifications';import { useRouter } from 'next/navigation';import { DANGER_OVERLAY_PROPS } from '@/styles/overlays';
interface Props { isOpen: boolean; onClose: () => void; cardId: string; collectionId: string;}
export default function RemoveCardFromCollectionModal(props: Props) { const removeCardFromCollection = useRemoveCardFromCollections();
const handleRemoveCardFromCollection = () => { removeCardFromCollection.mutate( { cardId: props.cardId, collectionIds: [props.collectionId] }, { onError: () => { notifications.show({ message: 'Could not remove card from collection.', position: 'top-center', }); }, onSettled: () => { props.onClose(); }, }, ); };
return ( <Modal opened={props.isOpen} onClose={props.onClose} withCloseButton={false} title="Remove card from collection" size={'xs'} overlayProps={DANGER_OVERLAY_PROPS} centered > <Stack> <Button variant="subtle" size="md" color="gray" onClick={props.onClose}> Cancel </Button> <Button color="red" size="md" onClick={handleRemoveCardFromCollection} loading={removeCardFromCollection.isPending} > Remove </Button> </Stack> </Modal> );}