GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-04-12 07:06:40 +02:00
Code Issues Releases Activity

Enhance ActionButtonWithModal to support dynamic methods

Browse Source
This commit is contained in:
Aleksandr Gumroian 2025-03-10 14:37:41 +01:00
parent 0a839bf369
commit a25133d786
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/common/ActionButtonWithModal/ActionButtonWithModal.js
View File

@ -1,5 +1,5 @@
/* /*
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/) * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
* *
* This is free software, licensed under the GNU General Public License v3. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
@ -9,7 +9,7 @@ import React, { useState, useEffect } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useAPIPost } from "../../api/hooks"; import { useAPIPost, useAPIPut } from "../../api/hooks";
import { API_STATE } from "../../api/utils"; import { API_STATE } from "../../api/utils";
import Button from "../../bootstrap/Button"; import Button from "../../bootstrap/Button";
import { import {
@ -23,6 +23,8 @@ import { useAlert } from "../../context/alertContext/AlertContext";
ActionButtonWithModal.propTypes = { ActionButtonWithModal.propTypes = {
/** Component that triggers the action. */ /** Component that triggers the action. */
actionTrigger: PropTypes.elementType.isRequired, actionTrigger: PropTypes.elementType.isRequired,
/** Method to use for the action. */
actionMethod: PropTypes.string,
/** URL to send the action to. */ /** URL to send the action to. */
actionUrl: PropTypes.string.isRequired, actionUrl: PropTypes.string.isRequired,
/** Title of the modal. */ /** Title of the modal. */
@ -41,6 +43,7 @@ ActionButtonWithModal.propTypes = {
function ActionButtonWithModal({ function ActionButtonWithModal({
actionTrigger: ActionTriggerComponent, actionTrigger: ActionTriggerComponent,
actionMethod = "POST",
actionUrl, actionUrl,
modalTitle, modalTitle,
modalMessage, modalMessage,
@ -51,24 +54,43 @@ function ActionButtonWithModal({
}) { }) {
const [triggered, setTriggered] = useState(false); const [triggered, setTriggered] = useState(false);
const [modalShown, setModalShown] = useState(false); const [modalShown, setModalShown] = useState(false);
const [triggerActionStatus, triggerAction] = useAPIPost(actionUrl); const [triggerPostActionStatus, triggerPostAction] = useAPIPost(actionUrl);
const [triggerPutActionStatus, triggerPutAction] = useAPIPut(actionUrl);
const [setAlert] = useAlert(); const [setAlert] = useAlert();
useEffect(() => { useEffect(() => {
if (triggerActionStatus.state === API_STATE.SUCCESS) { if (
triggerPostActionStatus.state === API_STATE.SUCCESS ||
triggerPutActionStatus.state === API_STATE.SUCCESS
) {
setAlert( setAlert(
successMessage || _("Action successful."), successMessage || _("Action successful."),
API_STATE.SUCCESS API_STATE.SUCCESS
); );
setTriggered(false);
} }
if (triggerActionStatus.state === API_STATE.ERROR) { if (
triggerPostActionStatus.state === API_STATE.ERROR ||
triggerPutActionStatus.state === API_STATE.ERROR
) {
setAlert(errorMessage || _("Action failed.")); setAlert(errorMessage || _("Action failed."));
setTriggered(false);
} }
}, [triggerActionStatus, setAlert, successMessage, errorMessage]); }, [
triggerPostActionStatus,
triggerPutActionStatus,
setAlert,
successMessage,
errorMessage,
]);
const actionHandler = () => { const actionHandler = () => {
setTriggered(true); setTriggered(true);
triggerAction(); if (actionMethod === "POST") {
triggerPostAction();
} else {
triggerPutAction();
}
setModalShown(false); setModalShown(false);
}; };