refactor(slices): Remove deleteSliceSaga (#1280)

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 = {
+  isOpen: boolean;
+  libName: string;
   sliceId: string;
   sliceName: string;
-  libName: string;
+  onClose: () => 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, isOpen, onClose }) => {
+  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);
+      },
+    });
+
+    onClose();
+    setIsDeleting(false);
+  };
 
   return (
     <SliceMachineModal
-      isOpen={isSliceModalOpen}
+      isOpen={isOpen}
       shouldCloseOnOverlayClick={true}
       style={{
         content: {
           maxWidth: 612,
         },
       }}
-      onRequestClose={closeModals}
+      onRequestClose={onClose}
     >
       <Card
         bodySx={{
@@ -79,7 +87,7 @@ export const DeleteSliceModal: React.FunctionComponent<
                 Delete Slice
               </Heading>
             </Flex>
-            <Close type="button" onClick={closeModals} />
+            <Close type="button" onClick={onClose} />
           </Flex>
         )}
         Footer={() => (
@@ -96,7 +104,7 @@ export const DeleteSliceModal: React.FunctionComponent<
             <Button
               label="Cancel"
               variant="secondary"
-              onClick={() => closeModals()}
+              onClick={onClose}
               sx={{
                 mr: "10px",
                 fontWeight: "bold",
@@ -107,9 +115,11 @@ export const DeleteSliceModal: React.FunctionComponent<
             <Button
               label="Delete"
               variant="danger"
-              isLoading={isDeletingSlice}
+              isLoading={isDeleting}
               sx={{ minHeight: 39, minWidth: 78 }}
-              onClick={() => deleteSlice(sliceId, sliceName, libName)}
+              onClick={() => {
+                void onDelete();
+              }}
             />
           </Flex>
         )}

packages/slice-machine/pages/slices.tsx

@@ -33,8 +33,7 @@ import { SliceToastMessage } from "@components/ToasterContainer";
 
 const SlicesIndex: React.FunctionComponent = () => {
   const router = useRouter();
-  const { openRenameSliceModal, openDeleteSliceModal } =
-    useSliceMachineActions();
+  const { openRenameSliceModal } = useSliceMachineActions();
 
   const { modalPayload, onOpenModal } = useScreenshotChangesModal();
 
@@ -47,6 +46,7 @@ const SlicesIndex: React.FunctionComponent = () => {
     }),
   );
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
+  const [isDeleteSliceModalOpen, setIsDeleteSliceModalOpen] = useState(false);
 
   const localLibraries: LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
@@ -65,6 +65,10 @@ const SlicesIndex: React.FunctionComponent = () => {
 
   const [sliceForEdit, setSliceForEdit] = useState<ComponentUI>();
 
+  const openDeleteSliceModal = () => {
+    setIsDeleteSliceModalOpen(true);
+  };
+
   return (
     <>
       <Head>
@@ -243,9 +247,13 @@ const SlicesIndex: React.FunctionComponent = () => {
             data-cy="rename-slice-modal"
           />
           <DeleteSliceModal
+            isOpen={isDeleteSliceModalOpen}
+            libName={sliceForEdit?.from ?? ""}
             sliceId={sliceForEdit?.model.id ?? ""}
             sliceName={sliceForEdit?.model.name ?? ""}
-            libName={sliceForEdit?.from ?? ""}
+            onClose={() => {
+              setIsDeleteSliceModalOpen(false);
+            }}
           />
         </AppLayoutContent>
       </AppLayout>

packages/slice-machine/src/apiClient.ts

@@ -99,12 +99,6 @@ export const renameSlice = async (
   });
 };
 
-export const deleteSlice = async (sliceId: string, libName: string) =>
-  await managerClient.slices.deleteSlice({
-    libraryID: libName,
-    sliceID: sliceId,
-  });
-
 export const renameSliceVariation = async (
   slice: ComponentUI,
   variation: VariationSM,

packages/slice-machine/src/domain/slice.ts

@@ -1,11 +1,13 @@
 import type {
   CompositeSlice,
   LegacySlice,
+  SharedSlice,
 } from "@prismicio/types-internal/lib/customtypes/widgets/slices";
 import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
 
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
+import { pascalize, snakelize } from "@lib/utils/str";
 
 type CopySliceVariationArgs = {
   copiedVariation: VariationSM;
@@ -46,6 +48,8 @@ type ReorderFieldArgs = {
   destinationIndex: number;
 };
 
+const DEFAULT_VARIATION_ID = "default";
+
 export function countMissingScreenshots(slice: ComponentUI): number {
   return slice.model.variations.length - Object.keys(slice.screenshots).length;
 }
@@ -243,3 +247,27 @@ export function reorderField(args: ReorderFieldArgs): ComponentUI {
     },
   };
 }
+
+export function buildEmptySliceModel(sliceName: string): SharedSlice {
+  return {
+    id: snakelize(sliceName),
+    type: "SharedSlice",
+    name: sliceName,
+    description: sliceName,
+    variations: [
+      {
+        id: DEFAULT_VARIATION_ID,
+        name: pascalize(DEFAULT_VARIATION_ID),
+        // Property not used yet. Fallback to "...".
+        docURL: "...",
+        // "initial" is fine here as default value.
+        version: "initial",
+        description: pascalize(DEFAULT_VARIATION_ID),
+        // Empty string is fine, we don't want to save imageUrl.
+        // We don't want to compare local and remote image with imageUrl.
+        // It will be striped anyway when doing the comparison.
+        imageUrl: "",
+      },
+    ],
+  };
+}

packages/slice-machine/src/features/slices/actions/createSlice.ts

@@ -1,9 +1,10 @@
 import { toast } from "react-toastify";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
-import { pascalize, snakelize } from "@lib/utils/str";
+import { pascalize } from "@lib/utils/str";
 import { managerClient } from "@src/managerClient";
 import { telemetry } from "@src/apiClient";
+import { buildEmptySliceModel } from "@src/domain/slice";
 
 type CreateSliceArgs = {
   sliceName: string;
@@ -12,8 +13,9 @@ type CreateSliceArgs = {
 };
 
 export async function createSlice(args: CreateSliceArgs) {
+  const { sliceName, libraryName, onSuccess } = args;
+
   try {
-    const { sliceName, libraryName, onSuccess } = args;
     const newSlice = buildEmptySliceModel(sliceName);
     const { errors } = await managerClient.slices.createSlice({
       libraryID: libraryName,
@@ -33,34 +35,8 @@ export async function createSlice(args: CreateSliceArgs) {
 
     await onSuccess(newSlice);
   } catch (e) {
-    const errorMessage = "Internal Error: Slice not created";
+    const errorMessage = `An unexpected error happened while creating slice ${sliceName}.`;
     console.error(errorMessage, e);
     toast.error(errorMessage);
   }
 }
-
-const DEFAULT_VARIATION_ID = "default";
-
-function buildEmptySliceModel(sliceName: string): SharedSlice {
-  return {
-    id: snakelize(sliceName),
-    type: "SharedSlice",
-    name: sliceName,
-    description: sliceName,
-    variations: [
-      {
-        id: DEFAULT_VARIATION_ID,
-        name: pascalize(DEFAULT_VARIATION_ID),
-        // Property not used yet. Fallback to "...".
-        docURL: "...",
-        // "initial" is fine here as default value.
-        version: "initial",
-        description: pascalize(DEFAULT_VARIATION_ID),
-        // Empty string is fine, we don't want to save imageUrl.
-        // We don't want to compare local and remote image with imageUrl.
-        // It will be striped anyway when doing the comparison.
-        imageUrl: "",
-      },
-    ],
-  };
-}

packages/slice-machine/src/features/slices/actions/deleteSlice.ts

@@ -0,0 +1,33 @@
+import { toast } from "react-toastify";
+
+import { managerClient } from "@src/managerClient";
+
+type DeleteSliceArgs = {
+  libraryID: string;
+  sliceID: string;
+  sliceName: string;
+  onSuccess: () => void;
+};
+
+export async function deleteSlice(args: DeleteSliceArgs) {
+  const { sliceName, sliceID, libraryID, onSuccess } = args;
+
+  try {
+    const { errors } = await managerClient.slices.deleteSlice({
+      libraryID,
+      sliceID,
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess();
+
+    toast.success(`Successfully deleted slice “${sliceName}”`);
+  } catch (e) {
+    const errorMessage = `An unexpected error happened while deleting slice “${sliceName}”.`;
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}

packages/slice-machine/src/modules/availableCustomTypes/index.ts

@@ -9,7 +9,7 @@ import {
   normalizeFrontendCustomTypes,
 } from "@lib/models/common/normalizers/customType";
 import { omit } from "lodash";
-import { deleteSliceCreator } from "../slices";
+import { sliceDeleteSuccess } from "../slices";
 import { filterSliceFromCustomType } from "@lib/utils/shared/customTypes";
 import {
   LocalOrRemoteCustomType,
@@ -47,7 +47,7 @@ type CustomTypesActions =
   | ActionType<typeof customTypeRenameSuccess>
   | ActionType<typeof customTypeSaveSuccess>
   | ActionType<typeof customTypeDeleteSuccess>
-  | ActionType<typeof deleteSliceCreator.success>;
+  | ActionType<typeof sliceDeleteSuccess>;
 
 // Selectors
 export const selectAllCustomTypes = (
@@ -152,7 +152,7 @@ export const availableCustomTypesReducer: Reducer<
       return state;
     }
 
-    case getType(deleteSliceCreator.success): {
+    case getType(sliceDeleteSuccess): {
       const sliceId = action.payload.sliceId;
 
       const customTypesUpdated: AvailableCustomTypesStoreType = Object.entries(

packages/slice-machine/src/modules/loading/types.ts

@@ -7,7 +7,6 @@ export enum LoadingKeysEnum {
   CHECK_SIMULATOR_IFRAME = "CHECK_SIMULATOR_IFRAME",
   RENAME_SLICE = "RENAME_SLICE",
   GENERATE_SLICE_CUSTOM_SCREENSHOT = "GENERATE_SLICE_CUSTOM_SCREENSHOT",
-  DELETE_SLICE = "DELETE_SLICE",
   SIMULATOR_SAVE_MOCK = "SIMULATOR_SAVE_MOCK",
   CHANGELOG = "CHANGELOG",
 }

packages/slice-machine/src/modules/modal/types.ts

@@ -3,7 +3,6 @@ export enum ModalKeysEnum {
   RENAME_SLICE = "RENAME_SLICE",
   SCREENSHOT_PREVIEW = "SCREENSHOT_PREVIEW",
   SCREENSHOTS = "SCREENSHOTS",
-  DELETE_SLICE = "DELETE_SLICE",
   SIMULATOR_SETUP = "SIMULATOR_SETUP",
 }