Differential D625 Diff 2367 admin-panel/body-page-editor/preview.jsx

Changeset View

Standalone View

	const React = require('react');			const React = require('react');
	const { useState, useEffect } = React;			const { useState, useEffect } = React;
				const uuidv4 = require('uuid/v4');

	async function generateRenderedHTML(elements) {			async function generateRenderedHTML(uuid, elements) {
	return await fetch('/api/v1/render', {			return await fetch('/api/v1/render', {
	method: 'POST',			method: 'POST',
	headers: {			headers: {
	'Content-Type': 'application/json',			'Content-Type': 'application/json',
	},			},
	body: JSON.stringify({ body: elements }),			body: JSON.stringify({ uuid, body: elements }),
	}).then(response => response.text());			}).then(response => response.text());
	}			}

	module.exports = function Preview({ elements }) {			module.exports = function Preview({ elements }) {
	const [html, setHtml] = useState('');			const [previewUrl, setPreviewUrl] = useState('');
				const [uuid] = useState(uuidv4());

	useEffect(() => {			useEffect(() => {
	generateRenderedHTML(elements).then(data => setHtml(data));			generateRenderedHTML(uuid, elements).then(url => setPreviewUrl(url));
	}, [elements]);			}, [JSON.stringify(elements)]);

	return React.createElement('div', {			return (
	style: {			<iframe
				src={previewUrl}
				style={{
	backgroundColor: '#f1f1f1',			backgroundColor: '#f1f1f1',
	display: 'flex',			display: 'flex',
	flexFlow: 'column',			flexFlow: 'column',
	height: 'auto',			height: 'auto',
	margin: '1rem',			margin: '1rem',
	padding: '1rem',			padding: '1rem',
	width: '30rem',			width: '30rem',
	},			}}
	dangerouslySetInnerHTML: {			/>
	__html: html,			);
	},
	});
	};			};