select number records returned

components/search/searchresults.js

@@ -67,6 +67,7 @@ const SearchResults = (props) => {
     var resultsArr = searchResultsObj.value || [];
 
     const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [selectedOption, setSelectedOption] = useState(10);
 
     let spinnerState = () => {
         showSpinnerState == true
@@ -494,6 +495,7 @@ const SearchResults = (props) => {
                 </dl>
 
                 <PaginationControl
+                    showNoOfRecords={selectedOption}
                     currentPage={currentPage}
                     searchResultsObj={searchResultsObj}
                     orderBy={orderByState}
@@ -534,7 +536,13 @@ const SearchResults = (props) => {
                 ...searchString.map(([key, val]) => ({ [key]: val }))
             );
 
-            getAdvancedSearchPaged(searchoObj, pageNumber, orderBy, fieldSort)
+            getAdvancedSearchPaged(
+                searchoObj,
+                pageNumber,
+                orderBy,
+                fieldSort,
+                selectedOption
+            )
                 .then((data) => data)
                 .then((data) => {
                     //console.log("getting details", data);
@@ -545,7 +553,13 @@ const SearchResults = (props) => {
                     });
                 });
         } else {
-            getBasicSearchPaged(searchString, pageNumber, orderBy, fieldSort)
+            getBasicSearchPaged(
+                searchString,
+                pageNumber,
+                orderBy,
+                fieldSort,
+                selectedOption
+            )
                 .then((data) => data)
                 .then((data) => {
                     //console.log("getting details", data);
@@ -571,6 +585,12 @@ const SearchResults = (props) => {
         setShowSpinnerState(true);
     };
 
+    useEffect(() => {
+        if (selectedOption) {
+            setShowSpinnerState(true);
+            getSearchPageResults(1, orderByState, fieldSortState);
+        }
+    }, [selectedOption]);
     // console.log(
     //     "page is here ",
     //     currentPage,
@@ -610,6 +630,29 @@ const SearchResults = (props) => {
                             )}
                         </p>
                     )}
+                    <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)
                     ) : (