wip: update seelctVaccineCoveragePerAgeGroup with a hook

minvws · Nov 22, 2022 · ee94d25 · ee94d25
1 parent 1fff7a2
commit ee94d25
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/packages/app/src/domain/vaccine/data-selection/select-vaccine-coverage-data.ts b/packages/app/src/domain/vaccine/data-selection/select-vaccine-coverage-data.ts
@@ -1,4 +1,4 @@
-import { GmCollectionVaccineCoveragePerAgeGroup, VrCollectionVaccineCoveragePerAgeGroup, VrVaccineCoveragePerAgeGroupValue } from '@corona-dashboard/common';
+import { createFormatting, GmCollectionVaccineCoveragePerAgeGroup, VrCollectionVaccineCoveragePerAgeGroup, VrVaccineCoveragePerAgeGroupValue } from '@corona-dashboard/common';
 import { isPresent } from 'ts-is-present';
 import { replaceVariablesInText } from '~/utils';
 import { useIntl } from '~/intl';
@@ -7,12 +7,18 @@ import { parseVaccinatedPercentageLabel } from '../logic/parse-vaccinated-percen
 
 type VaccineCoveragePerAgeGroups = GmCollectionVaccineCoveragePerAgeGroup | VrCollectionVaccineCoveragePerAgeGroup | VrVaccineCoveragePerAgeGroupValue;
 
-export function SelectVaccineCoverageData<T extends VaccineCoveragePerAgeGroups>(data: T[]) {
-  // const { commonTexts, formatPercentage } = useIntl();
+export function useSelectVaccineCoverageData<T extends VaccineCoveragePerAgeGroups>(data: T[]) {
+  const { commonTexts, formatPercentage } = useIntl();
 
-  // const meerDan = commonTexts.common.meer_dan;
-  // const minderDan = commonTexts.common.minder_dan;
+  return SelectVaccineCoverageData(data, commonTexts.common.meer_dan, commonTexts.common.minder_dan, formatPercentage);
+}
 
+export function SelectVaccineCoverageData<T extends VaccineCoveragePerAgeGroups>(
+  data: T[],
+  meerDan: string,
+  minderDan: string,
+  formatPercentage: ReturnType<typeof createFormatting>['formatPercentage']
+) {
   return data.map((vaccineCoveragePerAgeGroup) => {
     const parsedLabels: {
       vaccinated_percentage_12_plus_label?: string | null;
@@ -29,9 +35,9 @@ export function SelectVaccineCoverageData<T extends VaccineCoveragePerAgeGroups>
         const result = parseVaccinatedPercentageLabel(coveragePercentage);
 
         if (isPresent(result)) {
-          const content = result.sign === '>' ? 'dit is meer dan {{value}}' : 'dit is minder dan {{value}}'; //meerDan : minderDan;
+          const content = result.sign === '>' ? meerDan : minderDan; //meerDan : minderDan;
           parsedLabels[ageGroupLabel] = replaceVariablesInText(content, {
-            value: 12, //formatPercentage(vaccineCoveragePerAgeGroup[ageGroupKey] as number) + '%',
+            value: formatPercentage(vaccineCoveragePerAgeGroup[ageGroupKey] as number) + '%',
           });
         }
       }

diff --git a/packages/app/src/domain/vaccine/index.ts b/packages/app/src/domain/vaccine/index.ts
@@ -1,5 +1,5 @@
 export { selectAdministrationData } from './data-selection/select-administration-data';
-export { SelectVaccineCoverageData } from './data-selection/select-vaccine-coverage-data';
+export { useSelectVaccineCoverageData } from './data-selection/select-vaccine-coverage-data';
 export { BoosterShotCoveragePerAgeGroup } from './booster-shot-coverage-per-age-group/booster-shot-coverage-per-age-group';
 export { Autumn2022ShotCoveragePerAgeGroup } from './autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group';
 export { VaccinationsOverTimeTile } from './vaccinations-over-time-tile';

diff --git a/packages/app/src/pages/landelijk/vaccinaties.tsx b/packages/app/src/pages/landelijk/vaccinaties.tsx
@@ -8,7 +8,7 @@ import { ChartTile, PageInformationBlock, TileList, TimeSeriesChart, WarningTile
 import { Layout, NlLayout } from '~/domain/layout';
 import {
   selectAdministrationData,
-  SelectVaccineCoverageData,
+  useSelectVaccineCoverageData,
   VaccinationsOverTimeTile,
   VaccineBoosterAdministrationsKpiSection,
   VaccinationsShotKpiSection,
@@ -118,13 +118,13 @@ export const getStaticProps = createGetStaticProps(
   createGetChoroplethData({
     gm: ({ vaccine_coverage_per_age_group }) => {
       if (isDefined(vaccine_coverage_per_age_group)) {
-        return SelectVaccineCoverageData(vaccine_coverage_per_age_group);
+        return useSelectVaccineCoverageData(vaccine_coverage_per_age_group);
       }
       return vaccine_coverage_per_age_group ?? null;
     },
     vr: ({ vaccine_coverage_per_age_group }) => {
       if (isDefined(vaccine_coverage_per_age_group)) {
-        return SelectVaccineCoverageData(vaccine_coverage_per_age_group);
+        return useSelectVaccineCoverageData(vaccine_coverage_per_age_group);
       }
       return vaccine_coverage_per_age_group ?? null;
     },