Use react to set inner HTML

RedHatInsights · Feb 7, 2025 · c4e12f3 · c4e12f3
1 parent 0c465d9
commit c4e12f3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -32,7 +32,8 @@
       })();
     </script>
     <script>
-      (function (env) {
+      (function () {
+        let env = location.origin === "https://developers.redhat.com" ? 'production' : 'staging'
         let scriptSrc;
         switch (env) {
           case "production":
@@ -59,7 +60,7 @@
             _satellite.pageBottom();
           }`;
         document.addEventListener("DOMContentLoaded", () => document.body.appendChild(dpalFooter));
-      }("%REACT_APP_ENV%"));
+      }());
     </script>
     <script>
       if ("%REACT_APP_PENDO_ENABLED%" === "true") {
@@ -87,9 +88,9 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div class=“rhd-m-max-width-xl”>
-      <!--#include virtual="/.include/chrome/rh-universal-nav-header/rh-universal-nav-header.html" -->
+      <!--#include virtual="/remote/api/chrome/rh-universal-nav-header" -->
       <div id="root"></div>
-      <!--#include virtual="/.include/chrome/rh-unified-footer/rh-unified-footer.html" -->
+      <!--#include virtual="/remote/api/chrome/rh-unified-footer" -->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
       <link rel="stylesheet" href="/modules/contrib/red_hat_shared_libs/dist/@cpelements/pfe-navigation/dist/pfe-navigation--lightdom.css" />

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,6 @@
+'use client';
 import './App.scss';
+import { useState, useEffect } from 'react';
 
 const headerPatch = `
 (() => {
@@ -80,6 +82,17 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const [header, setHeader] = useState<string | undefined>();
+  const [footer, setFooter] = useState<string | undefined>();
+  useEffect(() => {
+    const fetchPartials = async () => {
+      const headerResponse = await fetch(`/api/chrome/rh-universal-nav-header`);
+      const footerResponse = await fetch(`/api/chrome/rh-unified-footer`);
+      setHeader(await headerResponse.text());
+      setFooter(await footerResponse.text());
+    };
+    fetchPartials();
+  }, []);
   return (
     <html lang="en">
       <head suppressHydrationWarning={true}>
@@ -95,14 +108,14 @@ export default function RootLayout({
         <div className="rhd-m-max-width-xl">
           <div
             suppressHydrationWarning={true}
-            dangerouslySetInnerHTML={{ __html: '<!--#include virtual="/remote_stage/api/chrome/rh-universal-nav-header" -->' }}
+            dangerouslySetInnerHTML={{ __html: header || '<!--#include virtual="/remote/api/chrome/rh-universal-nav-header" -->' }}
           ></div>
-          <div suppressHydrationWarning={true} dangerouslySetInnerHTML={{ __html: '<!--#set var="pageTitle" value="My Page" -->' }}></div>
-          <div suppressHydrationWarning={true} dangerouslySetInnerHTML={{ __html: 'Welcome to <!--#echo var="pageTitle" -->' }}></div>
           {children}
           <div
             suppressHydrationWarning={true}
-            dangerouslySetInnerHTML={{ __html: '<!--#include virtual="/remote_stage/api/chrome/rh-unified-footer/rh-unified-footer.html" -->' }}
+            dangerouslySetInnerHTML={{
+              __html: footer || '<!--#include virtual="/remote/api/chrome/rh-unified-footer/rh-unified-footer.html" -->',
+            }}
           ></div>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>