Remove code blocks for challenge

Author: msj

map/serializers.py

@@ -11,8 +11,24 @@ class Meta:
     num_permits = serializers.SerializerMethodField()
 
     def get_num_permits(self, obj):
-        year = self.context.get("year", 2026)
+        """
+        TODO: supplement each community area object with the number
+        of permits issued in the given year.
 
-        return RestaurantPermit.objects.filter(
-            community_area_id=str(obj.area_id), issue_date__year=year
-        ).count()
+        e.g. The endpoint /map-data/?year=2017 should return something like:
+        [
+            {
+                "ROGERS PARK": {
+                    area_id: 17,
+                    num_permits: 2
+                },
+                "BEVERLY": {
+                    area_id: 72,
+                    num_permits: 2
+                },
+                ...
+            }
+        ]
+        """
+
+        pass

map/static/js/RestaurantPermitMap.js

@@ -42,24 +42,18 @@ export default function RestaurantPermitMap() {
   const [currentYearData, setCurrentYearData] = useState([])
   const [year, setYear] = useState(2026)
 
-  const currentUrl = `/map-data/?year=${year}`
+  const yearlyDataEndpoint = `/map-data/?year=${year}`
 
-  const totalPermits = currentYearData.reduce(
-    (acc, curr) => acc + curr.num_permits,
-    0
-  )
-  const maxNumPermits = Math.max(...currentYearData.map((c) => c.num_permits))
-
-  const communityAreaDict = Object.fromEntries(
-    currentYearData.map((d) => [d.name, d])
-  )
-
-  // Get values for community areas
   useEffect(() => {
-    fetch(currentUrl)
+    fetch()
       .then((res) => res.json())
-      .then((data) => setCurrentYearData(data))
-  }, [currentUrl])
+      .then((data) => {
+        /**
+         * TODO: Fetch the data needed to supply to map with data
+         */
+      })
+  }, [yearlyDataEndpoint])
+
 
   function getColor(pcntPermits) {
     if (pcntPermits > .5)
@@ -73,21 +67,14 @@ export default function RestaurantPermitMap() {
   }
 
   function setAreaInteraction(feature, layer) {
-    const thisAreaData = communityAreaDict[feature.properties.community],
-      numPermits = thisAreaData.num_permits,
-      pcntPermits = numPermits / maxNumPermits
-    layer.setStyle({
-      color: "#000000",
-      weight: 1,
-      fillOpacity: 0.7,
-      fillColor: getColor(pcntPermits)
-    })
-    layer.on("mouseover", () => {
-      layer.bindPopup(`
-        <strong>${feature.properties.community}</strong><br />
-        Year: ${year}<br />
-        Restaurant permits: ${thisAreaData.num_permits}
-      `)
+    /**
+     * 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()
     })
   }
@@ -96,11 +83,11 @@ export default function RestaurantPermitMap() {
     <>
       <YearSelect filterVal={year} setFilterVal={setYear} />
       <p className="fs-4">
-        Restaurant permits issued this year: {totalPermits || "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"