refactor(custom types): Remove createCustomTypeSaga

prismicio · Jan 26, 2024 · c2498f6 · c2498f6
1 parent c804ad1
commit c2498f6
Show file tree

Hide file tree

Showing 22 changed files with 618 additions and 854 deletions.
diff --git a/packages/slice-machine/components/Forms/CreateCustomTypeModal/CreateCustomTypeModal.tsx b/packages/slice-machine/components/Forms/CreateCustomTypeModal/CreateCustomTypeModal.tsx
@@ -2,25 +2,28 @@ import { SetStateAction, useState } from "react";
 import { Box } from "theme-ui";
 import { FormikErrors } from "formik";
 import { useSelector } from "react-redux";
+import { useRouter } from "next/router";
 
 import ModalFormCard from "@components/ModalFormCard";
-import { InputBox } from "../components/InputBox";
-import { SelectRepeatable } from "../components/SelectRepeatable";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { SliceMachineStoreType } from "@src/redux/type";
 import {
   selectAllCustomTypeIds,
   selectAllCustomTypeLabels,
 } from "@src/modules/availableCustomTypes";
-import { isModalOpen } from "@src/modules/modal";
-import { ModalKeysEnum } from "@src/modules/modal/types";
-import { isLoading } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { telemetry } from "@src/apiClient";
 import { slugify } from "@lib/utils/str";
 import { API_ID_REGEX } from "@lib/consts";
 import type { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
+import {
+  CustomTypeOrigin,
+  createCustomType,
+} from "@src/features/customTypes/actions/createCustomType";
+import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
+import { getFormat } from "@src/domain/customType";
+
+import { InputBox } from "../components/InputBox";
+import { SelectRepeatable } from "../components/SelectRepeatable";
 
 interface FormValues {
   id: string;
@@ -30,46 +33,64 @@ interface FormValues {
 
 type CreateCustomTypeModalProps = {
   format: CustomTypeFormat;
-  origin?: "onboarding" | "table";
+  isCreating: boolean;
+  isOpen: boolean;
+  origin?: CustomTypeOrigin;
+  onCreateChange: (isCreating: boolean) => void;
+  onOpenChange: (isOpen: boolean) => void;
 };
 
 export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
   format,
+  isCreating,
+  isOpen,
   origin = "table",
+  onCreateChange,
+  onOpenChange,
 }) => {
-  const { createCustomType, closeModals } = useSliceMachineActions();
-
-  const {
-    customTypeIds,
-    isCreateCustomTypeModalOpen,
-    isCreatingCustomType,
-    customTypeLabels,
-  } = useSelector((store: SliceMachineStoreType) => ({
-    customTypeIds: selectAllCustomTypeIds(store),
-    customTypeLabels: selectAllCustomTypeLabels(store),
-    isCreateCustomTypeModalOpen: isModalOpen(
-      store,
-      ModalKeysEnum.CREATE_CUSTOM_TYPE,
-    ),
-    isCreatingCustomType: isLoading(store, LoadingKeysEnum.CREATE_CUSTOM_TYPE),
-  }));
+  const { createCustomTypeSuccess } = useSliceMachineActions();
+
+  const { customTypeIds, customTypeLabels } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      customTypeIds: selectAllCustomTypeIds(store),
+      customTypeLabels: selectAllCustomTypeLabels(store),
+    }),
+  );
   const customTypesMessages = CUSTOM_TYPES_MESSAGES[format];
   const [isIdFieldPristine, setIsIdFieldPristine] = useState(true);
+  const router = useRouter();
 
