blsmedia/bot
2
0
Fork 0
Code Activity

chore(editor): ♻️ Revert tables to arrays

Browse Source 
Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉
This commit is contained in:
Baptiste Arnaud
2022-02-04 19:00:08 +01:00
parent 8a350eee6c
commit 524ef0812c
123 changed files with 2998 additions and 3112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/StepNodeContent.tsx
View File

@ -6,11 +6,11 @@ import {
InputStepType,
LogicStepType,
IntegrationStepType,
StepIndices,
} from 'models'
import { isInputStep } from 'utils'
import { ButtonNodesList } from '../../ButtonNode'
import { ItemNodesList } from '../../ItemNode'
import {
ConditionContent,
SetVariableContent,
TextBubbleContent,
VideoBubbleContent,
@ -23,9 +23,9 @@ import { PlaceholderContent } from './contents/PlaceholderContent'
type Props = {
step: Step | StartStep
isConnectable?: boolean
indices: StepIndices
}
export const StepNodeContent = ({ step }: Props) => {
export const StepNodeContent = ({ step, indices }: Props) => {
if (isInputStep(step) && step.options.variableId) {
return <WithVariableContent step={step} />
}
@ -52,13 +52,13 @@ export const StepNodeContent = ({ step }: Props) => {
return <Text color={'gray.500'}>Pick a date...</Text>
}
case InputStepType.CHOICE: {
return <ButtonNodesList step={step} />
return <ItemNodesList step={step} indices={indices} />
}
case LogicStepType.SET_VARIABLE: {
return <SetVariableContent step={step} />
}
case LogicStepType.CONDITION: {
return <ConditionContent step={step} />
return <ItemNodesList step={step} indices={indices} isReadOnly />
}
case LogicStepType.REDIRECT: {
return (

57
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ConditionContent.tsx
View File

@ -1,57 +0,0 @@
import { Flex, Stack, HStack, Tag, Text } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { ConditionStep } from 'models'
import { SourceEndpoint } from '../../../../Endpoints/SourceEndpoint'
export const ConditionContent = ({ step }: { step: ConditionStep }) => {
const { typebot } = useTypebot()
return (
<Flex>
{step.options?.comparisons.allIds.length === 0 ? (
<Text color={'gray.500'}>Configure...</Text>
) : (
<Stack>
{step.options?.comparisons.allIds.map((comparisonId, idx) => {
const comparison = step.options?.comparisons.byId[comparisonId]
const variable =
typebot?.variables.byId[comparison?.variableId ?? '']
return (
<HStack key={comparisonId} spacing={1}>
{idx > 0 && <Text>{step.options?.logicalOperator ?? ''}</Text>}
{variable?.name && (
<Tag bgColor="orange.400">{variable.name}</Tag>
)}
{comparison.comparisonOperator && (
<Text>{comparison?.comparisonOperator}</Text>
)}
{comparison?.value && (
<Tag bgColor={'green.400'}>{comparison.value}</Tag>
)}
</HStack>
)
})}
</Stack>
)}
<SourceEndpoint
source={{
blockId: step.blockId,
stepId: step.id,
conditionType: 'true',
}}
pos="absolute"
top="7px"
right="15px"
/>
<SourceEndpoint
source={{
blockId: step.blockId,
stepId: step.id,
conditionType: 'false',
}}
pos="absolute"
bottom="7px"
right="15px"
/>
</Flex>
)
}

5
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SetVariableContent.tsx
View File

@ -1,12 +1,13 @@
import { Text } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { SetVariableStep } from 'models'
import { byId } from 'utils'
export const SetVariableContent = ({ step }: { step: SetVariableStep }) => {
const { typebot } = useTypebot()
const variableName =
typebot?.variables.byId[step.options?.variableId ?? '']?.name ?? ''
const expression = step.options?.expressionToEvaluate ?? ''
typebot?.variables.find(byId(step.options.variableId))?.name ?? ''
const expression = step.options.expressionToEvaluate ?? ''
return (
<Text color={'gray.500'}>
{variableName === '' && expression === ''

1
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/TextBubbleContent.tsx
View File

@ -10,6 +10,7 @@ type Props = {
export const TextBubbleContent = ({ step }: Props) => {
const { typebot } = useTypebot()
if (!typebot) return <></>
return (
<Flex
flexDir={'column'}

9
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WebhookContent.tsx
View File

@ -1,18 +1,11 @@
import { Text } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { WebhookStep } from 'models'
import { useMemo } from 'react'
type Props = {
step: WebhookStep
}
export const WebhookContent = ({ step }: Props) => {
const { typebot } = useTypebot()
const webhook = useMemo(
() => typebot?.webhooks.byId[step.options?.webhookId ?? ''],
[step.options?.webhookId, typebot?.webhooks.byId]
)
export const WebhookContent = ({ step: { webhook } }: Props) => {
if (!webhook?.url) return <Text color="gray.500">Configure...</Text>
return (
<Text isTruncated pr="6">

7
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WithVariableContent.tsx
View File

@ -2,6 +2,7 @@ import { InputStep } from 'models'
import { chakra, Text } from '@chakra-ui/react'
import React from 'react'
import { useTypebot } from 'contexts/TypebotContext'
import { byId } from 'utils'
type Props = {
step: InputStep
@ -9,8 +10,10 @@ type Props = {
export const WithVariableContent = ({ step }: Props) => {
const { typebot } = useTypebot()
const variableName =
typebot?.variables.byId[step.options.variableId as string].name
const variableName = typebot?.variables.find(
byId(step.options.variableId)
)?.name
return (
<Text>
Collect{' '}

1
apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/index.tsx
View File

@ -1,4 +1,3 @@
export * from './ConditionContent'
export * from './SetVariableContent'
export * from './WithVariableContent'
export * from './VideoBubbleContent'