🪥 Consult submissions

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

@@ -1,73 +1,110 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/jsx-key */
-import { Box, Flex } from '@chakra-ui/react'
+import { Box, Checkbox, Flex } from '@chakra-ui/react'
+import { Answer, Result } from 'bot-engine'
 import { useTypebot } from 'contexts/TypebotContext'
-import React from 'react'
-import { useTable } from 'react-table'
+import React, { useEffect } from 'react'
+import { Hooks, useRowSelect, useTable } from 'react-table'
 import { parseSubmissionsColumns } from 'services/publicTypebot'
+import { parseDateToReadable } from 'services/results'
+import { LoadingRows } from './LoadingRows'
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-type SubmissionsTableProps = {}
+type SubmissionsTableProps = {
+  results?: (Result & { answers: Answer[] })[]
+  onNewSelection: (selection: string[]) => void
+}
 
-export const SubmissionsTable = ({}: SubmissionsTableProps) => {
+export const SubmissionsTable = ({
+  results,
+  onNewSelection,
+}: SubmissionsTableProps) => {
   const { publishedTypebot } = useTypebot()
   const columns: any = React.useMemo(
     () => parseSubmissionsColumns(publishedTypebot),
     [publishedTypebot]
   )
-  const data = React.useMemo(() => [], [])
-  const { getTableProps, headerGroups, rows, prepareRow, getTableBodyProps } =
-    useTable({ columns, data })
+  const data = React.useMemo(
+    () =>
+      (results ?? []).map((result) => ({
+        createdAt: parseDateToReadable(result.createdAt),
+        ...result.answers.reduce(
+          (o, answer) => ({ ...o, [answer.blockId]: answer.content }),
+          {}
+        ),
+      })),
+    [results]
+  )
+
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    getTableBodyProps,
+    selectedFlatRows,
+  } = useTable({ columns, data }, useRowSelect, checkboxColumnHook) as any
+
+  useEffect(() => {
+    onNewSelection(selectedFlatRows.map((row: any) => row.id))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedFlatRows])
+
   return (
     <Flex overflowX="scroll" maxW="full" className="table-wrapper" rounded="md">
-      <Box as="table" rounded="md" {...getTableProps()}>
+      <Box as="table" rounded="md" {...getTableProps()} w="full">
         <Box as="thead">
-          {headerGroups.map((headerGroup) => {
+          {headerGroups.map((headerGroup: any) => {
             return (
-              <Box as="tr" {...headerGroup.getHeaderGroupProps()}>
-                {headerGroup.headers.map((column) => {
+              <Flex as="tr" {...headerGroup.getHeaderGroupProps()}>
+                {headerGroup.headers.map((column: any, idx: number) => {
                   return (
-                    <Box
+                    <Flex
                       py={2}
                       px={4}
                       border="1px"
                       borderColor="gray.200"
                       as="th"
-                      minW="200px"
                       color="gray.500"
                       fontWeight="normal"
                       textAlign="left"
+                      minW={idx > 0 ? '200px' : 'unset'}
+                      flex={idx > 0 ? '1' : '0'}
                       {...column.getHeaderProps()}
                     >
                       {column.render('Header')}
-                    </Box>
+                    </Flex>
                   )
                 })}
-              </Box>
+              </Flex>
             )
           })}
         </Box>
 
         <Box as="tbody" {...getTableBodyProps()}>
-          {rows.map((row) => {
+          {results === undefined && (
+            <LoadingRows totalColumns={columns.length} />
+          )}
+          {rows.map((row: any) => {
             prepareRow(row)
             return (
-              <Box as="tr" {...row.getRowProps()}>
-                {row.cells.map((cell) => {
+              <Flex as="tr" {...row.getRowProps()}>
+                {row.cells.map((cell: any, idx: number) => {
                   return (
-                    <Box
+                    <Flex
                       py={2}
                       px={4}
                       border="1px"
                       as="td"
-                      minW="200px"
                       borderColor="gray.200"
+                      minW={idx > 0 ? '200px' : 'unset'}
                       {...cell.getCellProps()}
+                      flex={idx > 0 ? '1' : '0'}
                     >
                       {cell.render('Cell')}
-                    </Box>
+                    </Flex>
                   )
                 })}
-              </Box>
+              </Flex>
             )
           })}
         </Box>
@@ -75,3 +112,34 @@ export const SubmissionsTable = ({}: SubmissionsTableProps) => {
     </Flex>
   )
 }
+
+const checkboxColumnHook = (hooks: Hooks<any>) => {
+  hooks.visibleColumns.push((columns) => [
+    {
+      id: 'selection',
+      Header: ({ getToggleAllRowsSelectedProps }: any) => (
+        <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
+      ),
+      Cell: ({ row }: any) => (
+        <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
+      ),
+    },
+    ...columns,
+  ])
+}
+
+const IndeterminateCheckbox = React.forwardRef(
+  ({ indeterminate, checked, ...rest }: any, ref) => {
+    const defaultRef = React.useRef()
+    const resolvedRef: any = ref || defaultRef
+
+    return (
+      <Checkbox
+        ref={resolvedRef}
+        {...rest}
+        isIndeterminate={indeterminate}
+        isChecked={checked}
+      />
+    )
+  }
+)