refactor(graph): ♻️ Add Edges table in Typebot

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

@@ -20,18 +20,17 @@ type Props = {
 }
 
 export const BlockNode = ({ block }: Props) => {
-  const { connectingIds, setConnectingIds, previewingIds } = useGraph()
+  const { connectingIds, setConnectingIds, previewingEdgeId } = useGraph()
   const { typebot, updateBlock } = useTypebot()
   const { setMouseOverBlockId } = useDnd()
   const { draggedStep, draggedStepType } = useDnd()
   const [isMouseDown, setIsMouseDown] = useState(false)
   const [isConnecting, setIsConnecting] = useState(false)
-  const isPreviewing = useMemo(
-    () =>
-      previewingIds.sourceId === block.id ||
-      previewingIds.targetId === block.id,
-    [block.id, previewingIds.sourceId, previewingIds.targetId]
-  )
+  const isPreviewing = useMemo(() => {
+    if (!previewingEdgeId) return
+    const edge = typebot?.edges.byId[previewingEdgeId]
+    return edge?.to.blockId === block.id || edge?.from.blockId === block.id
+  }, [block.id, previewingEdgeId, typebot?.edges.byId])
 
   useEffect(() => {
     setIsConnecting(

apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx

@@ -128,7 +128,7 @@ export const ChoiceItemNode = ({
               source={{
                 blockId: typebot.steps.byId[item.stepId].blockId,
                 stepId: item.stepId,
-                choiceItemId: item.id,
+                nodeId: item.id,
               }}
               pos="absolute"
               right="15px"

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -49,9 +49,7 @@ export const SettingsPopoverContent = ({ step, onExpandClick }: Props) => {
       <PopoverContent onMouseDown={handleMouseDown} pos="relative">
         <PopoverArrow />
         <PopoverBody
-          px="6"
-          pb="6"
-          pt="4"
+          p="6"
           overflowY="scroll"
           maxH="400px"
           ref={ref}

apps/builder/components/board/graph/BlockNode/StepNode/SourceEndpoint.tsx

@@ -1,12 +1,13 @@
 import { Box, BoxProps, Flex } from '@chakra-ui/react'
-import { ConnectingSourceIds, useGraph } from 'contexts/GraphContext'
+import { useGraph } from 'contexts/GraphContext'
+import { Source } from 'models'
 import React, { MouseEvent, useEffect, useRef } from 'react'
 
 export const SourceEndpoint = ({
   source,
   ...props
 }: BoxProps & {
-  source: ConnectingSourceIds
+  source: Source
 }) => {
   const { setConnectingIds, addSourceEndpoint: addEndpoint } = useGraph()
   const ref = useRef<HTMLDivElement | null>(null)
@@ -18,8 +19,7 @@ export const SourceEndpoint = ({
 
   useEffect(() => {
     if (!ref.current) return
-    const id =
-      source.choiceItemId ?? source.stepId + (source.conditionType ?? '')
+    const id = source.nodeId ?? source.stepId + (source.conditionType ?? '')
     addEndpoint({
       id,
       ref,

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

@@ -1,5 +1,4 @@
 import {
-  Box,
   Flex,
   HStack,
   Popover,
@@ -7,12 +6,11 @@ import {
   useDisclosure,
   useEventListener,
 } from '@chakra-ui/react'
-import React, { useEffect, useMemo, useState } from 'react'
-import { Block, DraggableStep, Step } from 'models'
+import React, { useEffect, useState } from 'react'
+import { DraggableStep, Step } from 'models'
 import { useGraph } from 'contexts/GraphContext'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
 import {
-  isDefined,
   isInputStep,
   isLogicStep,
   isTextBubbleStep,
@@ -50,7 +48,7 @@ export const StepNode = ({
 }) => {
   const { query } = useRouter()
   const { setConnectingIds, connectingIds } = useGraph()
-  const { moveStep, typebot } = useTypebot()
+  const { moveStep } = useTypebot()
   const [isConnecting, setIsConnecting] = useState(false)
   const [mouseDownEvent, setMouseDownEvent] =
     useState<{ absolute: Coordinates; relative: Coordinates }>()
@@ -132,30 +130,6 @@ export const StepNode = ({
     setIsEditing(false)
   }
 
-  const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
-    if (!typebot) return
-    const currentBlock = typebot.blocks?.byId[step.blockId]
-    const isDragginConnectorFromCurrentBlock =
-      connectingIds?.source.blockId === currentBlock?.id &&
-      connectingIds?.target?.blockId
-    const targetBlockId = isDragginConnectorFromCurrentBlock
-      ? connectingIds.target?.blockId
-      : step.target?.blockId
-    const targetedBlock = targetBlockId && typebot.blocks.byId[targetBlockId]
-    return targetedBlock
-      ? targetedBlock.graphCoordinates.x <
-        (currentBlock as Block).graphCoordinates.x
-        ? 'left'
-        : 'right'
-      : undefined
-  }, [
-    typebot,
-    step.blockId,
-    step.target?.blockId,
-    connectingIds?.source.blockId,
-    connectingIds?.target?.blockId,
-  ])
-
   return isEditing && isTextBubbleStep(step) ? (
     <TextEditor
       stepId={step.id}
@@ -184,16 +158,6 @@ export const StepNode = ({
               data-testid={`step-${step.id}`}
               w="full"
             >
-              {connectedStubPosition === 'left' && (
-                <Box
-                  h="2px"
-                  pos="absolute"
-                  left="-18px"
-                  top="25px"
-                  w="18px"
-                  bgColor="blue.500"
-                />
-              )}
               <HStack
                 flex="1"
                 userSelect="none"
@@ -225,24 +189,6 @@ export const StepNode = ({
                   />
                 )}
               </HStack>
-
-              {isDefined(connectedStubPosition) &&
-                hasDefaultConnector(step) &&
-                isConnectable && (
-                  <Box
-                    h="2px"
-                    pos="absolute"
-                    right={
-                      connectedStubPosition === 'left' ? undefined : '-18px'
-                    }
-                    left={
-                      connectedStubPosition === 'left' ? '-18px' : undefined
-                    }
-                    top="25px"
-                    w="18px"
-                    bgColor="gray.500"
-                  />
-                )}
             </Flex>
           </PopoverTrigger>
           {hasPopover(step) && (