chore(editor): ♻️ Revert tables to arrays

Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉

apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx

@@ -3,7 +3,6 @@ import assert from 'assert'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import { useGraph, ConnectingIds } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import { Target } from 'models'
 import React, { useMemo, useState } from 'react'
 import {
   computeConnectingEdgePath,
@@ -20,28 +19,26 @@ export const DrawingEdge = () => {
     targetEndpoints,
     blocksCoordinates,
   } = useGraph()
-  const { typebot, createEdge } = useTypebot()
+  const { createEdge } = useTypebot()
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
 
-  const sourceBlock = useMemo(
-    () => connectingIds && typebot?.blocks.byId[connectingIds.source.blockId],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [connectingIds]
-  )
+  const sourceBlockCoordinates =
+    blocksCoordinates && blocksCoordinates[connectingIds?.source.blockId ?? '']
+  const targetBlockCoordinates =
+    blocksCoordinates && blocksCoordinates[connectingIds?.target?.blockId ?? '']
 
   const sourceTop = useMemo(() => {
-    if (!sourceBlock || !connectingIds) return 0
+    if (!connectingIds) return 0
     return getEndpointTopOffset(
       graphPosition,
       sourceEndpoints,
-      connectingIds.source.buttonId ??
-        connectingIds.source.stepId + (connectingIds.source.conditionType ?? '')
+      connectingIds.source.itemId ?? connectingIds.source.stepId
     )
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphPosition, sourceEndpoints, connectingIds])
 
   const targetTop = useMemo(() => {
-    if (!sourceBlock || !connectingIds) return 0
+    if (!connectingIds) return 0
     return getEndpointTopOffset(
       graphPosition,
       targetEndpoints,
@@ -51,35 +48,24 @@ export const DrawingEdge = () => {
   }, [graphPosition, targetEndpoints, connectingIds])
 
   const path = useMemo(() => {
-    if (
-      !sourceBlock ||
-      !typebot ||
-      !connectingIds ||
-      !blocksCoordinates ||
-      !sourceTop
-    )
-      return ``
+    if (!sourceTop || !sourceBlockCoordinates) return ``
 
-    return connectingIds?.target
+    return targetBlockCoordinates
       ? computeConnectingEdgePath({
-          connectingIds: connectingIds as Omit<ConnectingIds, 'target'> & {
-            target: Target
-          },
+          sourceBlockCoordinates,
+          targetBlockCoordinates,
           sourceTop,
           targetTop,
-          blocksCoordinates,
         })
       : computeEdgePathToMouse({
-          blockPosition: blocksCoordinates.byId[sourceBlock.id],
+          sourceBlockCoordinates,
           mousePosition,
           sourceTop,
         })
   }, [
-    sourceBlock,
-    typebot,
-    connectingIds,
-    blocksCoordinates,
     sourceTop,
+    sourceBlockCoordinates,
+    targetBlockCoordinates,
     targetTop,
     mousePosition,
   ])

apps/builder/components/shared/Graph/Edges/Edge.tsx

@@ -1,5 +1,4 @@
 import { Coordinates, useGraph } from 'contexts/GraphContext'
-import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
 import {
   getAnchorsPosition,
@@ -7,6 +6,7 @@ import {
   getEndpointTopOffset,
   getSourceEndpointId,
 } from 'services/graph'
+import { Edge as EdgeProps } from 'models'
 
 export type AnchorsPositionProps = {
   sourcePosition: Coordinates
@@ -15,28 +15,20 @@ export type AnchorsPositionProps = {
   totalSegments: number
 }
 
-export const Edge = ({ edgeId }: { edgeId: string }) => {
-  const { typebot } = useTypebot()
+export const Edge = ({ edge }: { edge: EdgeProps }) => {
   const {
-    previewingEdgeId,
+    previewingEdge,
     sourceEndpoints,
     targetEndpoints,
     graphPosition,
     blocksCoordinates,
   } = useGraph()
-  const edge = useMemo(
-    () => typebot?.edges.byId[edgeId],
-    [edgeId, typebot?.edges.byId]
-  )
-  const isPreviewing = previewingEdgeId === edgeId
-
-  const sourceBlock = edge && typebot?.blocks.byId[edge.from.blockId]
-  const targetBlock = edge && typebot?.blocks.byId[edge.to.blockId]
+  const isPreviewing = previewingEdge?.id === edge.id
 
   const sourceBlockCoordinates =
-    sourceBlock && blocksCoordinates?.byId[sourceBlock.id]
+    blocksCoordinates && blocksCoordinates[edge.from.blockId]
   const targetBlockCoordinates =
-    targetBlock && blocksCoordinates?.byId[targetBlock.id]
+    blocksCoordinates && blocksCoordinates[edge.to.blockId]
 
   const sourceTop = useMemo(
     () =>
@@ -77,6 +69,7 @@ export const Edge = ({ edgeId }: { edgeId: string }) => {
   if (sourceTop === 0) return <></>
   return (
     <path
+      data-testid="edge"
       d={path}
       stroke={isPreviewing ? '#1a5fff' : '#718096'}
       strokeWidth="2px"

apps/builder/components/shared/Graph/Edges/Edges.tsx

@@ -1,12 +1,13 @@
 import { chakra } from '@chakra-ui/system'
-import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { Edge as EdgeProps } from 'models'
 import React from 'react'
 import { DrawingEdge } from './DrawingEdge'
 import { Edge } from './Edge'
 
-export const Edges = () => {
-  const { typebot } = useTypebot()
-
+type Props = {
+  edges: EdgeProps[]
+}
+export const Edges = ({ edges }: Props) => {
   return (
     <chakra.svg
       width="full"
@@ -17,8 +18,8 @@ export const Edges = () => {
       top="0"
     >
       <DrawingEdge />
-      {typebot?.edges.allIds.map((edgeId) => (
-        <Edge key={edgeId} edgeId={edgeId} />
+      {edges.map((edge) => (
+        <Edge key={edge.id} edge={edge} />
       ))}
       <marker
         id={'arrow'}