no log: Extract special pages

frontend/src/App/Router.tsx

@@ -1,12 +1,12 @@
 import React, { FunctionComponent, useEffect, useMemo } from "react";
 import { Redirect, Route, Switch, useHistory } from "react-router-dom";
-import EmptyPage, { RouterEmptyPath } from "../404";
 import { useIsRadarrEnabled, useIsSonarrEnabled } from "../@redux/hooks/site";
 import BlacklistRouter from "../Blacklist/Router";
 import HistoryRouter from "../History/Router";
 import MovieRouter from "../Movies/Router";
 import SeriesRouter from "../Series/Router";
 import SettingRouter from "../Settings/Router";
+import EmptyPage, { RouterEmptyPath } from "../special-pages/404";
 import SystemRouter from "../System/Router";
 import { ScrollToTop } from "../utilites";
 import WantedRouter from "../Wanted/Router";

frontend/src/App/index.tsx

@@ -1,20 +1,19 @@
-import { faSadCry as fasSadCry } from "@fortawesome/free-regular-svg-icons";
-import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, {
   FunctionComponent,
   useCallback,
   useEffect,
   useState,
 } from "react";
-import { Alert, Button, Container, Row } from "react-bootstrap";
+import { Row } from "react-bootstrap";
 import { Redirect } from "react-router-dom";
 import { bootstrap as ReduxBootstrap } from "../@redux/actions";
 import { useReduxAction, useReduxStore } from "../@redux/hooks/base";
 import { useNotification } from "../@redux/hooks/site";
 import { LoadingIndicator, ModalProvider } from "../components";
 import Sidebar from "../Sidebar";
-import { Reload, useHasUpdateInject } from "../utilites";
+import LaunchError from "../special-pages/LaunchError";
+import UIError from "../special-pages/UIError";
+import { useHasUpdateInject } from "../utilites";
 import Header from "./Header";
 import NotificationContainer from "./notifications";
 import Router from "./Router";
@@ -63,7 +62,7 @@ const App: FunctionComponent<Props> = () => {
       </LoadingIndicator>
     );
   } else if (typeof initialized === "string") {
-    return <InitializationErrorView>{initialized}</InitializationErrorView>;
+    return <LaunchError>{initialized}</LaunchError>;
   }
   try {
     return (
@@ -80,48 +79,9 @@ const App: FunctionComponent<Props> = () => {
         <NotificationContainer></NotificationContainer>
       </SidebarToggleContext.Provider>
     );
-  } catch (error) {
-    // TODO: Extract me!
-    return (
-      <Container className="d-flex flex-column align-items-center my-5">
-        <h1>
-          <FontAwesomeIcon className="mr-2" icon={fasSadCry}></FontAwesomeIcon>
-          Ouch! UI is crashed!
-        </h1>
-        <Button
-          href="https://github.com/morpheus65535/bazarr/issues/new/choose"
-          target="_blank"
-          variant="light"
-        >
-          Report Issue
-        </Button>
-      </Container>
-    );
+  } catch (e) {
+    return <UIError error={e}></UIError>;
   }
 };
 
-const InitializationErrorView: FunctionComponent<{
-  children: string;
-}> = ({ children }) => {
-  return (
-    <Container className="my-3">
-      <Alert
-        className="d-flex flex-nowrap justify-content-between align-items-center"
-        variant="danger"
-      >
-        <div>
-          <FontAwesomeIcon
-            className="mr-2"
-            icon={faExclamationTriangle}
-          ></FontAwesomeIcon>
-          <span>{children}</span>
-        </div>
-        <Button variant="outline-danger" onClick={Reload}>
-          Reload
-        </Button>
-      </Alert>
-    </Container>
-  );
-};
-
 export default App;

frontend/src/Blacklist/Router.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 import { Redirect, Route, Switch } from "react-router-dom";
-import { RouterEmptyPath } from "../404";
 import { useIsRadarrEnabled, useIsSonarrEnabled } from "../@redux/hooks/site";
+import { RouterEmptyPath } from "../special-pages/404";
 import BlacklistMovies from "./Movies";
 import BlacklistSeries from "./Series";
 

frontend/src/History/Router.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 import { Redirect, Route, Switch } from "react-router-dom";
-import { RouterEmptyPath } from "../404";
 import { useIsRadarrEnabled, useIsSonarrEnabled } from "../@redux/hooks/site";
+import { RouterEmptyPath } from "../special-pages/404";
 import MoviesHistory from "./Movies";
 import SeriesHistory from "./Series";
 import HistoryStats from "./Statistics";

frontend/src/Movies/Detail/index.tsx

@@ -11,7 +11,6 @@ import React, { FunctionComponent, useCallback, useState } from "react";
 import { Container, Row } from "react-bootstrap";
 import { Helmet } from "react-helmet";
 import { Redirect, RouteComponentProps, withRouter } from "react-router-dom";
