Bruce/910 fixing error component (#3754)

* feat: using error component #854 * fix: forcing rerender when route changes #910
DataBiosphere · Nov 8, 2023 · d2feb84 · d2feb84
1 parent a373022
commit d2feb84
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/explorer/pages/_app.tsx b/explorer/pages/_app.tsx
@@ -1,23 +1,25 @@
 import "@clevercanary/data-explorer-ui";
 import { AzulEntitiesStaticResponse } from "@clevercanary/data-explorer-ui/lib/apis/azul/common/entities";
+import { Error } from "@clevercanary/data-explorer-ui/lib/components/Error/error";
 import { ErrorBoundary } from "@clevercanary/data-explorer-ui/lib/components/ErrorBoundary";
 import { Head } from "@clevercanary/data-explorer-ui/lib/components/Head/head";
 import { AppLayout } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/AppLayout/appLayout.styles";
 import { Footer } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Footer/footer";
 import { Header } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Header/header";
 import { Main } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Main/main.styles";
 import { Support } from "@clevercanary/data-explorer-ui/lib/components/Support/support";
-import { TempError } from "@clevercanary/data-explorer-ui/lib/components/TempError";
 import { AuthProvider } from "@clevercanary/data-explorer-ui/lib/providers/authentication";
 import { ConfigProvider as DXConfigProvider } from "@clevercanary/data-explorer-ui/lib/providers/config";
 import { ExploreStateProvider } from "@clevercanary/data-explorer-ui/lib/providers/exploreState";
 import { FileManifestStateProvider } from "@clevercanary/data-explorer-ui/lib/providers/fileManifestState";
 import { createAppTheme } from "@clevercanary/data-explorer-ui/lib/theme/theme";
+import { DataExplorerError } from "@clevercanary/data-explorer-ui/lib/types/error";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import { config } from "app/config/config";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 import { useEffect } from "react";
 import TagManager from "react-gtm-module";
 
@@ -26,7 +28,8 @@ const SESSION_TIMEOUT = 15 * 60 * 1000; // 15 minutes
 function MyApp({ Component, pageProps }: AppProps): JSX.Element {
   // Set up the site configuration, layout and theme.
   const appConfig = config();
-  const { analytics, layout, themeOptions } = appConfig;
+  const { asPath } = useRouter();
+  const { analytics, layout, redirectRootToPath, themeOptions } = appConfig;
   const { gtmAuth, gtmId, gtmPreview } = analytics || {};
   const theme = createAppTheme(themeOptions);
   const { entityListType } = pageProps as AzulEntitiesStaticResponse;
@@ -51,8 +54,15 @@ function MyApp({ Component, pageProps }: AppProps): JSX.Element {
                 <FileManifestStateProvider>
                   <Main>
                     <ErrorBoundary
-                      fallbackRender={(error): JSX.Element => (
-                        <TempError error={error} />
+                      key={asPath}
+                      fallbackRender={(
+                        error: DataExplorerError
+                      ): JSX.Element => (
+                        <Error
+                          errorMessage={error.message}
+                          requestUrlMessage={error.requestUrlMessage}
+                          rootPath={redirectRootToPath}
+                        />
                       )}
                     >
                       <Component {...pageProps} />

diff --git a/explorer/pages/_error.tsx b/explorer/pages/_error.tsx
@@ -1,12 +1,19 @@
-import { TempError as CustomError } from "@clevercanary/data-explorer-ui/lib/components/TempError";
+import { Error as ErrorComponent } from "@clevercanary/data-explorer-ui/lib/components/Error/error";
+import { useConfig } from "@clevercanary/data-explorer-ui/lib/hooks/useConfig";
 import { NextPage, NextPageContext } from "next";
 
 interface ErrorProps {
   error?: Error | null;
 }
 
 const Error: NextPage<ErrorProps> = ({ error }: ErrorProps) => {
-  return error ? <CustomError error={error} /> : <></>;
+  const { config } = useConfig();
+
+  return error ? (
+    <ErrorComponent rootPath={config.redirectRootToPath} />
+  ) : (
+    <></>
+  );
 };
 
 Error.getInitialProps = ({ err }: NextPageContext): ErrorProps => {