fix(slice-machine-ui): infinite loop when adding a screenshot

prismicio · Oct 26, 2023 · aa99b8b · aa99b8b
1 parent 98d1167
commit aa99b8b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/packages/slice-machine/lib/builders/SliceBuilder/Sidebar/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/Sidebar/index.tsx
@@ -6,6 +6,7 @@ import VariationModal from "@builders/SliceBuilder/Sidebar/VariationModal";
 import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM } from "@lib/models/common/Slice";
+import { Variation } from "@lib/models/common/Variation";
 import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
@@ -14,9 +15,12 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 type SidebarProps = {
   slice: ComponentUI;
   variation: VariationSM;
+  updateSlice: (slice: ComponentUI) => void;
 };
 
-export const Sidebar: FC<SidebarProps> = ({ slice, variation }) => {
+export const Sidebar: FC<SidebarProps> = (props) => {
+  const { slice, variation, updateSlice } = props;
+
   const router = useRouter();
 
   const screenshotChangesModal = useScreenshotChangesModal();
@@ -73,10 +77,23 @@ export const Sidebar: FC<SidebarProps> = ({ slice, variation }) => {
         }}
         onSubmit={(id, name, copiedVariation) => {
           copyVariationSlice(id, name, copiedVariation);
+
+          // We have to immediately save the new variation to prevent an
+          // infinite loop related to screenshots handling.
+          const newVariation = Variation.copyValue(copiedVariation, id, name);
+          const newSlice = {
+            ...slice,
+            model: {
+              ...slice.model,
+              variations: [...slice.model.variations, newVariation],
+            },
+          };
+          updateSlice(newSlice);
+
           const url = SLICES_CONFIG.getBuilderPagePathname({
-            libraryName: slice.href,
-            sliceName: slice.model.name,
-            variationId: id,
+            libraryName: newSlice.href,
+            sliceName: newSlice.model.name,
+            variationId: newVariation.id,
           });
           void router.replace(url);
         }}

diff --git a/packages/slice-machine/lib/builders/SliceBuilder/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/index.tsx
@@ -67,7 +67,9 @@ const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => {
   else
     return (
       <SliceBuilderForVariation
-        updateSlice={updateSlice.bind(null, slice, setData)}
+        updateSlice={(slice) => {
+          updateSlice(slice, setData);
+        }}
         slice={slice}
         variation={variation}
         isTouched={isTouched}
@@ -77,7 +79,7 @@ const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => {
 };
 
 type SliceBuilderForVariationProps = {
-  updateSlice: () => void;
+  updateSlice: (slice: ComponentUI) => void;
   slice: ComponentUI;
   variation: VariationSM;
   isTouched: boolean;
@@ -107,7 +109,9 @@ const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
           <Button
             loading={data.loading}
             disabled={!isTouched || data.loading}
-            onClick={updateSlice}
+            onClick={() => {
+              updateSlice(slice);
+            }}
             data-cy="builder-save-button"
           >
             Save
@@ -121,7 +125,11 @@ const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
           gap={16}
           gridTemplateColumns="320px 1fr"
         >
-          <Sidebar slice={slice} variation={variation} />
+          <Sidebar
+            slice={slice}
+            variation={variation}
+            updateSlice={updateSlice}
+          />
           <FieldZones variation={variation} />
         </Box>
         <FloatingBackButton />