wtf.js

import React, { useEffect } from "react";

type PreviewProviderConfig = {
	repoName: string;
	children: React.ReactChild[] | React.ReactChild;
};

// TODO: removeEventListener for when component unmounts
// TODO: No need for this to be a Provider, make it a component

export function PrismicPreview({ repoName, children }: PreviewProviderConfig) {
	useEffect(() => {
		if (window) {
			window.addEventListener("prismicPreviewUpdate", async (event: Event) => {
				// Prevent the toolbar from reloading the page.
				event.preventDefault();

				const detail = (event as CustomEvent<{ ref: string }>).detail;

				// Update the preview cookie.
				await fetch(`/api/preview?token=${detail.ref}`);

				// Reload the page with the updated token.
				window.location.reload();
			});
		}

		if (window) {
			window.addEventListener("prismicPreviewEnd", async (event: Event) => {
				fetch("/api/exit-preview");
			});
		}
	});
	return (
		<React.Fragment>
			<script
				async
				defer
				src={`https://static.cdn.prismic.io/prismic.js?new=true&repo=${repoName}`}
			></script>
			{children}
		</React.Fragment>
	);
}