← All changes | scripts/utils/useGetEmbedder.ts +45 -10 11.3.73 → 11.3.75 View file →

		@@ -1,15 +1,18 @@
1	1	import React from 'react';
2		-import { useEffect, useState } from 'react';
	2	+import { useEffect, useRef, useState } from 'react';
3	3	import { __ } from '@wordpress/i18n';
4	4	import { fetchAccessToken } from '../api/wordpressApiClient';
5	5	import { getOrCreateBackgroundApp } from './backgroundAppUtils';
6	6	import { isRefreshTokenAvailable } from './isRefreshTokenAvailable';
	7	+import { reportEmbedderUnavailable, whenEmbedderReady } from './embedderReady';
7	8	import ErrorHandler from '../shared/Common/ErrorHandler';
8	9
9	10	export function useGetEmbedder() {
10	11	const [embedder, setEmbedder] = useState<any>(null);
11	12	const [errorStatus, setErrorStatus] = useState<number | null>(null);
	13	+ const cancelWaitRef = useRef<(() => void) | null>(null);
	14	+ const mountedRef = useRef(true);
12	15
13	16	const loadEmbedder = () => {
14	17	fetchAccessToken()
15	18	.then(
		@@ -19,19 +22,43 @@
19	22	}: {
20	23	accessToken: string;
21	24	expiresIn: number;
22	25	}) => {
23		- const app = getOrCreateBackgroundApp(accessToken, expiresIn);
24		- if (app) {
25		- setEmbedder(app);
26		- } else {
27		- // Embedder script failed to load — surface the error UI instead
28		- // of leaving the caller stuck in a loading state.
29		- setErrorStatus(500);
30		- }
	26	+ if (!mountedRef.current) return;
	27	+
	28	+ const startedAt = Date.now();
	29	+ const { promise, cancel } = whenEmbedderReady();
	30	+
	31	+ cancelWaitRef.current = cancel;
	32	+
	33	+ return promise.then(isReady => {
	34	+ cancelWaitRef.current = null;
	35	+
	36	+ if (!mountedRef.current) return;
	37	+
	38	+ const app = isReady
	39	+ ? getOrCreateBackgroundApp(accessToken, expiresIn)
	40	+ : null;
	41	+
	42	+ if (app) {
	43	+ console.info('HubSpot plugin - embedder ready, rendering widget');
	44	+ setEmbedder(app);
	45	+ } else {
	46	+ reportEmbedderUnavailable(Date.now() - startedAt);
	47	+ setErrorStatus(500);
	48	+ }
	49	+ });
31	50	}
32	51	)
33		- .catch((err: any) => setErrorStatus((err && err.status) || 500));
	52	+ .catch((err: any) => {
	53	+ if (!mountedRef.current) return;
	54	+
	55	+ console.error(
	56	+ 'HubSpot plugin - access token request failed',
	57	+ (err && err.status) || 'no status'
	58	+ );
	59	+ setErrorStatus((err && err.status) || 500);
	60	+ });
34	61	};
35	62
36	63	useEffect(() => {
37	64	if (isRefreshTokenAvailable()) {
		@@ -36,8 +63,16 @@
36	63	useEffect(() => {
37	64	if (isRefreshTokenAvailable()) {
38	65	loadEmbedder();
39	66	}
	67	+
	68	+ return () => {
	69	+ mountedRef.current = false;
	70	+ if (cancelWaitRef.current) {
	71	+ cancelWaitRef.current();
	72	+ cancelWaitRef.current = null;
	73	+ }
	74	+ };
40	75	}, []);
41	76
42	77	const errorElement =
43	78	errorStatus !== null