refactor(slices): Remove renameSliceSaga

prismicio · Feb 7, 2024 · 343c771 · 343c771
1 parent 043c3a4
commit 343c771
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 174 deletions.
diff --git a/packages/slice-machine/components/Forms/RenameSliceModal/RenameSliceModal.tsx b/packages/slice-machine/components/Forms/RenameSliceModal/RenameSliceModal.tsx
@@ -1,50 +1,62 @@
 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 initialSliceName = slice?.model.name ?? "";
+
+  const handleOnSubmit = async (values: SliceModalValues) => {
+    if (slice) {
+      await renameSlice({
+        slice,
+        newSliceName: values.sliceName,
+        onSuccess: (renamedSlice) => {
+          renameSliceSuccess(renamedSlice.from, renamedSlice.model);
+        },
+      });
 
-  const handleOnSubmit = (values: SliceModalValues) => {
-    renameSlice(libName, sliceId, values.sliceName);
+      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: initialSliceName,
       }}
       content={{
         title: "Rename a slice",

diff --git a/packages/slice-machine/pages/slices.tsx b/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,9 +243,11 @@ const SlicesIndex: React.FunctionComponent = () => {
             />
           )}
           <RenameSliceModal
-            sliceId={sliceForEdit?.model.id ?? ""}
-            sliceName={sliceForEdit?.model.name ?? ""}
-            libName={sliceForEdit?.from ?? ""}
+            isOpen={isRenameSliceModalOpen}
+            slice={sliceForEdit}
+            onClose={() => {
+              setIsRenameSliceModalOpen(false);
+            }}
             data-cy="rename-slice-modal"
           />
           <DeleteSliceModal

diff --git a/packages/slice-machine/src/apiClient.ts b/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,

diff --git a/packages/slice-machine/src/domain/slice.ts b/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,
+    },
+  };
+}
diff --git a/packages/slice-machine/src/features/slices/actions/renameSlice.ts b/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 = {
+  newSliceName: string;
+  slice: ComponentUI;
+  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("Slice name updated");
+  } catch (e) {
+    const errorMessage = `An unexpected error happened while renaming “${slice.model.name}”.`;
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}
diff --git a/packages/slice-machine/src/modules/loading/types.ts b/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",

diff --git a/packages/slice-machine/src/modules/modal/types.ts b/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",

diff --git a/packages/slice-machine/src/modules/slices/index.ts b/packages/slice-machine/src/modules/slices/index.ts
@@ -1,47 +1,25 @@
-import {
-  ActionType,
-  createAction,
-  createAsyncAction,
-  getType,
-} from "typesafe-actions";
-import { call, fork, put, select, takeLatest } from "redux-saga/effects";
+import { ActionType, createAction, getType } from "typesafe-actions";
 import { Reducer } from "redux";
 
 import { LocalOrRemoteSlice } from "@lib/models/common/ModelData";
 import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
 import { SliceSM } from "@lib/models/common/Slice";
 import { LibraryUI } from "@models/common/LibraryUI";
-import { withLoader } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { renameSlice, SaveSliceMockRequest } from "@src/apiClient";
-import { modalCloseCreator } from "@src/modules/modal";
+import { SaveSliceMockRequest } from "@src/apiClient";
 import { refreshStateCreator } from "@src/modules/environment";
 import { SliceMachineStoreType } from "@src/redux/type";
-import { openToasterCreator, ToasterType } from "@src/modules/toaster";
 import { SlicesStoreType } from "./types";
 import { ComponentUI, ScreenshotUI } from "@lib/models/common/ComponentUI";
-import { selectSliceById } from "./selector";
 
 // Action Creators
 export const sliceCreateSuccess = createAction("SLICES/CREATE_SUCCESS")<{
   libraries: Readonly<LibraryUI[]>;
 }>();
 
