UHF-9108: Add ResultsEmpty common component and refactor most of the …

…searches to use it

src/js/react/apps/district-and-project-search/containers/ResultsContainer.tsx

@@ -15,6 +15,7 @@ import Global from '../enum/Global';
 import Settings from '../enum/Settings';
 import type URLParams from '../types/URLParams';
 import ResultsHeader from '@/react/common/ResultsHeader';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 
 const ResultsContainer = (): JSX.Element => {
   const { size } = Global;
@@ -64,14 +65,7 @@ const ResultsContainer = (): JSX.Element => {
   }
 
   if (!data?.hits?.hits.length) {
-    return (
-      <div className="react-search__results">
-        <div className='hdbt-search--react__results--container'>
-          <h3 className='hdbt-search--react__results--title' ref={scrollTarget}>{Drupal.t('Oh no! We did not find anything matching the search terms.', {}, { context: 'District and project search' })}</h3>
-          <p>{Drupal.t('Our website currently shows only some of the projects and residential areas of Helsinki. You can try again by removing some of the limiting search terms or by starting over.', {}, { context: 'District and project search' })}</p>
-        </div>
-      </div>
-    );
+    return <ResultsEmpty ref={scrollTarget} />;
   }
 
   const results = data.hits.hits;

src/js/react/apps/health-station-search/components/ResultsList.tsx

@@ -12,6 +12,7 @@ import { HealthStation } from '../types/HealthStation';
 import ResultCard from './ResultCard';
 import { paramsAtom } from '../store';
 import ResultsHeader from '@/react/common/ResultsHeader';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 
 type ResultsListProps = {
   data: any;
@@ -49,11 +50,7 @@ const ResultsList = ({ data, error, isLoading, isValidating, page, updatePage }:
   }
 
   if (!data?.hits?.hits.length) {
-    return (
-      <div ref={scrollTarget}>
-        {Drupal.t('No results were found for the criteria you entered. Try changing your search criteria.', {}, { context: 'React search: no search results' })}
-      </div>
-    );
+    return <ResultsEmpty ref={scrollTarget} />;
   }
 
   const results = data.hits.hits;

src/js/react/apps/job-search/containers/PromotedResultsContainer.tsx

@@ -10,11 +10,11 @@ import URLParams from '../types/URLParams';
 import { configurationsAtom, pageAtom, setPageAtom, urlAtom } from '../store';
 import usePromotedQuery from '../hooks/usePromotedQuery';
 import useIndexQuery from '../hooks/useIndexQuery';
-import NoResults from '../components/results/NoResults';
 import IndexFields from '../enum/IndexFields';
 import ResultsSort from '../components/results/ResultsSort';
 import ResultsList from '../components/results/ResultsList';
 import ResultsHeader from '@/react/common/ResultsHeader';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 
 const PromotedResultsContainer = () => {
   const { size } = Global;
@@ -64,7 +64,7 @@ const PromotedResultsContainer = () => {
     const total = totalNumber.toString();
 
     if (totalNumber <= 0) {
-      return <NoResults ref={scrollTarget} />;
+      return <ResultsEmpty wrapperClass='hdbt-search--react__results--container' ref={scrollTarget} />;
     }
 
     const pages = Math.floor(totalNumber / size);

src/js/react/apps/job-search/containers/SimpleResultsContainer.tsx

@@ -9,12 +9,12 @@ import URLParams from '../types/URLParams';
 import { urlAtom , configurationsAtom, pageAtom, setPageAtom } from '../store';
 import useQueryString from '../hooks/useQueryString';
 import useIndexQuery from '../hooks/useIndexQuery';
-import NoResults from '../components/results/NoResults';
 import ResultsSort from '../components/results/ResultsSort';
 import ResultsList from '../components/results/ResultsList';
 import Global from '../enum/Global';
 import IndexFields from '../enum/IndexFields';
 import ResultsHeader from '@/react/common/ResultsHeader';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 
 const SimpleResultsContainer = () => {
   const { size } = Global;
@@ -50,7 +50,7 @@ const SimpleResultsContainer = () => {
     }
 
     if (!data?.hits?.hits.length) {
-      return <NoResults ref={scrollTarget} />;
+      return <ResultsEmpty wrapperClass='hdbt-search--react__results--container' ref={scrollTarget} />;
     }
 
     const results = data.hits.hits;

src/js/react/apps/maternity-and-child-health-clinic-search/components/ResultsList.tsx

@@ -12,6 +12,7 @@ import { MaternityAndChildHealthClinic } from '../types/MaternityAndChildHealthC
 import ResultCard from './ResultCard';
 import { paramsAtom } from '../store';
 import ResultsHeader from '@/react/common/ResultsHeader';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 
 type ResultsListProps = {
   data: any;
@@ -49,11 +50,7 @@ const ResultsList = ({ data, error, isLoading, isValidating, page, updatePage }:
   }
 
   if (!data?.hits?.hits.length) {
-    return (
-      <div ref={scrollTarget}>
-        {Drupal.t('No results were found for the criteria you entered. Try changing your search criteria.', {}, { context: 'React search: no search results' })}
-      </div>
-    );
+    return <ResultsEmpty ref={scrollTarget} />;
   }
 
   const results = data.hits.hits;

src/js/react/apps/school-search/components/ResultsList.tsx

@@ -12,7 +12,7 @@ import { School } from '../types/School';
 import ResultCard from './ResultCard';
 import { paramsAtom } from '../store';
 import ResultsHeader from '@/react/common/ResultsHeader';
-import ResultsSort from '../../district-and-project-search/components/results/ResultsSort';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 
 type ResultsListProps = {
   data: any;
@@ -49,11 +49,7 @@ const ResultsList = ({ data, error, isLoading, isValidating, page, updatePage }:
   }
 
   if (!data?.hits?.hits.length) {
-    return (
-      <div ref={scrollTarget}>
-        {Drupal.t('No results were found for the criteria you entered. Try changing your search criteria.', {}, { context: 'React search: no search results' })}
-      </div>
-    );
+    return <ResultsEmpty ref={scrollTarget} />;
   }
 
   const results = data.hits.hits;

src/js/react/common/ResultsEmpty.tsx

@@ -0,0 +1,28 @@
+import React, {ForwardedRef, forwardRef} from 'react';
+import ResultsHeader from '@/react/common/ResultsHeader';
+
+type ResultsEmptyProps = {
+  title? : string;
+  content? : string;
+  wrapperClass? : string;
+}
+
+const ResultsEmpty = forwardRef(({ title, content, wrapperClass = 'react-search__results' }: ResultsEmptyProps, ref: ForwardedRef<HTMLDivElement>) => (
+  <div className={wrapperClass}>
+    <ResultsHeader
+      resultText={
+        <>
+          { Drupal.t('No results', {}, {context: 'Unit search no results title'}) }
+        </>
+      }
+      ref={ref}
+    />
+    <p>
+      {Drupal.t('No results were found for the criteria you entered. Try changing your search criteria.', {}, { context: 'React search: no search results' })}
+    </p>
+  </div>
+));
+
+export default ResultsEmpty;
+
+

src/js/react/common/ResultsHeader.tsx

@@ -12,9 +12,11 @@ const ResultsHeader = forwardRef(({ resultText, optionalResultsText, actions, ac
       <h3 className='hdbt-search--react__results--title' ref={ref} >
         {resultText} {optionalResultsText && `(${optionalResultsText})`}
       </h3>
-    <div className={actionsClass}>
-      {actions}
-    </div>
+    {actions && (
+      <div className={actionsClass}>
+        {actions}
+      </div>
+    )}
   </div>
 ));
 

translations/fi.po

@@ -562,14 +562,6 @@ msgctxt "District and project search sort option"
 msgid "Alphabetical @OA"
 msgstr "Aakkosittain @OA"
 
-msgctxt "District and project search"
-msgid "Oh no! We did not find anything matching the search terms."
-msgstr "Voi harmi! Emme löytäneet hakuehdoilla yhtään tulosta."
-
-msgctxt "District and project search"
-msgid "Our website currently shows only some of the projects and residential areas of Helsinki. You can try again by removing some of the limiting search terms or by starting over."
-msgstr "Sivuillamme esitetään toistaiseksi vain osa Helsingin hankkeista ja asuinalueista. Voit kokeilla uudestaan poistamalla jonkin rajausehdoista tai aloittamalla alusta."
-
 msgctxt "Hearing activity suffix singular"
 msgid "comment"
 msgstr "kommentti"
@@ -845,10 +837,6 @@ msgctxt "Job search clear selections"
 msgid "Clear selections"
 msgstr "Tyhjennä valinnat"
 
-msgctxt "Job search no results message"
-msgid "Jobs meeting search criteria was not found. Try different search criteria."
-msgstr "Hakuehtoja vastaavia työpaikkoja ei löytynyt. Kokeile muita hakuehtoja."
-
 msgctxt "TPR Unit tpr data accordion heading"
 msgid "Contact details of daycare centre groups"
 msgstr "Päiväkotiryhmien yhteystiedot"

translations/sv.po

@@ -560,14 +560,6 @@ msgctxt "District and project search sort option"
 msgid "Alphabetical @OA"
 msgstr "I bokstavsordning @OA"
 
-msgctxt "District and project search"
-msgid "Oh no! We did not find anything matching the search terms."
-msgstr "Vad synd! Vi hittade inga resultat med dessa sökvillkor."
-
-msgctxt "District and project search"
-msgid "Our website currently shows only some of the projects and residential areas of Helsinki. You can try again by removing some of the limiting search terms or by starting over."
-msgstr "På vår webbplats finns för närvarande endast en del av Helsingfors projekt och bostadsområden. Du kan försöka på nytt genom att ta bort något av avgränsningsvillkoren eller genom att börja om från början."
-
 msgctxt "Hearing activity suffix singular"
 msgid "comment"
 msgstr "kommentar"
@@ -838,10 +830,6 @@ msgctxt "Job search clear selections"
 msgid "Clear selections"
 msgstr "Töm urvalet"
 
-msgctxt "Job search no results message"
-msgid "Jobs meeting search criteria was not found. Try different search criteria."
-msgstr "Lediga jobb som uppfyller kriterierna finns inte. Prova andra kriterierna för sök."
-
 msgctxt "TPR Unit tpr data accordion heading"
 msgid "Contact details of daycare centre groups"
 msgstr "Barngruppernas kontaktuppgifter"