extendify / src / AutoLaunch / components / CreatingSite.jsx

CreatingSite.jsx in Extendify 3.2.1, at src/AutoLaunch/components/CreatingSite.jsx

132 lines 3.7 KB

Raw Download Zip

1	import { Logo } from '@auto-launch/components/Logo';
2	import { LoaderGraphic, StatusMessage } from '@auto-launch/components/Progress';
3	import { WaitingOverlay } from '@auto-launch/components/Waiting';
4	import { activeLogo, designRoot } from '@auto-launch/functions/design';
5	import { useCreateSite } from '@auto-launch/hooks/useCreateSite';
6	import { useRateLimitedCursor } from '@auto-launch/hooks/useRateLimitedCursor';
7	import {
8	clearPersistedLaunchData,
9	useLaunchDataStore,
10	} from '@auto-launch/state/launch-data';
11	import { launchStrings } from '@auto-launch/strings';
12	import { activeProgressTemplate } from '@auto-launch/templates';
13	import { useEffect, useRef, useState } from '@wordpress/element';
14	import { Icon, info } from '@wordpress/icons';
15
16	const loaderImage = () => {
17	const root = designRoot();
18	if (!root) return '';
19
20	return getComputedStyle(root)
21	.getPropertyValue('--ext-ui-loader-image')
22	.trim()
23	.replace(/^url$["']?\|["']?$$/g, '');
24	};
25
26	export const CreatingSite = () => {
27	const { done } = useCreateSite();
28	const { partnerLogo, partnerName } = window.extSharedData ?? {};
29	const pos = useRef(0);
30	const [currentMessage, setCurrentMessage] = useState(null);
31	const [loadAdmin, setLoadAdmin] = useState(false);
32	const {
33	statusMessages,
34	errorMessage,
35	setErrorMessage,
36	errorCount,
37	needToStall,
38	resetErrorCount,
39	} = useLaunchDataStore();
40	const Page = activeProgressTemplate();
41
42	useRateLimitedCursor(
43	() => {
44	if (errorMessage) return false;
45	if (pos.current >= statusMessages.length) return false;
46
47	const remaining = statusMessages.length - pos.current;
48	const MAX_BACKLOG = 3;
49
50	// Skip ahead silently if backed up
51	if (remaining > MAX_BACKLOG && pos.current > 0) {
52	pos.current = statusMessages.length - MAX_BACKLOG;
53	}
54
55	setCurrentMessage(statusMessages[pos.current]);
56	pos.current += 1;
57
58	return pos.current < statusMessages.length;
59	},
60	// Variable timer to feel more natural, 2.5-3.25s
61	Math.floor(2500 + Math.random() * 750),
62	[statusMessages.length],
63	);
64
65	useEffect(() => {
66	if (!errorMessage) return;
67	const timeout = setTimeout(() => {
68	// Clear after 5 seconds
69	setErrorMessage(null);
70	}, 5000);
71	return () => clearTimeout(timeout);
72	}, [errorMessage, setErrorMessage]);
73
74	useEffect(() => {
75	if (!done) return;
76	setLoadAdmin(true);
77	const timeout = setTimeout(() => {
78	clearPersistedLaunchData();
79	window.location.replace(
80	`${window.extSharedData.homeUrl}?extendify-launch-success=1`,
81	);
82	}, 3000);
83	return () => clearTimeout(timeout);
84	}, [done]);
85
86	useEffect(() => {
87	if (!needToStall()) return;
88	const timer = setTimeout(() => {
89	resetErrorCount();
90	}, 10000); // reset after 10 seconds
91	return () => clearTimeout(timer);
92	}, [needToStall, errorCount, resetErrorCount]);
93
94	const stalling = needToStall();
95
96	return (
97	<>
98	<Page
99	parts={{
100	logo: <Logo name={partnerName} src={activeLogo() ?? partnerLogo} />,
101	graphic: <LoaderGraphic src={loaderImage()} />,
102	status: <StatusMessage message={currentMessage} />,
103	}}
104	has={{ card: true }}
105	/>
106	<WaitingOverlay
107	show={stalling}
108	icon={<Icon icon={info} size={32} />}
109	message={launchStrings().stalled}
110	note={launchStrings().stalledNote}
111	/>
112	<WaitingOverlay
113	show={!stalling && Boolean(errorMessage)}
114	icon={<Icon icon={info} size={32} />}
115	message={errorMessage}
116	/>
117	{loadAdmin ? <AdminLoader /> : null}
118	</>
119	);
120	};
121
122	// iframe that loads the admin in the background to make sure
123	// all php functions that require admin context work properly.
124	const AdminLoader = () => (
125	<iframe
126	title="Admin Loader"
127	src={window.extSharedData.adminUrl}
128	style={{ display: 'none' }}
129	sandbox="allow-same-origin allow-scripts allow-forms"
130	/>
131	);
132