Merge pull request #1160 from City-of-Helsinki/UHF-11002

UHF-11002

hdbt.theme

@@ -1016,16 +1016,6 @@ function hdbt_preprocess_paragraph__unit_contact_card(array &$variables) : void
   }
 }
 
-/**
- * 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;
-  }
-}
-
 /**
  * Implements hook_library_info_alter().
  */

src/js/react/apps/news-archive/containers/ResultsContainer.tsx

@@ -15,9 +15,17 @@ import RssFeedLink from '../components/RssFeedLink';
 import useIndexQuery from '../hooks/useIndexQuery';
 import LoadingOverlay from '@/react/common/LoadingOverlay';
 import ResultsEmpty from '@/react/common/ResultsEmpty';
+import OptionType from '@/types/OptionType';
 
-const ResultsContainer = (): JSX.Element => {
-  const size = Global.SIZE;
+type ResultsContainerProps = {
+  hidePagination?: boolean;
+};
+
+const ResultsContainer = ({
+  hidePagination = false
+}: ResultsContainerProps): JSX.Element => {
+  const size = drupalSettings?.helfi_news_archive?.max_results ?? Global.SIZE;
+  const hideForm = drupalSettings?.helfi_news_archive?.hide_form ?? false;
   const urlParams = useAtomValue(urlAtom);
   const queryString = useQueryString(urlParams);
   const setPage = useSetAtom(setPageAtom);
@@ -69,26 +77,26 @@ const ResultsContainer = (): JSX.Element => {
 
   return (
     <div className="react-search__results">
-      <ResultsHeader
+      {hideForm || <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
+        {hideForm || <RssFeedLink />}
+        {hideForm || <Pagination
           currentPage={currentPage}
           pages={5}
           totalPages={addLastPage ? pages + 1 : pages}
           updatePage={updatePage}
-        />
+        />}
       </div>
     </div>
   );

src/js/react/apps/news-archive/helpers/NewsSearchParams.ts

@@ -32,7 +32,7 @@ class NewsSearchParams extends URLSearchParams {
 
     Object.keys(arrayValues).forEach((key) => this.set(key, arrayValues[key].toString()));
   }
-  
+
   toInitialValue(): URLParams {
     const initialParams: URLParams = {
       groups: [],
@@ -75,7 +75,7 @@ class NewsSearchParams extends URLSearchParams {
       if (key === SearchComponents.RESULTS) {
         paramString = `${key}=${value}`;
       } else if (value && value.length) {
-        
+
         if (value.includes(',')) {
           const valueArray = value.split(',');
 

src/js/react/apps/news-archive/hooks/useIndexQuery.tsx

@@ -19,8 +19,7 @@ type useIndexQueryProps = {
 const useIndexQuery = ({debug, query, multi, key, ...rest}: useIndexQueryProps) => {
   const fetcher = () => {
     const index = Global.INDEX;
-    const proxyUrl = drupalSettings?.helfi_news_archive?.elastic_proxy_url;
-    const url: string|undefined = proxyUrl;
+    const url: string|undefined = drupalSettings?.helfi_news_archive?.elastic_proxy_url;
     const endpoint = multi ? '_msearch' : '_search';
     const contentType = multi ? 'application/x-ndjson' : 'application/json';
 

src/js/react/apps/news-archive/hooks/useQueryString.tsx

@@ -5,7 +5,7 @@ import Global from '../enum/Global';
 
 const useQueryString = (urlParams: URLParams) => {
   const languageFilter = useLanguageQuery();
-  const size = Global.SIZE;
+  const size = drupalSettings?.helfi_news_archive?.max_results ?? Global.SIZE;
   const page = Number.isNaN(Number(urlParams.page)) ? 1 : Number(urlParams.page);
   const must: any[] = [];
 

src/js/react/apps/news-archive/index.tsx

@@ -11,21 +11,16 @@ initSentry();
 const rootSelector: string = 'helfi-etusivu-news-search';
 const rootElement: HTMLElement | null = document.getElementById(rootSelector);
 
-const paragraphTitle: HTMLElement | null = document.querySelector('.component--news-archive .component__title');
-
-if (paragraphTitle) {
-  paragraphTitle.textContent = drupalSettings?.helfi_news_archive?.title ?? Drupal.t('News archive', {}, { context: 'News archive fallback title' });
-}
-
 if (rootElement) {
+  const hideForm = drupalSettings?.helfi_news_archive?.hide_form ?? false;
   ReactDOM.render(
     <React.StrictMode>
       <Suspense fallback={
         <div className='hdbt__loading-wrapper'>
           <LoadingOverlay />
         </div>
       }>
-        <FormContainer />
+        {hideForm || <FormContainer />}
         <ResultsContainer />
       </Suspense>
     </React.StrictMode>,

src/js/react/apps/news-archive/store.tsx

@@ -3,7 +3,8 @@ import { atom } from 'jotai';
 import type URLParams from './types/URLParams';
 import NewsSearchParams from './helpers/NewsSearchParams';
 
-const params = new NewsSearchParams(window.location.search);
+const initialParamString = drupalSettings.helfi_news_archive.default_query ?? window.location.search;
+const params = new NewsSearchParams(initialParamString);
 
 const initialParams = params.toInitialValue();
 

src/js/types/drupalSettings.d.ts

@@ -48,8 +48,10 @@ declare namespace drupalSettings {
   };
   const helfi_news_archive: {
     elastic_proxy_url: string;
+    default_query?: string
+    max_results?: number;
+    hide_form?: boolean
     feed_base_url: string;
-    title: string;
   };
   const hdbt_cookie_banner: {
     settingsPageUrl: string;

src/scss/06_components/paragraphs/_event-list.scss

@@ -12,15 +12,6 @@ $tag-vertical-padding: 5px;
   @include component-side-padding;
 }
 
-.component--react-search.component--coordinates-based-event-list {
-  background-color: $color-white;
-}
-
-// Use experimental card border styles for this paragraph.
-.component--coordinates-based-event-list .card:not(.card--ghost) {
-  border: 2px solid $color-black-20;
-}
-
 .events-list__empty-subtext {
   margin-bottom: $spacing-and-half;
 }

src/scss/06_components/paragraphs/_news-archive.scss

@@ -1,3 +1,7 @@
 .news-archive__rss-link__container {
   margin-top: $spacing;
 }
+
+.component--news-archive .news-archive__link-wrapper {
+  margin-top: $spacing-double;
+}

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

@@ -3,6 +3,15 @@
   position: relative;
 }
 
+.component--react-search.component--coordinates-based-list {
+  background-color: $color-white;
+}
+
+// Use experimental card border styles for this paragraph.
+.component--coordinates-based-list .card:not(.card--ghost) {
+  border: 2px solid $color-black-20;
+}
+
 // If the react search is just before footer it needs to function the same way as unit search.
 .layout-main-wrapper > *:last-child .component--react-search:last-child {
   padding-bottom: 0;

templates/paragraphs/paragraph--news-archive.html.twig

@@ -1,13 +1,14 @@
 {{ attach_library('hdbt/news-archive') }}
 {% block paragraph %}
+  {% set component_title = paragraph.field_news_archive_title.value ? paragraph.field_news_archive_title.value : 'News archive'|t({}, {'context': 'News archive fallback title'}) %}
   {% embed "@hdbt/misc/component.twig" with
     {
       component_classes: [
       'component--full-width',
       'component--react-search',
       'component--news-archive',
     ],
-      component_title: 'News archive'|t({}, {'context': 'News archive fallback title'}),
+      component_title: component_title,
       component_description: content.field_news_archive_desc,
       component_content_class: 'news-archive',
     }