ElasticPress / 4.7.2

ElasticPress v4.7.2

elasticpress / assets / js / woocommerce / admin / orders / index.js

index.js in ElasticPress 4.7.2, at assets/js/woocommerce/admin/orders/index.js

163 lines 3.1 KB

Raw Download Zip

1	/**
2	* WordPress dependencies.
3	*/
4	import { createRoot, render, useEffect, useRef, useState, WPElement } from '@wordpress/element';
5
6	/**
7	* Internal dependencies.
8	*/
9	import { ApiSearchProvider } from '../../../api-search';
10	import App from './app';
11	import {
12	adminUrl,
13	apiEndpoint,
14	apiHost,
15	argsSchema,
16	credentialsApiUrl,
17	credentialsNonce,
18	dateFormat,
19	requestIdBase,
20	statusLabels,
21	timeFormat,
22	} from './config';
23
24	/**
25	* Order search provider component.
26	*
27	* Bundles several provider components with authentication handling.
28	*
29	* @param {object} props Component props.
30	* @param {WPElement} props.children Component children.
31	* @returns {WPElement}
32	*/
33	const AuthenticatedApiSearchProvider = ({ children }) => {
34	/**
35	* State.
36	*/
37	const [credentials, setCredentials] = useState(null);
38
39	/**
40	* Refs.
41	*/
42	const hasRefreshed = useRef(false);
43
44	/**
45	* Refresh credentials on authentication errors.
46	*
47	* @returns {void}
48	*/
49	const onAuthError = () => {
50	if (hasRefreshed.current) {
51	setCredentials(null);
52	return;
53	}
54
55	fetch(credentialsApiUrl, {
56	headers: { 'X-WP-Nonce': credentialsNonce },
57	method: 'POST',
58	})
59	.then((response) => response.text())
60	.then(setCredentials);
61
62	hasRefreshed.current = true;
63	};
64
65	/**
66	* Set credentials on initialization.
67	*
68	* @returns {void}
69	*/
70	const onInit = () => {
71	fetch(credentialsApiUrl, {
72	headers: { 'X-WP-Nonce': credentialsNonce },
73	})
74	.then((response) => response.text())
75	.then(setCredentials);
76	};
77
78	/**
79	* Effects.
80	*/
81	useEffect(onInit, []);
82
83	/**
84	* Render.
85	*/
86	return credentials ? (
87	<ApiSearchProvider
88	apiEndpoint={apiEndpoint}
89	apiHost={apiHost}
90	argsSchema={argsSchema}
91	authorization={`Basic ${credentials}`}
92	requestIdBase={requestIdBase}
93	onAuthError={onAuthError}
94	>
95	{children}
96	</ApiSearchProvider>
97	) : null;
98	};
99
100	/**
101	* Initialize.
102	*
103	* @returns {void}
104	*/
105	const init = async () => {
106	const form = document.getElementById('posts-filter');
107	const input = form.s;
108
109	if (!input) {
110	return;
111	}
112
113	/**
114	* Get the attributes from the search input so that we can assign them to
115	* the combobox input, for visual and functional continuity with the
116	* original search input.
117	*/
118	const props = Object.values(input.attributes).reduce(
119	(props, attribute) => ({ ...props, [attribute.name]: attribute.value }),
120	{},
121	);
122
123	/**
124	* Render our application in place of the search input.
125	*/
126	const el = document.createElement('div');
127
128	el.setAttribute('id', 'ep-woocommerce-order-search');
129
130	input.replaceWith(el);
131
132	if (typeof createRoot === 'function') {
133	const root = createRoot(el);
134
135	root.render(
136	<AuthenticatedApiSearchProvider>
137	<App
138	adminUrl={adminUrl}
139	dateFormat={dateFormat}
140	statusLabels={statusLabels}
141	timeFormat={timeFormat}
142	{...props}
143	/>
144	</AuthenticatedApiSearchProvider>,
145	);
146	} else {
147	render(
148	<AuthenticatedApiSearchProvider>
149	<App
150	adminUrl={adminUrl}
151	dateFormat={dateFormat}
152	statusLabels={statusLabels}
153	timeFormat={timeFormat}
154	{...props}
155	/>
156	</AuthenticatedApiSearchProvider>,
157	el,
158	);
159	}
160	};
161
162	init();
163