@blaze-cms/plugin-search-ui 0.133.0 → 0.134.0-project-admin-customisations.0

package/src/components/SearchAdmin/SearchResults/SearchResults.js

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import VirtualList from 'react-tiny-virtual-list';
 import { withRouter } from 'react-router-dom';
@@ -13,6 +13,7 @@ import {
 
 const SearchResults = ({
   currentValue,
+  entities,
   loading,
   results,
   total,
@@ -22,12 +23,45 @@ const SearchResults = ({
 }) => {
   const [verifiedRanges, setVerifiedRanges] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentResults, setCurrentResults] = useState('');
+  const [allResults, setAllResults] = useState([]);
+  const [currentParams, setCurrentParams] = useState('');
+
+  useEffect(
+    () => {
+      if (!loading) {
+        const newResults = results.map(({ id }) => id).join(',');
+        if (currentResults !== newResults) {
+          const newParams = `${currentValue},${entities.join(',')}`;
+          if (newParams !== currentParams) {
+            setAllResults(results);
+            setCurrentParams(newParams);
+            if (verifiedRanges.length) setVerifiedRanges([]);
+          } else {
+            setAllResults(allResults.concat(results));
+          }
+          setCurrentResults(newResults);
+        }
+      }
+    },
+    [
+      allResults,
+      currentParams,
+      currentResults,
+      currentValue,
+      entities,
+      loading,
+      results,
+      total,
+      verifiedRanges.length
+    ]
+  );
 
   const handleRenderedItems = async ({ startIndex }) => {
-    const rowsLength = results.length;
+    const rowsLength = allResults.length;
     const loadIndex = Math.floor(rowsLength / 2) - SEARCH_RESULTS_OVER_SCAN_BUFFER;
     if (loadIndex > 0 && loadIndex < startIndex && !verifiedRanges.includes(loadIndex)) {
-      setQueryParams({ value: currentValue, offset: results.length });
+      setQueryParams({ value: currentValue, offset: allResults.length });
       setVerifiedRanges([...verifiedRanges, loadIndex]);
       setCurrentIndex(startIndex + SEARCH_RESULTS_OVER_SCAN_BUFFER);
     }
@@ -49,53 +83,96 @@ const SearchResults = ({
     return `${day}.${month}.${year}`;
   };
 
-  return (
-    <>
-      {loading && <span>Loading...</span>}
-      <div className="modal__content modal__content--search">
+  if (!allResults.length)
+    return (
+      <div className="list list--search">
         <div className="header header--list">
-          <h2>{total} results</h2>
+          <h2>No Results</h2>
         </div>
-        <VirtualList
-          width="100%"
-          height={window.innerHeight - SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST}
-          itemCount={results.length}
-          itemSize={SEARCH_RESULTS_ITEM_SIZE}
-          overscanCount={SEARCH_RESULTS_OVER_SCAN_BUFFER}
-          scrollToIndex={currentIndex}
-          onItemsRendered={handleRenderedItems}
-          renderItem={({ index, style }) => {
-            const { id, docType, updated, name } = results[index];
-            const updatedDate = updated ? getDateFormat(updated) : null;
-            return (
-              <div key={index} style={style} className="list__item--resultWrapper">
-                <div className="list__item list__item--result">
-                  <div className="list__item-row list__item-row--result">
-                    <span className="badge badge--primary">
-                      {docType} {updatedDate}
-                    </span>
-                    <a
-                      href={getNavigationRoute({
+      </div>
+    );
+
+  return (
+    <div className="modal__content modal__content--search">
+      <div className="header header--list">
+        <h2 className="header--list--results">
+          About <b>{total}</b> search keywords results
+        </h2>
+      </div>
+      <VirtualList
+        width="100%"
+        height={window.innerHeight - SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST}
+        itemCount={allResults.length}
+        itemSize={SEARCH_RESULTS_ITEM_SIZE}
+        overscanCount={SEARCH_RESULTS_OVER_SCAN_BUFFER}
+        scrollToIndex={currentIndex}
+        onItemsRendered={handleRenderedItems}
+        renderItem={({ index, style }) => {
+          const {
+            id,
+            docType,
+            updated,
+            name,
+            entityIdentifier,
+            published,
+            created,
+            status
+          } = allResults[index];
+          const updatedDate = updated ? getDateFormat(updated) : null;
+          const createdDate = created ? getDateFormat(created) : null;
+          const publishedDate = published ? getDateFormat(published) : null;
+          return (
+            <div key={index} style={style} className="list__item--resultWrapper">
+              <div className="list__item list__item--result">
+                <div className="list__item-row list__item-row--result">
+                  <span className="list__item-identifier">{entityIdentifier}</span>
+                  <a
+                    href={getNavigationRoute({
+                      id,
+                      docType
+                    })}
+                    onClick={() =>
+                      navigate({
                         id,
                         docType
-                      })}
-                      onClick={() =>
-                        navigate({
-                          id,
-                          docType
-                        })
-                      }
-                      className="list__item-text list__item-text--result">
-                      {name}
-                    </a>
+                      })
+                    }
+                    className="list__item-link">
+                    {name}
+                  </a>
+
+                  <div className="list__item-dates">
+                    {publishedDate && (
+                      <span>
+                        <b>Published: </b>
+                        {publishedDate}
+                      </span>
+                    )}
+                    <span>
+                      <b>Created: </b>
+                      {createdDate}
+                    </span>
+                    <span>
+                      <b>Updated: </b>
+                      {updatedDate}
+                    </span>
+                  </div>
+                  <div className="list__item-status">
+                    {status && (
+                      <span>
+                        <b>Status: </b>
+                        {status}
+                      </span>
+                    )}
                   </div>
                 </div>
               </div>
-            );
-          }}
-        />
-      </div>
-    </>
+            </div>
+          );
+        }}
+      />
+      {loading && <span>Loading...</span>}
+    </div>
   );
 };
 
@@ -106,7 +183,8 @@ SearchResults.propTypes = {
   setQueryParams: PropTypes.func.isRequired,
   closeModal: PropTypes.func.isRequired,
   history: PropTypes.object.isRequired,
-  currentValue: PropTypes.string.isRequired
+  currentValue: PropTypes.string.isRequired,
+  entities: PropTypes.array.isRequired
 };
 
 export default withRouter(SearchResults);

package/src/components/useSearch/useSearch.js

@@ -5,6 +5,7 @@ import searchQueries from '../../application/query';
 function useSearch({ queryKey, resultKeys, entities = [], fields, extraFilters }) {
   const [queryParams, setParams] = useState({ limit: 20, offset: 0, value: '' });
   const [searchedValue, setSearchedValue] = useState(null);
+  const [previousEntities, setPreviousEntities] = useState([]);
   const [previousOffset, setPreviousOffset] = useState(null);
   const buildSearchQuery = searchQueries[queryKey];
 
@@ -35,13 +36,14 @@ function useSearch({ queryKey, resultKeys, entities = [], fields, extraFilters }
       const { limit, offset, value } = queryParams;
       const isNewValueSet = value && value !== searchedValue;
       const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
+      const notSameLength = previousEntities.length !== entities.length;
       const parsedEntities = entities.length
         ? entities.map(entity => ({
             match: { docType: entity }
           }))
         : [];
 
-      if (isNewValueSet || isNewOffsetSet) {
+      if (isNewValueSet || isNewOffsetSet || notSameLength) {
         getSearchResults({
           variables: {
             limit,
@@ -72,6 +74,7 @@ function useSearch({ queryKey, resultKeys, entities = [], fields, extraFilters }
         });
         setSearchedValue(value);
         setPreviousOffset(offset);
+        setPreviousEntities(entities);
       }
     },
     [
@@ -84,6 +87,8 @@ function useSearch({ queryKey, resultKeys, entities = [], fields, extraFilters }
       getSearchResults,
       entities,
       fields,
+      entities.length,
+      previousEntities.length,
       extraFilters
     ]
   );

package/src/components/useSearchResults/useSearchResults.js

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
 import useSearch from '../useSearch';
 
 function useSearchResults({ queryKey, resultKeys, entities, fields }) {
+  const [currentResults, setCurrentResults] = useState([]);
+  const [allResults, setAllResults] = useState([]);
   const [
     {
       searchedValue,
@@ -10,8 +12,6 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
     },
     setParams
   ] = useSearch({ queryKey, resultKeys, entities, fields });
-  const [currentResults, setCurrentResults] = useState([]);
-  const [allResults, setAllResults] = useState([]);
 
   useEffect(
     () => {
@@ -20,7 +20,7 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
         setCurrentResults(results);
       }
     },
-    [allResults, currentResults, currentResults.length, results]
+    [allResults, currentResults, results]
   );
 
   const clearList = params => {
@@ -32,7 +32,16 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
     params.value !== searchedValue ? clearList(params) : setParams(params);
   };
 
-  return [{ loading, results: allResults, total }, setQueryParams];
+  return [
+    {
+      loading,
+      results: allResults,
+      currentResults,
+      newResults: results,
+      total
+    },
+    setQueryParams
+  ];
 }
 
 export default useSearchResults;