slice-machine-ui 1.23.2-beta.4 → 1.23.2-beta.6

package/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,9 +32,6 @@ import { SliceToastMessage } from "@components/ToasterContainer";
 
 const SlicesIndex: React.FunctionComponent = () => {
   const router = useRouter();
-  const { openRenameSliceModal, openDeleteSliceModal } =
-    useSliceMachineActions();
-
   const { modalPayload, onOpenModal } = useScreenshotChangesModal();
 
   const { sliceFilterFn, defaultVariationSelector } = modalPayload;
@@ -47,6 +43,8 @@ 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,
@@ -65,6 +63,14 @@ const SlicesIndex: React.FunctionComponent = () => {
 
   const [sliceForEdit, setSliceForEdit] = useState<ComponentUI>();
 
+  const openDeleteSliceModal = () => {
+    setIsDeleteSliceModalOpen(true);
+  };
+
+  const openRenameSliceModal = () => {
+    setIsRenameSliceModalOpen(true);
+  };
+
   return (
     <>
       <Head>
@@ -237,15 +243,21 @@ 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
+            isOpen={isDeleteSliceModalOpen}
+            libName={sliceForEdit?.from ?? ""}
             sliceId={sliceForEdit?.model.id ?? ""}
             sliceName={sliceForEdit?.model.name ?? ""}
-            libName={sliceForEdit?.from ?? ""}
+            onClose={() => {
+              setIsDeleteSliceModalOpen(false);
+            }}
           />
         </AppLayoutContent>
       </AppLayout>

package/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,22 +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 deleteSlice = async (sliceId: string, libName: string) =>
-  await managerClient.slices.deleteSlice({
-    libraryID: libName,
-    sliceID: sliceId,
-  });
-
 export const renameSliceVariation = async (
   slice: ComponentUI,
   variation: VariationSM,

package/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,37 @@ 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: "",
+      },
+    ],
+  };
+}
+
+export function rename(slice: ComponentUI, newSliceName: string): ComponentUI {
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      name: newSliceName,
+    },
+  };
+}

package/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: "",
-      },
-    ],
-  };
-}

package/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);
+  }
+}

package/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);
+  }
+}

package/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(

package/src/modules/loading/types.ts

@@ -5,9 +5,7 @@ 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",
-  DELETE_SLICE = "DELETE_SLICE",
   SIMULATOR_SAVE_MOCK = "SIMULATOR_SAVE_MOCK",
   CHANGELOG = "CHANGELOG",
 }

package/src/modules/modal/types.ts

@@ -1,9 +1,7 @@
 export enum ModalKeysEnum {
   LOGIN = "LOGIN",
-  RENAME_SLICE = "RENAME_SLICE",
   SCREENSHOT_PREVIEW = "SCREENSHOT_PREVIEW",
   SCREENSHOTS = "SCREENSHOTS",
-  DELETE_SLICE = "DELETE_SLICE",
   SIMULATOR_SETUP = "SIMULATOR_SETUP",
 }
 

package/src/modules/slices/index.ts

