fix(graph): 🐛 Step node drag

apps/builder/components/board/graph/BlockNode/StepsList.tsx

@@ -70,6 +70,7 @@ export const StepsList = ({
     if (!draggedStep && !draggedStepType) return
     setExpandedPlaceholderIndex(stepIndex + 1)
   }
+
   return (
     <Stack
       spacing={1}

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

@@ -1,4 +1,5 @@
 import { Coordinates } from 'contexts/GraphContext'
+import { WritableDraft } from 'immer/dist/internal'
 import { Block, Step, StepType, Typebot } from 'models'
 import { parseNewBlock } from 'services/typebots'
 import { Updater } from 'use-immer'
@@ -13,6 +14,7 @@ export type BlocksActions = {
 export const blocksActions = (setTypebot: Updater<Typebot>): BlocksActions => ({
   createBlock: ({ x, y, step }: Coordinates & { step: StepType | Step }) => {
     setTypebot((typebot) => {
+      removeEmptyBlocks(typebot)
       const newBlock = parseNewBlock({
         totalBlocks: typebot.blocks.allIds.length,
         initialCoordinates: { x, y },
@@ -31,10 +33,29 @@ export const blocksActions = (setTypebot: Updater<Typebot>): BlocksActions => ({
     }),
   deleteBlock: (blockId: string) =>
     setTypebot((typebot) => {
-      const block = typebot.blocks.byId[blockId]
-      block.stepIds.forEach((stepId) => deleteStepDraft(typebot, stepId))
-      delete typebot.blocks.byId[blockId]
-      const index = typebot.blocks.allIds.indexOf(blockId)
-      if (index !== -1) typebot.blocks.allIds.splice(index, 1)
+      deleteStepsInsideBlock(typebot, blockId)
+      deleteBlockDraft(typebot)(blockId)
     }),
 })
+
+export const removeEmptyBlocks = (typebot: WritableDraft<Typebot>) => {
+  const emptyBlockIds = typebot.blocks.allIds.filter(
+    (blockId) => typebot.blocks.byId[blockId].stepIds.length === 0
+  )
+  emptyBlockIds.forEach(deleteBlockDraft(typebot))
+}
+
+const deleteStepsInsideBlock = (
+  typebot: WritableDraft<Typebot>,
+  blockId: string
+) => {
+  const block = typebot.blocks.byId[blockId]
+  block.stepIds.forEach((stepId) => deleteStepDraft(typebot, stepId))
+}
+
+export const deleteBlockDraft =
+  (typebot: WritableDraft<Typebot>) => (blockId: string) => {
+    delete typebot.blocks.byId[blockId]
+    const index = typebot.blocks.allIds.indexOf(blockId)
+    if (index !== -1) typebot.blocks.allIds.splice(index, 1)
+  }

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

@@ -1,6 +1,7 @@
 import { Step, StepType, Typebot } from 'models'
 import { parseNewStep } from 'services/typebots'
 import { Updater } from 'use-immer'
+import { removeEmptyBlocks } from './blocks'
 import { WritableDraft } from 'immer/dist/types/types-external'
 
 export type StepsActions = {
@@ -15,6 +16,7 @@ export type StepsActions = {
 export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
   createStep: (blockId: string, step: StepType | Step, index?: number) => {
     setTypebot((typebot) => {
+      removeEmptyBlocks(typebot)
       createStepDraft(typebot, step, blockId, index)
     })
   },
@@ -24,11 +26,25 @@ export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
     }),
   deleteStep: (stepId: string) => {
     setTypebot((typebot) => {
+      removeStepIdFromBlock(typebot, stepId)
       deleteStepDraft(typebot, stepId)
     })
   },
 })
 
+const removeStepIdFromBlock = (
+  typebot: WritableDraft<Typebot>,
+  stepId: string
+) => {
+  const containerBlockId = typebot.blocks.allIds.find((blockId) =>
+    typebot.blocks.byId[blockId].stepIds.includes(stepId)
+  ) as string
+  typebot.blocks.byId[containerBlockId].stepIds.splice(
+    typebot.blocks.byId[containerBlockId].stepIds.indexOf(stepId),
+    1
+  )
+}
+
 export const deleteStepDraft = (
   typebot: WritableDraft<Typebot>,
   stepId: string
@@ -44,7 +60,10 @@ export const createStepDraft = (
   blockId: string,
   index?: number
 ) => {
-  const newStep = typeof step === 'string' ? parseNewStep(step, blockId) : step
+  const newStep =
+    typeof step === 'string'
+      ? parseNewStep(step, blockId)
+      : { ...step, blockId }
   typebot.steps.byId[newStep.id] = newStep
   typebot.steps.allIds.push(newStep.id)
   typebot.blocks.byId[blockId].stepIds.splice(index ?? 0, 0, newStep.id)

apps/builder/services/publicTypebot.tsx

@@ -43,7 +43,6 @@ export const parseSubmissionsColumns = (
   Header: JSX.Element
   accessor: string
 }[] => {
-  console.log(typebot)
   if (!typebot) return []
   return [
     {