-import { RouterEmptyPath } from "../../404";
 import { useMovieBy } from "../../@redux/hooks";
 import { MoviesApi, ProvidersApi } from "../../apis";
 import {
@@ -25,6 +24,7 @@ import {
 } from "../../components";
 import { ManualSearchModal } from "../../components/modals/ManualSearchModal";
 import ItemOverview from "../../generic/ItemOverview";
+import { RouterEmptyPath } from "../../special-pages/404";
 import { useAutoUpdate, useWhenLoadingFinish } from "../../utilites";
 import Table from "./table";
 

frontend/src/Series/Episodes/index.tsx

@@ -16,7 +16,6 @@ import React, {
 import { Container, Row } from "react-bootstrap";
 import { Helmet } from "react-helmet";
 import { Redirect, RouteComponentProps, withRouter } from "react-router-dom";
-import { RouterEmptyPath } from "../../404";
 import { useEpisodesBy, useSerieBy } from "../../@redux/hooks";
 import { SeriesApi } from "../../apis";
 import {
@@ -27,6 +26,7 @@ import {
   useShowModal,
 } from "../../components";
 import ItemOverview from "../../generic/ItemOverview";
+import { RouterEmptyPath } from "../../special-pages/404";
 import { useAutoUpdate, useWhenLoadingFinish } from "../../utilites";
 import Table from "./table";
 

frontend/src/Settings/Router.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from "react";
 import { Redirect, Route, Switch } from "react-router-dom";
-import { RouterEmptyPath } from "../404";
 import { systemUpdateSettings } from "../@redux/actions";
 import { useReduxAction } from "../@redux/hooks/base";
+import { RouterEmptyPath } from "../special-pages/404";
 import { useAutoUpdate } from "../utilites/hooks";
 import General from "./General";
 import Languages from "./Languages";

frontend/src/System/Router.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 import { Redirect, Route, Switch } from "react-router-dom";
-import { RouterEmptyPath } from "../404";
+import { RouterEmptyPath } from "../special-pages/404";
 import Logs from "./Logs";
 import Providers from "./Providers";
 import Releases from "./Releases";

frontend/src/Wanted/Router.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 import { Redirect, Route, Switch } from "react-router-dom";
-import { RouterEmptyPath } from "../404";
 import { useIsRadarrEnabled, useIsSonarrEnabled } from "../@redux/hooks/site";
+import { RouterEmptyPath } from "../special-pages/404";
 import Movies from "./Movies";
 import Series from "./Series";
 

frontend/src/constants.ts

@@ -0,0 +1 @@
+export const GithubRepoRoot = "https://github.com/morpheus65535/bazarr";

frontend/src/special-pages/LaunchError.tsx

@@ -0,0 +1,31 @@
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { FunctionComponent } from "react";
+import { Alert, Button, Container } from "react-bootstrap";
+import { Reload } from "../utilites";
+
+interface Props {
+  children: string;
+}
+
+const LaunchError: FunctionComponent<Props> = ({ children }) => (
+  <Container className="my-3">
+    <Alert
+      className="d-flex flex-nowrap justify-content-between align-items-center"
+      variant="danger"
+    >
+      <div>
+        <FontAwesomeIcon
+          className="mr-2"
+          icon={faExclamationTriangle}
+        ></FontAwesomeIcon>
+        <span>{children}</span>
+      </div>
+      <Button variant="outline-danger" onClick={Reload}>
+        Reload
+      </Button>
+    </Alert>
+  </Container>
+);
+
+export default LaunchError;

frontend/src/special-pages/UIError.tsx

@@ -0,0 +1,35 @@
+import { faSadCry as fasSadCry } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { FunctionComponent } from "react";
+import { Button, Container } from "react-bootstrap";
+import { GithubRepoRoot } from "../constants";
+import { Reload } from "../utilites";
+
+interface Props {
+  error: Error;
+}
+
+const UIError: FunctionComponent<Props> = ({ error }) => (
+  <Container className="d-flex flex-column align-items-center my-5">
+    <h1>
+      <FontAwesomeIcon className="mr-2" icon={fasSadCry}></FontAwesomeIcon>
+      Ouch! UI is crashed!
+    </h1>
+    <p>{error.message}</p>
+    <div className="d-flex flex-row">
+      <Button
+        className="mx-1"
+        href={`${GithubRepoRoot}/issues/new/choose`}
+        target="_blank"
+        variant="warning"
+      >
+        Report Issue
+      </Button>
+      <Button className="mx-1" onClick={Reload} variant="light">
+        Reload Page
+      </Button>
+    </div>
+  </Container>
+);
+
+export default UIError;