diff --git a/lemmy-translations b/lemmy-translations index e0150333..d250d15f 160000 --- a/lemmy-translations +++ b/lemmy-translations @@ -1 +1 @@ -Subproject commit e015033336375d2743a314b166a3c7c16526915e +Subproject commit d250d15f4fbf3e1b9565529f7d0cea90c8270757 diff --git a/src/client/index.tsx b/src/client/index.tsx index 27031189..db0a9ef7 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -1,7 +1,7 @@ import { initializeSite } from "@utils/app"; import { hydrate } from "inferno-hydrate"; import { BrowserRouter } from "inferno-router"; -import App from "../shared/components/app/app"; +import { App } from "../shared/components/app/app"; import { lazyHighlightjs } from "../shared/lazy-highlightjs"; import { loadUserLanguage } from "../shared/services/I18NextService"; import { verifyDynamicImports } from "../shared/dynamic-imports"; diff --git a/src/server/handlers/catch-all-handler.tsx b/src/server/handlers/catch-all-handler.tsx index 8aafaa82..33d4d7a6 100644 --- a/src/server/handlers/catch-all-handler.tsx +++ b/src/server/handlers/catch-all-handler.tsx @@ -6,7 +6,7 @@ import { StaticRouter, matchPath } from "inferno-router"; import { Match } from "inferno-router/dist/Route"; import { renderToString } from "inferno-server"; import { GetSiteResponse, LemmyHttp } from "lemmy-js-client"; -import App from "../../shared/components/app/app"; +import { App } from "../../shared/components/app/app"; import { InitialFetchRequest, IsoDataOptionalSite, diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx index e655f6fb..a9c8b793 100644 --- a/src/shared/components/app/app.tsx +++ b/src/shared/components/app/app.tsx @@ -1,11 +1,5 @@ import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app"; -import { - Component, - RefObject, - createRef, - forwardRef, - linkEvent, -} from "inferno"; +import { Component, createRef, linkEvent } from "inferno"; import { Provider } from "inferno-i18next-dess"; import { Route, Switch } from "inferno-router"; import { IsoDataOptionalSite } from "../../interfaces"; @@ -22,99 +16,9 @@ import AnonymousGuard from "../common/anonymous-guard"; import { destroyTippy, setupTippy } from "../../tippy"; import AdultConsentModal from "../common/adult-consent-modal"; -interface AppProps { - ref: RefObject; -} - -function handleJumpToContent(event) { - event.preventDefault(); -} - -class App extends Component { - private isoData: IsoDataOptionalSite = setIsoData(this.context); - - render() { - const siteRes = this.isoData.site_res; - const siteView = siteRes?.site_view; - - return ( -
- - {siteView && } - -
- - {routes.map( - ({ - path, - component: RouteComponent, - fetchInitialData, - getQueryParams, - }) => ( - { - if (!fetchInitialData) { - FirstLoadService.falsify(); - } - - let queryProps = routeProps; - if (getQueryParams && this.isoData.site_res) { - // ErrorGuard will not render its children when - // site_res is missing, this guarantees that props - // will always contain the query params. - queryProps = { - ...routeProps, - ...getQueryParams( - routeProps.location.search, - this.isoData.site_res, - ), - }; - } - - return ( - -
- {RouteComponent && - (isAuthPath(path ?? "") ? ( - - - - ) : isAnonymousPath(path ?? "") ? ( - - - - ) : ( - - ))} -
-
- ); - }} - /> - ), - )} - -
-
-
-
- ); - } -} - -const AppForwardRef = forwardRef((props, ref) => ); - -export default class AppWrapper extends Component { +export class App extends Component { private isoData: IsoDataOptionalSite = setIsoData(this.context); + private readonly mainContentRef = createRef(); private readonly rootRef = createRef(); componentDidMount(): void { @@ -125,17 +29,96 @@ export default class AppWrapper extends Component { destroyTippy(); } + handleJumpToContent(event) { + event.preventDefault(); + this.mainContentRef.current?.focus(); + } + render() { - const contentWarning = - this.isoData.site_res?.site_view.site.content_warning; + const siteRes = this.isoData.site_res; + const siteView = siteRes?.site_view; return ( - - {contentWarning && ( - - )} - - + <> + +
+ + {siteView && ( + + )} + + {siteRes?.site_view.site.content_warning && ( + + )} +
+ + {routes.map( + ({ + path, + component: RouteComponent, + fetchInitialData, + getQueryParams, + }) => ( + { + if (!fetchInitialData) { + FirstLoadService.falsify(); + } + + let queryProps = routeProps; + if (getQueryParams && this.isoData.site_res) { + // ErrorGuard will not render its children when + // site_res is missing, this guarantees that props + // will always contain the query params. + queryProps = { + ...routeProps, + ...getQueryParams( + routeProps.location.search, + this.isoData.site_res, + ), + }; + } + + return ( + +
+ {RouteComponent && + (isAuthPath(path ?? "") ? ( + + + + ) : isAnonymousPath(path ?? "") ? ( + + + + ) : ( + + ))} +
+
+ ); + }} + /> + ), + )} + +
+
+
+
+ ); } }