feature(database-connection): Fix error handling

frontend/src/App.scss

@@ -11,11 +11,18 @@
 }
 
 @mixin blurred() {
-  -webkit-filter: blur(5px);
-  -moz-filter: blur(5px);
-  -o-filter: blur(5px);
-  -ms-filter: blur(5px);
-  filter: blur(5px);
+  -webkit-filter: blur(10px);
+  -moz-filter: blur(10px);
+  -o-filter: blur(10px);
+  -ms-filter: blur(10px);
+  filter: blur(10px);
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
 }
 
 a:link,

frontend/src/App.tsx

@@ -13,7 +13,7 @@ const App: FunctionComponent = () => (
         <Switch>
             {/*<Route exact path={'/'} component={(props: IMainPageProps) => (<MainPage {...props}/>)} />*/}
             <Route path={'/season/:id'} component={(props: IMainPageProps) => (<MainPage {...props}/>)} />
-            <Redirect to={'/season/1'} />
+            <Redirect to={'/season'} />
         </Switch>
     </Router>
 );

frontend/src/components/ErrorContainer/ErrorContainer.scss

@@ -1,5 +1,11 @@
 .ErrorContainer {
-    .error-message {
-        color: red;
-    }
+    color: #f33c3c;
+    font-size: 32px;
+    //box-shadow:
+    //        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
+    //        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
+    //        0 12.5px 10px rgba(0, 0, 0, 0.06),
+    //        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
+    //        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
+    //        0 100px 80px rgba(0, 0, 0, 0.12);
 }

frontend/src/components/SeasonSwitch/SeasonSwitch.scss

@@ -10,4 +10,8 @@
     justify-content: center;
   }
 
+  .no-click {
+    cursor: none;
+  }
+
 }

frontend/src/components/SeasonSwitch/SeasonSwitch.tsx

@@ -10,21 +10,29 @@ const SeasonSwitch: React.FC<IUserListProperties> = (props: IUserListProperties)
     const maxSeasonId = Number(props.userStats.maxSeasonId)
 
     return (
-        <div className="SeasonSwitch" data-testid="SeasonSwitch">
+        <div className={"SeasonSwitch " + (!props.enabled && " no-click")} data-testid="SeasonSwitch">
             {
                 seasonId > 1
-                && <Link to={"/season/" + (seasonId - 1)} onClick={() => props.onSeasonIdChange('' + (seasonId - 1))}>
-                    <FontAwesomeIcon icon="arrow-circle-left"/>
-                </Link>
+                && (props.enabled
+                  ? <Link to={"/season/" + (seasonId - 1)} onClick={() => props.onSeasonIdChange('' + (seasonId - 1))}>
+                        <FontAwesomeIcon icon="arrow-circle-left"/>
+                    </Link>
+                  : <Link to={""} onClick={(e) => e.preventDefault()}>
+                      <FontAwesomeIcon icon="arrow-circle-left"/>
+                  </Link>)
             }
 
             <SeasonDetail {...props} />
 
             {
                 seasonId < maxSeasonId
-                && <Link to={"/season/" + (seasonId + 1)} onClick={() => props.onSeasonIdChange('' + (seasonId + 1))}>
-                    <FontAwesomeIcon icon="arrow-circle-right"/>
-                </Link>
+                && (props.enabled
+                  ? <Link to={"/season/" + (seasonId + 1)} onClick={() => props.onSeasonIdChange('' + (seasonId + 1))}>
+                        <FontAwesomeIcon icon="arrow-circle-right"/>
+                    </Link>
+                  : <Link to={""} onClick={(e) => e.preventDefault()}>
+                      <FontAwesomeIcon icon="arrow-circle-right"/>
+                  </Link>)
             }
         </div>
     )

frontend/src/components/UserList/UserList.tsx

@@ -23,7 +23,7 @@ const createTableEntries = (entries: TableEntry[]) =>
 
 const UserList: React.FC<IUserListProperties> = (props: IUserListProperties) => (
     <div className="UserList" data-testid="UserList">
-        <SeasonSwitch onSeasonIdChange={props.onSeasonIdChange} userStats={props.userStats}/>
+        <SeasonSwitch {...props} />
         <table>
             <thead>
             <tr>
@@ -44,6 +44,7 @@ export interface IUserListProperties {
     userStats: UserStatsResponse
     mocked?: boolean
     onSeasonIdChange: any
+    enabled: boolean
 }
 
 export default UserList;

frontend/src/models/RequestError.ts

@@ -1,3 +1,12 @@
 export default class RequestError extends Error {
-  response?: any;
+  //response?: any = "Unknown error. Please try again later.";
+  statusCode: number
+  message: string
+
+
+  constructor(statusCode: number, message: string) {
+    super(message);
+    this.statusCode = statusCode;
+    this.message = message;
+  }
 }

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)

frontend/src/services/UserStatsService.ts

@@ -5,12 +5,13 @@ export default class UserStatsService {
 
   private static apiURL = 'https://api.tsotr.humenius.me/stats'
   // private static apiURL = 'http://localhost:3500/stats'
+  //private static apiURL = 'https://mock.codes/501'
 
   private static requestInit: RequestInit = {
     method: 'GET',
     headers: {
-      'Content-Type': 'application/json'
-    }
+      'Content-Type': 'application/json',
+    },
   };
 
   public static async getStats(seasonId: string): Promise<UserStatsResponse> {
@@ -27,9 +28,7 @@ export default class UserStatsService {
   private static checkResponse(response: any): any {
     if (!response.ok) {
       console.log(response);
-      let error = new RequestError(response.statusText);
-      error.response = response;
-      throw error;
+      throw new RequestError(response.status, response.body);
     }
     return response;
   }