[CORL-353] show error if network request fails (#2731)

* show error if network request fails

* remove commented code

* Update src/core/client/admin/routes/AuthCheck/NetworkError.tsx

Co-Authored-By: Wyatt Johnson <wyattjoh@gmail.com>

* spell occurred correctly

src/core/client/admin/routes/AuthCheck/AuthCheckRoute.tsx

@@ -10,6 +10,7 @@ import { GQLUSER_ROLE } from "coral-framework/schema";
 
 import { AuthCheckRouteQueryResponse } from "coral-admin/__generated__/AuthCheckRouteQuery.graphql";
 
+import NetworkError from "./NetworkError";
 import RestrictedContainer from "./RestrictedContainer";
 
 interface Props {
@@ -17,6 +18,7 @@ interface Props {
   router: Router;
   setRedirectPath: MutationProp<typeof SetRedirectPathMutation>;
   data: AuthCheckRouteQueryResponse;
+  error: Error | null;
 }
 
 type CheckParams =
@@ -86,6 +88,9 @@ function createAuthCheckRoute(check: CheckParams) {
     }
 
     public render() {
+      if (this.props.error) {
+        return <NetworkError />;
+      }
       if (!this.props.data || this.shouldRedirectTo()) {
         return null;
       }

src/core/client/admin/routes/AuthCheck/NetworkError.css

@@ -0,0 +1,3 @@
+.root {
+  padding: 20px;
+}

src/core/client/admin/routes/AuthCheck/NetworkError.tsx

@@ -0,0 +1,20 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+
+import { Message } from "coral-ui/components";
+
+import styles from "./NetworkError.css";
+
+const NetworkError: FunctionComponent<{}> = () => {
+  return (
+    <div className={styles.root}>
+      <Message color="error">
+        <Localized id="authcheck-network-error">
+          <span>A network error occurred. Please refresh the page</span>
+        </Localized>
+      </Message>
+    </div>
+  );
+};
+
+export default NetworkError;