profile-builder / assets / misc / divi / includes / modules / base / AjaxComponent / AjaxComponent.jsx

AjaxComponent.jsx in User Profile Builder – Beautiful User Registration Forms, User Profiles & User Role Editor 4.0.3, at assets/misc/divi/includes/modules/base/AjaxComponent/AjaxComponent.jsx

105 lines 2.5 KB

Raw Download Zip

1	import React, { Component } from "react";
2	import $ from "jquery";
3
4	class AjaxComponent extends Component {
5	static slug = "wppb_ajax_component";
6
7	constructor(props) {
8	super(props);
9	this.state = {
10	isLoaded: false,
11	result: null,
12	error: null,
13	};
14	}
15
16	componentDidMount() {
17	this._reload(this.props);
18	}
19
20	componentDidUpdate(prevProps) {
21	if (this._shouldReload(prevProps, this.props)) {
22	this.setState({
23	isLoaded: false,
24	});
25	this._reload(this.props);
26	}
27	}
28
29	_shouldReload(oldProps, newProps) {
30	throw new Error(
31	"You must implement the method _shouldReload(oldProps, newProps)",
32	);
33	//Example
34	//return oldProps.value_which_needs_to_be_changed_to_cause_reload != newProps.value_which_needs_to_be_changed_to_cause_reload;
35	}
36
37	_reloadFormData(props) {
38	throw new Error("You must implement the method _reloadFormData(props)");
39	//Example Form Data:
40	// var body = new FormData();
41	// body.append('action', 'my_ajax_call');
42	// body.append('post_id', window.ETBuilderBackend.postId);
43	// body.append('some_field', props.some_field);
44	// body.append('nonce', window.BuilderData.nonces.textfield);
45	// return body;
46	}
47
48	_reload(props) {
49	var formData = this._reloadFormData(props);
50
51	formData.append( "pb_nonce" , window.ProfileBuilderDiviExtensionBuilderData.nonces.pb_divi_render_form_nonce );
52
53	$.ajax({
54	url: window.et_fb_options.ajaxurl,
55	type: "POST",
56	contentType: false,
57	processData: false,
58	data: formData,
59	success: (response) => {
60	response = JSON.parse(response);
61
62	if (response.errors) {
63	this.setState({
64	isLoaded: true,
65	error: response.errors,
66	});
67	} else {
68	this.setState({
69	isLoaded: true,
70	result: response,
71	});
72	}
73	},
74	});
75	}
76
77	_render() {
78	throw new Error("You must implement the method _render()");
79	}
80
81	render() {
82	if (this.state.error) {
83	return <div>{this.state.error.message}</div>;
84	} else if (!this.state.isLoaded) {
85	return (
86	<div
87	className="wppb_loading_indicator"
88	style={{
89	height: 100 + "px",
90	minWidth: 100 + "px",
91	}}
92	>
93	<div className="et-fb-loader-wrapper">
94	<div className="et-fb-loader"></div>
95	</div>
96	</div>
97	);
98	} else {
99	return this._render();
100	}
101	}
102	}
103
104	export default AjaxComponent;
105