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