Merge pull request #1023 from City-of-Helsinki/UHF-9741

UHF-9741: News archive refresh
City-of-Helsinki · Jul 19, 2024 · 174a4c1 · 174a4c1
2 parents 22408e3 + 01f125c
commit 174a4c1
Show file tree

Hide file tree

Showing 33 changed files with 429 additions and 527 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/js/news-archive.min.js b/dist/js/news-archive.min.js
diff --git a/hdbt.theme b/hdbt.theme
@@ -467,6 +467,19 @@ function hdbt_theme_suggestions_menu_alter(&$suggestions, $variables): void {
   }
 }
 
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function hdbt_preprocess_feed_icon(&$variables): void {
+  if (!isset($variables['title'])) {
+    return;
+  }
+
+  $variables['title'] = match(strtolower($variables['title'])) {
+    'news', 'nyheter', 'uutiset' => t('all news', [], ['context' => 'Feed icon altered title'])
+  };
+}
+
 /**
  * Implements hook_preprocess_HOOK().
  */
@@ -1047,6 +1060,16 @@ function hdbt_preprocess_paragraph__unit_contact_card(&$variables) {
   }
 }
 
+/**
+ * Implements hook_preprocess_paragraph__type().
+ */
+function hdbt_preprocess_paragraph__news_archive(&$variables) {
+  $paragraph = $variables['paragraph'];
+  if ($paragraph->hasField('field_news_archive_title')) {
+    $variables['#attached']['drupalSettings']['helfi_news_archive']['title'] = $paragraph->get('field_news_archive_title')->value;
+  }
+}
+
 /**
  * Set site information as variables for templates.
  *

diff --git a/src/js/react/apps/news-archive/components/Filter.tsx b/src/js/react/apps/news-archive/components/Filter.tsx
@@ -42,7 +42,6 @@ const Filter = ({label, options, stateKey, ...rest}: FilterProps) =>  {
   return (
     /* @ts-ignore */
     <Select
-      className='news-form__filter'
       clearable
       clearButtonAriaLabel={Drupal.t('Clear @label selection', { '@label': label }, { context: 'React search clear selection label' })}
       label={label}

diff --git a/src/js/react/apps/news-archive/components/RssFeedLink.tsx b/src/js/react/apps/news-archive/components/RssFeedLink.tsx
@@ -1,4 +1,3 @@
-import { IconRss } from 'hds-react';
 import { useAtomValue } from 'jotai';
 import { urlAtom } from '../store';
 
