Storefronts

001const EditorPreview = () => {002   const [html, setHtml] = useState('');003   const iframeRef = useRef(null);004   const [isFetching, setIsFetching] = useState(false);005   const [error, setError] = useState(null);006   const [previousBlocks, setPreviousBlocks] = useState([]);007    let draft = useSelector(selectDraft);008    const fetchPreview = useCallback(009     debounce(010       (newDraft) => {011         if (!newDraft.blocks || newDraft.blocks.length === 0) {012           setHtml('');013           return;014         }015          setIsFetching(true);016          getPreview(mapDraftToPreviewArticle(newDraft))017           .then(previewHtml => {018             const scrollTop = iframeRef.current019               ? iframeRef.current.contentWindow.pageYOffset020               : 0;021              setHtml(addScrollPosition(previewHtml, scrollTop));022             setError(null);023           })024           .catch(err => {025             setHtml('');026             setError(err);027           })028           .then(() => setIsFetching(false));029       },030       FETCH_DEBOUNCE,031       { leading: true }032     ),033     []034   );035    useEffect(() => {036     if (!areBlocksEqual(previousBlocks, draft.blocks)) {037       fetchPreview(draft);038       setPreviousBlocks(draft.blocks || []);039     }040   });041    return (042     <Box043       p={2}044       height="100%"045       position="relative"046     >047       {(error || isFetching) && (048         <Box position="absolute" top={0} right={0} pt={2} pr={2}>049           {050             error && !isFetching &&051             <Alert severity="error">Failed to fetch preview</Alert>052           }053           {isFetching && (054             <Alert severity="info">Loading preview...</Alert>055           )}056         </Box>057       )}058        <Box059         height="100%"060         width="100%"061         component="iframe"062         id="previewIframe"063         frameBorder="0"064         srcDoc={html}065         ref={iframeRef}066       />067     </Box>068   );069 };