src/shared/components/app/app.tsx

   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 { FirstLoadService, 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";
  15
  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();
  22   }
  23
  24   handleJumpToContent(event) {
  25     event.preventDefault();
  26     this.mainContentRef.current?.focus();
  27   }
  28   render() {
  29     const siteRes = this.isoData.site_res;
  30     const siteView = siteRes?.site_view;
  31
  32     return (
  33       <>
  34         <Provider i18next={I18NextService.i18n}>
  35           <div id="app" className="lemmy-site">
  36             <a
  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)}
  39             >
  40               ${I18NextService.i18n.t("jump_to_content", "Jump to content")}
  41             </a>
  42             {siteView && (
  43               <Theme defaultTheme={siteView.local_site.default_theme} />
  44             )}
  45             <Navbar siteRes={siteRes} />
  46             <div className="mt-4 p-0 fl-1">
  47               <Switch>
  48                 {routes.map(
  49                   ({ path, component: RouteComponent, fetchInitialData }) => (
  50                     <Route
  51                       key={path}
  52                       path={path}
  53                       exact
  54                       component={routeProps => {
  55                         if (!fetchInitialData) {
  56                           FirstLoadService.falsify();
  57                         }
  58
  59                         return (
  60                           <ErrorGuard>
  61                             <main tabIndex={-1} ref={this.mainContentRef}>
  62                               {RouteComponent &&
  63                                 (isAuthPath(path ?? "") ? (
  64                                   <AuthGuard>
  65                                     <RouteComponent {...routeProps} />
  66                                   </AuthGuard>
  67                                 ) : (
  68                                   <RouteComponent {...routeProps} />
  69                                 ))}
  70                             </main>
  71                           </ErrorGuard>
  72                         );
  73                       }}
  74                     />
  75                   )
  76                 )}
  77                 <Route component={ErrorPage} />
  78               </Switch>
  79             </div>
  80             <Footer site={siteRes} />
  81           </div>
  82         </Provider>
  83       </>
  84     );
  85   }
  86 }