blsmedia/bot
2
0
Fork 0
Code Activity

🐛 (results) Keep focus on current expanded result when new ones arrive

Browse Source 
Closes #453
This commit is contained in:
Baptiste Arnaud
2023-04-17 15:29:46 +02:00
parent cd0916df67
commit f8a76f98b9
2 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/builder/src/features/results/components/ResultModal.tsx
View File

@@ -15,13 +15,15 @@ import { isDefined } from '@typebot.io/lib'
import { HeaderIcon } from './HeaderIcon' import { HeaderIcon } from './HeaderIcon'
type Props = { type Props = {
resultIdx: number | null resultId: string | null
onClose: () => void onClose: () => void
} }
export const ResultModal = ({ resultIdx, onClose }: Props) => { export const ResultModal = ({ resultId, onClose }: Props) => {
const { tableData, resultHeader } = useResults() const { tableData, resultHeader } = useResults()
const result = isDefined(resultIdx) ? tableData[resultIdx] : undefined const result = isDefined(resultId)
? tableData.find((data) => data.id.plainText === resultId)
: undefined
const getHeaderValue = ( const getHeaderValue = (
val: string | { plainText: string; element?: JSX.Element | undefined } val: string | { plainText: string; element?: JSX.Element | undefined }

14
apps/builder/src/features/results/components/ResultsTableContainer.tsx
View File

@@ -18,21 +18,21 @@ export const ResultsTableContainer = () => {
const [inspectingLogsResultId, setInspectingLogsResultId] = useState< const [inspectingLogsResultId, setInspectingLogsResultId] = useState<
string | null string | null
>(null) >(null)
const [expandedResultIndex, setExpandedResultIndex] = useState<number | null>( const [expandedResultId, setExpandedResultId] = useState<string | null>(null)
null
)
const handleLogsModalClose = () => setInspectingLogsResultId(null) const handleLogsModalClose = () => setInspectingLogsResultId(null)
const handleResultModalClose = () => setExpandedResultIndex(null) const handleResultModalClose = () => setExpandedResultId(null)
const handleLogOpenIndex = (index: number) => () => { const handleLogOpenIndex = (index: number) => () => {
if (!results[index]) return if (!results[index]) return
setInspectingLogsResultId(results[index].id) setInspectingLogsResultId(results[index].id)
} }
const handleResultExpandIndex = (index: number) => () => const handleResultExpandIndex = (index: number) => () => {
setExpandedResultIndex(index) if (!results[index]) return
setExpandedResultId(results[index].id)
}
return ( return (
<Stack pb="28" px={['4', '0']} spacing="4" maxW="1600px" w="full"> <Stack pb="28" px={['4', '0']} spacing="4" maxW="1600px" w="full">
@@ -44,7 +44,7 @@ export const ResultsTableContainer = () => {
/> />
)} )}
<ResultModal <ResultModal
resultIdx={expandedResultIndex} resultId={expandedResultId}
onClose={handleResultModalClose} onClose={handleResultModalClose}
/> />