feature(database-connection): Fix error handling

frontend/src/pages/MainPage/MainPage.tsx

@@ -25,7 +25,11 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
                 setSeasonStats(res)
                 setLoadingState(false)
             })
-            .catch(err => setError(err))
+            .catch(err => {
+              console.error(err.message)
+              setLoadingState(false)
+              setError(new RequestError(0, "Could not retrieve stats. Try again later."))
+            })
     }, [seasonId, setLoadingState])
 
     const spinnerCss = `
@@ -38,11 +42,12 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
         <div className="MainPage">
             <Header />
             {
-                error && <ErrorContainer message={error.response} />
+                error && <ErrorContainer message={error.message} />
             }
+
             <ClipLoader color={spinnerColor} loading={loading} size={150} css={spinnerCss} />
-            <div className={loading ? "blurred" : ""}>
-                <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} />
+            <div className={loading || error ? "blurred" : ""}>
+                <UserList enabled={loading || !(!error)} onSeasonIdChange={setSeasonId} userStats={seasonStats} />
             </div>
 
             <Footer />
@@ -54,11 +59,4 @@ export interface IMainPageProps extends RouteComponentProps<{ id: string }> {
 
 }
 
-interface IMainPageState {
-    id: string;
-    error?: string;
-    loading: boolean;
-    users: UserStatsResponse;
-}
-
 export default withRouter(MainPage)