diff --git a/frontend/beCompliant/src/components/table/TableStatistics.tsx b/frontend/beCompliant/src/components/table/TableStatistics.tsx index 826143b7..6e5d3fe6 100644 --- a/frontend/beCompliant/src/components/table/TableStatistics.tsx +++ b/frontend/beCompliant/src/components/table/TableStatistics.tsx @@ -6,9 +6,9 @@ interface Props { } export const TableStatistics = ({ filteredData }: Props) => { - const numberOfQuestions = filteredData?.length; + const numberOfQuestions = filteredData.length; const numberOfAnswers = filteredData.reduce((count, data) => { - if (data.answers[0]?.answer && data.answers.at(-1)?.answer !== '') { + if (data.answers?.[0]?.answer && data.answers.at(-1)?.answer !== '') { count++; } return count; diff --git a/frontend/beCompliant/src/pages/ActivityPage.tsx b/frontend/beCompliant/src/pages/ActivityPage.tsx index c7a001f9..990e50de 100644 --- a/frontend/beCompliant/src/pages/ActivityPage.tsx +++ b/frontend/beCompliant/src/pages/ActivityPage.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Flex, Heading } from '@kvib/react'; +import { Box, Divider, Flex, Heading, Skeleton } from '@kvib/react'; import { useParams, useSearchParams } from 'react-router-dom'; import { Page } from '../components/layout/Page'; import { TableComponent } from '../components/Table'; @@ -9,7 +9,6 @@ import { useFetchTable } from '../hooks/useFetchTable'; import { ActiveFilter } from '../types/tableTypes'; import { mapTableDataRecords } from '../utils/mapperUtil'; import { AnswerType, Column, OptionalFieldType } from '../api/types'; -import { LoadingState } from '../components/LoadingState'; import { ErrorState } from '../components/ErrorState'; import { filterData } from '../utils/tablePageUtil'; import { useFetchContext } from '../hooks/useFetchContext'; @@ -112,13 +111,6 @@ export const ActivityPage = () => { const error = tableError || commentError || answerError || contextError || userinfoError; - const isPending = - tableIsPending || - commentIsPending || - answerIsPending || - contextIsPending || - userinfoIsPending; - const statusFilterOptions: Column = { options: [ { name: 'Utfylt', color: '' }, @@ -128,28 +120,26 @@ export const ActivityPage = () => { type: OptionalFieldType.OPTION_SINGLE, }; - if (isPending) { - return ; - } - if (error) { return ; } - tableData.records = mapTableDataRecords(tableData, comments, answers); - const filteredData = filterData( - tableData.records, - activeFilters[tableData.id] ?? [] - ); + if (tableData && comments && answers) { + tableData.records = mapTableDataRecords(tableData, comments, answers); + } + const filteredData = tableData + ? filterData(tableData.records, activeFilters[tableData.id] ?? []) + : []; const filters = { filterOptions: statusFilterOptions.options, filterName: '', - activeFilters: activeFilters[tableData.id] ?? [], + activeFilters: tableData ? (activeFilters[tableData.id] ?? []) : [], setActiveFilters: (activeFilters: ActiveFilter[]) => + tableData && setActiveFilters((prev) => ({ ...prev, [tableData.id]: activeFilters })), }; - const allSingleSelect = tableData.records.every( + const allSingleSelect = tableData?.records.every( (record) => record.metadata?.answerMetadata?.type === AnswerType.SELECT_SINGLE ); @@ -157,21 +147,42 @@ export const ActivityPage = () => { return ( - {`${context?.name} - ${tableData.name}`} - + + {`${context?.name} - ${tableData?.name}`} + + + + - + + {!!tableData && !!context && !!userinfo && !!comments && !!answers && ( + + )} + ); };