Implement filters on profiles

pages/[username].tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useCookies } from 'react-cookie'
 
@@ -36,12 +36,15 @@ const ProfileRoute: React.FC = () => {
         return () => window.removeEventListener("scroll", handleScroll);
     }, [])
 
-    useEffect(() => {
+    const handleError = useCallback((error: any) => {
-        if (username)
+        if (error.response != null) {
-            fetchProfile(username as string)            
+            console.error(error)
-    }, [username])
+        } else {
+            console.error("There was an error.")
+        }
+    }, [])
 
-    async function fetchProfile(username: string) {
+    const fetchProfile = useCallback(() => {
         const filterParams = {
             params: {
                 element: element,
@@ -55,31 +58,28 @@ const ProfileRoute: React.FC = () => {
 
         setLoading(true)
 
-        api.endpoints.users.getOne({ id: username, params: filterParams })
+        if (username)
-            .then(response => {
+            api.endpoints.users.getOne({ id: username as string, params: filterParams })
-                setUser({
+                .then(response => {
-                    id: response.data.user.id,
+                    setUser({
-                    username: response.data.user.username,
+                        id: response.data.user.id,
-                    granblueId: response.data.user.granblue_id
+                        username: response.data.user.username,
-                })
+                        granblueId: response.data.user.granblue_id
+                    })
 
-                const parties: Party[] = response.data.user.parties
+                    const parties: Party[] = response.data.user.parties
-                setParties(parties.sort((a, b) => (a.created_at > b.created_at) ? -1 : 1))
+                    setParties(parties.sort((a, b) => (a.created_at > b.created_at) ? -1 : 1))
-            })
+                })
-            .then(() => {
+                .then(() => {
-                setFound(true)
+                    setFound(true)
-                setLoading(false)
+                    setLoading(false)
-            })
+                })
-            .catch(error => {
+                .catch(error => handleError(error))
-                if (error.response != null) {
+    }, [username, element, raidId, recencyInSeconds, cookies.user, handleError])
-                    if (error.response.status == 404) {
+
-                        setFound(false)
+    useEffect(() => {
-                    }
+        fetchProfile()            
-                } else {
+    }, [fetchProfile])
-                    console.error(error)
-                }
-            })
-    }
 
     function receiveFilters(element?: number, raid?: string, recency?: number) {
         if (element != null && element >= 0)