From 13ddd2131a5140fe3f7c3206d5d501375246b8ef Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 28 Feb 2022 11:57:02 -0800
Subject: [PATCH] Fix useEffect looping in RaidDropdown

---
 components/RaidDropdown/index.tsx | 55 +++++++++++++------------------
 1 file changed, 22 insertions(+), 33 deletions(-)

diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx
index 5fe72268..dad6b5d7 100644
--- a/components/RaidDropdown/index.tsx
+++ b/components/RaidDropdown/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
 
 import { appState } from '~utils/appState'
@@ -15,47 +15,36 @@ interface Props {
 }
 
 const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(props, ref) {
-    const [cookies, _] = useCookies(['user'])
-    const headers = (cookies.user != null) ? {
-        headers: { 'Authorization': `Bearer ${cookies.user.access_token}` }
-    } : {}
-
+    const [cookies] = useCookies(['user'])
     const [raids, setRaids] = useState<Raid[][]>()
     const [flatRaids, setFlatRaids] = useState<Raid[]>()
 
     const raidGroups = [
-        'Assorted',
-        'Omega',
-        'T1 Summons',
-        'T2 Summons',
-        'Primarchs',
-        'Nightmare',
-        'Omega (Impossible)',
-        'Omega II',
-        'Tier 1 Summons (Impossible)',
-        'Tier 3 Summons',
-        'Ennead',
-        'Malice',
-        '6-Star Raids',
-        'Six-Dragons',
-        'Nightmare (Impossible)',
-        'Astral',
+        'Assorted', 'Omega', 'T1 Summons', 'T2 Summons',
+        'Primarchs', 'Nightmare', 'Omega (Impossible)', 'Omega II',
+        'Tier 1 Summons (Impossible)', 'Tier 3 Summons', 'Ennead', 'Malice',
+        '6-Star Raids', 'Six-Dragons', 'Nightmare (Impossible)', 'Astral', 
         'Super Ultimate'
     ]
 
     useEffect(() => {
+        const headers = (cookies.user != null) ? {
+            headers: { 'Authorization': `Bearer ${cookies.user.access_token}` }
+        } : {}
+
+        function fetchRaids() {
+            console.log("Fetching list of raids...")
+            api.endpoints.raids.getAll(headers)
+                .then((response) => {
+                    const raids = response.data.map((r: any) => r.raid)
+                    
+                    appState.raids = raids
+                    organizeRaids(raids)
+                })
+        }
+
         fetchRaids()
-    }, [fetchRaids])
-    
-    function fetchRaids() {
-        api.endpoints.raids.getAll(headers)
-            .then((response) => {
-                const raids = response.data.map((r: any) => r.raid)
-                
-                appState.raids = raids
-                organizeRaids(raids)
-            })
-    }
+    }, [])
 
     function organizeRaids(raids: Raid[]) {
         const numGroups = Math.max.apply(Math, raids.map(raid => raid.group))