refactor(editor): ♻️ Undo / Redo buttons + structure refacto

Yet another huge refacto... While implementing undo and redo features I understood that I updated the stored typebot too many times (i.e. on each key input) so I had to rethink it entirely. I also moved around some files.
2022-02-02 08:05:02 +01:00
parent fc1d654772
commit 8a350eee6c
153 changed files with 1512 additions and 1352 deletions
--- a/apps/builder/components/editor/preview/PreviewDrawer.tsx
+++ b/apps/builder/components/editor/preview/PreviewDrawer.tsx
@ -0,0 +1,117 @@
+import {
+  Box,
+  Button,
+  CloseButton,
+  Fade,
+  Flex,
+  FlexProps,
+  useEventListener,
+  VStack,
+} from '@chakra-ui/react'
+import { TypebotViewer } from 'bot-engine'
+import { headerHeight } from 'components/shared/TypebotHeader'
+import { useEditor } from 'contexts/EditorContext'
+import { useGraph } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import React, { useMemo, useState } from 'react'
+import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
+
+export const PreviewDrawer = () => {
+  const { typebot } = useTypebot()
+  const { setRightPanel } = useEditor()
+  const { setPreviewingEdgeId } = useGraph()
+  const [isResizing, setIsResizing] = useState(false)
+  const [width, setWidth] = useState(500)
+  const [isResizeHandleVisible, setIsResizeHandleVisible] = useState(false)
+  const [restartKey, setRestartKey] = useState(0)
+
+  const publicTypebot = useMemo(
+    () => (typebot ? { ...parseTypebotToPublicTypebot(typebot) } : undefined),
+    [typebot]
+  )
+
+  const handleMouseDown = () => {
+    setIsResizing(true)
+  }
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isResizing) return
+    setWidth(width - e.movementX)
+  }
+  useEventListener('mousemove', handleMouseMove)
+
+  const handleMouseUp = () => {
+    setIsResizing(false)
+  }
+  useEventListener('mouseup', handleMouseUp)
+
+  const handleNewBlockVisible = (edgeId: string) => setPreviewingEdgeId(edgeId)
+
+  const handleRestartClick = () => setRestartKey((key) => key + 1)
+
+  return (
+    <Flex
+      pos="absolute"
+      right="0"
+      top={`0`}
+      h={`100%`}
+      w={`${width}px`}
+      bgColor="white"
+      shadow="lg"
+      borderLeftRadius={'lg'}
+      onMouseOver={() => setIsResizeHandleVisible(true)}
+      onMouseLeave={() => setIsResizeHandleVisible(false)}
+      p="6"
+    >
+      <Fade in={isResizeHandleVisible}>
+        <ResizeHandle
+          pos="absolute"
+          left="-7.5px"
+          top={`calc(50% - ${headerHeight}px)`}
+          onMouseDown={handleMouseDown}
+        />
+      </Fade>
+
+      <VStack w="full" spacing={4}>
+        <Flex justifyContent={'space-between'} w="full">
+          <Button onClick={handleRestartClick}>Restart</Button>
+          <CloseButton onClick={() => setRightPanel(undefined)} />
+        </Flex>
+
+        {publicTypebot && (
+          <Flex
+            borderWidth={'1px'}
+            borderRadius={'lg'}
+            h="full"
+            w="full"
+            key={restartKey}
+            pointerEvents={isResizing ? 'none' : 'auto'}
+          >
+            <TypebotViewer
+              typebot={publicTypebot}
+              onNewBlockVisible={handleNewBlockVisible}
+            />
+          </Flex>
+        )}
+      </VStack>
+    </Flex>
+  )
+}
+
+const ResizeHandle = (props: FlexProps) => {
+  return (
+    <Flex
+      w="15px"
+      h="50px"
+      borderWidth={'1px'}
+      bgColor={'white'}
+      cursor={'col-resize'}
+      justifyContent={'center'}
+      align={'center'}
+      {...props}
+    >
+      <Box w="2px" bgColor={'gray.300'} h="70%" mr="0.5" />
+      <Box w="2px" bgColor={'gray.300'} h="70%" />
+    </Flex>
+  )
+}