From 72d5bc24f1270e8cf127d56b8f41096969d8d5e1 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 3 Nov 2021 12:21:47 -0300
Subject: [PATCH] Remove Loading Component added on 1753

---
 src/custom/hooks/useFetchProfile.ts | 43 ++++++++++++++++++++++++-----
 src/custom/pages/Profile/index.tsx  | 25 +++++++++++++----
 2 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/custom/hooks/useFetchProfile.ts b/src/custom/hooks/useFetchProfile.ts
index 6293250f3..8e34b6254 100644
--- a/src/custom/hooks/useFetchProfile.ts
+++ b/src/custom/hooks/useFetchProfile.ts
@@ -3,22 +3,51 @@ import { useEffect, useState } from 'react'
 import { getProfileData } from 'api/gnosisProtocol'
 import { ProfileData } from 'api/gnosisProtocol/api'
 
-export default function useFetchProfile() {
+type FetchProfileState = {
+  profileData: ProfileData | null
+  error: string
+  isLoading: boolean
+}
+
+const emptyState: FetchProfileState = {
+  profileData: null,
+  error: '',
+  isLoading: false,
+}
+
+const FETCH_INTERVAL_IN_MINUTES = 5
+
+export default function useFetchProfile(): FetchProfileState {
   const { account, chainId } = useActiveWeb3React()
-  const [profileData, setProfileData] = useState<ProfileData | null>(null)
+  const [profile, setProfile] = useState<FetchProfileState>(emptyState)
 
   useEffect(() => {
+    setProfile({ ...emptyState, isLoading: true })
     async function fetchAndSetProfileData() {
-      if (chainId && account) {
+      if (!chainId || !account) {
+        setProfile((prevState: FetchProfileState) => {
+          return { ...prevState, isLoading: false }
+        })
+        return
+      }
+
+      try {
         const profileData = await getProfileData(chainId, account)
-        setProfileData(profileData)
-      } else {
-        setProfileData(null)
+        setProfile((prevState: FetchProfileState) => {
+          return { ...prevState, isLoading: false, profileData }
+        })
+      } catch (e) {
+        setProfile((prevState: FetchProfileState) => {
+          return { ...prevState, isLoading: false, error: 'Error getting profileData' }
+        })
       }
     }
 
+    const intervalId = setInterval(fetchAndSetProfileData, FETCH_INTERVAL_IN_MINUTES * 60_000)
+
     fetchAndSetProfileData()
+    return () => clearInterval(intervalId)
   }, [account, chainId])
 
-  return profileData
+  return profile
 }
diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx
index 9b98a711c..9ab74ed4e 100644
--- a/src/custom/pages/Profile/index.tsx
+++ b/src/custom/pages/Profile/index.tsx
@@ -25,10 +25,27 @@ import { SupportedChainId as ChainId } from 'constants/chains'
 
 export default function Profile() {
   const referralLink = useReferralLink()
+  const { profileData, error } = useFetchProfile()
   const { account, chainId } = useActiveWeb3React()
-  const profileData = useFetchProfile()
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
 
+  const renderNotificationMessages = () => {
+    return (
+      <>
+        {error && (
+          <StyledNotificationBanner isVisible level="error" canClose={false}>
+            There was an error loading your profile data. Please try again later.
+          </StyledNotificationBanner>
+        )}
+        {chainId && chainId !== ChainId.MAINNET && (
+          <StyledNotificationBanner isVisible level="info" canClose={false}>
+            Profile data is only available for mainnet. Please change the network to see it.
+          </StyledNotificationBanner>
+        )}
+      </>
+    )
+  }
+
   return (
     <Wrapper>
       <GridWrap>
@@ -55,11 +72,7 @@ export default function Profile() {
             </Txt>
           )}
         </CardHead>
-        {chainId && chainId !== ChainId.MAINNET && (
-          <StyledNotificationBanner isVisible level="info" canClose={false}>
-            Profile data is only available for mainnet. Please change the network to see it.
-          </StyledNotificationBanner>
-        )}
+        {renderNotificationMessages()}
         <ChildWrapper>
           <Txt fs={16}>
             <strong>Your referral url</strong>