diff --git a/frontend/src/employee-frontend/components/reports/TampereRegionalSurvey.tsx b/frontend/src/employee-frontend/components/reports/TampereRegionalSurvey.tsx index 586b4b28a7..c1e92befc3 100644 --- a/frontend/src/employee-frontend/components/reports/TampereRegionalSurvey.tsx +++ b/frontend/src/employee-frontend/components/reports/TampereRegionalSurvey.tsx @@ -4,10 +4,14 @@ import orderBy from 'lodash/orderBy' import range from 'lodash/range' -import React, { useMemo, useState } from 'react' +import React, { useCallback, useMemo, useState } from 'react' +import styled from 'styled-components' import { useTranslation } from 'employee-frontend/state/i18n' -import { RegionalSurveyReportResult } from 'lib-common/generated/api-types/reports' +import { + RegionalSurveyReportAgeStatisticsResult, + RegionalSurveyReportResult +} from 'lib-common/generated/api-types/reports' import LocalDate from 'lib-common/local-date' import { constantQuery, useQueryResult } from 'lib-common/query' import Title from 'lib-components/atoms/Title' @@ -27,12 +31,25 @@ import { FlexRow } from '../common/styled/containers' import ReportDownload from './ReportDownload' import { FilterLabel, FilterRow } from './common' -import { tampereRegionalSurveyReport } from './queries' +import { + tampereRegionalSurveyAgeReport, + tampereRegionalSurveyMonthlyReport +} from './queries' interface ReportQueryParams { year: number } +interface ReportSelection { + monthlyStatistics: boolean + ageStatistics: boolean +} + +const emptyReportSelection = { + monthlyStatistics: false, + ageStatistics: false +} + export default React.memo(function TampereRegionalSurveyReport() { const { i18n } = useTranslation() const t = i18n.reports.tampereRegionalSurvey @@ -52,35 +69,66 @@ export default React.memo(function TampereRegionalSurveyReport() { null ) - const emptyValue: RegionalSurveyReportResult = { + const emptyMonthlyValue: RegionalSurveyReportResult = { monthlyCounts: [], year: 0 } - const reportResult = useQueryResult( - activeParams - ? tampereRegionalSurveyReport(activeParams) - : constantQuery(emptyValue) + const emptyAgeValue: RegionalSurveyReportAgeStatisticsResult = { + ageStatistics: [], + year: 0 + } + + const [reportSelection, setReportSelection] = + useState(emptyReportSelection) + + const monthlyStatisticsResult = useQueryResult( + activeParams && reportSelection.monthlyStatistics + ? tampereRegionalSurveyMonthlyReport(activeParams) + : constantQuery(emptyMonthlyValue) ) - const fetchResults = () => { + const ageStatisticsResult = useQueryResult( + activeParams && reportSelection.ageStatistics + ? tampereRegionalSurveyAgeReport(activeParams) + : constantQuery(emptyAgeValue) + ) + + const fetchMonthlyResults = useCallback(() => { if (selectedYear) { - setActiveParams({ - year: selectedYear - }) + setReportSelection({ ...reportSelection, monthlyStatistics: true }) + setActiveParams({ year: selectedYear }) } - } + }, [selectedYear, reportSelection]) - const sortedReportResult = useMemo( + const fetchAgeResults = useCallback(() => { + if (selectedYear) { + setReportSelection({ ...reportSelection, ageStatistics: true }) + setActiveParams({ year: selectedYear }) + } + }, [selectedYear, reportSelection]) + + const changeYear = useCallback( + (newYear: number | null) => { + if (selectedYear !== newYear) { + setSelectedYear(newYear) + setReportSelection(emptyReportSelection) + } + }, + [selectedYear] + ) + + const sortedMonthlyReportResult = useMemo( () => - reportResult.map((result) => { + monthlyStatisticsResult.map((result) => { return { year: result.year, monthlyCounts: orderBy(result.monthlyCounts, [(r) => r.month]) } }), - [reportResult] + [monthlyStatisticsResult] ) + return ( @@ -93,30 +141,26 @@ export default React.memo(function TampereRegionalSurveyReport() { fullWidth items={yearOptions} selectedItem={selectedYear} - onChange={setSelectedYear} + onChange={changeYear} placeholder={i18n.common.year} /> - - -