remove parts of front end map

Author: Xavier Medrano

map/static/js/RestaurantPermitMap.js

@@ -1,39 +1,13 @@
 import React, { useEffect, useState, useRef } from "react"
-
 import { MapContainer, TileLayer, GeoJSON } from "react-leaflet"
-
 import "leaflet/dist/leaflet.css"
 
-import RAW_COMMUNITY_AREAS from "../../../data/raw/community-areas.geojson"
 
 function YearSelect({ setFilterVal }) {
   // Filter by the permit issue year for each restaurant
-  const startYear = 2026
-  const years = [...Array(11).keys()].map((increment) => {
-    return startYear - increment
-  })
-  const options = years.map((year) => {
-    return (
-      <option value={year} key={year}>
-        {year}
-      </option>
-    )
-  })
+  // TODO: create an element that allows users to select a year between 2016 and 2026
 
-  return (
-    <>
-      <label htmlFor="yearSelect" className="fs-3">
-        Filter by year:{" "}
-      </label>
-      <select
-        id="yearSelect"
-        className="form-select form-select-lg mb-3"
-        onChange={(e) => setFilterVal(e.target.value)}
-      >
-        {options}
-      </select>
-    </>
-  )
+  return
 }
 
 export default function RestaurantPermitMap() {
@@ -44,71 +18,41 @@ export default function RestaurantPermitMap() {
   const [maxNumPermits, setMaxNumPermits] = useState(null)
   const [totalNumPermits, setTotalNumPermits] = useState(null)
 
-  // Get values for community areas
+  /**
+   * TODO: Use React's useEffect method as many times as needed
+   * to manage all of the above state variables
+   */
   useEffect(() => {
-    fetch(currentUrl)
+    fetch()
       .then((res) => res.json())
-      .then((data) => {
-        let tempMaxPermits = 0
-
-        // Give each area data on how many restaurant permits were issued within
-        const areasWithData = RAW_COMMUNITY_AREAS.features.map((area) => {
-          let numAreaPermits = 0
-          let result = area
-
-          // Loop through permits to assign current area values
-          for (const permit of data) {
-            if (permit.community_area_id == area.properties.area_numbe) {
-              numAreaPermits++
-            }
-          }
-          // Track max number of permits
-          if (tempMaxPermits < numAreaPermits) {
-            tempMaxPermits = numAreaPermits
-          }
-
-          result.properties.permits = numAreaPermits
-          return result
-        })
-
-        // Set state
-        let temp_comm_areas = Object.assign({}, RAW_COMMUNITY_AREAS)
-        temp_comm_areas.features = areasWithData
-        setCommunityAreas(temp_comm_areas)
-        setMaxNumPermits(tempMaxPermits)
-        setTotalNumPermits(data.length)
-      })
-  }, [setCommunityAreas, currentUrl])
-
-  // Set url to be used for filtering
-  useEffect(() => {
-    setCurrentUrl(baseUrl.current + `${filterVal}`)
-  }, [setCurrentUrl, filterVal])
+      .then((data) => {})
+  }, [])
 
   function setAreaInteraction(feature, layer) {
-    const pcntPermits = feature.properties.permits / maxNumPermits
-    layer.setStyle({
-      fillOpacity: pcntPermits,
-    })
-    layer.on("mouseover", () => {
-      layer.bindPopup(`
-        <h3>${feature.properties.community}</h3>
-        <p>Restaurant permits issued during ${filterVal}: ${feature.properties.permits}</p>
-      `)
+    /**
+     * TODO: use the methods below to:
+     * 1) shade each area according to how many permits it had in a year
+     * 2) display a popup with area details during user interaction
+     */
+    layer.setStyle()
+    layer.on("", () => {
+      layer.bindPopup("")
       layer.openPopup()
     })
   }
 
   return (
     <>
-      <YearSelect filterVal={filterVal} setFilterVal={setFilterVal} />
+      <YearSelect />
+
       <p className="fs-4">
-        Restaurant permits issued this year: {totalNumPermits || "0"}
+        Restaurant permits issued this year: {/* TODO: display this value */}
       </p>
       <p className="fs-4">
         Maximum number of restaurant permits in a single area:
-        {" " + (maxNumPermits || "0")}
+        {/* TODO: display this value */}
       </p>
+
       <MapContainer
         id="restaurant-map"
         center={[41.88, -87.62]}
@@ -119,13 +63,11 @@ export default function RestaurantPermitMap() {
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-        {communityAreas ? (
-          <GeoJSON
-            data={communityAreas}
-            onEachFeature={setAreaInteraction}
-            key={maxNumPermits}
-          />
-        ) : null}
+        <GeoJSON
+          data={communityAreas}
+          onEachFeature={setAreaInteraction}
+          key={maxNumPermits}
+        />
       </MapContainer>
     </>
   )