fix(results): 🐛 Display results for blocks w/ multiple inputs

apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx

@@ -2,14 +2,13 @@
 /* eslint-disable react/jsx-key */
 import { Button, chakra, Checkbox, Flex, HStack, Text } from '@chakra-ui/react'
 import { AlignLeftTextIcon } from 'assets/icons'
-import { PublicTypebot } from 'models'
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Hooks, useRowSelect, useTable } from 'react-table'
-import { parseSubmissionsColumns } from 'services/publicTypebot'
+import { parseSubmissionsColumns, ResultHeaderCell } from 'services/typebots'
 import { LoadingRows } from './LoadingRows'
 
 type SubmissionsTableProps = {
-  blocksAndVariables: Pick<PublicTypebot, 'blocks' | 'variables'>
+  resultHeader: ResultHeaderCell[]
   data?: any
   hasMore?: boolean
   onNewSelection: (indices: number[]) => void
@@ -18,16 +17,16 @@ type SubmissionsTableProps = {
 }
 
 export const SubmissionsTable = ({
-  blocksAndVariables,
+  resultHeader,
   data,
   hasMore,
   onNewSelection,
   onScrollToBottom,
   onLogOpenIndex,
 }: SubmissionsTableProps) => {
   const columns: any = useMemo(
-    () => parseSubmissionsColumns(blocksAndVariables),
-    [blocksAndVariables]
+    () => parseSubmissionsColumns(resultHeader),
+    [resultHeader]
   )
   const bottomElement = useRef<HTMLDivElement | null>(null)
   const tableWrapper = useRef<HTMLDivElement | null>(null)

apps/builder/layouts/results/SubmissionContent.tsx

@@ -7,6 +7,7 @@ import {
   deleteAllResults,
   deleteResults,
   getAllResults,
+  parseResultHeader,
   useResults,
 } from 'services/typebots'
 import { unparse } from 'papaparse'
@@ -49,6 +50,8 @@ export const SubmissionsContent = ({
     ].filter(isDefined),
   }
 
+  const resultHeader = parseResultHeader(blocksAndVariables)
+
   const { data, mutate, setSize, hasMore } = useResults({
     typebotId,
     onError: (err) => toast({ title: err.name, description: err.message }),
@@ -117,14 +120,12 @@ export const SubmissionsContent = ({
     if (!publishedTypebot) return []
     const { data, error } = await getAllResults(typebotId)
     if (error) toast({ description: error.message, title: error.name })
-    return convertResultsToTableData(blocksAndVariables)(data?.results)
+    return convertResultsToTableData(data?.results, resultHeader)
   }
 
   const tableData: { [key: string]: string }[] = useMemo(
     () =>
-      publishedTypebot
-        ? convertResultsToTableData(blocksAndVariables)(results)
-        : [],
+      publishedTypebot ? convertResultsToTableData(results, resultHeader) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [results]
   )
@@ -159,7 +160,7 @@ export const SubmissionsContent = ({
       </Flex>
 
       <SubmissionsTable
-        blocksAndVariables={blocksAndVariables}
+        resultHeader={resultHeader}
         data={tableData}
         onNewSelection={handleNewSelection}
         onScrollToBottom={handleScrolledToBottom}

apps/builder/services/publicTypebot.tsx

@@ -1,9 +1,6 @@
-import { Block, PublicTypebot, Typebot, Variable } from 'models'
+import { PublicTypebot, Typebot } from 'models'
 import shortId from 'short-uuid'
-import { HStack, Text } from '@chakra-ui/react'
-import { CalendarIcon, CodeIcon } from 'assets/icons'
-import { StepIcon } from 'components/editor/StepsSideBar/StepIcon'
-import { byId, isInputStep, sendRequest } from 'utils'
+import { sendRequest } from 'utils'
 
 export const parseTypebotToPublicTypebot = (
   typebot: Typebot
@@ -58,96 +55,3 @@ export const updatePublishedTypebot = async (
     method: 'PUT',
     body: typebot,
   })
-
-type HeaderCell = {
-  Header: JSX.Element
-  accessor: string
-}
-
-export const parseSubmissionsColumns = (blocksAndVariables: {
-  blocks: Block[]
-  variables: Variable[]
-}): HeaderCell[] => {
-  const parsedBlocks = parseBlocksHeaders(blocksAndVariables)
-  return [
-    {
-      Header: (
-        <HStack>
-          <CalendarIcon />
-          <Text>Submitted at</Text>
-        </HStack>
-      ),
-      accessor: 'Submitted at',
-    },
-    ...parsedBlocks,
-    ...parseVariablesHeaders(blocksAndVariables.variables, parsedBlocks),
-  ]
-}
-
-const parseBlocksHeaders = ({
-  blocks,
-  variables,
-}: {
-  blocks: Block[]
-  variables: Variable[]
-}) =>
-  blocks
-    .filter((block) => block.steps.some((step) => isInputStep(step)))
-    .reduce<HeaderCell[]>((headers, block) => {
-      const inputStep = block.steps.find((step) => isInputStep(step))
-      if (
-        !inputStep ||
-        !isInputStep(inputStep) ||
-        headers.find(
-          (h) =>
-            h.accessor ===
-            variables.find(byId(inputStep.options.variableId))?.name
-        )
-      )
-        return headers
-      const matchedVariableName =
-        inputStep.options.variableId &&
-        variables.find(byId(inputStep.options.variableId))?.name
-      return [
-        ...headers,
-        {
-          Header: (
-            <HStack
-              minW={
-                'isLong' in inputStep.options && inputStep.options.isLong
-                  ? '400px'
-                  : '150px'
-              }
-              maxW="500px"
-            >
-              <StepIcon type={inputStep.type} />
-              <Text>{matchedVariableName ?? block.title}</Text>
-            </HStack>
-          ),
-          accessor: matchedVariableName ?? block.title,
-        },
-      ]
-    }, [])
-
-const parseVariablesHeaders = (
-  variables: Variable[],
-  parsedBlocks: {
-    Header: JSX.Element
-    accessor: string
-  }[]
-) =>
-  variables.reduce<HeaderCell[]>((headers, v) => {
-    if (parsedBlocks.find((b) => b.accessor === v.name)) return headers
-    return [
-      ...headers,
-      {
-        Header: (
-          <HStack minW={'150px'} maxW="500px">
-            <CodeIcon />
-            <Text>{v.name}</Text>
-          </HStack>
-        ),
-        accessor: v.name,
-      },
-    ]
-  }, [])