Merge pull request #1162 from City-of-Helsinki/UHF-11306-hakuvahti-fixes

UHF-11306: hakuvahti fixes

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

@@ -1,19 +1,106 @@
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { SyntheticEvent, createRef } from 'react';
 
-import SimpleResultsContainer from './SimpleResultsContainer';
-import PromotedResultsContainer from './PromotedResultsContainer';
-import { configurationsAtom } from '../store';
+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 Global from '../enum/Global';
+import URLParams from '../types/URLParams';
+import { configurationsAtom, pageAtom, setPageAtom, urlAtom } from '../store';
+import useIndexQuery from '../hooks/useIndexQuery';
+import useResultsQuery from '../hooks/useResultsQuery';
+import ResultsSort from '../components/results/ResultsSort';
+import ResultsList from '../components/results/ResultsList';
+import ResultsHeader from '@/react/common/ResultsHeader';
+import ResultsEmpty from '@/react/common/ResultsEmpty';
 import SearchMonitorContainer from './SearchMonitorContainer';
 
 const ResultsContainer = () => {
-  const { promoted } = useAtomValue(configurationsAtom);
-
-  return promoted?.length ?
-  <PromotedResultsContainer /> :
-  <>
-    {drupalSettings?.helfi_react_search?.hakuvahti_url_set && <SearchMonitorContainer />}
-    <SimpleResultsContainer />
-  </>;
+  const { size } = Global;
+  const urlParams: URLParams = useAtomValue(urlAtom);
+  const currentPage = useAtomValue(pageAtom);
+  const setPage = useSetAtom(setPageAtom);
+  const { error: initializationError } = useAtomValue(configurationsAtom);
+  const scrollTarget = createRef<HTMLDivElement>();
+  const { query, promoted, handleResults } = useResultsQuery(urlParams);
+
+  // Scroll to results when they change.
+  const choices = Boolean(Object.keys(urlParams).length);
+  useScrollToResults(scrollTarget, choices);
+
+  const { data, error, isLoading, isValidating } = useIndexQuery({
+    keepPreviousData: true,
+    query,
+    multi: promoted
+  });
+
+  const updatePage = (e: SyntheticEvent<HTMLButtonElement>, index: number) => {
+    e.preventDefault();
+    setPage(index.toString());
+  };
+
+  const getResults = () => {
+    if (!data && !error) {
+      return;
+    }
+
+    if (error || initializationError || data.error) {
+      return (
+        <ResultsError
+          error={error || initializationError || data.error}
+          className='react-search__results'
+          ref={scrollTarget}
+        />
+      );
+    }
+
+    const { results, jobs, total } = handleResults(data);
+
+    if (total <= 0) {
+      return <ResultsEmpty wrapperClass='hdbt-search--react__results--container' ref={scrollTarget} />;
+    }
+
+    const pages = Math.ceil(total / size);
+
+    return (
+      <>
+        <ResultsHeader
+          resultText={
+            <>
+              { Drupal.formatPlural(jobs, '1 open position', '@count open positions',{},{ context: 'Job search results statline' }) }
+            </>
+          }
+          optionalResultsText={
+            <>
+              { Drupal.formatPlural(total, '1 job listing', '@count job listings',{},{context: 'Job search results statline'}) }
+            </>
+          }
+          actions={<ResultsSort />}
+          actionsClass="hdbt-search--react__results--sort"
+          ref={scrollTarget}
+        />
+        <ResultsList hits={results} />
+        <Pagination
+          currentPage={currentPage}
+          pages={5}
+          totalPages={pages}
+          updatePage={updatePage}
+        />
+      </>
+    );
+  };
+
+  return (
+    <>
+      {drupalSettings?.helfi_react_search?.hakuvahti_url_set && <SearchMonitorContainer />}
+      <div className='job-search__results'>
+        <ResultWrapper loading={isLoading || isValidating}>
+          {getResults()}
+        </ResultWrapper>
+      </div>
+    </>
+  );
 };
 
 export default ResultsContainer;

src/js/react/apps/job-search/hooks/useIndexQuery.tsx

@@ -4,6 +4,8 @@ import Global from '../enum/Global';
 import useTimeoutFetch from '@/react/common/hooks/useTimeoutFetch';
 
 type UseIndexQueryProps = {
+  // Keep previous result while revalidating from swr.
+  keepPreviousData?: boolean
   // Uses _mquery endpoint if true
   multi?: boolean;
   // Elastic query

src/js/react/apps/job-search/hooks/usePromotedQuery.tsx

@@ -1,14 +1,12 @@
 import Global from '../enum/Global';
 import IndexFields from '../enum/IndexFields';
 import URLParams from '../types/URLParams';
-import useQueryString from './useQueryString';
 
-const usePromotedQuery = (urlParams: URLParams): string => {
+const usePromotedQuery = (baseQuery: string, urlParams: URLParams): string => {
   const { size } = Global;
   const page = Number.isNaN(Number(urlParams.page)) ? 1 : Number(urlParams.page);
-  const baseQuery = useQueryString(urlParams);
   const promotedQuery = JSON.parse(baseQuery);
-  
+
   const promotedClause = {
     term: {
       [IndexFields.PROMOTED]: true