Merge pull request #33 from unboxed/architecture-cleanup

Move searchArea to separate file and fix button acting strange
unboxed · Jul 31, 2024 · 631cb58 · 631cb58
2 parents 7a78b02 + 7f9b2b4
commit 631cb58
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 41 deletions.
diff --git a/src/App.js b/src/App.js
@@ -5,6 +5,7 @@ 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 data from './london-spots.json';
 let pageSize = 50;
@@ -219,46 +220,6 @@ function App () {
     }
   };
 
-  const searchMapArea = async() => {
-    if (!map) { return; }
-    var toDisplay = [];
-
-    map.eachLayer(function (layer) {
-      if (layer._latlng === undefined) { return; }
-
-      if (map.getBounds().contains(layer._latlng)) {
-        if (layer.feature) {
-          toDisplay.push(layer.feature.properties.reference);
-        }
-      }
-
-      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 {
-              tr[i].style.display = "none";
-            }
-          }
-        }
-      }
-    });
-  }
-
   const bindSearchToEnter = () => {
     var input = document.getElementById("searchInput");
     if (input === null) { return }
@@ -296,7 +257,7 @@ function App () {
             <GeoJSON data={geojson} onEachFeature={onEachFeature} />
             <div>
               <LocationMarker />
-              <button className="govuk-button govuk-button--secondary" onClick={searchMapArea} style={{position:"absolute", zIndex:4000, bottom:"-4%", marginLeft:"11em"}}>Search this area</button>
+              <SearchArea />
             </div>
           </MapContainer>
         </div>

diff --git a/src/App.test.js b/src/App.test.js
@@ -22,6 +22,10 @@ jest.mock('./components/LocationMarker', () => {
   return jest.fn(() => <div>Mocked LocationMarker</div>);
 });
 
+jest.mock('./components/SearchArea', () => {
+  return jest.fn(() => <div>Mocked SearchArea</div>);
+});
+
 test('Loading... is shown on site', () => {
   render(<App />);
   const loadingElement = screen.getByText(/Loading.../);

diff --git a/src/components/SearchArea.js b/src/components/SearchArea.js
@@ -0,0 +1,58 @@
+import { useMap } from 'react-leaflet';
+import { Button } from 'govuk-react';
+
+function SearchArea() {
+    const map = useMap();
+
+    const searchMapArea = async () => {
+
+        if (!map) { return; }
+        var toDisplay = [];
+
+        map.eachLayer(function (layer) {
+            if (layer._latlng === undefined) { return; }
+
+            if (map.getBounds().contains(layer._latlng)) {
+                if (layer.feature) {
+                    toDisplay.push(layer.feature.properties.reference);
+                }
+            }
+
+            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 {
+                            tr[i].style.display = "none";
+                        }
+                    }
+                }
+            }
+        });
+
+    }
+    return (
+        <>
+            <Button onClick={searchMapArea} buttonColour="#f3f2f1" buttonHoverColour="#ffdd00" buttonShadowColour="#929191" buttonTextColour="#0b0c0c" 
+            style={{ position: 'absolute', bottom: '-4%', left: "21%", zIndex: 4000, width: '170px' }}>
+                Search this area
+            </Button>
+        </>
+    );
+}
+
+export default SearchArea;