Merge pull request #37 from unboxed/pqlqxa-codex/add-cool-feature

Add dark mode toggle

Author: benbaumann95

src/App.js

@@ -121,6 +121,7 @@ function App () {
   const [geojson, setGeojson] = useState(null);
   const [loading, setLoading] = useState(true);
   const [map, setMap] = useState(null);
+  const [darkMode, setDarkMode] = useState(false);
   let toDisplay, allResults = [];
 
   useEffect(() => {
@@ -226,6 +227,10 @@ function App () {
     toDisplay = searchMapArea(map);
   }
 
+  function toggleDarkMode() {
+    setDarkMode((prev) => !prev);
+  }
+
   async function filterTableArea(event) {
     filterTable(event, toDisplay);
   }
@@ -274,15 +279,18 @@ function App () {
           <MapContainer ref={setMap} center={[51.505, -0.09]} zoom={13}>
             <TileLayer
               attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              url={darkMode ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png" : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
             />
             <GeoJSON data={geojson} onEachFeature={onEachFeature} />
             <div>
               <LocationMarker />
-              <Button onClick={searchArea} buttonColour="#f3f2f1" buttonHoverColour="#ffdd00" buttonShadowColour="#929191" buttonTextColour="#0b0c0c" 
+              <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>
+              </Button>
+              <Button onClick={toggleDarkMode} style={{ position: 'absolute', bottom: '-4%', marginLeft: "24em", zIndex: 4000, width: '150px' }}>
+                {darkMode ? 'Light Mode' : 'Dark Mode'}
+              </Button>
             </div>
           </MapContainer>
         </div>

src/App.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { render, screen, waitFor, waitForElementToBeRemoved, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect'; 
 import App from './App';
 import axios from 'axios';
@@ -134,3 +134,21 @@ test("Status filter can exclude some values", async () => {
   expect(referenceElement1.parentElement.style.display).toEqual("none");
   // expect(referenceElement2.parentElement.style.display).not.toEqual("none");
 });
+
+test('Dark mode toggle changes button label', async () => {
+  axios.get.mockResolvedValue({
+    data: {
+      data: {},
+      links: { next: null },
+    },
+  });
+
+  render(<App />);
+
+  await waitForElementToBeRemoved(() => screen.queryByText('Loading...'));
+
+  const toggleButton = screen.getByRole('button', { name: /dark mode/i });
+  fireEvent.click(toggleButton);
+
+  expect(screen.getByRole('button', { name: /light mode/i })).toBeInTheDocument();
+});