UHF-11235: Events near you

hdbt.libraries.yml

@@ -211,7 +211,7 @@ nav-global:
     - hdbt/nav-toggle
 
 event-list:
-  version: 1.3.1
+  version: 1.4.0
   js:
     dist/js/linkedevents.min.js: {
       preprocess: false,

src/js/react/apps/linkedevents/components/AddressSearch.tsx

@@ -0,0 +1,70 @@
+import { SearchInput } from 'hds-react';
+import { useAtom } from 'jotai';
+import { addressAtom } from '../store';
+import getNameTranslation from '@/react/common/helpers/ServiceMap';
+import { ServiceMapAddress, ServiceMapResponse } from '@/types/ServiceMap';
+import ServiceMap from '@/react/common/enum/ServiceMap';
+
+const AddressSearch = () => {
+  const [address, updateAddress] = useAtom(addressAtom);
+
+  const onChange = (value: string) => {
+    updateAddress(value);
+  };
+
+  const getSuggestions = async(searchTerm: string|undefined) => {
+    if (!searchTerm || searchTerm === '') {
+      return [];
+    }
+
+    const fetchSuggestions = (param: URLSearchParams) => {
+      const url = new URL(ServiceMap.EVENTS_URL);
+      url.search = param.toString();
+
+      return fetch(url.toString()).then(response => response.json());
+    };
+
+    const params = ['fi', 'sv'].map(lang => new URLSearchParams({
+      format: 'json',
+      language: lang,
+      municipality: 'helsinki',
+      page_size: '10',
+      q: searchTerm,
+      type: 'address',
+    }));
+
+    const [fiParams, svParams] = params;
+    const results = Promise.all([
+      fetchSuggestions(fiParams),
+      fetchSuggestions(svParams)
+    ]);
+
+    const parseResults = (result: ServiceMapResponse<ServiceMapAddress>, langKey: string) => result.results.map(addressResult => ({
+        value: getNameTranslation(addressResult.name, langKey) as string
+      }));
+
+    const [fiResults, svResults] = await results;
+
+    return [...parseResults(fiResults, 'fi'), ...parseResults(svResults, 'sv')].slice(0, 10);
+  };
+
+  return (
+    <div className='hdbt-search__filter'>
+      <SearchInput
+        className='hdbt-search__input hdbt-search__input--address'
+        getSuggestions={getSuggestions}
+        hideSearchButton
+        id='location'
+        label={Drupal.t('Address', {}, {context: 'React search: location label'})}
+        onChange={onChange}
+        onSubmit={onChange}
+        placeholder={Drupal.t('For example, Kotikatu 1', {}, {context: 'Helsinki near you events search'})}
+        suggestionLabelField='value'
+        visibleSuggestions={5}
+        value={address || ''}
+      />
+    </div>
+  );
+};
+
+export default AddressSearch;

src/js/react/apps/linkedevents/components/CheckboxFilter.tsx

@@ -34,7 +34,7 @@ function CheckboxFilter({ id, label, atom, valueKey }: CheckboxFilterProps) {
   return (
     <Checkbox
       checked={checked}
-      className="hdbt-search__filter hdbt-search__checkbox"
+      className="hdbt-search--react__checkbox"
       id={id}
       label={label}
       onChange={(event) => toggleValue(event)}

src/js/react/apps/linkedevents/components/FullLocationFilter.tsx

@@ -0,0 +1,128 @@
+import { Select, SelectData, useSelectStorage } from 'hds-react';
+import { useSetAtom } from 'jotai';
+import { useAtomCallback } from 'jotai/utils';
+import { memo, useCallback, useEffect } from 'react';
+import type OptionType from '../types/OptionType';
+
+import { locationSelectionAtom, updateParamsAtom } from '../store';
+import SearchComponents from '../enum/SearchComponents';
+import ApiKeys from '../enum/ApiKeys';
+import { ServiceMapPlace } from '@/types/ServiceMap';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
+import { getNameTranslation } from '@/react/common/helpers/ServiceMap';
+import LinkedEvents from '@/react/common/enum/LinkedEvents';
+import { clearAllSelectionsFromStorage, updateSelectionsInStorage } from '@/react/common/helpers/HDS';
+
+const FullLocationFilter = memo(() => {
+  const setLocationFilter = useSetAtom(locationSelectionAtom);
+  const updateParams = useSetAtom(updateParamsAtom);
+
+  const getLocationParamValue = useAtomCallback(
+    useCallback((get) => get(locationSelectionAtom), [])
+  );
+
+  const getLocations = async (
+    searchTerm: string,
+    selectedOptions: OptionType[],
+    data: SelectData,
+  ) => {
+    const url = new URL(LinkedEvents.PLACES_URL);
+    const locationParams = new URLSearchParams({
+      has_upcoming_events: 'true',
+      municipality: 'helsinki',
+      text: searchTerm,
+    });
+    url.search = locationParams.toString();
+    const result = {
+      options: [],
+    };
+
+    const response = await useTimeoutFetch(url.toString());
+
+    if (response.status !== 200) {
+      return result;
+    }
+
+    const body = await response.json();
+
+    if (body.data && body.data.length) {
+      const places = body.data.map((place: ServiceMapPlace) => ({
+        value: place.id,
+        label: getNameTranslation(place.name, drupalSettings.path.currentLanguage)
+      }));
+
+      result.options = places;
+      return result;
+    }
+
+    return result;
+  };
+
+  const onChange = (value: OptionType[], clickedOption: OptionType, data: SelectData) => {
+    setLocationFilter(value.map(option => ({
+      label: option.label,
+      value: option.value,
+    })));
+    updateParams({ [ApiKeys.LOCATION]: value.map((location: any) => location.value).join(',') });
+
+    storage.updateAllOptions((option, group, groupindex) => ({
+        ...option,
+        selected: value.some(selection => selection.value === option.value),
+      }));
+
+    if (clickedOption) {
+      storage.setOpen(true);
+    }
+  };
+
+  const selectVenueLabel: string = Drupal.t('Select a venue', {}, {context: 'Events search'});
+
+  const storage = useSelectStorage({
+    id: SearchComponents.LOCATION,
+    multiSelect: true,
+    noTags: true,
+    onChange,
+    open: false,
+    onSearch: getLocations
+  });
+
+  const clearAllSelections = () => {
+    clearAllSelectionsFromStorage(storage);
+  };
+
+  const updateSelections = () => {
+    updateSelectionsInStorage(storage, getLocationParamValue());
+  };
+
+  useEffect(() => {
+    window.addEventListener('eventsearch-clear', clearAllSelections);
+    window.addEventListener(`eventsearch-clear-${ApiKeys.LOCATION}`, updateSelections);
+
+    return () => {
+      window.addEventListener('eventsearch-clear', clearAllSelections);
+      window.removeEventListener(`eventsearch-clear-${ApiKeys.LOCATION}`, updateSelections);
+    };
+  });
+
+  return (
+    <div className='hdbt-search__filter event-form__filter--location'>
+      <Select
+        className='hdbt-search__dropdown'
+        texts={{
+          clearButtonAriaLabel_one: Drupal.t('Clear @label selection', {'@label': selectVenueLabel}, { context: 'React search clear selection label' }),
+          clearButtonAriaLabel_multiple: Drupal.t('Clear @label selection', {'@label': selectVenueLabel}, { context: 'React search clear selection label' }),
+          label: selectVenueLabel,
+          placeholder: Drupal.t('All', {}, { context: 'React search: all available options' }),
+        }}
+        theme={{
+          '--checkbox-background-selected': 'var(--hdbt-color-black)',
+          '--focus-outline-color': 'var(--hdbt-color-black)',
+          '--placeholder-color': 'var(--hdbt-color-black)',
+        }}
+        {...storage.getProps()}
+      />
+    </div>
+  );
+});
+
+export default FullLocationFilter;

src/js/react/apps/linkedevents/components/FullTopicsFilter.tsx

@@ -0,0 +1,123 @@
+import { Select, SelectData, useSelectStorage } from 'hds-react';
+import { useSetAtom } from 'jotai';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useAtomCallback } from 'jotai/utils';
+import type OptionType from '../types/OptionType';
+
+import { topicSelectionAtom, updateParamsAtom} from '../store';
+import SearchComponents from '../enum/SearchComponents';
+import ApiKeys from '../enum/ApiKeys';
+import getNameTranslation from '@/react/common/helpers/ServiceMap';
+import { LinkedEventsTopic } from '@/types/LinkedEvents';
+import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
+import LinkedEvents from '@/react/common/enum/LinkedEvents';
+import { clearAllSelectionsFromStorage, updateSelectionsInStorage } from '@/react/common/helpers/HDS';
+
+const FullTopicsFilter = memo(() => {
+  const setTopicsFilter = useSetAtom(topicSelectionAtom);
+  const updateParams = useSetAtom(updateParamsAtom);
+
+  const getTopicsParamValue = useAtomCallback(
+    useCallback((get) => get(topicSelectionAtom), [])
+  );
+
+  const getTopics = async (
+    searchTerm: string,
+    selectedOptions: OptionType[],
+    data: SelectData,
+  ) => {
+    const url = new URL(LinkedEvents.KEYWORDS_URL);
+    const locationParams = new URLSearchParams({
+      has_upcoming_events: 'true',
+      text: searchTerm,
+    });
+    url.search = locationParams.toString();
+    const result = {
+      options: [],
+    };
+
+    const response = await useTimeoutFetch(url.toString());
+
+    if (response.status !== 200) {
+      return result;
+    }
+
+    const body = await response.json();
+
+    if (body.data && body.data.length) {
+      const places = body.data.map((place: LinkedEventsTopic) => ({
+        value: place.id,
+        label: getNameTranslation(place.name, drupalSettings.path.currentLanguage)
+      }));
+
+      result.options = places;
+      return result;
+    }
+
+    return result;
+  };
+
+  const onChange = (selectedOptions: OptionType[], clickedOption?: OptionType) => {
+    setTopicsFilter(selectedOptions);
+    updateParams({ [ApiKeys.KEYWORDS]: selectedOptions.map((topic: any) => topic.value).join(',') });
+
+    storage.updateAllOptions((option, group, groupindex) => ({
+        ...option,
+        selected: selectedOptions.some(selection => selection.value === option.value),
+      }));
+
+    if (clickedOption) {
+      storage.setOpen(true);
+    }
+  };
+
+  const selectLabel: string = Drupal.t('Event topic', {}, { context: 'React search: topics filter' });
+
+  const storage = useSelectStorage({
+    id: SearchComponents.TOPICS,
+    multiSelect: true,
+    noTags: true,
+    onChange,
+    onSearch: getTopics,
+  });
+
+  const clearAllSelections = () => {
+    clearAllSelectionsFromStorage(storage);
+  };
+
+  const updateSelections = () => {
+    updateSelectionsInStorage(storage, getTopicsParamValue());
+  };
+
+  useEffect(() => {
+    window.addEventListener('eventsearch-clear', clearAllSelections);
+    window.addEventListener(`eventsearch-clear-${ApiKeys.KEYWORDS}`, updateSelections);
+
+    return () => {
+      window.addEventListener('eventsearch-clear', clearAllSelections);
+      window.removeEventListener(`eventsearch-clear-${ApiKeys.KEYWORDS}`, updateSelections);
+    };
+  });
+
+  return (
+    <div className='hdbt-search__filter event-form__filter--topics'>
+      <Select
+        className='hdbt-search__dropdown'
+        texts={{
+          clearButtonAriaLabel_multiple: Drupal.t('Clear @label selection', {'@label': selectLabel}, { context: 'React search clear selection label' }),
+          clearButtonAriaLabel_one: Drupal.t('Clear @label selection', {'@label': selectLabel}, { context: 'React search clear selection label' }),
+          label: selectLabel,
+          placeholder: Drupal.t('All topics', {}, { context: 'React search: topics filter' }),
+        }}
+        theme={{
+          '--checkbox-background-selected': 'var(--hdbt-color-black)',
+          '--focus-outline-color': 'var(--hdbt-color-black)',
+          '--placeholder-color': 'var(--hdbt-color-black)',
+        }}
+        {...storage.getProps()}
+      />
+    </div>
+  );
+});
+
+export default FullTopicsFilter;