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

   1 import { Component } from "inferno";
   2 import { Link } from "inferno-router";
   3 import { IsoDataOptionalSite } from "shared/interfaces";
   4 import { setIsoData } from "../../utils";
   5
   6 export class ErrorPage extends Component<any, any> {
   7   private isoData: IsoDataOptionalSite = setIsoData(this.context);
   8
   9   constructor(props: any, context: any) {
  10     super(props, context);
  11   }
  12
  13   render() {
  14     const { errorPageData } = this.isoData;
  15
  16     return (
  17       <div className="container-lg text-center">
  18         <h1>{errorPageData ? "Error!" : "Page Not Found"}</h1>
  19         <p className="p-4">
  20           {errorPageData ? (
  21             <>
  22               There was an error on the server. Try refreshing your browser. If
  23               that doesn&apos;t work, come back at a later time. If the problem
  24               persists, you can seek help in the{" "}
  25               <a href="https://lemmy.ml/c/lemmy_support">
  26                 Lemmy support community
  27               </a>{" "}
  28               or the{" "}
  29               <a href="https://matrix.to/#/#lemmy-space:matrix.org">
  30                 Lemmy Matrix room
  31               </a>
  32               .
  33             </>
  34           ) : (
  35             "The page you are looking for does not exist."
  36           )}
  37         </p>
  38         {!errorPageData && (
  39           <Link to="/" replace>
  40             Click here to return to your home page.
  41           </Link>
  42         )}
  43         {errorPageData?.adminMatrixIds &&
  44           errorPageData.adminMatrixIds.length > 0 && (
  45             <>
  46               <div>
  47                 If you would like to reach out to one of{" "}
  48                 {this.isoData.site_res?.site_view.site.name ?? "this instance"}
  49                 &apos;s admins for support, try the following Matrix addresses:
  50               </div>
  51               <ul className="mx-auto mt-2" style={{ width: "fit-content" }}>
  52                 {errorPageData.adminMatrixIds.map(matrixId => (
  53                   <li key={matrixId} className="text-info">
  54                     {matrixId}
  55                   </li>
  56                 ))}
  57               </ul>
  58             </>
  59           )}
  60         {errorPageData?.error && (
  61           <code
  62             style={{ "text-align": "start" }}
  63             className="d-block bg-dark text-light p-2 mt-4"
  64           >
  65             {errorPageData.error}
  66           </code>
  67         )}
  68       </div>
  69     );
  70   }
  71 }