-import { Component } from "inferno";
-import { Helmet } from "inferno-helmet";
+import { isAuthPath, setIsoData } from "@utils/app";
+import { dataBsTheme } from "@utils/browser";
+import { Component, RefObject, createRef, linkEvent } from "inferno";
import { Provider } from "inferno-i18next-dess";
import { Route, Switch } from "inferno-router";
-import { GetSiteResponse } from "lemmy-js-client";
-import { i18n } from "../../i18next";
+import { IsoDataOptionalSite } from "../../interfaces";
import { routes } from "../../routes";
-import { favIconPngUrl, favIconUrl } from "../../utils";
+import { FirstLoadService, I18NextService, UserService } from "../../services";
+import AuthGuard from "../common/auth-guard";
+import ErrorGuard from "../common/error-guard";
+import { ErrorPage } from "./error-page";
import { Footer } from "./footer";
import { Navbar } from "./navbar";
-import { NoMatch } from "./no-match";
import "./styles.scss";
import { Theme } from "./theme";
-export interface AppProps {
- siteRes: GetSiteResponse;
-}
-
-export class App extends Component<AppProps, any> {
+export class App extends Component<any, any> {
+ private isoData: IsoDataOptionalSite = setIsoData(this.context);
+ private readonly mainContentRef: RefObject<HTMLElement>;
constructor(props: any, context: any) {
super(props, context);
+ this.mainContentRef = createRef();
+ }
+
+ handleJumpToContent(event) {
+ event.preventDefault();
+ this.mainContentRef.current?.focus();
+ }
+
+ user = UserService.Instance.myUserInfo;
+
+ componentDidMount() {
+ this.setState({ bsTheme: dataBsTheme(this.user) });
}
+
render() {
- let siteRes = this.props.siteRes;
+ const siteRes = this.isoData.site_res;
+ const siteView = siteRes?.site_view;
+
return (
<>
- <Provider i18next={i18n}>
- <div>
- <Theme myUserInfo={siteRes.my_user} site={siteRes.site_view.site} />
- {siteRes &&
- siteRes.site_view &&
- this.props.siteRes.site_view.site.icon && (
- <Helmet>
- <link
- id="favicon"
- rel="shortcut icon"
- type="image/x-icon"
- href={this.props.siteRes.site_view.site.icon || favIconUrl}
- />
- <link
- rel="apple-touch-icon"
- href={
- this.props.siteRes.site_view.site.icon || favIconPngUrl
- }
- />
- </Helmet>
- )}
- <Navbar site_res={this.props.siteRes} />
- <div class="mt-4 p-0 fl-1">
+ <Provider i18next={I18NextService.i18n}>
+ <div
+ id="app"
+ className="lemmy-site"
+ data-bs-theme={this.state?.bsTheme}
+ >
+ <button
+ type="button"
+ className="btn skip-link bg-light position-absolute start-0 z-3"
+ onClick={linkEvent(this, this.handleJumpToContent)}
+ >
+ {I18NextService.i18n.t("jump_to_content", "Jump to content")}
+ </button>
+ {siteView && (
+ <Theme defaultTheme={siteView.local_site.default_theme} />
+ )}
+ <Navbar siteRes={siteRes} />
+ <div className="mt-4 p-0 fl-1">
<Switch>
- {routes.map(({ path, exact, component: C, ...rest }) => (
- <Route
- key={path}
- path={path}
- exact={exact}
- render={props => <C {...props} {...rest} />}
- />
- ))}
- <Route render={props => <NoMatch {...props} />} />
+ {routes.map(
+ ({ path, component: RouteComponent, fetchInitialData }) => (
+ <Route
+ key={path}
+ path={path}
+ exact
+ component={routeProps => {
+ if (!fetchInitialData) {
+ FirstLoadService.falsify();
+ }
+
+ return (
+ <ErrorGuard>
+ <div tabIndex={-1}>
+ {RouteComponent &&
+ (isAuthPath(path ?? "") ? (
+ <AuthGuard>
+ <RouteComponent {...routeProps} />
+ </AuthGuard>
+ ) : (
+ <RouteComponent {...routeProps} />
+ ))}
+ </div>
+ </ErrorGuard>
+ );
+ }}
+ />
+ )
+ )}
+ <Route component={ErrorPage} />
</Switch>
</div>
- <Footer site={this.props.siteRes} />
+ <Footer site={siteRes} />
</div>
</Provider>
</>