1 import { isAuthPath, setIsoData } from "@utils/app";
2 import { Component, RefObject, createRef, linkEvent } from "inferno";
3 import { Provider } from "inferno-i18next-dess";
4 import { Route, Switch } from "inferno-router";
5 import { IsoDataOptionalSite } from "../../interfaces";
6 import { routes } from "../../routes";
7 import { I18NextService } from "../../services";
8 import AuthGuard from "../common/auth-guard";
9 import ErrorGuard from "../common/error-guard";
10 import { ErrorPage } from "./error-page";
11 import { Footer } from "./footer";
12 import { Navbar } from "./navbar";
13 import "./styles.scss";
14 import { Theme } from "./theme";
16 export class App extends Component<any, any> {
17 private isoData: IsoDataOptionalSite = setIsoData(this.context);
18 private readonly mainContentRef: RefObject<HTMLElement>;
19 constructor(props: any, context: any) {
20 super(props, context);
21 this.mainContentRef = createRef();
24 handleJumpToContent(event) {
25 event.preventDefault();
26 this.mainContentRef.current?.focus();
29 const siteRes = this.isoData.site_res;
30 const siteView = siteRes?.site_view;
34 <Provider i18next={I18NextService.i18n}>
35 <div id="app" className="lemmy-site">
37 className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
38 onClick={linkEvent(this, this.handleJumpToContent)}
40 ${I18NextService.i18n.t("jump_to_content", "Jump to content")}
43 <Theme defaultTheme={siteView.local_site.default_theme} />
45 <Navbar siteRes={siteRes} />
46 <div className="mt-4 p-0 fl-1">
48 {routes.map(({ path, component: RouteComponent }) => (
53 component={routeProps => (
55 <main tabIndex={-1} ref={this.mainContentRef}>
57 (isAuthPath(path ?? "") ? (
59 <RouteComponent {...routeProps} />
62 <RouteComponent {...routeProps} />
69 <Route component={ErrorPage} />
72 <Footer site={siteRes} />