perf(editor): 🚸 More predictable edge management

apps/builder/contexts/TypebotContext/actions/edges.ts

@@ -1,4 +1,11 @@
-import { Typebot, Edge, StepWithItems, StepIndices, ItemIndices } from 'models'
+import {
+  Typebot,
+  Edge,
+  StepWithItems,
+  StepIndices,
+  ItemIndices,
+  Step,
+} from 'models'
 import { WritableDraft } from 'immer/dist/types/types-external'
 import { SetTypebot } from '../TypebotContext'
 import { produce } from 'immer'
@@ -98,9 +105,11 @@ const deleteOutgoingEdgeIdProps = (
   const fromStepIndex = typebot.blocks[fromBlockIndex].steps.findIndex(
     byId(edge.from.stepId)
   )
-  const step = typebot.blocks[fromBlockIndex].steps[fromStepIndex]
+  const step = typebot.blocks[fromBlockIndex].steps[fromStepIndex] as
+    | Step
+    | undefined
   const fromItemIndex =
-    edge.from.itemId && stepHasItems(step)
+    edge.from.itemId && step && stepHasItems(step)
       ? step.items.findIndex(byId(edge.from.itemId))
       : -1
   if (fromStepIndex !== -1)

apps/builder/contexts/TypebotContext/actions/items.ts

@@ -8,29 +8,44 @@ import {
 import { SetTypebot } from '../TypebotContext'
 import produce from 'immer'
 import { cleanUpEdgeDraft } from './edges'
-import { stepHasItems } from 'utils'
+import { byId, stepHasItems } from 'utils'
 import cuid from 'cuid'
 
 export type ItemsActions = {
-  createItem: (item: Omit<ButtonItem, 'id'>, indices: ItemIndices) => void
+  createItem: (
+    item: ButtonItem | Omit<ButtonItem, 'id'>,
+    indices: ItemIndices
+  ) => void
   updateItem: (indices: ItemIndices, updates: Partial<Omit<Item, 'id'>>) => void
+  detachItemFromStep: (indices: ItemIndices) => void
   deleteItem: (indices: ItemIndices) => void
 }
 
 const itemsAction = (setTypebot: SetTypebot): ItemsActions => ({
   createItem: (
-    item: Omit<ButtonItem, 'id'>,
+    item: ButtonItem | Omit<ButtonItem, 'id'>,
     { blockIndex, stepIndex, itemIndex }: ItemIndices
   ) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
         const step = typebot.blocks[blockIndex].steps[stepIndex]
         if (step.type !== InputStepType.CHOICE) return
-        step.items.splice(itemIndex, 0, {
+        const newItem = {
           ...item,
           stepId: step.id,
-          id: cuid(),
-        })
+          id: 'id' in item ? item.id : cuid(),
+        }
+        if (item.outgoingEdgeId) {
+          const edgeIndex = typebot.edges.findIndex(byId(item.outgoingEdgeId))
+          edgeIndex !== -1
+            ? (typebot.edges[edgeIndex].from = {
+                blockId: step.blockId,
+                stepId: step.id,
+                itemId: newItem.id,
+              })
+            : (newItem.outgoingEdgeId = undefined)
+        }
+        step.items.splice(itemIndex, 0, newItem)
       })
     ),
   updateItem: (
@@ -49,7 +64,15 @@ const itemsAction = (setTypebot: SetTypebot): ItemsActions => ({
         } as Item
       })
     ),
-
+  detachItemFromStep: ({ blockIndex, stepIndex, itemIndex }: ItemIndices) =>
+    setTypebot((typebot) =>
+      produce(typebot, (typebot) => {
+        const step = typebot.blocks[blockIndex].steps[
+          stepIndex
+        ] as StepWithItems
+        step.items.splice(itemIndex, 1)
+      })
+    ),
   deleteItem: ({ blockIndex, stepIndex, itemIndex }: ItemIndices) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {

apps/builder/contexts/TypebotContext/actions/steps.ts

@@ -13,6 +13,7 @@ import { SetTypebot } from '../TypebotContext'
 import produce from 'immer'
 import { cleanUpEdgeDraft, deleteEdgeDraft } from './edges'
 import cuid from 'cuid'
+import { byId } from 'utils'
 
 export type StepsActions = {
   createStep: (
@@ -74,7 +75,9 @@ const stepsAction = (setTypebot: SetTypebot): StepsActions => ({
   deleteStep: ({ blockIndex, stepIndex }: StepIndices) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
+        const removingStep = typebot.blocks[blockIndex].steps[stepIndex]
         removeStepFromBlock({ blockIndex, stepIndex })(typebot)
+        cleanUpEdgeDraft(typebot, removingStep.id)
         removeEmptyBlocks(typebot)
       })
     ),
@@ -83,8 +86,6 @@ const stepsAction = (setTypebot: SetTypebot): StepsActions => ({
 const removeStepFromBlock =
   ({ blockIndex, stepIndex }: StepIndices) =>
   (typebot: WritableDraft<Typebot>) => {
-    const removingStep = typebot.blocks[blockIndex].steps[stepIndex]
-    cleanUpEdgeDraft(typebot, removingStep.id)
     typebot.blocks[blockIndex].steps.splice(stepIndex, 1)
   }
 
@@ -122,11 +123,20 @@ const moveStepToBlock = (
   step: DraggableStep,
   blockId: string,
   { blockIndex, stepIndex }: StepIndices
-) =>
-  typebot.blocks[blockIndex].steps.splice(stepIndex ?? 0, 0, {
-    ...step,
-    blockId,
-    outgoingEdgeId: undefined,
-  })
+) => {
+  const newStep = { ...step, blockId }
+  if (step.outgoingEdgeId) {
+    if (typebot.blocks[blockIndex].steps.length > stepIndex ?? 0) {
+      deleteEdgeDraft(typebot, step.outgoingEdgeId)
+      newStep.outgoingEdgeId = undefined
+    } else {
+      const edgeIndex = typebot.edges.findIndex(byId(step.outgoingEdgeId))
+      edgeIndex !== -1
+        ? (typebot.edges[edgeIndex].from.blockId = blockId)
+        : (newStep.outgoingEdgeId = undefined)
+    }
+  }
+  typebot.blocks[blockIndex].steps.splice(stepIndex ?? 0, 0, newStep)
+}
 
 export { stepsAction, createStepDraft }