devided sharedArticleErrorDialog from the handler

src/components/ErrorDialog.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { errorDialogWrapper, errorDialogDescription, errorDialogButton } from "./ErrorDialog.sc";
+
+export default function ErrorDialog({
+  title = "Could not open",
+  message,
+  detail,
+  onBack,
+  backLabel = "Go to Articles",
+}) {
+  return (
+    <div style={errorDialogWrapper}>
+      <h2>{title}</h2>
+      <p>{message}</p>
+      {detail && <p style={errorDialogDescription}>{detail}</p>}
+      <button onClick={onBack} style={errorDialogButton}>
+        {backLabel}
+      </button>
+    </div>
+  );
+}

src/components/ErrorDialog.sc.js

@@ -0,0 +1,17 @@
+export const errorDialogWrapper = {
+  textAlign: "center",
+  padding: "4em 2em",
+};
+
+export const errorDialogDescription = {
+  color: "#666",
+  fontSize: "0.9em",
+  wordBreak: "break-all",
+};
+
+export const errorDialogButton = {
+  marginTop: "1em",
+  padding: "0.5em 1.5em",
+  fontSize: "1em",
+  cursor: "pointer",
+};

src/reader/SharedArticleHandler.js

@@ -6,6 +6,7 @@ import useQuery from "../hooks/useQuery";
 import useTimedProgressMessage from "../hooks/useTimedProgressMessage";
 import LoadingAnimation from "../components/LoadingAnimation";
 import ArticleLanguageModal from "./ArticleLanguageModal";
+import ErrorDialog from "../components/ErrorDialog";
 import { shouldShowLanguageChoice, getUserCefrLevel, numericToCefr } from "../utils/misc/cefrHelpers";
 
 const PROGRESS_STAGES = {
@@ -63,7 +64,7 @@ export default function SharedArticleHandler() {
         () => {
           setStatus("error");
           setErrorMessage("Could not load the uploaded article.");
-        }
+        },
       );
       return;
     }
@@ -94,10 +95,8 @@ export default function SharedArticleHandler() {
       },
       (error) => {
         setStatus("error");
-        setErrorMessage(
-          "Failed to load article. It may be behind a paywall or not readable."
-        );
-      }
+        setErrorMessage("Failed to load article. It may be behind a paywall or not readable.");
+      },
     );
   }, [sharedUrl, uploadId]);
 
@@ -185,9 +184,7 @@ export default function SharedArticleHandler() {
   };
 
   if (status === "loading") {
-    const message = isProcessing
-      ? progressMessage || "Preparing article…"
-      : "Opening article…";
+    const message = isProcessing ? progressMessage || "Preparing article…" : "Opening article…";
     return (
       <LoadingAnimation
         /* Simplification / translation routinely take 15-25s — hold back the
@@ -221,24 +218,12 @@ export default function SharedArticleHandler() {
 
   if (status === "error") {
     return (
-      <div style={{ textAlign: "center", padding: "4em 2em" }}>
-        <h2>Could not open article</h2>
-        <p>{errorMessage}</p>
-        <p style={{ color: "#666", fontSize: "0.9em", wordBreak: "break-all" }}>
-          {sharedUrl || (uploadId ? `upload #${uploadId}` : null)}
-        </p>
-        <button
-          onClick={() => history.push("/articles")}
-          style={{
-            marginTop: "1em",
-            padding: "0.5em 1.5em",
-            fontSize: "1em",
-            cursor: "pointer",
-          }}
-        >
-          Go to Articles
-        </button>
-      </div>
+      <ErrorDialog
+        title="Could not open article"
+        message={errorMessage}
+        detail={sharedUrl || (uploadId ? `upload #${uploadId}` : null)}
+        onBack={() => history.push("/articles")}
+      />
     );
   }
 

src/reader/SharedVideoHandler.js

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import useQuery from "../hooks/useQuery";
 import LoadingAnimation from "../components/LoadingAnimation";
+import ErrorDialog from "../components/ErrorDialog";
 
 export default function SharedVideoHandler() {
   const history = useHistory();
@@ -23,44 +24,24 @@ export default function SharedVideoHandler() {
     // "Preparing your video..." screen for a beat so the transition isn't a
     // jarring flash, then hand off to VideoPlayer which has its own loading
     // state and surfaces any 404 there.
-    const timer = setTimeout(
-      () => history.replace(`/watch/video?id=${videoId}`),
-      800,
-    );
+    const timer = setTimeout(() => history.replace(`/watch/video?id=${videoId}`), 800);
     return () => clearTimeout(timer);
   }, [videoId]);
 
   if (status === "error") {
     return (
-      <div style={{ textAlign: "center", padding: "4em 2em" }}>
-        <h2>Could not open video</h2>
-        <p>{errorMessage}</p>
-        {videoId && (
-          <p style={{ color: "#666", fontSize: "0.9em" }}>video #{videoId}</p>
-        )}
-        <button
-          onClick={() => history.push("/articles")}
-          style={{
-            marginTop: "1em",
-            padding: "0.5em 1.5em",
-            fontSize: "1em",
-            cursor: "pointer",
-          }}
-        >
-          Go to Articles
-        </button>
-      </div>
+      <ErrorDialog
+        title="Could not open video"
+        message={errorMessage}
+        detail={videoId ? `video #${videoId}` : null}
+        onBack={() => history.push("/articles")}
+      />
     );
   }
 
   return (
-    <LoadingAnimation
-      reportIssueDelay={30000}
-      specificStyle={{ minHeight: "70vh", justifyContent: "center" }}
-    >
-      <div style={{ textAlign: "center", marginTop: "1em" }}>
-        Preparing your video…
-      </div>
+    <LoadingAnimation reportIssueDelay={30000} specificStyle={{ minHeight: "70vh", justifyContent: "center" }}>
+      <div style={{ textAlign: "center", marginTop: "1em" }}>Preparing your video…</div>
     </LoadingAnimation>
   );
 }