Merge pull request #47 from QortalSeth/main

Added useIframe hook to separate state between multiple Q-Tube tabs.

src/App.tsx

@@ -5,6 +5,7 @@ import { Route, Routes } from "react-router-dom";
 import { PersistGate } from "redux-persist/integration/react";
 import { useAppState } from "./App-State.ts";
 import Notification from "./components/common/Notification/Notification";
+import { useIframe } from "./hooks/useIframe.tsx";
 import { IndividualProfile } from "./pages/ContentPages/IndividualProfile/IndividualProfile";
 import { PlaylistContent } from "./pages/ContentPages/PlaylistContent/PlaylistContent";
 import { VideoContent } from "./pages/ContentPages/VideoContent/VideoContent";
@@ -18,6 +19,7 @@ import { ScrollWrapper } from "./wrappers/ScrollWrapper.tsx";
 function App() {
   // const themeColor = window._qdnTheme
   const { persistor, theme, setTheme } = useAppState();
+  useIframe();
 
   return (
     <Provider store={store}>

src/hooks/useIframe.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const useIframe = () => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    function handleNavigation(event) {
+      if (event.data?.action === "NAVIGATE_TO_PATH" && event.data.path) {
+        console.log("Navigating to path within React app:", event.data.path);
+        navigate(event.data.path); // Navigate directly to the specified path
+
+        // Send a response back to the parent window after navigation is handled
+        window.parent.postMessage(
+          { action: "NAVIGATION_SUCCESS", path: event.data.path },
+          "*"
+        );
+      }
+    }
+
+    window.addEventListener("message", handleNavigation);
+
+    return () => {
+      window.removeEventListener("message", handleNavigation);
+    };
+  }, [navigate]);
+  return { navigate };
+};