blsmedia/bot
2
0
Fork 0
Code Activity

⚗️ Add delete results logic

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-04 09:15:33 +01:00
parent 6db34a8d4f
commit 8ddf608c9e
6 changed files with 218 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/builder/components/results/SubmissionsTable/SubmissionsTable.tsx
View File

@ -4,11 +4,13 @@ import { Box, Checkbox, Flex } from '@chakra-ui/react'
import { Answer, Result } from 'bot-engine'
import { useTypebot } from 'contexts/TypebotContext'
import React, { useEffect } from 'react'
import { Hooks, useRowSelect, useTable } from 'react-table'
import { Hooks, useFlexLayout, useRowSelect, useTable } from 'react-table'
import { parseSubmissionsColumns } from 'services/publicTypebot'
import { parseDateToReadable } from 'services/results'
import { LoadingRows } from './LoadingRows'
const defaultCellWidth = 180
type SubmissionsTableProps = {
results?: (Result & { answers: Answer[] })[]
onNewSelection: (selection: string[]) => void
@ -42,10 +44,16 @@ export const SubmissionsTable = ({
prepareRow,
getTableBodyProps,
selectedFlatRows,
} = useTable({ columns, data }, useRowSelect, checkboxColumnHook) as any
} = useTable(
{ columns, data, defaultColumn: { width: defaultCellWidth } },
useRowSelect,
checkboxColumnHook,
useFlexLayout
) as any
useEffect(() => {
onNewSelection(selectedFlatRows.map((row: any) => row.id))
if (!results) return
onNewSelection(selectedFlatRows.map((row: any) => results[row.index].id))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedFlatRows])
@ -67,9 +75,10 @@ export const SubmissionsTable = ({
color="gray.500"
fontWeight="normal"
textAlign="left"
minW={idx > 0 ? '200px' : 'unset'}
flex={idx > 0 ? '1' : '0'}
{...column.getHeaderProps()}
style={{
width: idx === 0 ? '50px' : `${defaultCellWidth}px`,
}}
>
{column.render('Header')}
</Flex>
@ -96,9 +105,10 @@ export const SubmissionsTable = ({
border="1px"
as="td"
borderColor="gray.200"
minW={idx > 0 ? '200px' : 'unset'}
{...cell.getCellProps()}
flex={idx > 0 ? '1' : '0'}
style={{
width: idx === 0 ? '50px' : `${defaultCellWidth}px`,
}}
>
{cell.render('Cell')}
</Flex>

112
apps/builder/cypress/plugins/database.ts
View File

@ -1,4 +1,4 @@
import { parseNewTypebot } from 'bot-engine'
import { parseNewTypebot, PublicTypebot, StepType, Typebot } from 'bot-engine'
import { Plan, PrismaClient } from 'db'
const prisma = new PrismaClient()
@ -9,7 +9,9 @@ export const seedDb = async () => {
await teardownTestData()
await createUsers()
await createFolders()
return createTypebots()
await createTypebots()
await createResults()
return createAnswers()
}
const createUsers = () =>
@ -31,8 +33,38 @@ const createFolders = () =>
data: [{ ownerId: 'test2', name: 'Folder #1', id: 'folder1' }],
})
const createTypebots = () => {
return prisma.typebot.createMany({
const createTypebots = async () => {
const typebot2: Typebot = {
...(parseNewTypebot({
name: 'Typebot #2',
ownerId: 'test2',
folderId: null,
}) as Typebot),
id: 'typebot2',
startBlock: {
id: 'start-block',
steps: [
{
id: 'start-step',
blockId: 'start-block',
type: StepType.START,
label: 'Start',
target: { blockId: 'block1' },
},
],
graphCoordinates: { x: 0, y: 0 },
title: 'Start',
},
blocks: [
{
title: 'Block #1',
id: 'block1',
steps: [{ id: 'step1', type: StepType.TEXT_INPUT, blockId: 'block1' }],
graphCoordinates: { x: 200, y: 200 },
},
],
}
await prisma.typebot.createMany({
data: [
{
...parseNewTypebot({
@ -42,14 +74,74 @@ const createTypebots = () => {
}),
id: 'typebot1',
},
typebot2,
],
})
return prisma.publicTypebot.createMany({
data: [parseTypebotToPublicTypebot('publictypebot2', typebot2)],
})
}
const createResults = () => {
return prisma.result.createMany({
data: [
{
...parseNewTypebot({
name: 'Typebot #2',
ownerId: 'test2',
folderId: null,
}),
id: 'typebot2',
typebotId: 'typebot1',
},
{
typebotId: 'typebot1',
},
{
id: 'result1',
typebotId: 'typebot2',
},
{
id: 'result2',
typebotId: 'typebot2',
},
{
id: 'result3',
typebotId: 'typebot2',
},
],
})
}
const createAnswers = () => {
return prisma.answer.createMany({
data: [
{
resultId: 'result1',
content: 'content 1',
stepId: 'step1',
blockId: 'block1',
},
{
resultId: 'result2',
content: 'content 2',
stepId: 'step1',
blockId: 'block1',
},
{
resultId: 'result3',
content: 'content 3',
stepId: 'step1',
blockId: 'block1',
},
],
})
}
const parseTypebotToPublicTypebot = (
id: string,
typebot: Typebot
): PublicTypebot => ({
id,
blocks: typebot.blocks,
name: typebot.name,
startBlock: typebot.startBlock,
typebotId: typebot.id,
theme: typebot.theme,
settings: typebot.settings,
publicId: typebot.publicId,
})

31
apps/builder/cypress/tests/results.ts Normal file
View File

@ -0,0 +1,31 @@
describe('ResultsPage', () => {
before(() => {
cy.intercept({ url: '/api/typebots/typebot2/results?', method: 'GET' }).as(
'getResults'
)
})
beforeEach(() => {
cy.task('seed')
cy.signOut()
})
it('results should be deletable', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot2/results')
cy.wait('@getResults')
cy.findByText('content 2').should('exist')
cy.findByText('content 3').should('exist')
cy.findAllByRole('checkbox').eq(2).check({ force: true })
cy.findAllByRole('checkbox').eq(3).check({ force: true })
cy.findByRole('button', { name: 'Delete 2' }).click()
cy.findByRole('button', { name: 'Delete' }).click()
cy.findByText('content 2').should('not.exist')
cy.findByText('content 3').should('not.exist')
})
it.only('submissions table should have infinite scroll', () => {
cy.signIn('test2@gmail.com')
cy.visit('/typebots/typebot2/results')
cy.wait('@getResults')
})
})

50
apps/builder/layouts/results/SubmissionContent.tsx
View File

@ -7,23 +7,28 @@ import {
Text,
Fade,
Flex,
useDisclosure,
} from '@chakra-ui/react'
import { DownloadIcon, TrashIcon } from 'assets/icons'
import { ConfirmModal } from 'components/modals/ConfirmModal'
import { SubmissionsTable } from 'components/results/SubmissionsTable'
import React, { useMemo, useState } from 'react'
import { useResults } from 'services/results'
import { deleteResults, useResults } from 'services/results'
type Props = { typebotId: string; totalResults: number }
export const SubmissionsContent = ({ typebotId, totalResults }: Props) => {
const [lastResultId, setLastResultId] = useState<string>()
const [selectedIds, setSelectedIds] = useState<string[]>([])
const [isDeleteLoading, setIsDeleteLoading] = useState(false)
const { isOpen, onOpen, onClose } = useDisclosure()
const toast = useToast({
position: 'top-right',
status: 'error',
})
const { results } = useResults({
const { results, mutate } = useResults({
lastResultId,
typebotId,
onError: (err) => toast({ title: err.name, description: err.message }),
@ -34,6 +39,19 @@ export const SubmissionsContent = ({ typebotId, totalResults }: Props) => {
setSelectedIds(newSelection)
}
const handleDeleteSelection = async () => {
setIsDeleteLoading(true)
const { error } = await deleteResults(typebotId, selectedIds)
if (error) toast({ description: error.message, title: error.name })
else
mutate({
results: (results ?? []).filter((result) =>
selectedIds.includes(result.id)
),
})
setIsDeleteLoading(false)
}
const totalSelected = useMemo(
() =>
selectedIds.length === results?.length
@ -49,14 +67,22 @@ export const SubmissionsContent = ({ typebotId, totalResults }: Props) => {
<HStack as={Button} colorScheme="blue">
<DownloadIcon />
<Text>Export</Text>
<Fade in={totalSelected > 0} unmountOnExit>
<Fade
in={totalSelected > 0 && (results ?? []).length > 0}
unmountOnExit
>
<Tag colorScheme="blue" variant="subtle" size="sm">
{totalSelected}
</Tag>
</Fade>
</HStack>
<Fade in={totalSelected > 0} unmountOnExit>
<HStack as={Button} colorScheme="red">
<HStack
as={Button}
colorScheme="red"
onClick={onOpen}
isLoading={isDeleteLoading}
>
<TrashIcon />
<Text>Delete</Text>
{totalSelected > 0 && (
@ -64,6 +90,22 @@ export const SubmissionsContent = ({ typebotId, totalResults }: Props) => {
{totalSelected}
</Tag>
)}
<ConfirmModal
isOpen={isOpen}
onConfirm={handleDeleteSelection}
onClose={onClose}
message={
<Text>
You are about to delete{' '}
<strong>
{totalSelected} submission
{totalSelected > 0 ? 's' : ''}
</strong>
. Are you sure you wish to continue?
</Text>
}
confirmButtonLabel={'Delete'}
/>
</HStack>
</Fade>
</HStack>

8
apps/builder/pages/api/typebots/[typebotId]/results.ts
View File

@ -34,6 +34,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
})
return res.status(200).send({ results })
}
if (req.method === 'DELETE') {
const typebotId = req.query.typebotId.toString()
const ids = req.query.ids as string[]
const results = await prisma.result.deleteMany({
where: { id: { in: ids }, typebotId, typebot: { ownerId: user.id } },
})
return res.status(200).send({ results })
}
return methodNotAllowed(res)
}

15
apps/builder/services/results.ts
View File

@ -1,6 +1,6 @@
import { Result } from 'bot-engine'
import useSWR from 'swr'
import { fetcher } from './utils'
import { fetcher, sendRequest } from './utils'
import { stringify } from 'qs'
import { Answer } from 'db'
@ -28,6 +28,19 @@ export const useResults = ({
}
}
export const deleteResults = async (typebotId: string, ids: string[]) => {
const params = stringify(
{
ids,
},
{ indices: false }
)
return sendRequest({
url: `/api/typebots/${typebotId}/results?${params}`,
method: 'DELETE',
})
}
export const parseDateToReadable = (dateStr: string): string => {
const date = new Date(dateStr)
return (