From fe19ffd7e11c7fd915cf720ab7b8b402e071aa38 Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Tue, 21 Jul 2020 18:02:27 -0600
Subject: [PATCH] Show nice error message on network time out (#3036)

Shows "Network error. Please refresh your page
and try again." when the retry middleware times
out from too many attempts on failed/timed out
requests.

CORL-1199

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../client/framework/components/NetworkError.css | 13 +++++++++++++
 .../client/framework/components/NetworkError.tsx | 16 ++++++++++++++++
 .../client/framework/lib/relay/QueryRenderer.tsx | 16 +++++++++++++++-
 src/locales/en-US/common.ftl                     |  1 +
 4 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/core/client/framework/components/NetworkError.css
 create mode 100644 src/core/client/framework/components/NetworkError.tsx

diff --git a/src/core/client/framework/components/NetworkError.css b/src/core/client/framework/components/NetworkError.css
new file mode 100644
index 000000000..e4c87aea5
--- /dev/null
+++ b/src/core/client/framework/components/NetworkError.css
@@ -0,0 +1,13 @@
+.root {
+  background-color: var(--palette-error-300);
+
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  color: var(--palette-text-500);
+
+  border-radius: var(--round-corners);
+
+  padding: var(--spacing-3);
+}
diff --git a/src/core/client/framework/components/NetworkError.tsx b/src/core/client/framework/components/NetworkError.tsx
new file mode 100644
index 000000000..e81cd3be5
--- /dev/null
+++ b/src/core/client/framework/components/NetworkError.tsx
@@ -0,0 +1,16 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import styles from "./NetworkError.css";
+
+const NetworkError: FunctionComponent = () => {
+  return (
+    <div className={styles.root}>
+      <Localized id="common-networkError">
+        <div>Network error. Please refresh your page and try again.</div>
+      </Localized>
+    </div>
+  );
+};
+
+export default NetworkError;
diff --git a/src/core/client/framework/lib/relay/QueryRenderer.tsx b/src/core/client/framework/lib/relay/QueryRenderer.tsx
index b3619c4d4..df3042a3e 100644
--- a/src/core/client/framework/lib/relay/QueryRenderer.tsx
+++ b/src/core/client/framework/lib/relay/QueryRenderer.tsx
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { QueryRenderer } from "react-relay";
 import { OperationType } from "relay-runtime";
 
+import NetworkError from "coral-framework/components/NetworkError";
 import { PropTypesOf } from "coral-framework/types";
 
 import { CoralContextConsumer } from "../bootstrap/CoralContext";
@@ -33,7 +34,20 @@ class CoralQueryRenderer<
     return (
       <CoralContextConsumer>
         {({ relayEnvironment }) => (
-          <QueryRenderer environment={relayEnvironment} {...this.props} />
+          <QueryRenderer
+            environment={relayEnvironment}
+            {...this.props}
+            render={(args) => {
+              if (
+                args.error &&
+                args.error.name === "RRNLRetryMiddlewareError"
+              ) {
+                return <NetworkError />;
+              }
+
+              return this.props.render(args);
+            }}
+          />
         )}
       </CoralContextConsumer>
     );
diff --git a/src/locales/en-US/common.ftl b/src/locales/en-US/common.ftl
index aa236ab97..1742f7cf4 100644
--- a/src/locales/en-US/common.ftl
+++ b/src/locales/en-US/common.ftl
@@ -7,3 +7,4 @@ common-banEmailTemplate =
   Someone with access to your account has violated our community guidelines. As a result, your account has been banned. You will no longer be able to comment, react or report comments.
 
 common-embedNotFound = Requested media could not be found. May have been deleted.
+common-networkError = Network error. Please refresh your page and try again.