give / src / Views / Components / AdminDetailsPage / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.16.8.1, at src/Views/Components/AdminDetailsPage/index.tsx

262 lines 10.2 KB

Raw Download Zip

1	/**
2	* External Dependencies
3	*/
4	import {useEffect, useRef, useState} from 'react';
5	import {FormProvider, SubmitHandler, useForm, useFormContext, useFormState} from 'react-hook-form';
6	import {ajvResolver} from '@givewp/admin/ajv';
7
8	import {SlotFillProvider} from '@wordpress/components';
9	import {useDispatch} from '@wordpress/data';
10	import {__} from '@wordpress/i18n';
11	import {PluginArea} from '@wordpress/plugins';
12	import apiFetch from '@wordpress/api-fetch';
13	import {JSONSchemaType} from 'ajv';
14
15	/**
16	* Internal Dependencies
17	*/
18	import {Spinner as GiveSpinner} from '@givewp/components';
19	import styles from './AdminDetailsPage.module.scss';
20	import AdminSection, {AdminSectionField} from './AdminSection';
21	import DefaultPrimaryActionButton from './DefaultPrimaryActionButton';
22	import ErrorBoundary from './ErrorBoundary';
23	import {BreadcrumbSeparatorIcon, DotsIcons} from './Icons';
24	import NotificationPlaceholder from './Notifications';
25	import TabsRouter from './Tabs/Router';
26	import TabList from './Tabs/TabList';
27	import TabPanels from './Tabs/TabPanels';
28	import {AdminDetailsPageProps} from './types';
29	import {prepareDefaultValuesFromSchema} from '@givewp/admin/utils';
30
31	import './store';
32
33	/**
34	* @since 4.4.0
35	*/
36	export default function AdminDetailsPage<T extends Record<string, any>>({
37	objectId,
38	objectType,
39	objectTypePlural,
40	useObjectEntityRecord,
41	shouldSaveForm,
42	breadcrumbUrl,
43	breadcrumbTitle,
44	pageTitle,
45	StatusBadge,
46	PrimaryActionButton = DefaultPrimaryActionButton,
47	SecondaryActionButton,
48	ContextMenuItems,
49	tabDefinitions,
50	children,
51	}: AdminDetailsPageProps<T>) {
52	const [resolver, setResolver] = useState({});
53	const [isSaving, setIsSaving] = useState(false);
54	const [isLoading, setIsLoading] = useState(true);
55	const [schema, setSchema] = useState<JSONSchemaType<any> \| null>(null);
56	const [showContextMenu, setShowContextMenu] = useState<boolean>(false);
57	const contextMenuButtonRef = useRef<HTMLButtonElement>(null);
58	const contextMenuRef = useRef<HTMLDivElement>(null);
59
60	const dispatch = useDispatch(`givewp/admin-details-page-notifications`);
61
62	exposeAdminComponentsAndHooks();
63
64	useEffect(() => {
65	if (!objectId) {
66	return;
67	}
68
69	apiFetch({
70	path: `/givewp/v3/${objectTypePlural}/${objectId}`,
71	method: 'OPTIONS',
72	}).then(({schema}: {schema: JSONSchemaType<any>}) => {
73	setSchema(schema);
74	setResolver({
75	resolver: ajvResolver(schema),
76	});
77	});
78	}, [objectId, objectTypePlural]);
79
80	const {record, hasResolved, save, edit} = useObjectEntityRecord(objectId);
81
82	const methods = useForm<T>({
83	mode: 'onBlur',
84	shouldFocusError: true,
85	...resolver,
86	});
87
88	const {formState, handleSubmit, reset} = methods;
89
90	// Close context menu when clicked outside
91	useEffect(() => {
92	const handleClickOutside = (e: MouseEvent) => {
93	if (!showContextMenu) {
94	return;
95	}
96
97	if (
98	e.target instanceof HTMLElement &&
99	!contextMenuButtonRef.current?.contains(e.target) &&
100	!contextMenuRef.current?.contains(e.target)
101	) {
102	setShowContextMenu(false);
103	contextMenuButtonRef.current?.blur();
104	}
105	};
106
107	document.addEventListener('click', handleClickOutside);
108
109	return () => {
110	document.removeEventListener('click', handleClickOutside);
111	};
112	}, [showContextMenu]);
113
114	// Set default values when entity is loaded
115	useEffect(() => {
116	if (hasResolved && schema && record) {
117	const preparedRecord = prepareDefaultValuesFromSchema(record, (schema as any)?.properties) as T;
118	reset(preparedRecord);
119	setIsLoading(false);
120	}
121	}, [hasResolved, !!schema, !!record]);
122
123	const onSubmit: SubmitHandler<T> = async (data) => {
124	const shouldSave = shouldSaveForm ? shouldSaveForm(formState.isDirty, data) : formState.isDirty;
125
126	if (shouldSave) {
127	setIsSaving(true);
128	edit(data);
129
130	try {
131	// @ts-ignore
132	const response: T = await save();
133	setIsSaving(false);
134
135	const preparedRecord = prepareDefaultValuesFromSchema(response, (schema as any)?.properties) as T;
136	reset(preparedRecord);
137
138	dispatch.addSnackbarNotice({
139	id: `save-success`,
140	content: __(`${objectType.charAt(0).toUpperCase() + objectType.slice(1)} updated`, 'give'),
141	});
142	} catch (err: any) {
143	console.error('🔴 Save failed with error:', err);
144	setIsSaving(false);
145
146	const errorMessage = err?.message
147	? err.message
148	: __(`${objectType.charAt(0).toUpperCase() + objectType.slice(1)} update failed`, 'give');
149
150	dispatch.addSnackbarNotice({
151	id: `save-error`,
152	type: 'error',
153	content: errorMessage,
154	});
155	}
156	}
157	};
158
159	if (isLoading) {
160	return (
161	<div className={styles.loadingContainer}>
162	<div className={styles.loadingContainerContent}>
163	<GiveSpinner />
164	<div className={styles.loadingContainerContentText}>{__(`Loading ${objectType}...`, 'give')}</div>
165	</div>
166	</div>
167	);
168	}
169
170	return (
171	<ErrorBoundary>
172	<FormProvider {...methods}>
173	<SlotFillProvider>
174	<form id={'givewp-details-form'} onSubmit={handleSubmit(onSubmit)}>
175	<article className={`interface-interface-skeleton__content ${styles.page}`}>
176	<TabsRouter tabDefinitions={tabDefinitions}>
177	<header className={styles.pageHeader}>
178	<div className={styles.breadcrumb}>
179	<a href={breadcrumbUrl}>
180	{objectTypePlural.charAt(0).toUpperCase() + objectTypePlural.slice(1)}
181	</a>
182	<BreadcrumbSeparatorIcon />
183	<span>{breadcrumbTitle \|\| record?.name}</span>
184	</div>
185	<div className={styles.flexContainer}>
186	<div className={styles.flexRow}>
187	<h1 className={styles.pageTitle}>{pageTitle \|\| record?.name}</h1>
188	{StatusBadge && <StatusBadge />}
189	</div>
190
191	<div className={`${styles.flexRow} ${styles.justifyContentEnd}`}>
192	{SecondaryActionButton && (
193	<SecondaryActionButton
194	className={`button button-tertiary ${styles.secondaryActionButton}`}
195	/>
196	)}
197
198	<PrimaryActionButton
199	isSaving={isSaving}
200	formState={formState}
201	className={`button button-primary ${styles.primaryActionButton}`}
202	/>
203
204	{ContextMenuItems && (
205	<>
206	<button
207	ref={contextMenuButtonRef}
208	className={`button button-secondary ${styles.contextMenuButton}`}
209	onClick={(e) => {
210	e.preventDefault();
211	setShowContextMenu(!showContextMenu);
212	}}
213	>
214	<DotsIcons />
215	</button>
216
217	{!isSaving && showContextMenu && (
218	<div ref={contextMenuRef} className={styles.contextMenu}>
219	<ContextMenuItems className={styles.contextMenuItem} />
220	</div>
221	)}
222	</>
223	)}
224	</div>
225	</div>
226	<TabList tabDefinitions={tabDefinitions} />
227	</header>
228
229	<TabPanels tabDefinitions={tabDefinitions} />
230
231	{children}
232	</TabsRouter>
233	</article>
234	</form>
235
236	<NotificationPlaceholder type="snackbar" />
237
238	<PluginArea scope={`givewp-${objectType}-details-page`} />
239	</SlotFillProvider>
240	</FormProvider>
241	</ErrorBoundary>
242	);
243	}
244
245	const exposeAdminComponentsAndHooks = (): void => {
246	(window as any).givewp = (window as any).givewp \|\| {};
247	(window as any).givewp.admin = (window as any).givewp.admin \|\| {};
248	(window as any).givewp.admin.components = (window as any).givewp.admin.components \|\| {};
249	(window as any).givewp.admin.hooks = (window as any).givewp.admin.hooks \|\| {};
250
251	Object.assign((window as any).givewp.admin, {
252	components: {
253	AdminSection,
254	AdminSectionField,
255	},
256	hooks: {
257	useFormContext,
258	useFormState,
259	},
260	});
261	};
262