+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}'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;
- }
}