added in pagination for search result requests

components/search/dnssearchresults.js

@@ -6,6 +6,19 @@ import { connect } from "react-redux";
 import jsonpath from "jsonpath";
 import _ from "lodash";
 import transLookup from "../../data/lookuptranslations.json";
+import PaginationControl from "./pagination";
+import { useState } from "react";
+import LoadingOverlay from "react-loading-overlay";
+import {
+    getBasicDNSSearchPaged,
+    getBasicSearchDetailsPaged,
+} from "../../actions";
+import data from "../../data/collections.json";
+
+import {
+    setSearchResults,
+    setSearchDetails,
+} from "../../store/searchOutput/action";
 
 const DNSSearchResults = (props) => {
     const {
@@ -13,6 +26,9 @@ const DNSSearchResults = (props) => {
         searchResultsObj,
         searchDetailsObj,
         setCurrentReference,
+        setSearchResults,
+        setSearchDetails,
+        advancedSearch,
     } = props;
     let { t } = useTranslation();
 
@@ -21,6 +37,14 @@ const DNSSearchResults = (props) => {
 
     var resultsArr = searchResultsObj.value || [];
 
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    let spinnerState = () => {
+        showSpinnerState == true
+            ? setShowSpinnerState(false)
+            : setShowSpinnerState(true);
+    };
+
     const ResultsView = (resultsArr) => {
         return (
             <div className="govuk-grid-row govuk-!-margin-top-9">
@@ -193,11 +217,97 @@ const DNSSearchResults = (props) => {
                             );
                         })}
                     </dl>
+                    <PaginationControl
+                        currentPage={currentPage}
+                        searchResultsObj={searchResultsObj}
+                        spinnerState={spinnerState}
+                        getSearchPageResults={getSearchPageResults}
+                    />
                 </div>
             </div>
         );
     };
 
+    let currentPage = 0;
+
+    currentPage = decodeURI(searchResultsObj["@odata.nextLink"]).split(
+        "skiptoken="
+    )[1];
+    currentPage =
+        typeof currentPage != "undefined"
+            ? parseInt(
+                  decodeURI(currentPage)
+                      .split('pagenumber="')[1]
+                      .slice(
+                          0,
+                          decodeURI(currentPage)
+                              .split('pagenumber="')[1]
+                              .indexOf('"')
+                      ) - 1
+              )
+            : pagesCount;
+
+    const getSearchPageResults = (pageNumber) => {
+        console.log(advancedSearch, searchString, pageNumber);
+
+        getBasicDNSSearchPaged(pageNumber)
+            .then((data) => {
+                console.log(data);
+                setSearchResults(data);
+                return data;
+            })
+            .then((data) => {
+                console.log("getting details", data);
+                return getSearchDetails(data).then((data) => {
+                    setSearchDetails(data);
+                    setShowSpinnerState(false);
+                });
+            });
+    };
+
+    const getSearchDetails = (searchResultsObj) => {
+        //console.log(searchResultsObj);
+
+        let detailsArr = [];
+        //console.log("search results", searchResultsObj);
+        searchResultsObj = searchResultsObj.value;
+        const detailsObj = searchResultsObj.map((searchDetail, index) => {
+            //console.log(searchDetail);
+            if (searchDetail.pinswg_appealcasetype == null) {
+                console.log(searchDetail.title);
+            } else {
+                let formMeta = getFormCollection(
+                    "pinswg_" +
+                        searchDetail[
+                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                        ]
+                            .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
+                            .toLowerCase()
+                            .slice(0, 39)
+                );
+
+                detailsArr.push(
+                    getBasicSearchDetailsPaged(
+                        formMeta.LogicalCollectionName,
+                        searchDetail.title,
+                        formMeta.PrimaryIdAttribute,
+                        searchDetail.incidentid
+                    )
+                );
+            }
+        });
+        // console.log(detailsArr);
+        return Promise.all(detailsArr);
+    };
+
+    const getFormCollection = (formtype) => {
+        const collectionName = jsonpath.query(
+            data,
+            "$..[?(@.LogicalName=='" + formtype + "')]"
+        );
+        //console.log(collectionName[0]);
+        return collectionName[0];
+    };
     return (
         <>
             <div className="govuk-grid-row">
@@ -227,6 +337,11 @@ const DNSSearchResults = (props) => {
                     </div>
                 </div>
             )}
+            <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text={t("common:spinner-searching")}
+            />
         </>
     );
 };
@@ -236,6 +351,12 @@ const mapDispatchToProps = (dispatch) => {
         setCurrentReference: (currentReference) => {
             dispatch(setCurrentReference(currentReference));
         },
+        setSearchResults: (searchResultsObj) => {
+            dispatch(setSearchResults(searchResultsObj));
+        },
+        setSearchDetails: (searchDetailsObj) => {
+            dispatch(setSearchDetails(searchDetailsObj));
+        },
     };
 };