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               <span>
  23                 There was an error on the server. Try refreshing your browser.
  24                 If that doesn&apos;t work, come back at a later time. If the
  25                 problem persists,
  26               </span>{" "}
  27               <a href="https://github.com/LemmyNet/lemmy/issues">
  28                 consider opening an issue.
  29               </a>
  30             </>
  31           ) : (
  32             "The page you are looking for does not exist."
  33           )}
  34         </p>
  35         {!errorPageData && (
  36           <Link to="/" replace>
  37             Click here to return to your home page.
  38           </Link>
  39         )}
  40         {errorPageData?.adminMatrixIds &&
  41           errorPageData.adminMatrixIds.length > 0 && (
  42             <>
  43               <div>
  44                 If you would like to reach out to one of{" "}
  45                 {this.isoData.site_res?.site_view.site.name ?? "this instance"}
  46                 &apos;s admins for support, try the following Matrix addresses:
  47               </div>
  48               <ul className="mx-auto mt-2" style={{ width: "fit-content" }}>
  49                 {errorPageData.adminMatrixIds.map(matrixId => (
  50                   <li key={matrixId} className="text-info">
  51                     {matrixId}
  52                   </li>
  53                 ))}
  54               </ul>
  55             </>
  56           )}
  57         {errorPageData?.error && (
  58           <code
  59             style={{ "text-align": "start" }}
  60             className="d-block bg-dark text-light p-2 mt-4"
  61           >
  62             {errorPageData.error}
  63           </code>
  64         )}
  65       </div>
  66     );
  67   }
  68 }