UHF-9108: Convert linked events search to use common components for r…

…esults title and empty message

src/js/react/apps/linkedevents/containers/ResultsContainer.tsx

@@ -9,15 +9,17 @@ import ResultCard from '../components/ResultCard';
 import SeeAllButton from '../components/SeeAllButton';
 import { settingsAtom, urlAtom } from '../store';
 import type Event from '../types/Event';
+import ResultsHeader from '@/react/common/ResultsHeader';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 
 type ResultsContainerProps = {
-  count: number;
+  countNumber: number;
   events: Event[];
   loading: boolean;
   error?: Error;
 };
 
-function ResultsContainer({ count, events, loading, error }: ResultsContainerProps) {
+function ResultsContainer({ countNumber, events, loading, error }: ResultsContainerProps) {
   const settings = useAtomValue(settingsAtom);
   const scrollTarget = createRef<HTMLDivElement>();
   const url = useAtomValue(urlAtom);
@@ -43,30 +45,27 @@ function ResultsContainer({ count, events, loading, error }: ResultsContainerPro
   }
 
   const size = settings.eventCount;
-  const pages = Math.floor(count / size);
-  const addLastPage = count > size && count % size;
-  const showCount = !Number.isNaN(count) && !loading;
+  const pages = Math.floor(countNumber / size);
+  const addLastPage = countNumber > size && countNumber % size;
+  const count = countNumber.toString();
 
   return (
     <div className='react-search__list-container'>
-      <div className='react-search__results-stats' ref={scrollTarget}>
-        {Boolean(showCount) &&
-          <>
-            <span className='react-search__count'>{count} </span>
-            <span>{Drupal.t('events')}</span>
-          </>
-        }
-      </div>
       {events?.length > 0 ?
         <>
+          <ResultsHeader
+            resultText={
+              <>
+                { Drupal.formatPlural(count, '1 event', '@count events',{},{context: 'Event search: result count'}) }
+              </>
+            }
+            ref={scrollTarget}
+          />
           {events.map(event => <ResultCard key={event.id} {...event} />)}
           <Pagination pages={5} totalPages={addLastPage ? pages + 1 : pages} />
         </>
         :
-        <div className='event-list__no-results' ref={scrollTarget}>
-          <h3>{Drupal.t('This event list is empty.')}</h3>
-          <p className='events-list__empty-subtext'>{Drupal.t('No worries though, this city does not run out of things to do.')}</p>
-        </div>
+        <ResultsEmpty wrapperClass='event-list__no-results' ref={scrollTarget} />
       }
       <SeeAllButton />
     </div>

src/js/react/apps/linkedevents/containers/SearchContainer.tsx

@@ -53,7 +53,7 @@ const SearchContainer = () => {
   return (
     <>
       <FormContainer />
-      <ResultsContainer error={error} count={data?.meta.count || 0} loading={loading} events={data?.data || []} />
+      <ResultsContainer error={error} countNumber={data?.meta.count || 0} loading={loading} events={data?.data || []} />
     </>
   );
 };

src/scss/06_components/paragraphs/_react-search.scss

@@ -53,16 +53,16 @@ fieldset .hdbt-search--react__checkbox {
 }
 
 fieldset .hdbt-search--react__checkbox:not(:first-of-type) {
+  margin-top: $spacing-double;
+
   @include breakpoint($breakpoint-l) {
     margin-left: $spacing;
     margin-top: 0;
   }
-
-  margin-top: $spacing-double;
 }
 
 .hdbt-search--react__result-top-area {
-  margin-bottom: $spacing;
+  margin-bottom: $spacing-and-half;
 
   @include breakpoint($breakpoint-l) {
     display: flex;

translations/fi.po

@@ -1000,3 +1000,9 @@ msgstr "Ei hakutuloksia"
 msgctxt "Unit search no results text"
 msgid "No results were found for the criteria you entered. Try changing your search criteria."
 msgstr "Antamillasi valinnoilla ei löytynyt tuloksia. Voit kokeilla muuttaa hakuehtojasi."
+
+msgctxt "Event search: result count"
+msgid "1 event"
+msgid_plural "@count events"
+msgstr[0] "1 tapahtuma"
+msgstr[1] "@count tapahtumaa"

translations/sv.po

@@ -997,3 +997,9 @@ msgstr "Inga sökresultat"
 msgctxt "Unit search no results text"
 msgid "No results were found for the criteria you entered. Try changing your search criteria."
 msgstr "Med dina val hittades inga resultat. Du kan försöka ändra dina sökvillkor."
+
+msgctxt "Event search: result count"
+msgid "1 event"
+msgid_plural "@count events"
+msgstr[0] "1 evenemang"
+msgstr[1] "@count evenemang"