src/shared/components/app/error-page.tsx

   1 import { Component } from "inferno";
   2 import { T } from "inferno-i18next-dess";
   3 import { Link } from "inferno-router";
   4 import { i18n } from "../../i18next";
   5 import { IsoDataOptionalSite } from "../../interfaces";
   6 import { setIsoData } from "../../utils";
   7
   8 export class ErrorPage extends Component<any, any> {
   9   private isoData: IsoDataOptionalSite = setIsoData(this.context);
  10
  11   constructor(props: any, context: any) {
  12     super(props, context);
  13   }
  14
  15   render() {
  16     const { errorPageData } = this.isoData;
  17
  18     return (
  19       <div className="container-lg text-center">
  20         <h1>
  21           {errorPageData
  22             ? i18n.t("error_page_title")
  23             : i18n.t("not_found_page_title")}
  24         </h1>
  25         <p className="p-4">
  26           {errorPageData ? (
  27             <T i18nKey="error_page_paragraph" class="d-inline">
  28               #<a href="https://lemmy.ml/c/lemmy_support">#</a>#
  29               <a href="https://matrix.to/#/#lemmy-space:matrix.org">#</a>#
  30             </T>
  31           ) : (
  32             i18n.t("not_found_page_message")
  33           )}
  34         </p>
  35         {!errorPageData && (
  36           <Link to="/" replace>
  37             {i18n.t("not_found_return_home_button")}
  38           </Link>
  39         )}
  40         {errorPageData?.adminMatrixIds &&
  41           errorPageData.adminMatrixIds.length > 0 && (
  42             <>
  43               <div>
  44                 {i18n.t("error_page_admin_matrix", {
  45                   instance:
  46                     this.isoData.site_res?.site_view.site.name ??
  47                     "this instance",
  48                 })}
  49               </div>
  50               <ul className="mx-auto mt-2" style={{ width: "fit-content" }}>
  51                 {errorPageData.adminMatrixIds.map(matrixId => (
  52                   <li key={matrixId} className="text-info">
  53                     {matrixId}
  54                   </li>
  55                 ))}
  56               </ul>
  57             </>
  58           )}
  59         {errorPageData?.error && (
  60           <code
  61             style={{ "text-align": "start" }}
  62             className="d-block bg-dark text-light p-2 mt-4"
  63           >
  64             {errorPageData.error}
  65           </code>
  66         )}
  67       </div>
  68     );
  69   }
  70 }