import React from "react"; import dynamic from "next/dynamic"; import Head from "next/head"; import { useRouter } from "next/router"; import { MantineProvider } from "@mantine/core"; import { ThemeProvider } from "styled-components"; import toast from "react-hot-toast"; import { darkTheme, lightTheme } from "src/constants/theme"; import { Toolbar } from "src/containers/Toolbar"; import useFile from "src/store/useFile"; import useGraph from "src/store/useGraph"; interface EmbedMessage { data: { json?: string; options?: any; }; } const Graph = dynamic(() => import("src/containers/Views/GraphView").then(c => c.Graph), { ssr: false, }); const WidgetPage = () => { const { query, push, isReady } = useRouter(); const [theme, setTheme] = React.useState<"dark" | "light">("dark"); const checkEditorSession = useFile(state => state.checkEditorSession); const setContents = useFile(state => state.setContents); const setDirection = useGraph(state => state.setDirection); const clearGraph = useGraph(state => state.clearGraph); React.useEffect(() => { if (isReady) { if (typeof query?.json === "string") checkEditorSession(query.json, true); else clearGraph(); window.parent.postMessage(window.frameElement?.getAttribute("id"), "*"); } }, [clearGraph, checkEditorSession, isReady, push, query.json, query.partner]); React.useEffect(() => { const handler = (event: EmbedMessage) => { try { if (!event.data?.json) return; if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") { setTheme(event.data.options.theme); } setContents({ contents: event.data.json, hasChanges: false }); setDirection(event.data.options?.direction); } catch (error) { console.error(error); toast.error("Invalid JSON!"); } }; window.addEventListener("message", handler); return () => window.removeEventListener("message", handler); }, [setContents, setDirection, theme]); return ( ); }; export default WidgetPage;