-export const renameSliceCreator = createAsyncAction(
-  "SLICES/RENAME.REQUEST",
-  "SLICES/RENAME.RESPONSE",
-  "SLICES/RENAME.FAILURE",
-)<
-  {
-    libName: string;
-    sliceId: string;
-    newSliceName: string;
-  },
-  {
-    libName: string;
-    renamedSlice: SliceSM;
-  }
->();
+export const sliceRenameSuccess = createAction("SLICES/RENAME_SUCCESS")<{
+  libName: string;
+  renamedSlice: SliceSM;
+}>();
 
 export const sliceDeleteSuccess = createAction("SLICES/DELETE_SUCCESS")<{
   sliceId: string;
@@ -62,7 +40,7 @@ export const updateSliceMock =
 type SlicesActions =
   | ActionType<typeof refreshStateCreator>
   | ActionType<typeof sliceCreateSuccess>
-  | ActionType<typeof renameSliceCreator>
+  | ActionType<typeof sliceRenameSuccess>
   | ActionType<typeof sliceDeleteSuccess>
   | ActionType<typeof sliceUpdateSuccess>
   | ActionType<typeof sliceGenerateCustomScreenshotSuccess>
@@ -108,7 +86,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
         ...state,
         libraries: action.payload.libraries,
       };
-    case getType(renameSliceCreator.success): {
+    case getType(sliceRenameSuccess): {
       const { libName, renamedSlice } = action.payload;
       const newLibs = state.libraries.map((library) => {
         if (library.name !== libName) return library;
@@ -214,68 +192,3 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
       return state;
   }
 };
-
-// Sagas
-
-export function* renameSliceSaga({
-  payload,
-}: ReturnType<typeof renameSliceCreator.request>) {
-  const { libName, sliceId, newSliceName } = payload;
-  try {
-    const slice = (yield select((store: SliceMachineStoreType) =>
-      selectSliceById(store, libName, sliceId),
-    )) as ReturnType<typeof selectSliceById>;
-    if (!slice) {
-      throw new Error(
-        `Slice "${payload.sliceId} in the "${payload.libName}" library not found.`,
-      );
-    }
-
-    const renamedSlice = renameSliceModel({
-      slice: slice.model,
-      newName: newSliceName,
-    });
-
-    yield call(renameSlice, renamedSlice, libName);
-    yield put(renameSliceCreator.success({ libName, renamedSlice }));
-
-    yield put(modalCloseCreator());
-    yield put(
-      openToasterCreator({
-        content: "Slice name updated",
-        type: ToasterType.SUCCESS,
-      }),
-    );
-  } catch (e) {
-    yield put(
-      openToasterCreator({
-        content: "Internal Error: Slice name not saved",
-        type: ToasterType.ERROR,
-      }),
-    );
-  }
-}
-
-function* watchRenameSlice() {
-  yield takeLatest(
-    getType(renameSliceCreator.request),
-    withLoader(renameSliceSaga, LoadingKeysEnum.RENAME_SLICE),
-  );
-}
-
-// Saga Exports
-export function* watchSliceSagas() {
-  yield fork(watchRenameSlice);
-}
-
-type RenameSliceModelArgs = {
-  slice: SliceSM;
-  newName: string;
-};
-
-export function renameSliceModel(args: RenameSliceModelArgs): SliceSM {
-  return {
-    ...args.slice,
-    name: args.newName,
-  };
-}
diff --git a/packages/slice-machine/src/modules/slices/selector.ts b/packages/slice-machine/src/modules/slices/selector.ts
@@ -2,20 +2,6 @@ import { SliceMachineStoreType } from "@src/redux/type";
 
 import { getLibraries } from "./index";
 
-export const selectSliceById = (
-  store: SliceMachineStoreType,
-  libraryName: string,
-  sliceId: string,
-) => {
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  const libraries = getLibraries(store) || [];
-
-  const library = libraries.find((library) => library.name === libraryName);
-  const slice = library?.components.find((c) => c.model.id === sliceId);
-
-  return slice;
-};
-
 export const selectCurrentSlice = (
   store: SliceMachineStoreType,
   lib: string,