fix(custom type): Prevent modal to stay open after adding a slice

prismicio · Oct 19, 2023 · 38fa24f · 38fa24f
1 parent 7019711
commit 38fa24f
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 59 deletions.
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/DeleteSliceZoneModal.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/DeleteSliceZoneModal.tsx
@@ -6,19 +6,17 @@ import Card from "@components/Card";
 import SliceMachineModal from "@components/SliceMachineModal";
 
 type DeleteSliceZoneModalProps = {
-  isDeleteSliceZoneModalOpen: boolean;
   deleteSliceZone: () => void;
   closeDeleteSliceZoneModal: () => void;
 };
 
 export const DeleteSliceZoneModal: FC<DeleteSliceZoneModalProps> = ({
-  isDeleteSliceZoneModalOpen,
   deleteSliceZone,
   closeDeleteSliceZoneModal,
 }) => {
   return (
     <SliceMachineModal
-      isOpen={isDeleteSliceZoneModalOpen}
+      isOpen
       shouldCloseOnOverlayClick={true}
       style={{
         content: {

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx
@@ -16,7 +16,6 @@ import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
 
 interface UpdateSliceModalProps {
-  isOpen: boolean;
   formId: string;
   close: () => void;
   onSuccess: (slices: SharedSlice[]) => Promise<void>;
@@ -29,7 +28,6 @@ export type SliceZoneFormValues = {
 };
 
 export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
-  isOpen,
   formId,
   close,
   onSuccess,
@@ -40,8 +38,8 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
 
   return (
     <ModalFormCard
+      isOpen
       buttonLabel="Add"
-      isOpen={isOpen}
       formId={formId}
       close={close}
       onSubmit={(values: SliceZoneFormValues) => {

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx
@@ -7,7 +7,6 @@ import ModalFormCard from "../../../../components/ModalFormCard";
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
 interface UpdateSliceModalProps {
-  isOpen: boolean;
   formId: string;
   close: () => void;
   onSubmit: (slices: SharedSlice[]) => Promise<void>;
@@ -19,16 +18,15 @@ export type SliceZoneFormValues = {
 };
 
 const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
-  isOpen,
   formId,
   close,
   onSubmit,
   availableSlices,
 }) => {
   return (
     <ModalFormCard
+      isOpen
       buttonLabel="Add"
-      isOpen={isOpen}
       formId={formId}
       close={close}
       onSubmit={(values: SliceZoneFormValues) => {

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
@@ -296,56 +296,59 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           />
         )
       ) : undefined}
-      <UpdateSliceZoneModal
-        isOpen={isUpdateSliceZoneModalOpen}
-        formId={`tab-slicezone-form-${tabId}`}
-        availableSlices={availableSlicesToAdd}
-        onSubmit={async (slices: SharedSlice[]) => {
-          const newCustomType = await addSlicesToSliceZone({
-            customType,
-            tabId,
-            slices,
-          });
-          onAddSlicesToSliceZone(newCustomType);
-          closeUpdateSliceZoneModal();
-          redirectToEditMode();
-          toast.success("Slice(s) added to slice zone");
-        }}
-        close={closeUpdateSliceZoneModal}
-      />
-      <SlicesTemplatesModal
-        isOpen={isSlicesTemplatesModalOpen}
-        formId={`tab-slicezone-form-${tabId}`}
-        availableSlicesTemplates={availableSlicesTemplates}
-        localLibraries={localLibraries}
-        onSuccess={async (slices: SharedSlice[]) => {
-          const newCustomType = await addSlicesToSliceZone({
-            customType,
-            tabId,
-            slices,
-          });
-          onAddSlicesToSliceZone(newCustomType);
-          closeSlicesTemplatesModal();
-          redirectToEditMode();
-          toast.success(
-            <ToastMessageWithPath
-              message="Slice template(s) added to slice zone and created at: "
-              path={`${localLibraries[0].name}/`}
-            />
-          );
-        }}
-        close={closeSlicesTemplatesModal}
-      />
-      <DeleteSliceZoneModal
-        isDeleteSliceZoneModalOpen={isDeleteSliceZoneModalOpen}
-        closeDeleteSliceZoneModal={() => {
-          setIsDeleteSliceZoneModalOpen(false);
-        }}
-        deleteSliceZone={() => {
-          onDeleteSliceZone();
-          setIsDeleteSliceZoneModalOpen(false);
-        }}
-      />
+      {isUpdateSliceZoneModalOpen && (
+        <UpdateSliceZoneModal
+          formId={`tab-slicezone-form-${tabId}`}
+          availableSlices={availableSlicesToAdd}
+          onSubmit={async (slices: SharedSlice[]) => {
+            const newCustomType = await addSlicesToSliceZone({
+              customType,
+              tabId,
+              slices,
+            });
+            onAddSlicesToSliceZone(newCustomType);
+            closeUpdateSliceZoneModal();
+            redirectToEditMode();
+            toast.success("Slice(s) added to slice zone");
+          }}
+          close={closeUpdateSliceZoneModal}
+        />
+      )}
+      {isSlicesTemplatesModalOpen && (
+        <SlicesTemplatesModal
+          formId={`tab-slicezone-form-${tabId}`}
+          availableSlicesTemplates={availableSlicesTemplates}
+          localLibraries={localLibraries}
+          onSuccess={async (slices: SharedSlice[]) => {
+            const newCustomType = await addSlicesToSliceZone({
+              customType,
+              tabId,
+              slices,
+            });
+            onAddSlicesToSliceZone(newCustomType);
+            closeSlicesTemplatesModal();
+            redirectToEditMode();
+            toast.success(
+              <ToastMessageWithPath
+                message="Slice template(s) added to slice zone and created at: "
+                path={`${localLibraries[0].name}/`}
+              />
+            );
+          }}
+          close={closeSlicesTemplatesModal}
+        />
+      )}
+      {isDeleteSliceZoneModalOpen && (
+        <DeleteSliceZoneModal
+          closeDeleteSliceZoneModal={() => {
+            setIsDeleteSliceZoneModalOpen(false);
+          }}
+          deleteSliceZone={() => {
+            onDeleteSliceZone();
+            setIsDeleteSliceZoneModalOpen(false);
+          }}
+        />
+      )}
       {localLibraries?.length !== 0 && isCreateSliceModalOpen && (
         <CreateSliceModal
           onSuccess={async (newSlice: SharedSlice) => {