fix: Add data-bs-theme attribute for user dark/light modes (#1782)

[lemmy-ui.git] / src / shared / components / app / app.tsx

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
index 689f7985acabd2800b57bebf1c2e25e1a493f2c4..3452f9627c3159d672b676b98b75e3a8c0d166f8 100644 (file)
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@@ -1,65 +1,96 @@
-import { Component } from "inferno";
-import { Helmet } from "inferno-helmet";
-import { Provider } from "inferno-i18next";
+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 localUserView={siteRes.my_user} />
-            {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>
       </>