Dedicated page handlers

hodgef · hodgef · commit e5141d66fb47 · 2025-02-01T18:25:54.000-05:00
diff --git a/src/components/Admin/Panel.tsx b/src/components/Admin/Panel.tsx
@@ -4,7 +4,7 @@ import css from "@panelAssets/css/panel.css";
 import React from "react";
 import { Header } from "./Header";
 import { Content } from "./Content";
-import { wrapReactPage } from "../Page";
+import { wrapAdminReactPage } from "../Page";
 import { Handler } from "../Request";
 import { getAppHelper } from "./Utils";
 import { Action, AdminPanelPageProps } from "./interfaces";
@@ -33,7 +33,7 @@ export const adminPanelPage: Handler = async ({ state }) => {
     const userSignedIp = isAdminLoggedIn ? getSignedIp() : undefined;
 
     const props = { isSetup: !hasAdmins, pageName, csrfToken, isAdminLoggedIn, userSignedIp } as AdminPanelPageProps;
-    return wrapReactPage('AdminPanelPage', <AdminPanelPage {...props} />, props, css);
+    return wrapAdminReactPage('AdminPanelPage', <AdminPanelPage {...props} />, props, css);
 }
 
 const actionsComponent = {
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
@@ -3,7 +3,24 @@ import ReactDOMServer from "react-dom/server";
 import { resRaw } from "../Response";
 import { apiker } from "../Apiker";
 
-export const pageHeader = (styles = "") => `
+export const pageHeader = (head = "") => `
+    <!DOCTYPE html>
+    <html lang="en">
+        <head>
+           ${head} 
+        </head>
+        <body>
+            <div id="app">
+`;
+
+export const pageFooter = (prepend = "") => `
+        </div>
+        ${prepend}
+    </body>
+    </html>
+`;
+
+export const adminPageHeader = (styles = "") => `
     <!DOCTYPE html>
     <html lang="en">
         <head>
@@ -33,7 +50,7 @@ export const pageHeader = (styles = "") => `
             <div id="app">
 `;
 
-export const pageFooter = (prepend = "") => `
+export const adminPageFooter = (prepend = "") => `
         </div>
         <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
@@ -53,6 +70,43 @@ export const wrapReactPage = (componentName: string, pageComponent: React.ReactE
     apiker.responseHeaders.set("X-Frame-Options", "deny");
 
     return resRaw(pageHeader(styles) + pageContent + pageFooter(`
+        <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+        <script>
+            window.appRoot = (action, componentName, props = {}) => {
+                const domNode = document.getElementById("app");
+                const root = ReactDOM.createRoot(domNode);
+
+                const componentProps = {
+                    ...props
+                };
+
+                if(!window.initializeAppHelper){
+                    window.initializeAppHelper = (componentName) => ({
+                        setProps: (newProps) => root.render(pages[componentName](newProps))
+                    });
+                }
+
+                if(action === "hydrate"){
+                    pages.ReactDOM.hydrate(pages[componentName](componentProps), app);
+
+                } else if (action === "render") {
+                    root.render(pages[componentName](componentProps));
+                }
+            };
+            window.appRoot("hydrate", "${componentName}", ${JSON.stringify(props)});
+        </script>
+    `));
+}
+
+export const wrapAdminReactPage = (componentName: string, pageComponent: React.ReactElement, props = {}, styles = "") => {
+    let pageContent = ReactDOMServer.renderToString(pageComponent);
+
+    apiker.responseHeaders.set("Content-Security-Policy", "frame-ancestors 'none';");
+    apiker.responseHeaders.set("X-Frame-Options", "deny");
+
+    return resRaw(adminPageHeader(styles) + pageContent + adminPageFooter(`
         <script>
             window.appRoot = (action, componentName, props = {}) => {
                 const domNode = document.getElementById("app");