@@ -1,111 +1,49 @@
-import {
-  ActionType,
-  createAction,
-  createAsyncAction,
-  getType,
-} from "typesafe-actions";
-import {
-  call,
-  fork,
-  put,
-  SagaReturnType,
-  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 { deleteSlice, 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";
-import { ScreenshotGenerationMethod } from "@lib/models/common/Screenshots";
 
 // Action Creators
-export const createSlice = createAction("SLICES/CREATE_SLICE")<{
+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 deleteSliceCreator = createAsyncAction(
-  "SLICES/DELETE.REQUEST",
-  "SLICES/DELETE.RESPONSE",
-  "SLICES/DELETE.FAILURE",
-)<
-  {
-    sliceId: string;
-    sliceName: string;
-    libName: string;
-  },
-  {
-    sliceId: string;
-    sliceName: string;
-    libName: string;
-  }
->();
+export const sliceDeleteSuccess = createAction("SLICES/DELETE_SUCCESS")<{
+  sliceId: string;
+  libName: string;
+}>();
 
-export const updateSliceCreator = createAsyncAction(
-  "SLICE/UPDATE.REQUEST",
-  "SLICE/UPDATE.RESPONSE",
-  "SLICE/UPDATE.FAILURE",
-)<
-  {
-    component: ComponentUI;
-    setSliceBuilderState: () => void;
-  },
-  {
-    component: ComponentUI;
-  }
->();
+export const sliceUpdateSuccess = createAction("SLICE/UPDATE_SUCCESS")<{
+  component: ComponentUI;
+}>();
 
-export const generateSliceCustomScreenshotCreator = createAsyncAction(
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.REQUEST",
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.RESPONSE",
-  "SLICE/GENERATE_CUSTOM_SCREENSHOT.FAILURE",
-)<
-  {
-    variationId: string;
-    component: ComponentUI;
-    file: Blob;
-    method: ScreenshotGenerationMethod;
-  },
-  { variationId: string; screenshot: ScreenshotUI; component: ComponentUI }
->();
+export const sliceGenerateCustomScreenshotSuccess = createAction(
+  "SLICE/GENERATE_CUSTOM_SCREENSHOT_SUCCESS",
+)<{ variationId: string; screenshot: ScreenshotUI; component: ComponentUI }>();
 
 export const updateSliceMock =
   createAction("SLICE/UPDATE_MOCK")<SaveSliceMockRequest>();
 
 type SlicesActions =
   | ActionType<typeof refreshStateCreator>
-  | ActionType<typeof createSlice>
-  | ActionType<typeof renameSliceCreator>
-  | ActionType<typeof deleteSliceCreator>
-  | ActionType<typeof updateSliceCreator>
-  | ActionType<typeof generateSliceCustomScreenshotCreator>
+  | ActionType<typeof sliceCreateSuccess>
+  | ActionType<typeof sliceRenameSuccess>
+  | ActionType<typeof sliceDeleteSuccess>
+  | ActionType<typeof sliceUpdateSuccess>
+  | ActionType<typeof sliceGenerateCustomScreenshotSuccess>
   | ActionType<typeof updateSliceMock>;
 
 // Selectors
@@ -143,12 +81,12 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
         libraries: action.payload.libraries,
         remoteSlices: action.payload.remoteSlices,
       };
-    case getType(createSlice):
+    case getType(sliceCreateSuccess):
       return {
         ...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;
@@ -169,7 +107,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
         libraries: newLibs,
       };
     }
-    case getType(updateSliceCreator.success): {
+    case getType(sliceUpdateSuccess): {
       const newComponentUI = action.payload.component;
 
       const newLibraries = state.libraries.map((library) => {
@@ -186,7 +124,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
 
       return { ...state, libraries: newLibraries };
     }
-    case getType(generateSliceCustomScreenshotCreator.success): {
+    case getType(sliceGenerateCustomScreenshotSuccess): {
       const { component, screenshot, variationId } = action.payload;
 
       const newLibraries = state.libraries.map((library) => {
@@ -209,7 +147,7 @@ export const slicesReducer: Reducer<SlicesStoreType | null, SlicesActions> = (
 
       return { ...state, libraries: newLibraries };
     }
-    case getType(deleteSliceCreator.success): {
+    case getType(sliceDeleteSuccess): {
       const { libName, sliceId } = action.payload;
       const newLibs = state.libraries.map((library) => {
         if (library.name !== libName) return library;
@@ -254,107 +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),
-  );
-}
-
-export function* deleteSliceSaga({
-  payload,
-}: ReturnType<typeof deleteSliceCreator.request>) {
-  const { libName, sliceId, sliceName } = payload;
-  try {
-    const result = (yield call(
-      deleteSlice,
-      sliceId,
-      libName,
-    )) as SagaReturnType<typeof deleteSlice>;
-    if (result.errors.length > 0) {
-      throw result.errors;
-    }
-    yield put(deleteSliceCreator.success(payload));
-    yield put(
-      openToasterCreator({
-        content: `Successfully deleted Slice “${sliceName}”`,
-        type: ToasterType.SUCCESS,
-      }),
-    );
-  } catch (e) {
-    yield put(
-      openToasterCreator({
-        content: "An unexpected error happened while deleting your slice.",
-        type: ToasterType.ERROR,
-      }),
-    );
-  }
-  yield put(modalCloseCreator());
-}
-
-function* watchDeleteSlice() {
-  yield takeLatest(
-    getType(deleteSliceCreator.request),
-    withLoader(deleteSliceSaga, LoadingKeysEnum.DELETE_SLICE),
-  );
-}
-
-// Saga Exports
-export function* watchSliceSagas() {
-  yield fork(watchRenameSlice);
-  yield fork(watchDeleteSlice);
-}
-
-type RenameSliceModelArgs = {
-  slice: SliceSM;
-  newName: string;
-};
-
-export function renameSliceModel(args: RenameSliceModelArgs): SliceSM {
-  return {
-    ...args.slice,
-    name: args.newName,
-  };
-}

package/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,