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 { ErrorPageData, 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.getErrorPageData();
  15
  16     return (
  17       <div className="container-lg text-center">
  18         <h1>{errorPageData ? "Error!" : "Page Not Found"}</h1>
  19         <p>
  20           {errorPageData
  21             ? 'There was an error on the server. Try refreshing your browser. If that doesn\'t work, come back at a later time. If the problem persists, <a href="https://github.com/LemmyNet/lemmy/issues">consider opening an issue.</a>'
  22             : "The page you are looking for does not exist"}
  23         </p>
  24         {!errorPageData && (
  25           <Link to="/">Click here to return to your home page</Link>
  26         )}
  27         {errorPageData?.adminMatrixIds &&
  28           errorPageData.adminMatrixIds.length > 0 && (
  29             <div>
  30               <div>
  31                 If you would like to reach out to one of{" "}
  32                 {this.isoData.site_res?.site_view.site.name ?? "this instance"}
  33                 &apos;s admins for support, try the following Matrix addresses:
  34               </div>
  35               <ul>
  36                 {errorPageData.adminMatrixIds.map(matrixId => (
  37                   <li key={matrixId}>{matrixId}</li>
  38                 ))}
  39               </ul>
  40             </div>
  41           )}
  42         {errorPageData?.error && (
  43           <code className="text-start">{errorPageData.error}</code>
  44         )}
  45       </div>
  46     );
  47   }
  48
  49   private getErrorPageData() {
  50     const errorPageData = this.isoData.routeData[0] as
  51       | ErrorPageData
  52       | undefined;
  53     if (errorPageData?.type === "error") {
  54       return errorPageData;
  55     }
  56
  57     return undefined;
  58   }
  59 }