Merge pull request #166 from wearefuturegov/TOP-173-add-number-of-res…

…ults-filter TOP-173 add number or results filter
wearefuturegov · Nov 11, 2024 · abe1da2 · abe1da2
2 parents 71e16f7 + ce2c886
commit abe1da2
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 22 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -45,6 +45,7 @@ import ClearFilters from "./components/ClearFilters"
 import { checkCookiesAccepted } from "./lib/cookies"
 import AlertStatic from "./components/AlertStatic"
 import ScheduleFilter from "./components/Filter/ScheduleFilter"
+import ResultsPerPage from "./components/ResultsPerPage"
 
 const App = ({ children, location, navigate }) => {
   const [keywords, setKeywords] = useQuery("keywords", "")
@@ -80,6 +81,9 @@ const App = ({ children, location, navigate }) => {
   const [minAge, setMinAge] = useQuery("min_age", false, { numerical: true })
   const [maxAge, setMaxAge] = useQuery("max_age", false, { numerical: true })
   const [only, setOnly] = useQuery("only", [], { array: true })
+  const [perPage, setPerPage] = useQuery("per_page", false, {
+    numerical: true,
+  })
 
   const [mapVisible, setMapVisible] = useQuery("map", false, { boolean: true })
 
@@ -429,6 +433,7 @@ const App = ({ children, location, navigate }) => {
                 filters={filters}
                 clearCategory={setCollection}
                 clearSubCategory={setCategories}
+                clearPerPage={setPerPage}
               />
             </Filters>
           </>
@@ -446,6 +451,8 @@ const App = ({ children, location, navigate }) => {
             page={page}
             setPage={setPage}
             estTotalResults={estTotalResults}
+            perPage={perPage}
+            setPerPage={setPerPage}
           />
         }
       />
@@ -466,10 +473,15 @@ const MainContent = ({
   estTotalResults,
   page,
   setPage,
+  perPage,
+  setPerPage,
 }) => {
   const scrollTarget = useRef(null)
   const cookiesAccepted = checkCookiesAccepted()
 
+  const resultsPerPage = perPage
+    ? parseInt(perPage)
+    : theme.resultsPerPage || 20
   // still loading
   if (loading)
     return (
@@ -508,15 +520,15 @@ const MainContent = ({
         <Count>
           <>
             Showing{" "}
-            {page <= Math.ceil(results.length / theme.resultsPerPage) && (
+            {page <= Math.ceil(results.length / resultsPerPage) && (
               <>
                 <strong>
-                  {(page - 1) * theme.resultsPerPage + 1}-
-                  {Math.min(page * theme.resultsPerPage, results.length)}
+                  {(page - 1) * resultsPerPage + 1}-
+                  {Math.min(page * resultsPerPage, results.length)}
                 </strong>{" "}
                 out of{" "}
                 <strong>
-                  {Math.ceil(results.length / theme.resultsPerPage) > page ? (
+                  {Math.ceil(results.length / resultsPerPage) > page ? (
                     <>~{estTotalResults}</>
                   ) : (
                     <>{results.length}</>
@@ -538,6 +550,15 @@ const MainContent = ({
             )}
           </>
         </Count>
+        {theme.showResultsPerPage && (
+          <ResultsPerPage
+            key="resultsPerPage"
+            perPage={perPage}
+            setPerPage={setPerPage}
+            setPage={setPage}
+            foldable
+          />
+        )}
         <Switch
           id="map-toggle"
           checked={mapVisible}
@@ -557,10 +578,7 @@ const MainContent = ({
       <PinboardLink location={location} />
       <ResultsList aria-live="polite">
         {results
-          ?.slice(
-            (page - 1) * theme.resultsPerPage,
-            page * theme.resultsPerPage
-          )
+          ?.slice((page - 1) * resultsPerPage, page * resultsPerPage)
           .map((s, i) => (
             <ServiceCard
               key={s.id}
@@ -570,7 +588,7 @@ const MainContent = ({
           ))}
       </ResultsList>
       <Pagination
-        totalPages={Math.ceil(results.length / theme.resultsPerPage)}
+        totalPages={Math.ceil(results.length / resultsPerPage)}
         page={page}
         setPage={setPage}
         scrollTarget={scrollTarget}

diff --git a/src/components/ClearFilters/index.jsx b/src/components/ClearFilters/index.jsx
@@ -40,6 +40,7 @@ const ClearFilters = ({
   filters,
   clearCategory,
   clearSubCategory,
+  clearPerPage,
 }) => {
   const actionClearFilters = e => {
     e && e.preventDefault()
@@ -50,6 +51,8 @@ const ClearFilters = ({
 
     clearSubCategory([])
 
+    clearPerPage(false)
+
     Object.keys(filters).forEach(function (key) {
       filters[key].clear.map((clr, i) => clr(filters[key].clearValue[i]))
     })

diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx
@@ -87,18 +87,14 @@ const MainArea = styled.main`
 `
 
 export const ResultsHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.9rem;
   margin-bottom: 25px;
-  *:first-child {
-    margin-bottom: 15px;
-  }
-  @media screen and (min-width: ${props => props.theme.styles.breakpointS}) {
-    display: flex;
+  @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
     flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    *:first-child {
-      margin-bottom: 0px;
-    }
   }
 `
 

diff --git a/src/components/ResultsPerPage/index.jsx b/src/components/ResultsPerPage/index.jsx
@@ -0,0 +1,37 @@
+import React from "react"
+import styled from "styled-components"
+
+const Select = styled.select`
+  font-size: 0.9rem;
+  padding: 7px;
+  border: 2px solid ${props => props.theme.styles.text};
+  display: block;
+  width: auto;
+  &:focus {
+    outline: 3px solid ${props => props.theme.styles.focus};
+  }
+  &::placeholder {
+    opacity: 0.3;
+  }
+`
+
+const ResultsPerPage = ({ perPage, setPerPage, setPage }) => {
+  const handleChange = e => {
+    setPerPage(e.target.value)
+    setPage(1)
+  }
+
+  const options = [20, 50, 100]
+
+  return (
+    <Select onChange={handleChange} defaultValue={perPage}>
+      {options.map(o => (
+        <option key={o} value={o}>
+          {o} results per page
+        </option>
+      ))}
+    </Select>
+  )
+}
+
+export default ResultsPerPage
diff --git a/src/lib/api.js b/src/lib/api.js
@@ -44,8 +44,12 @@ export const fetchSiteData = async query => {
  * @returns
  */
 export const fetchServiceData = async (query, page) => {
-  const per_page = theme.resultsPerPage || 20
-  let { collection, categories } = queryString.parse(query)
+  let { collection, categories, per_page: query_per_page } = queryString.parse(
+    query
+  )
+  const per_page = query_per_page
+    ? parseInt(query_per_page)
+    : theme.resultsPerPage || 20
 
   // api does AND queries only so we need to split the requests up according to the categories
   const taxonomies = defineQueryTaxonomies(collection, categories)
@@ -89,7 +93,7 @@ export const fetchServiceData = async (query, page) => {
 export const fetchServiceDataFromApi = async (
   query,
   taxonomies,
-  per_page = theme.resultsPerPage || 20,
+  per_page,
   page,
   query_num = 0
 ) => {

diff --git a/src/themes/bod/vars_bod.jsx b/src/themes/bod/vars_bod.jsx
@@ -20,6 +20,7 @@ export const vars_bod = {
     countyWideServiceText: "Buckinghamshire wide",
     hideCategories: true,
   },
+  showResultsPerPage: true,
   cookiesDisabledMessage:
     "Please note, cookies are needed for site functionality such as interactive maps and location autocomplete.",
   cookieMessage: (

diff --git a/src/themes/theme_generator.jsx b/src/themes/theme_generator.jsx
@@ -67,6 +67,9 @@ const generate_theme = (vars, theme_vars) => {
     title: vars.hasOwnProperty("title") ? vars.title : "",
     parentTaxonomySlug: process.env.REACT_APP_PARENT_TAXONOMY_SLUG || false,
     proximity: vars.hasOwnProperty("proximity") ? vars.proximity : 5 * 1609.34, // miles x 1609.34 = Distance in meters
+    showResultsPerPage: vars.hasOwnProperty("showResultsPerPage")
+      ? vars.showResultsPerPage
+      : false,
     resultsPerPage: vars.hasOwnProperty("resultsPerPage")
       ? vars.resultsPerPage
       : 20,