tableberg / admin / src / components / VersionControlPopup.jsx

VersionControlPopup.jsx in Tableberg – Simple Gutenberg Table Block 1.1.5, at admin/src/components/VersionControlPopup.jsx

196 lines 7.1 KB

Raw Download Zip

1	import React, { useRef, useState } from "react";
2	import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3	import { __ } from "@wordpress/i18n";
4	import MenuButton, { BUTTON_TYPES } from "./MenuButton";
5	import { faRightLong } from "@fortawesome/free-solid-svg-icons";
6
7	/**
8	* Version control popup component.
9	*
10	* @param {Object} props component properties
11	* @param {string} props.from current version
12	* @param {string} props.to version to rollback
13	* @param {Function} props.onCloseHandler close popup callback
14	* @param {Function} props.onOperationStart operation start callback
15	* @param {number} props.reloadDelay automatic page reload delay in milliseconds
16	* @class
17	*/
18	function VersionControlPopup({
19	from,
20	to,
21	onCloseHandler,
22	onOperationStart,
23	reloadDelay = 5000,
24	}) {
25	const OPERATION_STATUS_TYPES = {
26	NOT_STARTED: "notStarted",
27	STARTED: "started",
28	FINISHED: "finished",
29	};
30
31	const RESPONSE_TYPES = {
32	OK: "ok",
33	ERROR: "error",
34	};
35
36	/**
37	* Generate response object.
38	*
39	* @param {string} message message
40	* @param {string} [type='ok'] response type.
41	* @return {Object} response object
42	*/
43	const generateResponseObject = (message, type = RESPONSE_TYPES.OK) => {
44	return {
45	type,
46	message,
47	};
48	};
49
50	const [operationStatus, setOperationStatus] = useState(
51	OPERATION_STATUS_TYPES.NOT_STARTED
52	);
53	const [reloadCountdown, setReloadCountdown] = useState(reloadDelay / 1000);
54
55	const [responseObject, setResponseObject] = useState(
56	generateResponseObject("")
57	);
58
59	const isDowngrade = from > to;
60
61	const countdownToReload = useRef(reloadDelay);
62
63	/**
64	* Start rollback operation.
65	*/
66	const startOperation = () => {
67	setOperationStatus(OPERATION_STATUS_TYPES.STARTED);
68	onOperationStart()
69	.then(({ message }) => {
70	setResponseObject(
71	generateResponseObject(message, RESPONSE_TYPES.OK)
72	);
73	})
74	.catch(({ message }) => {
75	setResponseObject(
76	generateResponseObject(message, RESPONSE_TYPES.ERROR)
77	);
78	})
79	.finally(() => {
80	setOperationStatus(OPERATION_STATUS_TYPES.FINISHED);
81	reloadPage();
82	});
83	};
84
85	/**
86	* Reload page after a designated amount of time.
87	*/
88	const reloadPage = () => {
89	const reloadIntervalId = setInterval(() => {
90	if (countdownToReload.current <= 0) {
91	window.location.reload();
92	clearInterval(reloadIntervalId);
93	} else {
94	countdownToReload.current = countdownToReload.current - 1000;
95	setReloadCountdown(countdownToReload.current / 1000);
96	}
97	}, 1000);
98	};
99
100	return (
101	<div className={"version-control-popup"}>
102	<div className={"modal-container"}>
103	<div className={"rollback-versions"}>
104	<div
105	className={`version-id ${
106	isDowngrade
107	? "tableberg-positive-color"
108	: "tableberg-negative-color"
109	}`}
110	>
111	{from}
112	</div>
113	<div
114	className={"version-icon"}
115	data-in-progress={JSON.stringify(
116	operationStatus === OPERATION_STATUS_TYPES.STARTED
117	)}
118	>
119	<div className={"version-icon-inner-wrapper"}>
120	<FontAwesomeIcon icon={faRightLong} />
121	</div>
122	</div>
123	<div
124	className={`version-id ${
125	isDowngrade
126	? "tableberg-negative-color"
127	: "tableberg-positive-color"
128	}`}
129	>
130	{to}
131	</div>
132	</div>
133	{operationStatus !== OPERATION_STATUS_TYPES.STARTED && (
134	<div className={"version-content"}>
135	{operationStatus ===
136	OPERATION_STATUS_TYPES.NOT_STARTED && (
137	<div className={"version-warning"}>
138	<div>
139	{__(
140	"Older versions might be unstable. Do it on your own risk and create a backup.",
141	"tableberg"
142	)}
143	</div>
144	<div
145	className={
146	"version-rollback-button-container"
147	}
148	>
149	<MenuButton
150	type={BUTTON_TYPES.POSITIVE}
151	onClickHandler={startOperation}
152	status={true}
153	title={"Start"}
154	/>
155	<MenuButton
156	onClickHandler={onCloseHandler}
157	status={true}
158	title={"Close"}
159	/>
160	</div>
161	</div>
162	)}
163	{operationStatus ===
164	OPERATION_STATUS_TYPES.FINISHED && (
165	<div className={"operation-finished-wrapper"}>
166	<div
167	className={"version-control-response"}
168	data-resp-type={responseObject.type}
169	>
170	{responseObject.message}
171	</div>
172	<div>
173	{reloadCountdown <= 0
174	? `${__(
175	"Reloading page now…",
176	"tableberg"
177	)}`
178	: `${__(
179	"Reloading page in ",
180	"tableberg"
181	)} ${reloadCountdown}...`}
182	</div>
183	</div>
184	)}
185	</div>
186	)}
187	</div>
188	</div>
189	);
190	}
191
192	/**
193	* @module VersionControlPopup
194	*/
195	export default VersionControlPopup;
196