{"size": 1441, "ext": "js", "max_stars_repo_path": "wp-content/plugins/astra-sites/inc/lib/onboarding/assets/src/components/site-preview/index.js", "max_stars_repo_name": "tamiloreAH/PortfolioWebsite", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "wp-content/plugins/astra-sites/inc/lib/onboarding/assets/src/components/site-preview/index.js", "max_issues_repo_name": "tamiloreAH/PortfolioWebsite", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "wp-content/plugins/astra-sites/inc/lib/onboarding/assets/src/components/site-preview/index.js", "max_forks_repo_name": "tamiloreAH/PortfolioWebsite", "max_forks_repo_forks_event_min_datetime": "2022-03-26T05:11:22.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-26T05:11:22.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 24.4237288136, "max_line_length": 67, "alphanum_fraction": 0.5787647467}
import React, { memo, useEffect, useState } from 'react';
import { sendPostMessage } from '../../utils/functions';
import { useStateValue } from '../../store/store';
import { prependHTTPS } from '../../utils/prepend-https';
import { stripSlashes } from '../../utils/strip-slashes';
import { addTrailingSlash } from '../../utils/add-trailing-slash';
import SiteSkeleton from './site-skeleton';

const SitePreview = () => {
	const [ { templateResponse, siteLogo } ] = useStateValue();
	const [ previewUrl, setPreviewUrl ] = useState( '' );
	const [ loading, setLoading ] = useState( true );

	useEffect( () => {
		const url = templateResponse
			? templateResponse[ 'astra-site-url' ]
			: '';

		if ( url !== '' ) {
			setPreviewUrl(
				addTrailingSlash( prependHTTPS( stripSlashes( url ) ) )
			);
		}
	}, [ templateResponse ] );

	useEffect( () => {
		if ( loading !== false ) {
			return;
		}

		sendPostMessage( {
			param: 'cleanStorage',
			data: siteLogo,
		} );
	}, [ loading ] );

	const handleIframeLoading = () => {
		setLoading( false );
	};

	return (
		<>
			{ loading ? <SiteSkeleton /> : null }
			{ previewUrl !== '' && (
				<iframe
					id="astra-starter-templates-preview"
					title="Website Preview"
					height="100%"
					width="100%"
					src={ previewUrl }
					onLoad={ handleIframeLoading }
				/>
			) }
		</>
	);
};

export default memo( SitePreview );
