diff --git a/package.json b/package.json index caea727d..da22cd14 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@babel/preset-typescript": "^7.21.5", "@babel/runtime": "^7.21.5", "@emoji-mart/data": "^1.1.0", + "@reduxjs/toolkit": "^2.0.1", "@shortcm/qr-image": "^9.0.2", "autosize": "^6.0.1", "babel-loader": "^9.1.3", @@ -67,6 +68,7 @@ "inferno-helmet": "^5.2.1", "inferno-hydrate": "^8.2.2", "inferno-i18next-dess": "0.0.2", + "inferno-redux": "^8.2.2", "inferno-router": "^8.2.2", "inferno-server": "^8.2.2", "jwt-decode": "^4.0.0", @@ -83,6 +85,7 @@ "markdown-it-sub": "^1.0.0", "markdown-it-sup": "^1.0.0", "mini-css-extract-plugin": "^2.7.5", + "redux": "^5.0.0", "register-service-worker": "^1.7.2", "run-node-webpack-plugin": "^1.3.0", "rxjs": "^7.8.1", diff --git a/src/client/index.tsx b/src/client/index.tsx index a7af06de..28181048 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -1,4 +1,4 @@ -import { initializeSite, setupDateFns } from "@utils/app"; +import { initializeSite, setupDateFns, setupRedux } from "@utils/app"; import { hydrate } from "inferno-hydrate"; import { BrowserRouter } from "inferno-router"; import { App } from "../shared/components/app/app"; @@ -6,16 +6,24 @@ import { App } from "../shared/components/app/app"; import "bootstrap/js/dist/collapse"; import "bootstrap/js/dist/dropdown"; import "bootstrap/js/dist/modal"; +import { Provider } from "inferno-redux"; async function startClient() { - initializeSite(window.isoData.site_res); + const windowData = window.isoData; + delete window.isoData; + + initializeSite(windowData?.site_res); await setupDateFns(); + const store = setupRedux(windowData); + const wrapper = ( - - - + + + + + ); const root = document.getElementById("root"); diff --git a/src/server/handlers/catch-all-handler.tsx b/src/server/handlers/catch-all-handler.tsx index 3466f3cc..22fca585 100644 --- a/src/server/handlers/catch-all-handler.tsx +++ b/src/server/handlers/catch-all-handler.tsx @@ -20,6 +20,8 @@ import { createSsrHtml } from "../utils/create-ssr-html"; import { getErrorPageData } from "../utils/get-error-page-data"; import { setForwardedHeaders } from "../utils/set-forwarded-headers"; import { getJwtCookie } from "../utils/has-jwt-cookie"; +import { Provider } from "inferno-redux"; +import { configureStore, createSlice } from "@reduxjs/toolkit"; export default async (req: Request, res: Response) => { try { @@ -108,10 +110,19 @@ export default async (req: Request, res: Response) => { errorPageData, }; + const slice = createSlice({ + name: "isoData", + initialState: { value: isoData }, + reducers: {}, + }); + const store = configureStore({ reducer: slice.reducer }); + const wrapper = ( - - - + + + + + ); const root = renderToString(wrapper); diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx index 5709f766..0d443368 100644 --- a/src/shared/components/app/app.tsx +++ b/src/shared/components/app/app.tsx @@ -1,4 +1,4 @@ -import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app"; +import { isAnonymousPath, isAuthPath } from "@utils/app"; import { dataBsTheme } from "@utils/browser"; import { Component, RefObject, createRef, linkEvent } from "inferno"; import { Provider } from "inferno-i18next-dess"; @@ -17,20 +17,20 @@ import AnonymousGuard from "../common/anonymous-guard"; import { CodeTheme } from "./code-theme"; export class App extends Component { - private isoData: IsoDataOptionalSite = setIsoData(this.context); private readonly mainContentRef: RefObject; constructor(props: any, context: any) { super(props, context); this.mainContentRef = createRef(); } - handleJumpToContent(event) { + handleJumpToContent(event: any) { event.preventDefault(); this.mainContentRef.current?.focus(); } render() { - const siteRes = this.isoData.site_res; + const reduxState: IsoDataOptionalSite = this.context.store.getState().value; + const siteRes = reduxState.site_res; const siteView = siteRes?.site_view; return ( diff --git a/src/shared/components/app/error-page.tsx b/src/shared/components/app/error-page.tsx index a0b8d535..6d9acaf1 100644 --- a/src/shared/components/app/error-page.tsx +++ b/src/shared/components/app/error-page.tsx @@ -1,4 +1,3 @@ -import { setIsoData } from "@utils/app"; import { Component } from "inferno"; import { T } from "inferno-i18next-dess"; import { Link } from "inferno-router"; @@ -6,14 +5,13 @@ import { IsoDataOptionalSite } from "../../interfaces"; import { I18NextService } from "../../services"; export class ErrorPage extends Component { - private isoData: IsoDataOptionalSite = setIsoData(this.context); - constructor(props: any, context: any) { super(props, context); } render() { - const { errorPageData } = this.isoData; + const reduxState: IsoDataOptionalSite = this.context.store.getState(); + const errorPageData = reduxState.errorPageData; return (
@@ -41,8 +39,7 @@ export class ErrorPage extends Component {
{I18NextService.i18n.t("error_page_admin_matrix", { instance: - this.isoData.site_res?.site_view.site.name ?? - "this instance", + reduxState.site_res?.site_view.site.name ?? "this instance", })}