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/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx
@ -0,0 +1,104 @@
+import { Text } from '@chakra-ui/react'
+import {
+  Step,
+  StartStep,
+  BubbleStepType,
+  InputStepType,
+  LogicStepType,
+  IntegrationStepType,
+} from 'models'
+import { isInputStep } from 'utils'
+import { ButtonNodesList } from '../../ButtonNode'
+import {
+  ConditionContent,
+  SetVariableContent,
+  TextBubbleContent,
+  VideoBubbleContent,
+  WebhookContent,
+  WithVariableContent,
+} from './contents'
+import { ConfigureContent } from './contents/ConfigureContent'
+import { ImageBubbleContent } from './contents/ImageBubbleContent'
+import { PlaceholderContent } from './contents/PlaceholderContent'
+
+type Props = {
+  step: Step | StartStep
+  isConnectable?: boolean
+}
+export const StepNodeContent = ({ step }: Props) => {
+  if (isInputStep(step) && step.options.variableId) {
+    return <WithVariableContent step={step} />
+  }
+  switch (step.type) {
+    case BubbleStepType.TEXT: {
+      return <TextBubbleContent step={step} />
+    }
+    case BubbleStepType.IMAGE: {
+      return <ImageBubbleContent step={step} />
+    }
+    case BubbleStepType.VIDEO: {
+      return <VideoBubbleContent step={step} />
+    }
+    case InputStepType.TEXT:
+    case InputStepType.NUMBER:
+    case InputStepType.EMAIL:
+    case InputStepType.URL:
+    case InputStepType.PHONE: {
+      return (
+        <PlaceholderContent placeholder={step.options.labels.placeholder} />
+      )
+    }
+    case InputStepType.DATE: {
+      return <Text color={'gray.500'}>Pick a date...</Text>
+    }
+    case InputStepType.CHOICE: {
+      return <ButtonNodesList step={step} />
+    }
+    case LogicStepType.SET_VARIABLE: {
+      return <SetVariableContent step={step} />
+    }
+    case LogicStepType.CONDITION: {
+      return <ConditionContent step={step} />
+    }
+    case LogicStepType.REDIRECT: {
+      return (
+        <ConfigureContent
+          label={
+            step.options?.url ? `Redirect to ${step.options?.url}` : undefined
+          }
+        />
+      )
+    }
+    case IntegrationStepType.GOOGLE_SHEETS: {
+      return (
+        <ConfigureContent
+          label={
+            step.options && 'action' in step.options
+              ? step.options.action
+              : undefined
+          }
+        />
+      )
+    }
+    case IntegrationStepType.GOOGLE_ANALYTICS: {
+      return (
+        <ConfigureContent
+          label={
+            step.options?.action
+              ? `Track "${step.options?.action}" `
+              : undefined
+          }
+        />
+      )
+    }
+    case IntegrationStepType.WEBHOOK: {
+      return <WebhookContent step={step} />
+    }
+    case 'start': {
+      return <Text>Start</Text>
+    }
+    default: {
+      return <Text>No input</Text>
+    }
+  }
+}