From 001b75c8aedf74567ff786856055101e780674b4 Mon Sep 17 00:00:00 2001 From: Santeri Hurnanen Date: Mon, 11 Mar 2024 08:33:16 +0200 Subject: [PATCH 1/5] UHF-9530: Add TopicsFilter to linkedevents react app --- hdbt.theme | 6 +++ .../linkedevents/components/TopicsFilter.tsx | 44 +++++++++++++++++++ .../linkedevents/containers/FormContainer.tsx | 21 ++++++--- .../react/apps/linkedevents/enum/ApiKeys.ts | 1 + .../linkedevents/enum/SearchComponents.ts | 1 + src/js/react/apps/linkedevents/store.tsx | 16 +++++++ .../apps/linkedevents/types/FilterSettings.ts | 3 ++ src/js/react/apps/linkedevents/types/Topic.ts | 7 +++ src/js/types/drupalSettings.d.ts | 4 ++ .../06_components/paragraphs/_event-list.scss | 1 + 10 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 src/js/react/apps/linkedevents/components/TopicsFilter.tsx create mode 100644 src/js/react/apps/linkedevents/types/Topic.ts diff --git a/hdbt.theme b/hdbt.theme index 50a183bab..17d56f354 100644 --- a/hdbt.theme +++ b/hdbt.theme @@ -1629,6 +1629,7 @@ function hdbt_preprocess_pager(&$variables): void { function hdbt_preprocess_paragraph__event_list(&$variables): void { // Expose event list variables to frontend. if (isset($variables['paragraph'])) { + /** @var \Drupal\helfi_react_search\Entity\EventList $paragraph */ $paragraph = $variables['paragraph']; $settings = []; @@ -1643,6 +1644,11 @@ function hdbt_preprocess_paragraph__event_list(&$variables): void { $settings['field_event_count'] = '3'; } + $settings['field_filter_keywords'] = array_map(static fn ($term) => [ + 'id' => $term->get('field_keyword_id')->getString(), + 'name' => $term->getName(), + ], $paragraph->getFilterKeywords()); + if ($paragraph->hasField('field_api_url') && !$paragraph->get('field_api_url')->isEmpty()) { $linkedEvents = Drupal::service('helfi_react_search_linked_events'); $events_public_url = $paragraph->get('field_api_url')->first()->getUrl()->toString(); diff --git a/src/js/react/apps/linkedevents/components/TopicsFilter.tsx b/src/js/react/apps/linkedevents/components/TopicsFilter.tsx new file mode 100644 index 000000000..7b73ff0e6 --- /dev/null +++ b/src/js/react/apps/linkedevents/components/TopicsFilter.tsx @@ -0,0 +1,44 @@ +import { Select } from 'hds-react'; +import { useAtomValue, useAtom, useSetAtom } from 'jotai'; + +import { topicsAtom, topicSelectionAtom, updateParamsAtom} from '../store'; +import SearchComponents from '../enum/SearchComponents'; +import ApiKeys from '../enum/ApiKeys'; + +function TopicsFilter() { + const topics = useAtomValue(topicsAtom); + const [topicSelection, setTopicsFilter] = useAtom(topicSelectionAtom); + const updateParams = useSetAtom(updateParamsAtom); + + const onChange = (value: any) => { + setTopicsFilter(value); + updateParams({ [ApiKeys.KEYWORDS]: value.map((topic: any) => topic.value).join(',') }); + }; + + const selectLabel: string = Drupal.t('Event topic', {}, { context: 'React search: topics filter' }); + + return ( +
+