feature(database-connection): Fix error handling

2021-01-28 00:03:28 +01:00
parent 9db53d5354
commit 721421294f
10 changed files with 90 additions and 35 deletions
--- a/frontend/src/App.scss
+++ b/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,
--- a/frontend/src/App.tsx
+++ b/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>
 );
--- a/frontend/src/components/ErrorContainer/ErrorContainer.scss
+++ b/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);
 }
--- a/frontend/src/components/SeasonSwitch/SeasonSwitch.scss
+++ b/frontend/src/components/SeasonSwitch/SeasonSwitch.scss
@@ -10,4 +10,8 @@
    justify-content: center;
  }

+  .no-click {
+    cursor: none;
+  }
+
 }
--- a/frontend/src/components/SeasonSwitch/SeasonSwitch.tsx
+++ b/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>
    )
--- a/frontend/src/components/UserList/UserList.tsx
+++ b/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;
--- a/frontend/src/models/RequestError.ts
+++ b/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;
+  }
 }
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/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)
--- a/frontend/src/services/UserStatsService.ts
+++ b/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;
  }
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1667,6 +1667,11 @@
  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
  integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==

+"@types/isomorphic-fetch@^0.0.35":
+  version "0.0.35"
+  resolved "https://registry.yarnpkg.com/@types/isomorphic-fetch/-/isomorphic-fetch-0.0.35.tgz#c1c0d402daac324582b6186b91f8905340ea3361"
+  integrity sha512-DaZNUvLDCAnCTjgwxgiL1eQdxIKEpNLOlTNtAgnZc50bG2copGhRrFN9/PxPBuJe+tZVLCbQ7ls0xveXVRPkvw==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -4801,6 +4806,11 @@ fb-watchman@^2.0.0:
  dependencies:
    bser "2.1.1"

+fetch-retry-ts@^1.1.23:
+  version "1.1.23"
+  resolved "https://registry.yarnpkg.com/fetch-retry-ts/-/fetch-retry-ts-1.1.23.tgz#7659974215c7a66b9bb81c006e5acee34d932ca8"
+  integrity sha512-UwqrMGfDPRa60etXl1HkDgIhY9k2AoB/Qa41/U2thzHtA/NVHGSmn037dw4iOg62ccyX2imtkU8SFfSwxLLEYA==
+
 figgy-pudding@^3.5.1:
  version "3.5.2"
  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -6169,6 +6179,14 @@ isobject@^3.0.0, isobject@^3.0.1:
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=

+isomorphic-fetch@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-3.0.0.tgz#0267b005049046d2421207215d45d6a262b8b8b4"
+  integrity sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==
+  dependencies:
+    node-fetch "^2.6.1"
+    whatwg-fetch "^3.4.1"
+
 isstream@~0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -7504,6 +7522,11 @@ no-case@^3.0.4:
    lower-case "^2.0.2"
    tslib "^2.0.3"

+node-fetch@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-forge@^0.10.0:
  version "0.10.0"
  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -11312,7 +11335,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
  dependencies:
    iconv-lite "0.4.24"

-whatwg-fetch@^3.0.0:
+whatwg-fetch@^3.0.0, whatwg-fetch@^3.4.1:
  version "3.5.0"
  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
  integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==