From 2b72f7ee5775256ebad5d1c72c72125b60f68498 Mon Sep 17 00:00:00 2001
From: Yoseph Ahmed <yosephahmed@aol.com>
Date: Thu, 20 Aug 2020 03:26:12 -0400
Subject: [PATCH] feat: updated useEffect dependency and implemented map

state of monthlyIncidents is accurately reflecting incident per month
---
 src/incidents/visualize/VisualizeIncidents.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/incidents/visualize/VisualizeIncidents.tsx b/src/incidents/visualize/VisualizeIncidents.tsx
index 8aa4786bf7..a650262e02 100644
--- a/src/incidents/visualize/VisualizeIncidents.tsx
+++ b/src/incidents/visualize/VisualizeIncidents.tsx
@@ -9,6 +9,7 @@ const VisualizeIncidents = () => {
   const searchFilter = IncidentFilter.reported
   const searchRequest: IncidentSearchRequest = { status: searchFilter }
   const { data, isLoading } = useIncidents(searchRequest)
+  const [incident, setIncident] = useState(0)
   const [monthlyIncidents, setMonthlyIncidents] = useState([
     // monthlyIncidents[0] -> January ... monthlyIncidents[11] -> December
     0,
@@ -29,23 +30,20 @@ const VisualizeIncidents = () => {
     // reportedOn: "2020-08-12T19:53:30.153Z"
     Number(reportedOn.slice(5, 7)) - 1
 
-  const handleUpdate = (incidentMonth: number) => {
-    const newMonthlyIncidents = [...monthlyIncidents]
-    newMonthlyIncidents[incidentMonth] += 1
-    setMonthlyIncidents(newMonthlyIncidents)
-  }
-
   useEffect(() => {
     if (data === undefined || isLoading) {
       // const spinner = <Spinner type="DotLoader" loading />
     } else {
       const totalIncidents: number = data.length
-      for (let incident = 0; incident < totalIncidents; incident += 1) {
+      if (totalIncidents > incident) {
         const incidentMonth = getIncidentMonth(data[incident].reportedOn)
-        handleUpdate(incidentMonth)
+        setMonthlyIncidents((prevIncidents) =>
+          prevIncidents.map((value, index) => (index === incidentMonth ? value + 1 : value)),
+        )
+        setIncident(incident + 1)
       }
     }
-  }, [data])
+  }, [data, monthlyIncidents])
 
   return (
     <>