select number records returned

components/search/dnssearchresults.js

@@ -7,7 +7,7 @@ import jsonpath from "jsonpath";
 import _ from "lodash";
 import transLookup from "../../data/lookuptranslations.json";
 import PaginationControl from "./pagination";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import LoadingOverlay from "react-loading-overlay";
 import {
     getBasicDNSSearchPaged,
@@ -48,6 +48,7 @@ const DNSSearchResults = (props) => {
 
     const [orderByState, setOrderbyState] = useState("createdon");
     const [fieldSortState, setfieldSortState] = useState("asc");
+    const [selectedOption, setSelectedOption] = useState(10);
 
     const ResultsView = (resultsArr) => {
         return (
@@ -273,6 +274,7 @@ const DNSSearchResults = (props) => {
                         )}
                     </dl>
                     <PaginationControl
+                        showNoOfRecords={selectedOption}
                         currentPage={currentPage}
                         searchResultsObj={searchResultsObj}
                         orderBy={orderByState}
@@ -335,6 +337,12 @@ const DNSSearchResults = (props) => {
         setShowSpinnerState(true);
     };
 
+    useEffect(() => {
+        if (selectedOption) {
+            setShowSpinnerState(true);
+            getSearchPageResults(1, orderByState, fieldSortState);
+        }
+    }, [selectedOption]);
     return (
         <>
             <div className="govuk-grid-row">
@@ -354,6 +362,29 @@ const DNSSearchResults = (props) => {
                     </ul>
                 </div>
             </div>
+            <div id="recordCountSelect" className="govuk-grid-row">
+                <div className="govuk-form-group">
+                    <label className="govuk-label-s " htmlFor="sort">
+                        {t("search:searchresults-show-records-label-a")}
+                        <select
+                            onChange={(e) => {
+                                setSelectedOption(e.target.value);
+                            }}
+                            value={selectedOption}
+                            className="govuk-select"
+                            id="showNumberOfRecords"
+                            name="showNumberOfRecords"
+                        >
+                            <option value="5">5</option>
+                            <option value="10">10</option>
+                            <option value="20">20</option>
+                            <option value="30">30</option>
+                            <option value="50">50</option>
+                        </select>{" "}
+                        {t("search:searchresults-show-records-label-b")}
+                    </label>
+                </div>
+            </div>
             {resultsArr.length > 0 ? (
                 ResultsView(resultsArr)
             ) : (