From 3ab67902c0b305d33902bbd79c92284701b5f527 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Fri, 10 Feb 2023 15:50:25 +0100 Subject: [PATCH] :children_crossing: (results) Show deleted block answers if any Also remove useEffects in ResultsTable. --- .../src/features/results/ResultsProvider.tsx | 11 ++- .../ResultsTable/ColumnsSettingsButton.tsx | 2 +- .../components/ResultsTable/ResultsTable.tsx | 93 +++++++++++-------- packages/db/index.ts | 8 ++ packages/utils/results.ts | 34 ++++++- 5 files changed, 104 insertions(+), 44 deletions(-) diff --git a/apps/builder/src/features/results/ResultsProvider.tsx b/apps/builder/src/features/results/ResultsProvider.tsx index 0495e511e..4cef3f792 100644 --- a/apps/builder/src/features/results/ResultsProvider.tsx +++ b/apps/builder/src/features/results/ResultsProvider.tsx @@ -41,12 +41,17 @@ export const ResultsProvider = ({ }, }) + const flatResults = useMemo( + () => data?.flatMap((d) => d.results) ?? [], + [data] + ) + const resultHeader = useMemo( () => publishedTypebot - ? parseResultHeader(publishedTypebot, linkedTypebots) + ? parseResultHeader(publishedTypebot, linkedTypebots, flatResults) : [], - [linkedTypebots, publishedTypebot] + [flatResults, linkedTypebots, publishedTypebot] ) const tableData = useMemo( @@ -64,7 +69,7 @@ export const ResultsProvider = ({ d.results) ?? [], + flatResults, hasNextPage: hasNextPage ?? true, tableData, resultHeader, diff --git a/apps/builder/src/features/results/components/ResultsTable/ColumnsSettingsButton.tsx b/apps/builder/src/features/results/components/ResultsTable/ColumnsSettingsButton.tsx index 84e6d6102..50a0bebde 100644 --- a/apps/builder/src/features/results/components/ResultsTable/ColumnsSettingsButton.tsx +++ b/apps/builder/src/features/results/components/ResultsTable/ColumnsSettingsButton.tsx @@ -83,9 +83,9 @@ export const ColumnSettingsButton = ({ const { active, over } = event if (active.id !== over?.id) { - onColumnOrderChange const oldIndex = columnOrder.indexOf(active.id as string) const newIndex = columnOrder.indexOf(over?.id as string) + if (newIndex === -1 || oldIndex === -1) return const newColumnOrder = arrayMove(columnOrder, oldIndex, newIndex) onColumnOrderChange(newColumnOrder) } diff --git a/apps/builder/src/features/results/components/ResultsTable/ResultsTable.tsx b/apps/builder/src/features/results/components/ResultsTable/ResultsTable.tsx index 22811b5dc..e859700cc 100644 --- a/apps/builder/src/features/results/components/ResultsTable/ResultsTable.tsx +++ b/apps/builder/src/features/results/components/ResultsTable/ResultsTable.tsx @@ -15,12 +15,11 @@ import { LoadingRows } from './LoadingRows' import { useReactTable, getCoreRowModel, - ColumnOrderState, ColumnDef, + Updater, } from '@tanstack/react-table' import { ColumnSettingsButton } from './ColumnsSettingsButton' import { useTypebot } from '@/features/editor' -import { useDebounce } from 'use-debounce' import { ResultsActionButtons } from './ResultsActionButtons' import { Row } from './Row' import { HeaderRow } from './HeaderRow' @@ -51,40 +50,53 @@ export const ResultsTable = ({ const background = useColorModeValue('white', colors.gray[900]) const { updateTypebot } = useTypebot() const [rowSelection, setRowSelection] = useState>({}) - const [columnsVisibility, setColumnsVisibility] = useState< - Record - >(preferences?.columnsVisibility || {}) - const [columnsWidth, setColumnsWidth] = useState>( - preferences?.columnsWidth || {} - ) - const [debouncedColumnsWidth] = useDebounce(columnsWidth, 500) - const [columnsOrder, setColumnsOrder] = useState([ - 'select', - ...(preferences?.columnsOrder - ? resultHeader - .map((h) => h.id) - .sort( - (a, b) => - preferences?.columnsOrder.indexOf(a) - - preferences?.columnsOrder.indexOf(b) - ) - : resultHeader.map((h) => h.id)), - 'logs', - ]) - - useEffect(() => { - updateTypebot({ - resultsTablePreferences: { - columnsVisibility, - columnsOrder, - columnsWidth: debouncedColumnsWidth, - }, - }) - }, [columnsOrder, columnsVisibility, debouncedColumnsWidth, updateTypebot]) - const bottomElement = useRef(null) const tableWrapper = useRef(null) + const { + columnsOrder = parseDefaultColumnOrder(resultHeader), + columnsVisibility = {}, + columnsWidth = {}, + } = preferences ?? {} + + const changeColumnOrder = (newColumnOrder: string[]) => { + if (typeof newColumnOrder === 'function') return + console.log(newColumnOrder) + updateTypebot({ + resultsTablePreferences: { + columnsOrder: newColumnOrder, + columnsVisibility, + columnsWidth, + }, + }) + } + + const changeColumnVisibility = ( + newColumnVisibility: Record + ) => { + if (typeof newColumnVisibility === 'function') return + updateTypebot({ + resultsTablePreferences: { + columnsVisibility: newColumnVisibility, + columnsWidth, + columnsOrder, + }, + }) + } + + const changeColumnSizing = ( + newColumnSizing: Updater> + ) => { + if (typeof newColumnSizing === 'object') return + updateTypebot({ + resultsTablePreferences: { + columnsWidth: newColumnSizing(columnsWidth), + columnsVisibility, + columnsOrder, + }, + }) + } + const columns = React.useMemo[]>( () => [ { @@ -160,9 +172,7 @@ export const ResultsTable = ({ getRowId: (row) => row.id.plainText, columnResizeMode: 'onChange', onRowSelectionChange: setRowSelection, - onColumnVisibilityChange: setColumnsVisibility, - onColumnSizingChange: setColumnsWidth, - onColumnOrderChange: setColumnsOrder, + onColumnSizingChange: changeColumnSizing, getCoreRowModel: getCoreRowModel(), }) @@ -174,6 +184,7 @@ export const ResultsTable = ({ } const observer = new IntersectionObserver(handleObserver, options) if (bottomElement.current) observer.observe(bottomElement.current) + return () => { observer.disconnect() } @@ -202,9 +213,9 @@ export const ResultsTable = ({ ) } + +const parseDefaultColumnOrder = (resultHeader: ResultHeaderCell[]) => [ + 'select', + ...resultHeader.map((h) => h.id), + 'logs', +] diff --git a/packages/db/index.ts b/packages/db/index.ts index 363724d9a..4ada47838 100644 --- a/packages/db/index.ts +++ b/packages/db/index.ts @@ -1 +1,9 @@ export * from '@prisma/client' + +// Named export for enums to avoid vite barrel export bug (https://github.com/nrwl/nx/issues/13704) +export { + Plan, + WorkspaceRole, + GraphNavigation, + CollaborationType, +} from '@prisma/client' diff --git a/packages/utils/results.ts b/packages/utils/results.ts index f9b4ad613..c0d92781d 100644 --- a/packages/utils/results.ts +++ b/packages/utils/results.ts @@ -7,12 +7,15 @@ import { VariableWithValue, Typebot, ResultWithAnswersInput, + ResultWithAnswers, + InputBlockType, } from 'models' -import { isInputBlock, isDefined, byId } from './utils' +import { isInputBlock, isDefined, byId, isNotEmpty } from './utils' export const parseResultHeader = ( typebot: Pick, - linkedTypebots: Pick[] | undefined + linkedTypebots: Pick[] | undefined, + results: ResultWithAnswers[] = [] ): ResultHeaderCell[] => { const parsedGroups = [ ...typebot.groups, @@ -32,6 +35,7 @@ export const parseResultHeader = ( { label: 'Submitted at', id: 'date' }, ...inputsResultHeader, ...parseVariablesHeaders(parsedVariables, inputsResultHeader), + ...parseResultsFromPreviousBotVersions(results, inputsResultHeader), ] } @@ -168,6 +172,32 @@ const parseVariablesHeaders = ( return [...existingHeaders, newHeaderCell] }, []) +const parseResultsFromPreviousBotVersions = ( + results: ResultWithAnswers[], + existingInputResultHeaders: ResultHeaderCell[] +): ResultHeaderCell[] => + results + .flatMap((result) => result.answers) + .filter( + (answer) => + !answer.variableId && + existingInputResultHeaders.every( + (header) => header.id !== answer.blockId + ) && + isNotEmpty(answer.content) + ) + .map((answer) => ({ + id: answer.blockId, + label: `Deleted block`, + blocks: [ + { + id: answer.blockId, + groupId: answer.groupId, + }, + ], + blockType: InputBlockType.TEXT, + })) + export const parseAnswers = ( typebot: Pick,