UHF-12236: Fix errors

Signed-off-by: Santeri Hurnanen <santeri.hurnanen@fame.fi>

Author: jeremysteerio

public/themes/custom/hdbt_subtheme/dist/js/hyte-search.min.js

@@ -1,7 +1,7 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { getKeywordAtom, initializedAtom, setSearchStateAtom } from '../store';
 import { TextInput } from 'hds-react';
-import { Components } from '../../../enum/Components';
+import { Components } from 'src/js/react/enum/Components';
 
 export const KeywordFilter = () => {
   const initialized = useAtomValue(initializedAtom);

public/themes/custom/hdbt_subtheme/src/js/react/apps/hyte-search/components/KeywordFilter.tsx

@@ -1,12 +1,22 @@
-// biome-ignore-all lint/correctness/useJsxKeyInIterable: @todo UHF-12501
-// biome-ignore-all lint/style/noNonNullAssertion: @todo UHF-12501
-import { IconLocation } from 'hds-react';
-import { Themes } from '../../../enum/Themes';
+import { Themes } from 'src/js/react/enum/Themes';
 import type TagType from '@/common/types/TagType';
 import CardItem, { Metarow } from '@/react/common/Card';
-import type { Service } from '../types/Service';
+import type { Service, Unit } from '../types/Service';
+import { getElasticUrlAtom } from '../store';
+import { useAtomValue } from 'jotai';
+
+declare const ELASTIC_DEV_URL: string | undefined;
+
+export const ResultCard = ({
+  description_summary,
+  name,
+  name_override,
+  name_synonyms,
+  units,
+  url,
+}: Service & { units: Unit[] }) => {
+  const elasticUrl = useAtomValue(getElasticUrlAtom);
 
-export const ResultCard = ({ description_summary, name, name_override, name_synonyms, units, url }: Service) => {
   const getUnits = () => {
     if (!units?.length) {
       return [];
@@ -15,25 +25,33 @@ export const ResultCard = ({ description_summary, name, name_override, name_syno
     return [
       <Metarow
         content={units.length.toString()}
-        icon={<IconLocation />}
+        icon={<span className='hel-icon hel-icon--location' />}
         label={`${Drupal.t('Locations', {}, { context: 'Hyte search' })}`}
+        key='location'
       />,
     ];
   };
 
   const getTags = (): TagType[] => {
-    /** @todo implement better once BE changes are made */
-    const foundThemes = name_synonyms
-      ?.toString()
-      .split(',')
-      .map((tag) => tag.trim())
-      .filter((tag) => Themes.has(tag));
+    const foundThemes = name_synonyms?.map((tag) => tag.trim()).filter((tag) => Themes.has(tag));
 
     if (!foundThemes?.length) {
       return [];
     }
 
-    return foundThemes.map((theme: string) => ({ tag: Themes.get(theme)! }));
+    return foundThemes.map((theme: string) => ({ tag: Themes.get(theme) }));
+  };
+
+  // For ease-of-testing, makes test environment images work
+  const enrichImageUrl = (imageUrl: string): string => {
+    if (
+      typeof ELASTIC_DEV_URL !== 'undefined' &&
+      elasticUrl.includes('arodevtest') &&
+      !/^https?:\/\//i.test(imageUrl)
+    ) {
+      return `https://www.test.hel.ninja${imageUrl}`;
+    }
+    return imageUrl;
   };
 
   const getImage = (): JSX.Element | undefined => {
@@ -42,15 +60,15 @@ export const ResultCard = ({ description_summary, name, name_override, name_syno
     }
 
     const srcSet = units[0]?.['image.variants.1.5_1022w_682h_LQ']
-      ? `${units[0]?.['image.variants.1.5_1022w_682h_LQ']} 2x`
+      ? `${enrichImageUrl(units[0]?.['image.variants.1.5_1022w_682h_LQ'].toString())} 2x`
       : undefined;
 
     return (
       <img
         alt={units[0]?.['image.alt']?.toString() || ''}
         data-photographer={units[0]?.['image.photographer']?.toString() || ''}
         className='card__image'
-        src={units[0]?.['image.url']?.[0]}
+        src={enrichImageUrl(units[0]?.['image.url']?.[0])}
         srcSet={srcSet}
         title={units[0]?.['image.title']?.toString() || ''}
       />

public/themes/custom/hdbt_subtheme/src/js/react/apps/hyte-search/components/ResultCard.tsx

@@ -1,6 +1,6 @@
 import { TextInput } from 'hds-react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { Components } from '../../../enum/Components';
+import { Components } from 'src/js/react/enum/Components';
 import { AddressSearch, type AddressWithCoordinates } from '@/react/common/AddressSearch';
 import { getAddressAtom, initializedAtom, setSearchStateAtom } from '../store';
 
@@ -25,10 +25,7 @@ export const SearchBar = () => {
   };
 
   const onSubmit = (address: AddressWithCoordinates) => {
-    setSearchState({
-      addressWithCoordinates: address,
-      [Components.ADDRESS]: address.label,
-    });
+    setSearchState({ addressWithCoordinates: address, [Components.ADDRESS]: address.label });
   };
 
   return (

public/themes/custom/hdbt_subtheme/src/js/react/apps/hyte-search/components/SearchBar.tsx

@@ -1,10 +1,13 @@
 import { type Option, Select } from 'hds-react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { Components } from '../../../enum/Components';
-import { Themes } from '../../../enum/Themes';
+import { Components } from 'src/js/react/enum/Components';
+import { Themes } from 'src/js/react/enum/Themes';
 import { getThemeAtom, initializedAtom, setSearchStateAtom } from '../store';
 
-const options = [...Themes].map(([value, label]) => ({ value, label })).sort((a, b) => a.label.localeCompare(b.label));
+const options = [...Themes]
+  .filter(([value]) => ['hh_kul', 'hh_liik', 'hh_opi', 'hh_vet', 'hh_yht'].includes(value))
+  .map(([value, label]) => ({ value, label }))
+  .sort((a, b) => a.label.localeCompare(b.label));
 
 export const ThemeFilter = () => {
   const initialized = useAtomValue(initializedAtom);
@@ -23,7 +26,10 @@ export const ThemeFilter = () => {
       noTags
       options={options}
       onChange={setThemes}
-      texts={{ label: Drupal.t('Theme', {}, { context: 'React search' }) }}
+      texts={{
+        label: Drupal.t('Theme', {}, { context: 'React search' }),
+        placeholder: Drupal.t('Select one or more themes', {}, { context: 'Hyte search' }),
+      }}
       value={themes}
     />
   );

public/themes/custom/hdbt_subtheme/src/js/react/apps/hyte-search/components/ThemeFilter.tsx

@@ -1,20 +1,26 @@
-// biome-ignore-all lint/correctness/useExhaustiveDependencies: @todo UHF-12501
-// biome-ignore-all lint/suspicious/noExplicitAny: @todo UHF-12501
 import type { estypes } from '@elastic/elasticsearch';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useAtomCallback } from 'jotai/react/utils';
 import { useCallback, useEffect } from 'react';
-import { Components } from '../../../enum/Components';
+import { Components } from 'src/js/react/enum/Components';
 import useSwr from 'swr';
 import { AddressNotFound } from '@/react/common/AddressNotFound';
 import { GhostList } from '@/react/common/GhostList';
 import { ResultsWrapper } from '@/react/common/ResultsWrapper';
 import { ResultCard } from '../components/ResultCard';
 import { useQuery } from '../hooks/useQuery';
-import { getPageAtom, initializedAtom, setPageAtom, shouldScrollAtom, submittedStateAtom } from '../store';
-import type { Service } from '../types/Service';
+import {
+  getElasticUrlAtom,
+  getPageAtom,
+  initializedAtom,
+  setPageAtom,
+  shouldScrollAtom,
+  submittedStateAtom,
+} from '../store';
+import type { Service, Unit } from '../types/Service';
 
-export const ResultsContainer = ({ url }: { url: string }) => {
+export const ResultsContainer = () => {
+  const url = useAtomValue(getElasticUrlAtom);
   const initialized = useAtomValue(initializedAtom);
   const query = useQuery();
   const submittedState = useAtomValue(submittedStateAtom);
@@ -25,7 +31,7 @@ export const ResultsContainer = ({ url }: { url: string }) => {
 
   const fetcher = useCallback(
     (query: string) =>
-      fetch(url, {
+      fetch(`${url}/hyte/_search`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: query,
@@ -46,7 +52,7 @@ export const ResultsContainer = ({ url }: { url: string }) => {
     if (!readShouldScroll() && !loading && initialized) {
       setShouldScroll(true);
     }
-  }, [loading, readShouldScroll, setShouldScroll]);
+  }, [initialized, loading, readShouldScroll, setShouldScroll]);
 
   if (!initialized) {
     return <GhostList count={10} />;
@@ -56,17 +62,39 @@ export const ResultsContainer = ({ url }: { url: string }) => {
     return <AddressNotFound />;
   }
 
-  const resultItemCallBack = (item: estypes.SearchHit<any>) => (
-    <ResultCard key={item._id} {...(item.fields as Service)} />
-  );
+  const resultItemCallBack = (item: estypes.SearchHit<Service>) => {
+    const service = item.inner_hits?.collapsed_services.hits.hits[0];
+
+    if (!service) {
+      throw new Error('Service inner hit is missing');
+    }
+
+    const units: Unit[] =
+      service.inner_hits?.sorted_units.hits.hits.reduce<Unit[]>((acc, unitHit) => {
+        unitHit?.fields?.units.forEach((unit: Unit) => {
+          acc.push(unit);
+        });
+        return acc;
+      }, []) ||
+      service.fields?.units ||
+      [];
+
+    return <ResultCard {...(service.fields as Service)} key={item._id} units={units} />;
+  };
 
   return (
     <ResultsWrapper
       currentPage={currentPage}
       data={data}
       error={error}
       getHeaderText={() =>
-        Drupal.formatPlural(data?.hits.total.value ?? 0, '1 result', '@count results', {}, { context: 'Hyte search' })
+        Drupal.formatPlural(
+          data.aggregations?.total_services?.value ?? 0,
+          '1 result',
+          '@count results',
+          {},
+          { context: 'Hyte search' },
+        )
       }
       isLoading={loading}
       resultItemCallBack={resultItemCallBack}

public/themes/custom/hdbt_subtheme/src/js/react/apps/hyte-search/containers/ResultsContainer.tsx

@@ -3,32 +3,25 @@
 import type { estypes } from '@elastic/elasticsearch';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useEffect } from 'react';
-import { IndexFields } from '../../../enum/IndexFields';
+import { IndexFields } from 'src/js/react/enum/IndexFields';
 import useSWRImmutable from 'swr/immutable';
-import { initializeAppAtom, initializedAtom } from '../store';
+import { getElasticUrlAtom, initializeAppAtom, initializedAtom } from '../store';
 import { FormContainer } from './FormContainer';
 import { ResultsContainer } from './ResultsContainer';
 
 const aggsQueryString = JSON.stringify({
   _source: false,
-  aggs: {
-    themes: {
-      terms: {
-        field: `${IndexFields.NAME_SYNONYMS}.keyword`,
-        size: 10000,
-        order: { _key: 'asc' },
-      },
-    },
-  },
+  aggs: { themes: { terms: { field: `${IndexFields.NAME_SYNONYMS}.keyword`, size: 10000, order: { _key: 'asc' } } } },
   query: { match_all: {} },
 });
 
-export const SearchContainer = ({ url }: { url: string }) => {
+export const SearchContainer = () => {
+  const url = useAtomValue(getElasticUrlAtom);
   const initialized = useAtomValue(initializedAtom);
   const initializeApp = useSetAtom(initializeAppAtom);
 
   const fetcher = async (query: string) => {
-    const response = await fetch(url, {
+    const response = await fetch(`${url}/hyte/_search`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: query,
@@ -53,7 +46,7 @@ export const SearchContainer = ({ url }: { url: string }) => {
   return (
     <>
       <FormContainer />
-      <ResultsContainer url={url} />
+      <ResultsContainer />
     </>
   );
 };

public/themes/custom/hdbt_subtheme/src/js/react/apps/hyte-search/containers/SearchContainer.tsx

@@ -2,7 +2,7 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { RESET } from 'jotai/utils';
 
-import { Components } from '../../../enum/Components';
+import { Components } from 'src/js/react/enum/Components';
 import FilterButton from '@/react/common/FilterButton';
 import SelectionsWrapper from '@/react/common/SelectionsWrapper';
 import { setSearchStateAtom, submitStateAtom, submittedStateAtom } from '../store';