@rtbjs/use-state
Version:
`@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management
44 lines • 3.17 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.UpdateProjectModal = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var react_toastify_1 = require("react-toastify");
var project_api_1 = require("../../redux/api/project-api");
var antd_1 = require("antd");
var UpdateProjectModal = function (_a) {
var Trigger = _a.Trigger, project = _a.project;
var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
var _c = (0, project_api_1.useUpdateProjectMutation)(), updateProject = _c[0], _d = _c[1], isLoading = _d.isLoading, isError = _d.isError, error = _d.error, isSuccess = _d.isSuccess;
(0, react_1.useEffect)(function () {
if (isSuccess) {
react_toastify_1.toast.success('Project updated successfully');
setIsOpen(false);
}
if (isError) {
if (Array.isArray(error.data.error)) {
error.data.error.forEach(function (el) {
return react_toastify_1.toast.error(el.message, {
position: 'top-right'
});
});
}
else {
react_toastify_1.toast.error(error.data.message, {
position: 'top-right'
});
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading]);
var onFinish = function (values) {
updateProject({ id: project === null || project === void 0 ? void 0 : project.id, project: values });
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Trigger, { onClick: function () { return setIsOpen(true); } }), (0, jsx_runtime_1.jsx)(antd_1.Modal, tslib_1.__assign({ title: "Edit project", open: isOpen, footer: null, destroyOnClose: true, onCancel: function () { return setIsOpen(false); } }, { children: (0, jsx_runtime_1.jsxs)(antd_1.Form, tslib_1.__assign({ name: "basic", labelCol: { span: 8 }, wrapperCol: { span: 16 }, style: { maxWidth: 600 }, initialValues: {
name: project.name,
description: project.description
}, onFinish: onFinish, autoComplete: "off" }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ label: "Name", name: "name", rules: [{ required: true, message: 'Please input the name' }] }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, {}) })), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ label: "Description", name: "description" }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, {}) })), (0, jsx_runtime_1.jsxs)(antd_1.Form.Item, tslib_1.__assign({ wrapperCol: { offset: 8, span: 16 } }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "primary", htmlType: "submit" }, { children: "Save" })), (0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "link", onClick: function () { return setIsOpen(false); } }, { children: "Cancel" }))] }))] })) }))] }));
};
exports.UpdateProjectModal = UpdateProjectModal;
//# sourceMappingURL=update-project.js.map