[UIPQB-132] Add useLastNotEmptyValue hook (#147)

* Add useLastNotEmptyValue hook

* Update CHANGELOG.md

CHANGELOG.md

@@ -11,6 +11,7 @@
 * [UIPQB-119](https://folio-org.atlassian.net/browse/UIPQB-119) Filter column names
 * [UIPQB-79](https://folio-org.atlassian.net/browse/UIPQB-79) Update available operators for arrays
 * [UIPQB-131](https://folio-org.atlassian.net/browse/UIPQB-131) Columns and empty area display in the list details page, when we refresh the page 1st time or duplicate the list
+* [UIPQB-132](https://folio-org.atlassian.net/browse/UIPQB-132) Save not empty previews results and show it in test query
 
 ## [1.1.4](https://github.com/folio-org/ui-plugin-query-builder/tree/v1.1.4) (2024-04-02)
 

src/QueryBuilder/ResultViewer/ResultViewer.js

@@ -9,6 +9,7 @@ import { useAsyncDataSource } from '../../hooks/useAsyncDataSource';
 import { usePagination } from '../../hooks/usePagination';
 import { useViewerRefresh } from '../../hooks/useViewerRefresh';
 import { useViewerCallbacks } from '../../hooks/useViewerCallbacks';
+import { useLastNotEmptyValue } from '../../hooks/useLastNotEmptyValue';
 
 export const ResultViewer = ({
   showPagination = true,
@@ -66,6 +67,8 @@ export const ResultViewer = ({
     forcedVisibleValues,
   });
 
+  const lastNotEmptyContent = useLastNotEmptyValue(contentData, []);
+
   const isListLoading = isContentDataFetching || isContentDataLoading || isEntityTypeLoading || refreshInProgress;
   const currentRecordsCount = contentData?.length || 0;
 
@@ -98,7 +101,7 @@ export const ResultViewer = ({
       <Row between="xs">
         <Col xs={10}>
           <Headline size="large" margin="none" tag="h3">
-            {isListLoading ?
+            {isListLoading && !totalRecords ?
               intl.formatMessage({ id: 'ui-plugin-query-builder.result.inProgress' })
               :
               headline?.({
@@ -135,7 +138,7 @@ export const ResultViewer = ({
           ) : (
             <MultiColumnList
               data-testid="results-viewer-table"
-              contentData={contentData}
+              contentData={lastNotEmptyContent}
               columnMapping={columnMapping}
               formatter={formatter}
               columnWidths={columnWidths}

src/hooks/useLastNotEmptyValue.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import { isEmpty } from 'lodash';
+
+export const useLastNotEmptyValue = (value, defaultValue) => {
+  const [lastNotEmptyValue, setLastNotEmptyValue] = useState(defaultValue);
+
+  useEffect(() => {
+    if (!isEmpty(value)) {
+      setLastNotEmptyValue(value);
+    }
+  }, [value]);
+
+  return lastNotEmptyValue;
+};