src/shared/components/app/app.tsx

   1 import { Component } from "inferno";
   2 import { Helmet } from "inferno-helmet";
   3 import { Provider } from "inferno-i18next-dess";
   4 import { Route, Switch } from "inferno-router";
   5 import { GetSiteResponse } from "lemmy-js-client";
   6 import { i18n } from "../../i18next";
   7 import { routes } from "../../routes";
   8 import { favIconPngUrl, favIconUrl } from "../../utils";
   9 import { Footer } from "./footer";
  10 import { Navbar } from "./navbar";
  11 import { NoMatch } from "./no-match";
  12 import "./styles.scss";
  13 import { Theme } from "./theme";
  14
  15 export interface AppProps {
  16   siteRes: GetSiteResponse;
  17 }
  18
  19 export class App extends Component<AppProps, any> {
  20   constructor(props: any, context: any) {
  21     super(props, context);
  22   }
  23   render() {
  24     let siteRes = this.props.siteRes;
  25     return (
  26       <>
  27         <Provider i18next={i18n}>
  28           <div>
  29             <Theme
  30               myUserInfo={siteRes.my_user}
  31               defaultTheme={siteRes.site_view.site.default_theme}
  32             />
  33             {siteRes &&
  34               siteRes.site_view &&
  35               this.props.siteRes.site_view.site.icon && (
  36                 <Helmet>
  37                   <link
  38                     id="favicon"
  39                     rel="shortcut icon"
  40                     type="image/x-icon"
  41                     href={this.props.siteRes.site_view.site.icon || favIconUrl}
  42                   />
  43                   <link
  44                     rel="apple-touch-icon"
  45                     href={
  46                       this.props.siteRes.site_view.site.icon || favIconPngUrl
  47                     }
  48                   />
  49                 </Helmet>
  50               )}
  51             <Navbar site_res={this.props.siteRes} />
  52             <div class="mt-4 p-0 fl-1">
  53               <Switch>
  54                 {routes.map(({ path, exact, component: C, ...rest }) => (
  55                   <Route
  56                     key={path}
  57                     path={path}
  58                     exact={exact}
  59                     render={props => <C {...props} {...rest} />}
  60                   />
  61                 ))}
  62                 <Route render={props => <NoMatch {...props} />} />
  63               </Switch>
  64             </div>
  65             <Footer site={this.props.siteRes} />
  66           </div>
  67         </Provider>
  68       </>
  69     );
  70   }
  71 }