feat: fix the age filter logic (#152)

City-of-Helsinki · Jan 16, 2023 · ea875e3 · ea875e3
1 parent ca67594
commit ea875e3
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 27 deletions.
diff --git a/apps/hobbies-helsinki/src/domain/search/eventSearch/AdvancedSearch.tsx b/apps/hobbies-helsinki/src/domain/search/eventSearch/AdvancedSearch.tsx
@@ -13,10 +13,10 @@ import type { AutosuggestMenuOption } from 'events-helsinki-components';
 import {
   Button,
   IconCake,
-  IconArrowRight,
   IconSearch,
   IconLocation,
   IconGroup,
+  IconMinus,
 } from 'hds-react';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
@@ -352,19 +352,19 @@ const AdvancedSearch: React.FC<Props> = ({
                 <div>
                   <RangeDropdown
                     icon={<IconCake aria-hidden />}
-                    rangeIcon={<IconArrowRight aria-hidden />}
+                    rangeIcon={<IconMinus aria-hidden />}
                     minInputValue={minAgeInput}
-                    minInputLabel={t('search.ageLimitMin')}
                     minInputStartValue={MIN_AGE.toString()}
                     minInputFixedValue={'18'}
                     maxInputValue={maxAgeInput}
-                    maxInputLabel={t('search.ageLimitMax')}
                     maxInputEndValue={MAX_AGE.toString()}
                     name="ageLimitValues"
                     onChange={handleSetAgeValues}
                     fixedValuesText={t('search.showOnlyAdultCourses')}
                     title={t('search.ageLimitValues')}
+                    header={t('search.ageLimitHeader')}
                     value={[minAgeInput, maxAgeInput]}
+                    withPlaceholders={false}
                   />
                 </div>
               </div>

diff --git a/...hobbies-helsinki/src/domain/search/eventSearch/filterSummary/__tests__/AgeFilter.test.tsx b/...hobbies-helsinki/src/domain/search/eventSearch/filterSummary/__tests__/AgeFilter.test.tsx
@@ -21,7 +21,7 @@ it('calls onRemove callback when remove button is clicked', async () => {
   const onClickMock = jest.fn();
   render(<AgeFilter {...props} onRemove={onClickMock} />);
 
-  expect(screen.getByText(`Alkaen ${props.value} v`)).toBeInTheDocument();
+  expect(screen.getByText(`${props.value} v`)).toBeInTheDocument();
 
   await userEvent.click(screen.getByRole('button'));
 

diff --git a/...c/domain/search/eventSearch/filterSummary/__tests__/__snapshots__/AgeFilter.test.tsx.snap b/...c/domain/search/eventSearch/filterSummary/__tests__/__snapshots__/AgeFilter.test.tsx.snap
@@ -12,11 +12,11 @@ exports[`matches snapshot 1`] = `
     <span
       aria-hidden="false"
     >
-      Alkaen 10 v
+      10 v
     </span>
   </span>
   <button
-    aria-label="Poista suodatin: Alkaen 10 v"
+    aria-label="Poista suodatin: 10 v"
     class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"

diff --git a/apps/hobbies-helsinki/src/domain/search/eventSearch/utils.tsx b/apps/hobbies-helsinki/src/domain/search/eventSearch/utils.tsx
@@ -283,10 +283,10 @@ export const getEventSearchVariables = ({
     start,
     startsAfter,
     superEventType,
-    suitableFor,
+    suitableFor: [Number(audienceMinAgeLt), Number(audienceMaxAgeGt)].filter(
+      (v) => v
+    ),
     eventType: AppConfig.supportedEventTypes,
-    audienceMinAgeLt,
-    audienceMaxAgeGt,
   };
 };
 

diff --git a/.../sports-helsinki/src/domain/search/eventSearch/filterSummary/__tests__/AgeFilter.test.tsx b/.../sports-helsinki/src/domain/search/eventSearch/filterSummary/__tests__/AgeFilter.test.tsx
@@ -21,7 +21,7 @@ it('calls onRemove callback when remove button is clicked', async () => {
   const onClickMock = jest.fn();
   render(<AgeFilter {...props} onRemove={onClickMock} />);
 
-  expect(screen.getByText(`Alkaen ${props.value} v`)).toBeInTheDocument();
+  expect(screen.getByText(`${props.value} v`)).toBeInTheDocument();
 
   await userEvent.click(screen.getByRole('button'));
 

diff --git a/...c/domain/search/eventSearch/filterSummary/__tests__/__snapshots__/AgeFilter.test.tsx.snap b/...c/domain/search/eventSearch/filterSummary/__tests__/__snapshots__/AgeFilter.test.tsx.snap
@@ -12,11 +12,11 @@ exports[`matches snapshot 1`] = `
     <span
       aria-hidden="false"
     >
-      Alkaen 10 v
+      10 v
     </span>
   </span>
   <button
-    aria-label="Poista suodatin: Alkaen 10 v"
+    aria-label="Poista suodatin: 10 v"
     class="Tag-module_deleteButton__1diMR tag_hds-tag__delete-button__33Tgz"
     id="hds-tag-delete-button"
     type="button"

diff --git a/packages/common-i18n/src/locales/en/search.json b/packages/common-i18n/src/locales/en/search.json
@@ -28,11 +28,12 @@
     "titleDropdownHobbyType": "Type of activity",
     "showOnlyAdultCourses": "Show only adult courses",
     "ageLimitValues": "Age",
+    "ageLimitHeader": "Age of participants in years, for example 8, 12-14 or 60-65",
     "ageLimitMin": "From",
     "ageLimitMax": "To",
     "ageFilter": {
-      "minAge": "From {{age}} {{yearAbbr}}",
-      "maxAge": "To {{age}} {{yearAbbr}}",
+      "minAge": "{{age}} {{yearAbbr}}",
+      "maxAge": "{{age}} {{yearAbbr}}",
       "exactAge": "For a {{age}}-year-old"
     }
   },

diff --git a/packages/common-i18n/src/locales/fi/search.json b/packages/common-i18n/src/locales/fi/search.json
@@ -41,11 +41,12 @@
     "titleDropdownHobbyType": "Harrastusmuoto",
     "showOnlyAdultCourses": "Näytä vain aikuisten harrastukset",
     "ageLimitValues": "Ikä",
+    "ageLimitHeader": "Osallistujien ikä vuosina, esimerkiksi 8, 12–14 tai 60–65",
     "ageLimitMin": "Alkaen",
     "ageLimitMax": "Päättyen",
     "ageFilter": {
-      "minAge": "Alkaen {{age}} {{yearAbbr}}",
-      "maxAge": "Päättyen {{age}} {{yearAbbr}}",
+      "minAge": "{{age}} {{yearAbbr}}",
+      "maxAge": "{{age}} {{yearAbbr}}",
       "exactAge": "{{age}}-vuotiaalle"
     }
   },

diff --git a/packages/common-i18n/src/locales/sv/search.json b/packages/common-i18n/src/locales/sv/search.json
@@ -28,11 +28,12 @@
     "titleDropdownHobbyType": "Aktivitetsform",
     "showOnlyAdultCourses": "Visa endast vuxenkurser",
     "ageLimitValues": "Ålder",
+    "ageLimitHeader": "Ange deltagarnas ålder i år, till exempel 8, 12-14 eller 60-65",
     "ageLimitMin": "Från",
     "ageLimitMax": "Till",
     "ageFilter": {
-      "minAge": "Från {{age}} {{yearAbbr}}",
-      "maxAge": "Till {{age}} {{yearAbbr}}",
+      "minAge": "{{age}} {{yearAbbr}}",
+      "maxAge": "{{age}} {{yearAbbr}}",
       "exactAge": "För en {{age}}-åring"
     }
   },

diff --git a/packages/components/src/components/rangeDropdown/RangeDropdown.tsx b/packages/components/src/components/rangeDropdown/RangeDropdown.tsx
@@ -25,36 +25,40 @@ export interface RangeDropdownProps {
   minInputStartValue?: string;
   minInputValue?: string;
   minInputFixedValue?: string;
-  minInputLabel: string;
+  minInputLabel?: string;
   maxInputEndValue?: string;
   maxInputValue?: string;
-  maxInputLabel: string;
+  maxInputLabel?: string;
   maxInputFixedValue?: string;
   name: string;
   onChange: (minValue: string, maxValue: string) => void;
   fixedValuesText?: string;
   showFixedValuesText?: boolean;
   title: string;
+  header?: string;
   value: string[];
+  withPlaceholders?: boolean;
 }
 
 const RangeDropdown: React.FC<RangeDropdownProps> = ({
   icon,
   rangeIcon,
   minInputValue = '',
-  minInputLabel,
+  minInputLabel = '',
   minInputStartValue = '',
   minInputFixedValue = '',
   maxInputValue = '',
-  maxInputLabel,
+  maxInputLabel = '',
   maxInputEndValue = '',
   maxInputFixedValue = '',
   name,
   onChange,
   fixedValuesText,
   showFixedValuesText,
   title,
+  header = '',
   value,
+  withPlaceholders = true,
 }) => {
   const [internalIsFixedValues, setInternalIsFixedValues] =
     React.useState(false);
@@ -238,11 +242,12 @@ const RangeDropdown: React.FC<RangeDropdownProps> = ({
         </div>
       </button>
       <DropdownMenu isOpen={isMenuOpen} onClear={handleClear}>
+        {header && <div className={styles.header}>{header}</div>}
         <div className={styles.rangeInputsWrapper}>
           <TextInput
             type="number"
             id={`${name}_0`}
-            placeholder={minInputStartValue}
+            placeholder={withPlaceholders ? minInputStartValue : ''}
             onChange={(e) => handleInputChange(RANGE_INPUT.MIN, e.target.value)}
             onBlur={(e) => handleInputBlur(RANGE_INPUT.MIN, e.target.value)}
             value={minInputValue}
@@ -255,7 +260,7 @@ const RangeDropdown: React.FC<RangeDropdownProps> = ({
           <TextInput
             type="number"
             id={`${name}_1`}
-            placeholder={maxInputEndValue}
+            placeholder={withPlaceholders ? maxInputEndValue : ''}
             onChange={(e) => handleInputChange(RANGE_INPUT.MAX, e.target.value)}
             onBlur={(e) => handleInputBlur(RANGE_INPUT.MAX, e.target.value)}
             value={maxInputValue}

diff --git a/packages/components/src/components/rangeDropdown/rangeDropdown.module.scss b/packages/components/src/components/rangeDropdown/rangeDropdown.module.scss
@@ -89,6 +89,12 @@
     }
   }
 
+  .header {
+    font-size: var(--fontsize-body-l);
+    line-height: var(--spacing-m);
+    padding: var(--spacing-m) var(--spacing-s) 0;
+  }
+
   .rangeInputsWrapper {
     display: flex;
     justify-content: center;
@@ -100,11 +106,11 @@
     }
 
     .rangeArrowWrapper {
-      margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);
+      margin: 0 var(--spacing-3-xs);
     }
 
     input {
-      height: var(--spacing-2-xl);
+      text-align: center;
       width: 100%;
     }
   }