@blaze-cms/plugin-search-ui 0.129.0-admin-updates.2 → 0.129.0-admin-updates.4

package/src/components/SearchAdmin/SearchAdmin.js

@@ -37,11 +37,13 @@ const SearchAdmin = () => {
   const handleSearchTerm = ({ target: { value } }) => {
     setSearchTerm(value);
   };
+
   const toggleSearchModal = () => {
     setSearchTerm(null);
     setEnableResults(false);
     setDisplaySearchModalFrame(!displaySearchModalFrame);
   };
+
   const search = ({ value }) => {
     if (!value) return;
     !enableResults && setEnableResults(true);
@@ -84,8 +86,6 @@ const SearchAdmin = () => {
   const shouldDisplayRecentSearches =
     isEmptySearchTermAndData || isEmptySearchTermnAndDisabledResults;
 
-  const showResults = enableResults && results.length;
-
   const handleSetEntityValues = newEntity => {
     const entityExists = entityValues.some(entity => entity.id === newEntity.id);
     if (entityExists) {
@@ -120,24 +120,14 @@ const SearchAdmin = () => {
                   search={() => search({ value: searchTerm })}
                 />
               </div>
-              {shouldDisplayRecentSearches ? (
+              {shouldDisplayRecentSearches && (
                 <RecentSearches
                   recentSearches={recentSearches}
                   handleSearchTerm={handleSearchTerm}
                   search={search}
                 />
-              ) : (
-                <>
-                  {!showResults && (
-                    <div className="list list--search">
-                      <div className="header header--list">
-                        <h2>No Results</h2>
-                      </div>
-                    </div>
-                  )}
-                </>
               )}
-              {showResults && (
+              {enableResults && (
                 <SearchResults
                   currentValue={searchTerm}
                   searchTerm={searchTerm}

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';
@@ -22,6 +22,20 @@ const SearchResults = ({
 }) => {
   const [verifiedRanges, setVerifiedRanges] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentResults, setCurrentResults] = useState([]);
+  const [currentTotal, setCurrentTotal] = useState(0);
+
+  useEffect(
+    () => {
+      if (!loading) {
+        const [lowestRange] = verifiedRanges;
+        setCurrentTotal(total);
+        setCurrentResults(results);
+        if (lowestRange > results.length) setVerifiedRanges([]);
+      }
+    },
+    [loading, results, total, verifiedRanges]
+  );
 
   const handleRenderedItems = async ({ startIndex }) => {
     const rowsLength = results.length;
@@ -49,89 +63,96 @@ const SearchResults = ({
     return `${day}.${month}.${year}`;
   };
 
-  return (
-    <>
-      {loading && <span>Loading...</span>}
-      <div className="modal__content modal__content--search">
+  if (!currentResults.length)
+    return (
+      <div className="list list--search">
         <div className="header header--list">
-          <h2 className="header--list--results">
-            About <b>{total}</b> search keywords 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,
-              entityIdentifier,
-              published,
-              created,
-              status
-            } = results[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({
+      </div>
+    );
+
+  return (
+    <div className="modal__content modal__content--search">
+      <div className="header header--list">
+        <h2 className="header--list--results">
+          About <b>{currentTotal}</b> search keywords results
+        </h2>
+      </div>
+      <VirtualList
+        width="100%"
+        height={window.innerHeight - SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST}
+        itemCount={currentResults.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
+          } = currentResults[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-link">
-                      {name}
-                    </a>
+                      })
+                    }
+                    className="list__item-link">
+                    {name}
+                  </a>
 
-                    <div className="list__item-dates">
-                      {publishedDate && (
-                        <span>
-                          <b>Published: </b>
-                          {publishedDate}
-                        </span>
-                      )}
+                  <div className="list__item-dates">
+                    {publishedDate && (
                       <span>
-                        <b>Created: </b>
-                        {createdDate}
+                        <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>Updated: </b>
-                        {updatedDate}
+                        <b>Status: </b>
+                        {status}
                       </span>
-                    </div>
-                    <div className="list__item-status">
-                      {status && (
-                        <span>
-                          <b>Status: </b>
-                          {status}
-                        </span>
-                      )}
-                    </div>
+                    )}
                   </div>
                 </div>
               </div>
-            );
-          }}
-        />
-      </div>
-    </>
+            </div>
+          );
+        }}
+      />
+      {loading && <span>Loading...</span>}
+    </div>
   );
 };
 

package/src/components/useSearch/useSearch.js

@@ -5,10 +5,10 @@ import searchQueries from '../../application/query';
 function useSearch({ queryKey, resultKeys, entities = [], fields }) {
   const [queryParams, setParams] = useState({ limit: 20, offset: 0, value: '' });
   const [searchedValue, setSearchedValue] = useState(null);
-  const [en, setEn] = useState([]);
+  const [previousEntities, setPreviousEntities] = useState([]);
   const [previousOffset, setPreviousOffset] = useState(null);
-
   const buildSearchQuery = searchQueries[queryKey];
+
   const [
     getSearchResults,
     {
@@ -30,7 +30,7 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
       const { limit, offset, value } = queryParams;
       const isNewValueSet = value && value !== searchedValue;
       const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
-      const notSameLength = en.length !== entities.length;
+      const notSameLength = previousEntities.length !== entities.length;
       const parsedEntities = entities.length
         ? entities.map(entity => ({
             match: { docType: entity }
@@ -67,7 +67,7 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
         });
         setSearchedValue(value);
         setPreviousOffset(offset);
-        setEn(entities);
+        setPreviousEntities(entities);
       }
     },
     [
@@ -81,7 +81,7 @@ function useSearch({ queryKey, resultKeys, entities = [], fields }) {
       entities,
       fields,
       entities.length,
-      en.length
+      previousEntities.length
     ]
   );
 

package/src/components/useSearchResults/useSearchResults.js

@@ -1,6 +1,9 @@
+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,15 +13,25 @@ function useSearchResults({ queryKey, resultKeys, entities, fields }) {
     setParams
   ] = useSearch({ queryKey, resultKeys, entities, fields });
 
+  useEffect(
+    () => {
+      if (currentResults.length !== results.length) {
+        setAllResults([...allResults, ...results]);
+        setCurrentResults(results);
+      }
+    },
+    [allResults, currentResults, results]
+  );
+
   const clearList = params => {
+    setAllResults([]);
     setParams({ ...params, offset: 0 });
   };
 
   const setQueryParams = params => {
     params.value !== searchedValue ? clearList(params) : setParams(params);
   };
-
-  return [{ loading, results, total }, setQueryParams];
+  return [{ loading, results: allResults, total }, setQueryParams];
 }
 
 export default useSearchResults;