src/shared/components/app/app.tsx

   1 import { isAuthPath, setIsoData } from "@utils/app";
   2 import { dataBsTheme } from "@utils/browser";
   3 import { Component, RefObject, createRef, linkEvent } from "inferno";
   4 import { Provider } from "inferno-i18next-dess";
   5 import { Route, Switch } from "inferno-router";
   6 import { IsoDataOptionalSite } from "../../interfaces";
   7 import { routes } from "../../routes";
   8 import { FirstLoadService, I18NextService, UserService } from "../../services";
   9 import AuthGuard from "../common/auth-guard";
  10 import ErrorGuard from "../common/error-guard";
  11 import { ErrorPage } from "./error-page";
  12 import { Footer } from "./footer";
  13 import { Navbar } from "./navbar";
  14 import "./styles.scss";
  15 import { Theme } from "./theme";
  16
  17 export class App extends Component<any, any> {
  18   private isoData: IsoDataOptionalSite = setIsoData(this.context);
  19   private readonly mainContentRef: RefObject<HTMLElement>;
  20   constructor(props: any, context: any) {
  21     super(props, context);
  22     this.mainContentRef = createRef();
  23   }
  24
  25   handleJumpToContent(event) {
  26     event.preventDefault();
  27     this.mainContentRef.current?.focus();
  28   }
  29
  30   user = UserService.Instance.myUserInfo;
  31
  32   componentDidMount() {
  33     this.setState({ bsTheme: dataBsTheme(this.user) });
  34   }
  35
  36   render() {
  37     const siteRes = this.isoData.site_res;
  38     const siteView = siteRes?.site_view;
  39
  40     return (
  41       <>
  42         <Provider i18next={I18NextService.i18n}>
  43           <div
  44             id="app"
  45             className="lemmy-site"
  46             data-bs-theme={this.state?.bsTheme}
  47           >
  48             <button
  49               type="button"
  50               className="btn skip-link bg-light position-absolute start-0 z-3"
  51               onClick={linkEvent(this, this.handleJumpToContent)}
  52             >
  53               {I18NextService.i18n.t("jump_to_content", "Jump to content")}
  54             </button>
  55             {siteView && (
  56               <Theme defaultTheme={siteView.local_site.default_theme} />
  57             )}
  58             <Navbar siteRes={siteRes} />
  59             <div className="mt-4 p-0 fl-1">
  60               <Switch>
  61                 {routes.map(
  62                   ({ path, component: RouteComponent, fetchInitialData }) => (
  63                     <Route
  64                       key={path}
  65                       path={path}
  66                       exact
  67                       component={routeProps => {
  68                         if (!fetchInitialData) {
  69                           FirstLoadService.falsify();
  70                         }
  71
  72                         return (
  73                           <ErrorGuard>
  74                             <div tabIndex={-1}>
  75                               {RouteComponent &&
  76                                 (isAuthPath(path ?? "") ? (
  77                                   <AuthGuard>
  78                                     <RouteComponent {...routeProps} />
  79                                   </AuthGuard>
  80                                 ) : (
  81                                   <RouteComponent {...routeProps} />
  82                                 ))}
  83                             </div>
  84                           </ErrorGuard>
  85                         );
  86                       }}
  87                     />
  88                   )
  89                 )}
  90                 <Route component={ErrorPage} />
  91               </Switch>
  92             </div>
  93             <Footer site={siteRes} />
  94           </div>
  95         </Provider>
  96       </>
  97     );
  98   }
  99 }