@@ -17,15 +16,14 @@ const RssFeedLink = () => {
   const choices = params.topic?.length || params.neighbourhoods?.length || params.groups?.length;
 
   return (
-    <a href={getFeedUrl()} className='news-archive__rss-link'>
-      <IconRss aria-hidden />
-      <span>
-        {choices ? 
+    <div className='news-archive__rss-link__container'>
+      <a href={getFeedUrl()} className='news-archive__rss-link' data-hds-variant="supplementary" data-hds-component="button" data-hds-icon-start="rss">
+        {choices ?
           Drupal.t('Subscribe to RSS feed of news based on your choices', {}, {context: 'News RSS feed subscribe link'}) :
           Drupal.t('Subscribe to all news as RSS feed', {}, {context: 'News RSS feed subscribe link'})
         }
-      </span>
-    </a>
+      </a>
+    </div>
   );
 };
 

diff --git a/src/js/react/apps/news-archive/components/SubmitButton.tsx b/src/js/react/apps/news-archive/components/SubmitButton.tsx
diff --git a/src/js/react/apps/news-archive/components/results/MostReadNews.tsx b/src/js/react/apps/news-archive/components/results/MostReadNews.tsx
diff --git a/src/js/react/apps/news-archive/components/results/NoResults.tsx b/src/js/react/apps/news-archive/components/results/NoResults.tsx
diff --git a/src/js/react/apps/news-archive/components/results/ResultCard.tsx b/src/js/react/apps/news-archive/components/results/ResultCard.tsx
@@ -56,7 +56,7 @@ const ResultCard = ({
     <CardItem
       cardImage={getImage()}
       cardTitle={title.toString()}
-      cardModifierClass='news-listing__item'
+      cardModifierClass='card--news-item'
       cardUrl={url.toString()}
       date={getDate()}
       dateLabel={Drupal.t('Published', {}, { context: 'News search' })}

diff --git a/src/js/react/apps/news-archive/components/results/ResultsHeading.tsx b/src/js/react/apps/news-archive/components/results/ResultsHeading.tsx
diff --git a/src/js/react/apps/news-archive/containers/FormContainer.tsx b/src/js/react/apps/news-archive/containers/FormContainer.tsx
@@ -1,11 +1,11 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { SyntheticEvent } from 'react';
+import {Button} from 'hds-react';
 import useInitialQuery from '../hooks/useInitialQuery';
 import useIndexQuery from '../hooks/useIndexQuery';
 import IndexFields from '../enum/IndexFields';
 import AggregationItem from '../types/AggregationItem';
 import Filter from '../components/Filter';
-import SubmitButton from '../components/SubmitButton';
 import { stagedParamsAtom, urlUpdateAtom } from '../store';
 import SelectionsContainer from './SelectionsContainer';
 
@@ -72,44 +72,49 @@ const FormContainer = () => {
   const groupLabel = Drupal.t('Target groups', {}, { context: 'News archive groups label' });
 
   return (
-    <div className='news-form-wrapper'>
-      <div className='news-form-container'>
-        <form className='news-form' role='search' onSubmit={onSubmit}>
-          <h2>{Drupal.t('Filter news items', {}, {context: 'News archive filter results heading'})}</h2>
-          <div className='news-form__filters-container'>
-            {topicOptions && <Filter
-                label={topicLabel}
-                placeholder={Drupal.t('All topics', {}, { context: 'News archive topics placeholder' })}
-                options={topicOptions}
-                stateKey='topic'
-            />}
-            {neighbourhoodOptions && <Filter
-              label={neighbourhoodLabel}
-              placeholder={Drupal.t(
-                'All city districts',
-                {},
-                { context: 'News archive neighbourhoods placeholder' }
-              )}
-              options={neighbourhoodOptions}
-              stateKey='neighbourhoods'
-            />}
-            {groupOptions && <Filter
-              label={groupLabel}
-              placeholder={Drupal.t('All target groups', {}, { context: 'News archive groups placeholder' })}
-              options={groupOptions}
-              stateKey='groups'
-            />}
-            <SubmitButton disabled={loading} />
-          </div>
-        </form>
-        <SelectionsContainer
-          topic={topicOptions}
-          neighbourhoods={neighbourhoodOptions}
-          groups={groupOptions}
-        />
+    <form className='hdbt-search--react__form-container' role='search' onSubmit={onSubmit}>
+      <div className='hdbt-search--react__dropdown-filters'>
+        {topicOptions && <Filter
+          label={topicLabel}
+          placeholder={Drupal.t('All topics', {}, {context: 'News archive topics placeholder'})}
+          options={topicOptions}
+          stateKey='topic'
+        />}
+        {neighbourhoodOptions && <Filter
+          label={neighbourhoodLabel}
+          placeholder={Drupal.t(
+            'All city districts',
+            {},
+            {context: 'News archive neighbourhoods placeholder'}
+          )}
+          options={neighbourhoodOptions}
+          stateKey='neighbourhoods'
+        />}
+        {groupOptions && <Filter
+          label={groupLabel}
+          placeholder={Drupal.t('All target groups', {}, {context: 'News archive groups placeholder'})}
+          options={groupOptions}
+          stateKey='groups'
+        />}
       </div>
-    </div>
-  );
+      <div className='hdbt-search--react__submit'>
+        <Button
+          className='hdbt-search--react__submit-button'
+          type='submit'
+          variant='primary'
+          theme='black'
+          disabled={loading}
+        >
+          {Drupal.t('Search', {}, {context: 'React search: submit button label'})}
+        </Button>
+      </div>
+      <SelectionsContainer
+        topic={topicOptions}
+        neighbourhoods={neighbourhoodOptions}
+        groups={groupOptions}
+      />
+    </form>
+);
 };
 
 export default FormContainer;
diff --git a/src/js/react/apps/news-archive/containers/ResultsContainer.tsx b/src/js/react/apps/news-archive/containers/ResultsContainer.tsx
@@ -3,25 +3,24 @@ import { SyntheticEvent, createRef } from 'react';
 
 import Result from '@/types/Result';
 import Pagination from '@/react/common/Pagination';
-import ResultWrapper from '@/react/common/ResultWrapper';
 import useScrollToResults from '@/react/common/hooks/useScrollToResults';
 import ResultsError from '@/react/common/ResultsError';
 import { setPageAtom, urlAtom } from '../store';
 import useQueryString from '../hooks/useQueryString';
-import NoResults from '../components/results/NoResults';
 import type NewsItem from '../types/NewsItem';
 import ResultCard from '../components/results/ResultCard';
 import Global from '../enum/Global';
-import ResultsHeading from '../components/results/ResultsHeading';
-import MostReadNews from '../components/results/MostReadNews';
+import ResultsHeader from '@/react/common/ResultsHeader';
 import RssFeedLink from '../components/RssFeedLink';
 import useIndexQuery from '../hooks/useIndexQuery';
+import LoadingOverlay from '@/react/common/LoadingOverlay';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 
-const ResultsContainer = () => {
+const ResultsContainer = (): JSX.Element => {
   const size = Global.SIZE;
   const urlParams = useAtomValue(urlAtom);
-  const setPage = useSetAtom(setPageAtom);
   const queryString = useQueryString(urlParams);
+  const setPage = useSetAtom(setPageAtom);
   const { data, error, isLoading, isValidating } = useIndexQuery({
     keepPreviousData: true,
     query: queryString
@@ -35,43 +34,53 @@ const ResultsContainer = () => {
 
   useScrollToResults(scrollTarget, choices);
 
-  const hits = data?.hits?.hits;
+  const results = data?.hits?.hits;
   const total = data?.hits?.total?.value || 0;
+  const pages = Math.floor(total / size);
+  const addLastPage = total > size && total % size;
+  const currentPage = Number(urlParams.page) || 1;
 
-  const getResults = () => {
-    if (!data && !error) {
-      return;
-    }
+  if (!data && !error) {
+    return (
+      <div className='hdbt__loading-wrapper'>
+        <LoadingOverlay />
+      </div>
+    );
+  }
 
-    if (error) {
-      return (
-        <ResultsError
-          error={error}
-          className='news-listing__no-results'
-          ref={scrollTarget}
-        />
-      );
-    }
+  if (error) {
+    return (
+      <ResultsError
+        error={error}
+        className='react-search__results'
+        ref={scrollTarget}
+      />
+    );
+  }
 
-    if (!hits?.length) {
-      return <NoResults ref={scrollTarget}/>;
-    }
+  if (!results?.length) {
+    return <ResultsEmpty ref={scrollTarget} />;
+  }
 
-    const pages = Math.floor(total / size);
-    const addLastPage = total > size && total % size;
-    const currentPage = Number(urlParams.page) || 1;
-    const updatePage = (e: SyntheticEvent<HTMLButtonElement>, newPage: number) => {
-      e.preventDefault();
-      setPage(newPage);
-    };
+  const updatePage = (e: SyntheticEvent<HTMLButtonElement>, newPage: number) => {
+    e.preventDefault();
+    setPage(newPage);
+  };
 
-    return (
-      <>
-        {hits.map((hit: Result<NewsItem>) => (
-          <ResultCard
-            key={hit._id}
-            {...hit._source}
-          />
+  return (
+    <div className="react-search__results">
+      <ResultsHeader
+        resultText={
+          <>
+            {Drupal.formatPlural(total, '1 search result', '@count search results', {}, {context: 'News archive'})}
+          </>
+        }
+        ref={scrollTarget}
+      />
+      <div className='hdbt-search--react__results--container'>
+        {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+        {results.map((hit: Result<NewsItem>) => (
+          <ResultCard key={hit._id} {...hit._source} />
         ))}
         <RssFeedLink />
         <Pagination
@@ -80,22 +89,7 @@ const ResultsContainer = () => {
           totalPages={addLastPage ? pages + 1 : pages}
           updatePage={updatePage}
         />
-      </>
-    );
-  };
-
-  const loading = isLoading || isValidating;
-  return (
-    <div className='news-wrapper main-content'>
-      <ResultWrapper className='layout-content' loading={loading}>
-        <ResultsHeading
-          choices={choices}
-          ref={scrollTarget}
-          total={total}
-        />
-        {getResults()}
-      </ResultWrapper>
-      <MostReadNews />
+      </div>
     </div>
   );
 };

diff --git a/src/js/react/apps/news-archive/enum/Global.ts b/src/js/react/apps/news-archive/enum/Global.ts
@@ -1,6 +1,6 @@
 const Global = {
   INDEX: 'news',
-  SIZE: 10
+  SIZE: 15
 };
 
 export default Global;