-  const createCustomTypeAndTrack = ({ id, label, repeatable }: FormValues) => {
-    const name = label || id;
+  const onSubmit = async ({ id, label, repeatable }: FormValues) => {
+    onCreateChange(true);
 
-    void telemetry.track({
-      event: "custom-type:created",
-      id,
-      name,
+    await createCustomType({
       format,
-      type: repeatable ? "repeatable" : "single",
+      id,
+      label,
       origin,
+      repeatable,
+      onSuccess: async (newCustomType) => {
+        createCustomTypeSuccess(newCustomType);
+
+        const format = getFormat(newCustomType);
+        const customTypesConfig = CUSTOM_TYPES_CONFIG[format];
+
+        setIsIdFieldPristine(true);
+
+        await router.push({
+          pathname: customTypesConfig.getBuilderPagePathname(id),
+          query:
+            newCustomType.format === "page"
+              ? {
+                  newPageType: true,
+                }
+              : undefined,
+        });
+      },
     });
-    createCustomType(id, name, repeatable, format);
-    closeModals();
-    setIsIdFieldPristine(true);
+
+    onCreateChange(false);
+    onOpenChange(false);
   };
 
   const handleLabelChange = (
@@ -106,16 +127,18 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
   return (
     <ModalFormCard
       dataCy="create-ct-modal"
-      isOpen={isCreateCustomTypeModalOpen}
+      isOpen={isOpen}
       widthInPx="530px"
       formId="create-custom-type"
       buttonLabel={"Create"}
       close={() => {
-        closeModals();
+        onOpenChange(false);
         setIsIdFieldPristine(true);
       }}
-      onSubmit={createCustomTypeAndTrack}
-      isLoading={isCreatingCustomType}
+      onSubmit={(values) => {
+        void onSubmit(values);
+      }}
+      isLoading={isCreating}
       initialValues={{
         repeatable: true,
         id: "",

diff --git a/packages/slice-machine/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx b/packages/slice-machine/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx
@@ -31,7 +31,7 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
 }) => {
   const customTypeName = customType?.label ?? "";
   const customTypeId = customType?.id ?? "";
-  const { renameAvailableCustomTypeSuccess } = useSliceMachineActions();
+  const { renameCustomTypeSuccess } = useSliceMachineActions();
 
   const [isRenaming, setIsRenaming] = useState(false);
 
@@ -46,7 +46,7 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
       await renameCustomType({
         model: customType,
         newLabel: values.customTypeName,
-        onSuccess: renameAvailableCustomTypeSuccess,
+        onSuccess: renameCustomTypeSuccess,
       });
     }
     setIsRenaming(false);

diff --git a/packages/slice-machine/components/Navigation/ChangesListItem.tsx b/packages/slice-machine/components/Navigation/ChangesListItem.tsx
@@ -1,25 +1,18 @@
-import { type FC, useState } from "react";
+import { type FC } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { useSelector } from "react-redux";
 
 import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
 import { RadarIcon } from "@src/icons/RadarIcon";
-import { isLoading } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
 import {
   HoverCard,
   HoverCardCloseButton,
   HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
 } from "@src/components/HoverCard";
-import {
-  userHasSeenChangesToolTip,
-  userHasSeenSimulatorToolTip,
-} from "@src/modules/userContext";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+
 import { ChangesRightElement } from "./ChangesRightElement";
 
 export const ChangesListItem: FC = () => {
@@ -63,30 +56,19 @@ export const ChangesListItem: FC = () => {
   );
 };
 
+// TODO(DT-1925): Reactivate this feature
 const useOpenChangesHoverCard = () => {
-  const {
-    hasSeenChangesToolTip,
-    hasSeenSimulatorToolTip,
-    isSavingCustomType,
-    isSavingSlice,
-  } = useSelector((store: SliceMachineStoreType) => ({
-    hasSeenChangesToolTip: userHasSeenChangesToolTip(store),
-    hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store),
-    isSavingCustomType: isLoading(store, LoadingKeysEnum.SAVE_CUSTOM_TYPE),
-    isSavingSlice: isLoading(store, LoadingKeysEnum.SAVE_SLICE),
-  }));
-
-  const isSaving = isSavingCustomType || isSavingSlice;
-  const [prevIsSaving, setPrevIsSaving] = useState(isSaving);
+  // const { hasSeenChangesToolTip, hasSeenSimulatorToolTip } = useSelector(
+  //   (store: SliceMachineStoreType) => ({
+  //     hasSeenChangesToolTip: userHasSeenChangesToolTip(store),
+  //     hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store),
+  //   }),
+  // );
 
-  if (!prevIsSaving && isSaving) {
-    setPrevIsSaving(isSaving);
-  }
+  // return (
+  //   !hasSeenChangesToolTip &&
+  //   hasSeenSimulatorToolTip
+  // );
 
-  return (
-    !hasSeenChangesToolTip &&
-    hasSeenSimulatorToolTip &&
-    !isSaving &&
-    prevIsSaving
-  );
+  return false;
 };