Merge branch 'main' into fix/fix-badges-spacing-componentize

[lemmy-ui.git] / src / shared / components / app / error-page.tsx

diff --git a/src/shared/components/app/error-page.tsx b/src/shared/components/app/error-page.tsx
index 3b1628b786b7e3edef56257cefdc2a568c04943e..e083276e07fcf3eeac97a28f6cf3b53bc3255a16 100644 (file)
--- a/src/shared/components/app/error-page.tsx
+++ b/src/shared/components/app/error-page.tsx
@@ -1,56 +1,70 @@
+import { setIsoData } from "@utils/app";
+import { removeAuthParam } from "@utils/helpers";
 import { Component } from "inferno";
+import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
-import { ErrorPageData, setIsoData } from "../../utils";
+import { IsoDataOptionalSite } from "../../interfaces";
+import { I18NextService } from "../../services";
 
 export class ErrorPage extends Component<any, any> {
-  private isoData = setIsoData(this.context);
+  private isoData: IsoDataOptionalSite = setIsoData(this.context);
 
   constructor(props: any, context: any) {
     super(props, context);
   }
 
   render() {
-    const errorPageData = this.getErrorPageData();
+    const { errorPageData } = this.isoData;
 
     return (
-      <div className="container-lg">
-        <h1>{errorPageData ? "Error!" : "Page Not Found"}</h1>
-        <p>
+      <div className="error-page container-lg text-center">
+        <h1>
           {errorPageData
-            ? "There was an error on the server. Try refreshing your browser of coming back at a later time"
-            : "The page you are looking for does not exist"}
-        </p>
+            ? I18NextService.i18n.t("error_page_title")
+            : I18NextService.i18n.t("not_found_page_title")}
+        </h1>
+        {errorPageData ? (
+          <T i18nKey="error_page_paragraph" className="p-4" parent="p">
+            #<a href="https://lemmy.ml/c/lemmy_support">#</a>#
+            <a href="https://matrix.to/#/#lemmy-space:matrix.org">#</a>#
+          </T>
+        ) : (
+          <p>{I18NextService.i18n.t("not_found_page_message")}</p>
+        )}
         {!errorPageData && (
-          <Link to="/">Click here to return to your home page</Link>
+          <Link to="/" replace>
+            {I18NextService.i18n.t("not_found_return_home_button")}
+          </Link>
         )}
         {errorPageData?.adminMatrixIds &&
           errorPageData.adminMatrixIds.length > 0 && (
-            <div>
+            <>
               <div>
-                If you would like to reach out to one of{" "}
-                {this.isoData.site_res.site_view.site.name}&apos;s admins for
-                support, try the following Matrix addresses:
+                {I18NextService.i18n.t("error_page_admin_matrix", {
+                  instance:
+                    this.isoData.site_res?.site_view.site.name ??
+                    "this instance",
+                })}
               </div>
-              <ul>
+              <ul className="mx-auto mt-2" style={{ width: "fit-content" }}>
                 {errorPageData.adminMatrixIds.map(matrixId => (
-                  <li key={matrixId}>{matrixId}</li>
+                  <li key={matrixId} className="text-info">
+                    {matrixId}
+                  </li>
                 ))}
               </ul>
-            </div>
+            </>
           )}
-        {errorPageData?.error && <code>{errorPageData.error.message}</code>}
+        {errorPageData?.error && (
+          <T
+            i18nKey="error_code_message"
+            parent="p"
+            interpolation={{ error: removeAuthParam(errorPageData.error) }}
+          >
+            #<strong className="text-danger">#</strong>#
+          </T>
+        )}
       </div>
     );
   }
-
-  private getErrorPageData() {
-    const errorPageData = this.isoData.routeData[0] as
-      | ErrorPageData
-      | undefined;
-    if (errorPageData?.type === "error") {
-      return errorPageData;
-    }
-
-    return undefined;
-  }
 }