From af7d40f6e32f33b110d9ff8f91eeb7fed3be0d4a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 28 Feb 2022 12:51:48 -0800
Subject: [PATCH] Move organizeRaids into useCallback hook

---
 components/RaidDropdown/index.tsx | 42 +++++++++++++++----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx
index dad6b5d7..63dca87a 100644
--- a/components/RaidDropdown/index.tsx
+++ b/components/RaidDropdown/index.tsx
@@ -27,26 +27,7 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(function useFiel
         '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()
-    }, [])
-
-    function organizeRaids(raids: Raid[]) {
+    const organizeRaids = useCallback((raids: Raid[]) => {
         const numGroups = Math.max.apply(Math, raids.map(raid => raid.group))
         let groupedRaids = []
 
@@ -67,7 +48,26 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(function useFiel
             })
 
         setRaids(groupedRaids)
-    }
+    }, [props.allOption])
+
+    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()
+    }, [cookies.user, organizeRaids])
 
     function raidGroup(index: number) {
         const options = raids && raids.length > 0 && raids[index].length > 0 &&