refactor(slices): Remove renameSliceSaga

packages/slice-machine/components/DeleteSliceModal/index.tsx

@@ -9,16 +9,16 @@ import { Button } from "@components/Button";
 import { deleteSlice } from "@src/features/slices/actions/deleteSlice";
 
 type DeleteSliceModalProps = {
-  isModalOpen: boolean;
+  isOpen: boolean;
   libName: string;
   sliceId: string;
   sliceName: string;
-  onCloseModal: () => void;
+  onClose: () => void;
 };
 
 export const DeleteSliceModal: React.FunctionComponent<
   DeleteSliceModalProps
-> = ({ sliceId, sliceName, libName, isModalOpen, onCloseModal }) => {
+> = ({ sliceId, sliceName, libName, isOpen, onClose }) => {
   const [isDeleting, setIsDeleting] = useState(false);
   const { deleteSliceSuccess } = useSliceMachineActions();
   const { theme } = useThemeUI();
@@ -35,20 +35,20 @@ export const DeleteSliceModal: React.FunctionComponent<
       },
     });
 
-    onCloseModal();
+    onClose();
     setIsDeleting(false);
   };
 
   return (
     <SliceMachineModal
-      isOpen={isModalOpen}
+      isOpen={isOpen}
       shouldCloseOnOverlayClick={true}
       style={{
         content: {
           maxWidth: 612,
         },
       }}
-      onRequestClose={onCloseModal}
+      onRequestClose={onClose}
     >
       <Card
         bodySx={{
@@ -87,7 +87,7 @@ export const DeleteSliceModal: React.FunctionComponent<
                 Delete Slice
               </Heading>
             </Flex>
-            <Close type="button" onClick={onCloseModal} />
+            <Close type="button" onClick={onClose} />
           </Flex>
         )}
         Footer={() => (
@@ -104,7 +104,7 @@ export const DeleteSliceModal: React.FunctionComponent<
             <Button
               label="Cancel"
               variant="secondary"
-              onClick={onCloseModal}
+              onClick={onClose}
               sx={{
                 mr: "10px",
                 fontWeight: "bold",

packages/slice-machine/components/Forms/RenameSliceModal/RenameSliceModal.tsx

@@ -1,50 +1,65 @@
 import { Box } from "theme-ui";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import ModalFormCard from "../../ModalFormCard";
-import { InputBox } from "../components/InputBox";
 import { useSelector } from "react-redux";
+
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { SliceMachineStoreType } from "@src/redux/type";
-import { isModalOpen } from "@src/modules/modal";
-import { ModalKeysEnum } from "@src/modules/modal/types";
 import { getLibraries, getRemoteSlices } from "@src/modules/slices";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { renameSlice } from "@src/features/slices/actions/renameSlice";
+
+import { InputBox } from "../components/InputBox";
+import ModalFormCard from "../../ModalFormCard";
 import { SliceModalValues } from "../formsTypes";
 import { validateSliceModalValues } from "../formsValidator";
 
 interface RenameSliceModalProps {
-  sliceName: string;
-  sliceId: string;
-  libName: string;
+  isOpen: boolean;
+  slice?: ComponentUI;
+  onClose: () => void;
 }
 
 export const RenameSliceModal: React.FC<RenameSliceModalProps> = ({
-  sliceName,
-  sliceId,
-  libName,
+  slice,
+  isOpen,
+  onClose,
 }) => {
-  const { renameSlice, closeModals } = useSliceMachineActions();
-  const { isRenameSliceModalOpen, localLibs, remoteLibs } = useSelector(
+  const { renameSliceSuccess } = useSliceMachineActions();
+  const { localLibs, remoteLibs } = useSelector(
     (store: SliceMachineStoreType) => ({
-      isRenameSliceModalOpen: isModalOpen(store, ModalKeysEnum.RENAME_SLICE),
       localLibs: getLibraries(store),
       remoteLibs: getRemoteSlices(store),
     }),
   );
 
-  const handleOnSubmit = (values: SliceModalValues) => {
-    renameSlice(libName, sliceId, values.sliceName);
+  const handleOnSubmit = async (values: SliceModalValues) => {
+    if (slice) {
+      await renameSlice({
+        slice,
+        newSliceName: values.sliceName,
+        onSuccess: (renamedSlice) => {
+          renameSliceSuccess(
+            renamedSlice.from,
+            renamedSlice.model.id,
+            renamedSlice.model,
+          );
+        },
+      });
+
+      onClose();
+    }
   };
 
   return (
     <ModalFormCard<SliceModalValues>
       dataCy="rename-slice-modal"
-      isOpen={isRenameSliceModalOpen}
+      isOpen={isOpen}
       widthInPx="530px"
-      formId={`rename-slice-modal-${sliceId}`}
-      close={closeModals}
+      formId={`rename-slice-modal-${slice?.model.id ?? ""}`}
+      close={onClose}
       buttonLabel="Rename"
-      onSubmit={handleOnSubmit}
+      onSubmit={(values) => void handleOnSubmit(values)}
       initialValues={{
-        sliceName: sliceName,
+        sliceName: slice?.model.name ?? "",
       }}
       content={{
         title: "Rename a slice",

packages/slice-machine/pages/slices.tsx

@@ -24,7 +24,6 @@ import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
 import { RenameSliceModal } from "@components/Forms/RenameSliceModal";
 import { DeleteSliceModal } from "@components/DeleteSliceModal";
 import { SliceMachineStoreType } from "@src/redux/type";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { getLibraries, getRemoteSlices } from "@src/modules/slices";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
 import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
@@ -33,8 +32,6 @@ import { SliceToastMessage } from "@components/ToasterContainer";
 
 const SlicesIndex: React.FunctionComponent = () => {
   const router = useRouter();
-  const { openRenameSliceModal } = useSliceMachineActions();
-
   const { modalPayload, onOpenModal } = useScreenshotChangesModal();
 
   const { sliceFilterFn, defaultVariationSelector } = modalPayload;
@@ -47,6 +44,7 @@ const SlicesIndex: React.FunctionComponent = () => {
   );
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
   const [isDeleteSliceModalOpen, setIsDeleteSliceModalOpen] = useState(false);
+  const [isRenameSliceModalOpen, setIsRenameSliceModalOpen] = useState(false);
 
   const localLibraries: LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
@@ -69,6 +67,10 @@ const SlicesIndex: React.FunctionComponent = () => {
     setIsDeleteSliceModalOpen(true);
   };
 
+  const openRenameSliceModal = () => {
+    setIsRenameSliceModalOpen(true);
+  };
+
   return (
     <>
       <Head>
@@ -241,17 +243,19 @@ const SlicesIndex: React.FunctionComponent = () => {
             />
           )}
           <RenameSliceModal
-            sliceId={sliceForEdit?.model.id ?? ""}
-            sliceName={sliceForEdit?.model.name ?? ""}
-            libName={sliceForEdit?.from ?? ""}
+            slice={sliceForEdit}
+            isOpen={isRenameSliceModalOpen}
+            onClose={() => {
+              setIsRenameSliceModalOpen(false);
+            }}
             data-cy="rename-slice-modal"
           />
           <DeleteSliceModal
             sliceId={sliceForEdit?.model.id ?? ""}
             sliceName={sliceForEdit?.model.name ?? ""}
             libName={sliceForEdit?.from ?? ""}
-            isModalOpen={isDeleteSliceModalOpen}
-            onCloseModal={() => {
+            isOpen={isDeleteSliceModalOpen}
+            onClose={() => {
               setIsDeleteSliceModalOpen(false);
             }}
           />

packages/slice-machine/src/apiClient.ts

@@ -3,12 +3,7 @@ import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 
 import { SimulatorCheckResponse } from "@models/common/Simulator";
 import { SliceMachineManagerClient } from "@slicemachine/manager/client";
-import {
-  type SliceSM,
-  Slices,
-  type VariationSM,
-  Variations,
-} from "@lib/models/common/Slice";
+import { Slices, type VariationSM, Variations } from "@lib/models/common/Slice";
 import { CustomTypes } from "@lib/models/common/CustomType";
 import { CheckAuthStatusResponse } from "@models/common/Auth";
 import ServerState from "@models/server/ServerState";
@@ -89,16 +84,6 @@ export const readSlice = async (libraryID: string, sliceID: string) => {
   return { slice: model ? Slices.toSM(model) : undefined, errors };
 };
 
-export const renameSlice = async (
-  slice: SliceSM,
-  libName: string,
-): ReturnType<SliceMachineManagerClient["slices"]["renameSlice"]> => {
-  return await managerClient.slices.renameSlice({
-    libraryID: libName,
-    model: Slices.fromSM(slice),
-  });
-};
-
 export const renameSliceVariation = async (
   slice: ComponentUI,
   variation: VariationSM,

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

@@ -271,3 +271,13 @@ export function buildEmptySliceModel(sliceName: string): SharedSlice {
     ],
   };
 }
+
+export function rename(slice: ComponentUI, newSliceName: string): ComponentUI {
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      name: newSliceName,
+    },
+  };
+}

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

@@ -0,0 +1,37 @@
+import { toast } from "react-toastify";
+
+import { managerClient } from "@src/managerClient";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { rename } from "@src/domain/slice";
+import { Slices } from "@lib/models/common/Slice";
+
+type DeleteSliceArgs = {
+  slice: ComponentUI;
+  newSliceName: string;
+  onSuccess: (renamedSlice: ComponentUI) => void;
+};
+
+export async function renameSlice(args: DeleteSliceArgs) {
+  const { slice, newSliceName, onSuccess } = args;
+
+  try {
+    const renamedSlice = rename(slice, newSliceName);
+
+    const { errors } = await managerClient.slices.renameSlice({
+      libraryID: slice.from,
+      model: Slices.fromSM(renamedSlice.model),
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess(renamedSlice);
+
+    toast.success(`Successfully renamed slice name to “${newSliceName}”`);
+  } catch (e) {
+    const errorMessage = `An unexpected error happened while renaming “${newSliceName}”.`;
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}

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

@@ -5,7 +5,6 @@ export enum LoadingKeysEnum {
   REVIEW = "REVIEW",
   CHECK_SIMULATOR = "CHECK_SIMULATOR",
   CHECK_SIMULATOR_IFRAME = "CHECK_SIMULATOR_IFRAME",
-  RENAME_SLICE = "RENAME_SLICE",
   GENERATE_SLICE_CUSTOM_SCREENSHOT = "GENERATE_SLICE_CUSTOM_SCREENSHOT",
   SIMULATOR_SAVE_MOCK = "SIMULATOR_SAVE_MOCK",
   CHANGELOG = "CHANGELOG",

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

@@ -1,6 +1,5 @@
 export enum ModalKeysEnum {
   LOGIN = "LOGIN",
-  RENAME_SLICE = "RENAME_SLICE",
   SCREENSHOT_PREVIEW = "SCREENSHOT_PREVIEW",
   SCREENSHOTS = "SCREENSHOTS",
   SIMULATOR_SETUP = "SIMULATOR_SETUP",