diff --git a/packages/slice-machine/components/DeleteSliceModal/index.tsx b/packages/slice-machine/components/DeleteSliceModal/index.tsx index 52511e5e80..eddf9289a6 100644 --- a/packages/slice-machine/components/DeleteSliceModal/index.tsx +++ b/packages/slice-machine/components/DeleteSliceModal/index.tsx @@ -1,46 +1,54 @@ +import { useState } from "react"; +import { MdOutlineDelete } from "react-icons/md"; +import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui"; + import SliceMachineModal from "@components/SliceMachineModal"; -import { useSelector } from "react-redux"; -import { SliceMachineStoreType } from "@src/redux/type"; -import { isModalOpen } from "@src/modules/modal"; -import { ModalKeysEnum } from "@src/modules/modal/types"; import useSliceMachineActions from "@src/modules/useSliceMachineActions"; -import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui"; import Card from "@components/Card"; -import { MdOutlineDelete } from "react-icons/md"; import { Button } from "@components/Button"; -import { LoadingKeysEnum } from "@src/modules/loading/types"; -import { isLoading } from "@src/modules/loading"; +import { deleteSlice } from "@src/features/slices/actions/deleteSlice"; type DeleteSliceModalProps = { + isModalOpen: boolean; + libName: string; sliceId: string; sliceName: string; - libName: string; + onCloseModal: () => void; }; export const DeleteSliceModal: React.FunctionComponent< DeleteSliceModalProps -> = ({ sliceId, sliceName, libName }) => { - const { isSliceModalOpen, isDeletingSlice } = useSelector( - (store: SliceMachineStoreType) => ({ - isSliceModalOpen: isModalOpen(store, ModalKeysEnum.DELETE_SLICE), - isDeletingSlice: isLoading(store, LoadingKeysEnum.DELETE_SLICE), - }), - ); +> = ({ sliceId, sliceName, libName, isModalOpen, onCloseModal }) => { + const [isDeleting, setIsDeleting] = useState(false); + const { deleteSliceSuccess } = useSliceMachineActions(); + const { theme } = useThemeUI(); - const { closeModals, deleteSlice } = useSliceMachineActions(); + const onDelete = async () => { + setIsDeleting(true); - const { theme } = useThemeUI(); + await deleteSlice({ + sliceID: sliceId, + sliceName, + libraryID: libName, + onSuccess: () => { + deleteSliceSuccess(sliceId, libName); + }, + }); + + onCloseModal(); + setIsDeleting(false); + }; return ( - + )} Footer={() => ( @@ -96,7 +104,7 @@ export const DeleteSliceModal: React.FunctionComponent<