Something went wrong while saving the tags :(
@@ -54,19 +39,18 @@ const EditTagsModal = (TagsSelector) => class EditTagsModal extends React.Compon
)}
-
-
);
- }
+ };
+
+ EditTagsModalComp.propTypes = propTypes;
+
+ return EditTagsModalComp;
};
export default EditTagsModal;
diff --git a/src/short-urls/services/provideServices.js b/src/short-urls/services/provideServices.js
index 02a0d5fa..82a70db8 100644
--- a/src/short-urls/services/provideServices.js
+++ b/src/short-urls/services/provideServices.js
@@ -46,7 +46,7 @@ const provideServices = (bottle, connect) => {
'EditShortUrlModal',
'ForServerVersion'
);
- bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'stateFlagTimeout');
+ bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout');
bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult', 'ForServerVersion');
bottle.decorator(
diff --git a/src/tags/helpers/DeleteTagConfirmModal.js b/src/tags/helpers/DeleteTagConfirmModal.js
index 460db160..0cb8664e 100644
--- a/src/tags/helpers/DeleteTagConfirmModal.js
+++ b/src/tags/helpers/DeleteTagConfirmModal.js
@@ -3,64 +3,45 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import PropTypes from 'prop-types';
import { tagDeleteType } from '../reducers/tagDelete';
-export default class DeleteTagConfirmModal extends React.Component {
- static propTypes = {
- tag: PropTypes.string.isRequired,
- toggle: PropTypes.func.isRequired,
- isOpen: PropTypes.bool.isRequired,
- deleteTag: PropTypes.func,
- tagDelete: tagDeleteType,
- tagDeleted: PropTypes.func,
- };
-
- doDelete = async () => {
- const { tag, toggle, deleteTag } = this.props;
+const propTypes = {
+ tag: PropTypes.string.isRequired,
+ toggle: PropTypes.func.isRequired,
+ isOpen: PropTypes.bool.isRequired,
+ deleteTag: PropTypes.func,
+ tagDelete: tagDeleteType,
+ tagDeleted: PropTypes.func,
+};
+const DeleteTagConfirmModal = ({ tag, toggle, isOpen, deleteTag, tagDelete, tagDeleted }) => {
+ const doDelete = async () => {
await deleteTag(tag);
- this.tagWasDeleted = true;
+ tagDeleted(tag);
toggle();
};
- handleOnClosed = () => {
- if (!this.tagWasDeleted) {
- return;
- }
- const { tagDeleted, tag } = this.props;
+ return (
+
+
+ Delete tag
+
+
+ Are you sure you want to delete tag {tag}?
+ {tagDelete.error && (
+
+ Something went wrong while deleting the tag :(
+
+ )}
+
+
+
+
+
+
+ );
+};
- tagDeleted(tag);
- };
+DeleteTagConfirmModal.propTypes = propTypes;
- componentDidMount() {
- this.tagWasDeleted = false;
- }
-
- render() {
- const { tag, toggle, isOpen, tagDelete } = this.props;
-
- return (
-
-
- Delete tag
-
-
- Are you sure you want to delete tag {tag}?
- {tagDelete.error && (
-
- Something went wrong while deleting the tag :(
-
- )}
-
-
-
-
-
-
- );
- }
-}
+export default DeleteTagConfirmModal;
diff --git a/src/tags/helpers/EditTagModal.js b/src/tags/helpers/EditTagModal.js
index ea6f7bc4..a9cbdb1b 100644
--- a/src/tags/helpers/EditTagModal.js
+++ b/src/tags/helpers/EditTagModal.js
@@ -1,109 +1,62 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
import { ChromePicker } from 'react-color';
import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import './EditTagModal.scss';
+import { useToggle } from '../../utils/helpers/hooks';
-const EditTagModal = ({ getColorForKey }) => class EditTagModal extends React.Component {
- static propTypes = {
- tag: PropTypes.string,
- editTag: PropTypes.func,
- toggle: PropTypes.func,
- tagEdited: PropTypes.func,
- isOpen: PropTypes.bool,
- tagEdit: PropTypes.shape({
- error: PropTypes.bool,
- editing: PropTypes.bool,
- }),
- };
+const propTypes = {
+ tag: PropTypes.string,
+ editTag: PropTypes.func,
+ toggle: PropTypes.func,
+ tagEdited: PropTypes.func,
+ isOpen: PropTypes.bool,
+ tagEdit: PropTypes.shape({
+ error: PropTypes.bool,
+ editing: PropTypes.bool,
+ }),
+};
- saveTag = (e) => {
- e.preventDefault();
- const { tag: oldName, editTag, toggle } = this.props;
- const { tag: newName, color } = this.state;
+const EditTagModal = ({ getColorForKey }) => {
+ const EditTagModalComp = ({ tag, editTag, toggle, tagEdited, isOpen, tagEdit }) => {
+ const [ newTagName, setNewTagName ] = useState(tag);
+ const [ color, setColor ] = useState(getColorForKey(tag));
+ const [ showColorPicker, toggleColorPicker ] = useToggle();
+ const saveTag = (e) => {
+ e.preventDefault();
- editTag(oldName, newName, color)
- .then(() => {
- this.tagWasEdited = true;
- toggle();
- })
- .catch(() => {});
- };
- handleOnClosed = () => {
- if (!this.tagWasEdited) {
- return;
- }
-
- const { tag: oldName, tagEdited } = this.props;
- const { tag: newName, color } = this.state;
-
- tagEdited(oldName, newName, color);
- };
-
- constructor(props) {
- super(props);
-
- const { tag } = props;
-
- this.state = {
- showColorPicker: false,
- tag,
- color: getColorForKey(tag),
+ editTag(tag, newTagName, color)
+ .then(() => tagEdited(tag, newTagName, color))
+ .then(toggle)
+ .catch(() => {});
};
- }
-
- componentDidMount() {
- this.tagWasEdited = false;
- }
-
- render() {
- const { isOpen, toggle, tagEdit } = this.props;
- const { tag, color } = this.state;
- const toggleColorPicker = () =>
- this.setState(({ showColorPicker }) => ({ showColorPicker: !showColorPicker }));
return (
-
-