File size: 2,399 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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 (
<MantineProvider forceColorScheme={theme}>
<ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
<Head>
<meta name="robots" content="noindex,nofollow" />
</Head>
<Toolbar isWidget />
<Graph isWidget />
</ThemeProvider>
</MantineProvider>
);
};
export default WidgetPage;
|