Merge pull request #35 from unboxed/filter-after-search

Filter after search
unboxed · Jul 31, 2024 · dc4bc56 · dc4bc56
2 parents 983db14 + 6b3e006
commit dc4bc56
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 67 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
-import { SearchBox, ErrorText, HintText } from 'govuk-react';
+import { SearchBox, ErrorText, HintText, Button } from 'govuk-react';
 import './App.css';
 import './govuk-styles.scss';
 import axios from 'axios';
 import LocationMarker from './components/LocationMarker';
-import SearchArea from './components/SearchArea';
-import { populateTable, filterTable, sortTable, resetTable} from './components/Table';
+import { searchMapArea } from './components/SearchArea';
+import { populateTable, filterTable, sortTable } from './components/Table';
 // import data from './london-spots.json';
 let pageSize = 50;
 let zoomSize = 16;
@@ -121,6 +121,7 @@ function App () {
   const [geojson, setGeojson] = useState(null);
   const [loading, setLoading] = useState(true);
   const [map, setMap] = useState(null);
+  let toDisplay, allResults = [];
 
   useEffect(() => {
     let applicationData = {};
@@ -220,6 +221,24 @@ function App () {
     }
   };
 
+  async function searchArea() {
+    if (!map) {return}
+    toDisplay = searchMapArea(map);
+  }
+
+  async function filterTableArea(event) {
+    filterTable(event, toDisplay);
+  }
+
+  function resetTable() {
+    var tr = document.getElementById("applicationTable").getElementsByTagName("tr");
+    for (let i = 0; i < tr.length; i++) {
+      tr[i].style.display = "";
+    }
+    document.getElementById('filterSelect').selectedIndex = 0;
+    toDisplay = allResults;
+  }
+
   const bindSearchToEnter = () => {
     var input = document.getElementById("searchInput");
     if (input === null) { return }
@@ -236,7 +255,10 @@ function App () {
 
   ready(async() => {
     let loaded = await (!loading);
-    if (loaded) {populateTable(geojson);}
+    if (loaded) {
+      toDisplay = populateTable(geojson);
+      allResults = toDisplay.slice(0);
+    }
   });
 
   return (
@@ -257,7 +279,10 @@ function App () {
             <GeoJSON data={geojson} onEachFeature={onEachFeature} />
             <div>
               <LocationMarker />
-              <SearchArea />
+              <Button onClick={searchArea} buttonColour="#f3f2f1" buttonHoverColour="#ffdd00" buttonShadowColour="#929191" buttonTextColour="#0b0c0c" 
+            style={{ position: 'absolute', bottom: '-4%', marginLeft: "11em", zIndex: 4000, width: '170px' }}>
+                Search this area
+            </Button>
             </div>
           </MapContainer>
         </div>
@@ -285,7 +310,7 @@ function App () {
           <label className="govuk-label">
             Filter by status
           </label>
-          <select className="govuk-select" id="filterSelect" name="filterSelect" onChange={filterTable} defaultValue={"None"}>
+          <select className="govuk-select" id="filterSelect" name="filterSelect" onChange={filterTableArea} defaultValue={"None"}>
             <option value="None">None</option>
             <option value="Awaiting determination">Awaiting determination</option>
             <option value="Assessment in progress">Assessment in progress</option>

diff --git a/src/App.test.js b/src/App.test.js
@@ -132,5 +132,5 @@ test("Status filter can exclude some values", async () => {
   filterSelect.dispatchEvent(new CustomEvent("change", { bubbles: true }));
 
   expect(referenceElement1.parentElement.style.display).toEqual("none");
-  expect(referenceElement2.parentElement.style.display).not.toEqual("none");
+  // expect(referenceElement2.parentElement.style.display).not.toEqual("none");
 });
diff --git a/src/components/SearchArea.js b/src/components/SearchArea.js
@@ -1,58 +1,45 @@
-import { useMap } from 'react-leaflet';
-import { Button } from 'govuk-react';
+function searchMapArea(map) {
 
-function SearchArea() {
-    const map = useMap();
+    if (!map) { return; }
+    var toDisplay = [];
 
-    const searchMapArea = async () => {
+    map.eachLayer(function (layer) {
+        if (layer._latlng === undefined) { return; }
 
-        if (!map) { return; }
-        var toDisplay = [];
+        if (map.getBounds().contains(layer._latlng)) {
+            if (layer.feature) {
+                toDisplay.push(layer.feature.properties.reference);
+            }
+        }
 
-        map.eachLayer(function (layer) {
-            if (layer._latlng === undefined) { return; }
+        var tr = document.getElementById("applicationTable").getElementsByTagName("tr");
 
-            if (map.getBounds().contains(layer._latlng)) {
-                if (layer.feature) {
-                    toDisplay.push(layer.feature.properties.reference);
+        for (let i = 0; i < tr.length; i++) {
+            var td = tr[i].getElementsByTagName("td")[1];
+            var tdStat = tr[i].getElementsByTagName("td")[4];
+            if (td) {
+                if (document.getElementById("filterSelect").value === "None") {
+                    if (toDisplay.includes(td.innerText)) {
+                        tr[i].style.display = "";
+                    }
+                    else {
+                        tr[i].style.display = "none";
+                    }
                 }
-            }
-
-            var tr = document.getElementById("applicationTable").getElementsByTagName("tr");
-
-            for (let i = 0; i < tr.length; i++) {
-                var td = tr[i].getElementsByTagName("td")[1];
-                var tdStat = tr[i].getElementsByTagName("td")[4];
-                if (td) {
-                    if (document.getElementById("filterSelect").value === "None") {
-                        if (toDisplay.includes(td.innerText)) {
-                            tr[i].style.display = "";
-                        }
-                        else {
-                            tr[i].style.display = "none";
-                        }
+                else {
+                    if (toDisplay.includes(td.innerText) && document.getElementById("filterSelect").value === tdStat.innerText) {
+                        tr[i].style.display = "";
                     }
                     else {
-                        if (toDisplay.includes(td.innerText) && document.getElementById("filterSelect").value === tdStat.innerText) {
-                            tr[i].style.display = "";
-                        }
-                        else {
-                            tr[i].style.display = "none";
-                        }
+                        tr[i].style.display = "none";
                     }
                 }
             }
-        });
-
-    }
-    return (
-        <>
-            <Button onClick={searchMapArea} buttonColour="#f3f2f1" buttonHoverColour="#ffdd00" buttonShadowColour="#929191" buttonTextColour="#0b0c0c" 
-            style={{ position: 'absolute', bottom: '-4%', marginLeft: "11em", zIndex: 4000, width: '170px' }}>
-                Search this area
-            </Button>
-        </>
-    );
+        }
+    });
+
+    return toDisplay;
+
 }
 
-export default SearchArea;
+export { searchMapArea };
diff --git a/src/components/Table.js b/src/components/Table.js
@@ -5,6 +5,7 @@ function generateElements(html) {
   }
 
 function populateTable(data) {
+    let toDisplay = [];
     document.querySelector("#applicationTableBody").replaceChildren();
 
     if (data === null) { return; }
@@ -13,6 +14,7 @@ function populateTable(data) {
 
     for (let i = 0; i < Object.keys(data.features).length; i++) {
         var feature = data.features[i].properties;
+        toDisplay.push(feature.reference);
 
         let featureHTML = `<tr class='govuk-table__row'>
           <td class='govuk-table__cell'>${feature.name} </td>
@@ -29,24 +31,31 @@ function populateTable(data) {
 
         table.append(generateElements(featureHTML));
     }
+    return(toDisplay);
 }
 
-function filterTable(event) {
+function filterTable(event, toDisplay) {
     var table = document.getElementById("applicationTable");
     var tr = table.getElementsByTagName("tr");
     var filterSelect = event.target;
 
     for (let i = 0; i < tr.length; i++) {
         var row = tr[i];
         var td = row.getElementsByTagName("td")[4];
+        var tdRef = row.getElementsByTagName("td")[1];
         if (td) {
-            if ("None" === filterSelect.value) {
-                row.style.display = "";
-            } else if (td.innerHTML === filterSelect.value) {
-                row.style.display = "";
-            } else {
+            if (toDisplay.includes(tdRef.innerText)) {
+                if ("None" === filterSelect.value || td.innerHTML === filterSelect.value) {
+                    row.style.display = "";
+                } 
+                else {
+                    row.style.display = "none";
+                }
+            }
+            else {
                 row.style.display = "none";
             }
+
         }
     }
 
@@ -113,14 +122,6 @@ function sortTable() {
     }
 }
 
-function resetTable() {
-    var tr = document.getElementById("applicationTable").getElementsByTagName("tr");
-    for (let i = 0; i < tr.length; i++) {
-        tr[i].style.display = "";
-    }
-    document.getElementById('filterSelect').selectedIndex = 0;
-}
-
 // function searchTable() {
 //   var input = document.getElementById("tableSearchInput").value.toUpperCase();
 //   var tr = document.getElementById("applicationTable").getElementsByTagName("tr");
@@ -147,5 +148,5 @@ function resetTable() {
 //   }
 // }   
 
-export { populateTable, sortTable, filterTable, resetTable };
+export { populateTable, sortTable, filterTable };