♻️ Normalize data

apps/builder/components/board/graph/Edges/DrawingEdge.tsx

@@ -1,6 +1,5 @@
 import { useEventListener } from '@chakra-ui/hooks'
 import { Coordinates } from '@dnd-kit/core/dist/types'
-import { Block } from 'bot-engine'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import {
   blockWidth,
@@ -9,7 +8,7 @@ import {
   stubLength,
   useGraph,
 } from 'contexts/GraphContext'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo, useState } from 'react'
 import {
   computeFlowChartConnectorPath,
@@ -19,34 +18,30 @@ import { roundCorners } from 'svg-round-corners'
 
 export const DrawingEdge = () => {
   const { graphPosition, setConnectingIds, connectingIds } = useGraph()
-  const { typebot, updateTarget } = useTypebot()
-  const { startBlock, blocks } = typebot ?? {}
+  const { typebot, updateStep } = useTypebot()
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
 
   const sourceBlock = useMemo(
-    () =>
-      [startBlock, ...(blocks ?? [])].find(
-        (b) => b?.id === connectingIds?.blockId
-      ),
+    () => connectingIds && typebot?.blocks.byId[connectingIds.source.blockId],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [connectingIds]
   )
 
   const path = useMemo(() => {
-    if (!sourceBlock) return ``
+    if (!sourceBlock || !typebot) return ``
     if (connectingIds?.target) {
-      const targetedBlock = blocks?.find(
-        (b) => b.id === connectingIds.target?.blockId
-      ) as Block
+      const targetedBlock = typebot?.blocks.byId[connectingIds.target.blockId]
       const targetedStepIndex = connectingIds.target.stepId
-        ? targetedBlock.steps.findIndex(
-            (s) => s.id === connectingIds.target?.stepId
+        ? targetedBlock.stepIds.findIndex(
+            (stepId) => stepId === connectingIds.target?.stepId
           )
         : undefined
       const anchorsPosition = getAnchorsPosition(
         sourceBlock,
         targetedBlock,
-        sourceBlock?.steps.findIndex((s) => s.id === connectingIds?.stepId),
+        sourceBlock?.stepIds.findIndex(
+          (stepId) => stepId === connectingIds?.source.stepId
+        ),
         targetedStepIndex
       )
       return computeFlowChartConnectorPath(anchorsPosition)
@@ -54,7 +49,9 @@ export const DrawingEdge = () => {
     return computeConnectingEdgePath(
       sourceBlock?.graphCoordinates,
       mousePosition,
-      sourceBlock.steps.findIndex((s) => s.id === connectingIds?.stepId)
+      sourceBlock.stepIds.findIndex(
+        (stepId) => stepId === connectingIds?.source.stepId
+      )
     )
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sourceBlock, mousePosition])
@@ -67,7 +64,8 @@ export const DrawingEdge = () => {
   }
   useEventListener('mousemove', handleMouseMove)
   useEventListener('mouseup', () => {
-    if (connectingIds?.target) updateTarget(connectingIds)
+    if (connectingIds?.target)
+      updateStep(connectingIds.source.stepId, { target: connectingIds.target })
     setConnectingIds(null)
   })
 

apps/builder/components/board/graph/Edges/Edge.tsx

@@ -1,6 +1,5 @@
-import { Block, StartStep, Step, Target } from 'bot-engine'
 import { Coordinates, useGraph } from 'contexts/GraphContext'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
 import {
   getAnchorsPosition,
@@ -14,58 +13,43 @@ export type AnchorsPositionProps = {
   totalSegments: number
 }
 
-export type StepWithTarget = Omit<Step | StartStep, 'target'> & {
-  target: Target
-}
-
-export const Edge = ({ step }: { step: StepWithTarget }) => {
+export const Edge = ({ stepId }: { stepId: string }) => {
   const { typebot } = useTypebot()
   const { previewingIds } = useGraph()
+  const step = typebot?.steps.byId[stepId]
   const isPreviewing = useMemo(
     () =>
-      previewingIds.sourceId === step.blockId &&
-      previewingIds.targetId === step.target.blockId,
-    [
-      previewingIds.sourceId,
-      previewingIds.targetId,
-      step.blockId,
-      step.target.blockId,
-    ]
+      previewingIds.sourceId === step?.blockId &&
+      previewingIds.targetId === step?.target?.blockId,
+    [previewingIds.sourceId, previewingIds.targetId, step]
   )
-  const { blocks, startBlock } = typebot ?? {}
 
   const { sourceBlock, targetBlock, targetStepIndex } = useMemo(() => {
-    const targetBlock = blocks?.find(
-      (b) => b?.id === step.target.blockId
-    ) as Block
+    if (!typebot) return {}
+    const step = typebot.steps.byId[stepId]
+    if (!step.target) return {}
+    const sourceBlock = typebot.blocks.byId[step.blockId]
+    const targetBlock = typebot.blocks.byId[step.target.blockId]
     const targetStepIndex = step.target.stepId
-      ? targetBlock.steps.findIndex((s) => s.id === step.target.stepId)
+      ? targetBlock.stepIds.indexOf(step.target.stepId)
       : undefined
     return {
-      sourceBlock: [startBlock, ...(blocks ?? [])].find(
-        (b) => b?.id === step.blockId
-      ),
+      sourceBlock,
       targetBlock,
       targetStepIndex,
     }
-  }, [
-    blocks,
-    startBlock,
-    step.blockId,
-    step.target.blockId,
-    step.target.stepId,
-  ])
+  }, [stepId, typebot])
 
   const path = useMemo(() => {
     if (!sourceBlock || !targetBlock) return ``
     const anchorsPosition = getAnchorsPosition(
       sourceBlock,
       targetBlock,
-      sourceBlock.steps.findIndex((s) => s.id === step.id),
+      sourceBlock.stepIds.indexOf(stepId),
       targetStepIndex
     )
     return computeFlowChartConnectorPath(anchorsPosition)
-  }, [sourceBlock, step.id, targetBlock, targetStepIndex])
+  }, [sourceBlock, stepId, targetBlock, targetStepIndex])
 
   return (
     <path

apps/builder/components/board/graph/Edges/Edges.tsx

@@ -1,21 +1,18 @@
 import { chakra } from '@chakra-ui/system'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
+import { isDefined } from 'utils'
 import { DrawingEdge } from './DrawingEdge'
-import { Edge, StepWithTarget } from './Edge'
+import { Edge } from './Edge'
 
 export const Edges = () => {
   const { typebot } = useTypebot()
-  const { blocks, startBlock } = typebot ?? {}
-  const stepsWithTarget: StepWithTarget[] = useMemo(() => {
-    if (!startBlock) return []
-    return [
-      ...(startBlock.steps.filter((s) => s.target) as StepWithTarget[]),
-      ...((blocks ?? [])
-        .flatMap((b) => b.steps)
-        .filter((s) => s.target) as StepWithTarget[]),
-    ]
-  }, [blocks, startBlock])
+  const stepIdsWithTarget: string[] = useMemo(() => {
+    if (!typebot) return []
+    return typebot.steps.allIds.filter((stepId) =>
+      isDefined(typebot.steps.byId[stepId].target)
+    )
+  }, [typebot])
 
   return (
     <chakra.svg
@@ -27,8 +24,8 @@ export const Edges = () => {
       top="0"
     >
       <DrawingEdge />
-      {stepsWithTarget.map((step) => (
-        <Edge key={step.id} step={step} />
+      {stepIdsWithTarget.map((stepId) => (
+        <Edge key={stepId} stepId={stepId} />
       ))}
       <marker
         id={'arrow'}