Created TagCard and DeleteTagConfirmModal components

src/servers/DeleteServerModal.js

@@ -15,7 +15,7 @@ export const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, histor
   };
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered={true}>
+    <Modal isOpen={isOpen} toggle={toggle} centered>
       <ModalHeader toggle={toggle}><span className="text-danger">Delete server</span></ModalHeader>
       <ModalBody>
         <p>Are you sure you want to delete server <b>{server ? server.name : ''}</b>?</p>

src/tags/TagCard.js

@@ -0,0 +1,59 @@
+import { Card, CardBody } from 'reactstrap';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
+import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
+import DeleteTagConfirmModal from './helpers/DeleteTagConfirmModal';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ColorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
+import './TagCard.scss';
+
+const propTypes = {
+  tag: PropTypes.string,
+  colorGenerator: colorGeneratorType,
+};
+const defaultProps = {
+  colorGenerator: ColorGenerator,
+};
+
+export default class TagCard extends React.Component {
+  state = { isDeleteModalOpen: false, isEditModalOpen: false };
+
+  render() {
+    const { tag, colorGenerator } = this.props;
+    const toggleDelete = () =>
+      this.setState({ isDeleteModalOpen: !this.state.isDeleteModalOpen });
+
+    return (
+      <Card className="tag-card">
+        <CardBody className="tag-card__body">
+          <button
+            className="btn btn-light btn-sm tag-card__btn"
+            onClick={toggleDelete}
+          >
+            <FontAwesomeIcon icon={deleteIcon}/>
+          </button>
+          <button className="btn btn-light btn-sm tag-card__btn">
+            <FontAwesomeIcon icon={editIcon}/>
+          </button>
+          <h5 className="tag-card__tag-title">
+            <div
+              style={{backgroundColor: colorGenerator.getColorForKey(tag)}}
+              className="tag-card__tag-bullet"
+            />
+            {tag}
+          </h5>
+        </CardBody>
+
+        <DeleteTagConfirmModal
+          tag={tag}
+          toggle={toggleDelete}
+          isOpen={this.state.isDeleteModalOpen}
+        />
+      </Card>
+    );
+  }
+}
+
+TagCard.propTypes = propTypes;
+TagCard.defaultProps = defaultProps;

src/tags/TagCard.scss

@@ -1,12 +1,12 @@
-.tags-list__tag-card.tags-list__tag-card {
+.tag-card.tag-card {
   background-color: #eeeeee;
   margin-bottom: .5rem;
 }
-.tags-list__tag-card-body.tags-list__tag-card-body {
+.tag-card__body.tag-card__body {
   padding: .75rem;
 }
 
-.tags-list__tag-title {
+.tag-card__tag-title {
   margin: 0;
   line-height: 31px;
   text-overflow: ellipsis;
@@ -15,7 +15,7 @@
   padding-right: 5px;
 }
 
-.tags-list__tag-bullet {
+.tag-card__tag-bullet {
   $width: 20px;
   border-radius: 50%;
   width: $width;
@@ -25,9 +25,9 @@
   margin-right: 7px;
 }
 
-.tags-list__btn {
+.tag-card__btn {
   float: right;
 }
-.tags-list__btn:not(:last-child) {
+.tag-card__btn:not(:last-child) {
   margin-left: 2px;
 }

src/tags/TagsList.js

@@ -2,24 +2,21 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { pick, splitEvery } from 'ramda';
 import { listTags } from './reducers/tagsList';
-import { Card, CardBody } from 'reactstrap';
-import ColorGenerator from '../utils/ColorGenerator';
 import MuttedMessage from '../utils/MuttedMessage';
-import editIcon from '@fortawesome/fontawesome-free-solid/faPencilAlt';
+import TagCard from './TagCard';
-import deleteIcon from '@fortawesome/fontawesome-free-solid/faTrash';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import './TagsList.scss';
 
 const { round } = Math;
 
 export class TagsList extends React.Component {
+  state = { isDeleteModalOpen: false };
+
   componentDidMount() {
     const { listTags } = this.props;
     listTags();
   }
 
   renderContent() {
-    const { tagsList, colorGenerator } = this.props;
+    const { tagsList } = this.props;
     if (tagsList.loading) {
       return <MuttedMessage marginSize={0}>Loading...</MuttedMessage>
     }
@@ -34,29 +31,12 @@ export class TagsList extends React.Component {
     }
 
     const tagsGroups = splitEvery(round(tagsCount / 4), tagsList.tags);
+
     return (
       <React.Fragment>
         {tagsGroups.map((group, index) => (
           <div key={index} className="col-md-6 col-xl-3">
-            {group.map(tag => (
+            {group.map(tag => <TagCard tag={tag} key={tag}/>)}
-              <Card className="tags-list__tag-card" key={tag}>
-                <CardBody className="tags-list__tag-card-body">
-                  <button className="btn btn-light btn-sm tags-list__btn">
-                    <FontAwesomeIcon icon={deleteIcon} />
-                  </button>
-                  <button className="btn btn-light btn-sm tags-list__btn">
-                    <FontAwesomeIcon icon={editIcon} />
-                  </button>
-                  <h5 className="tags-list__tag-title">
-                    <div
-                      style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
-                      className="tags-list__tag-bullet"
-                    />
-                    {tag}
-                  </h5>
-                </CardBody>
-              </Card>
-            ))}
           </div>
         ))}
       </React.Fragment>
@@ -74,8 +54,4 @@ export class TagsList extends React.Component {
   }
 }
 
-TagsList.defaultProps = {
-  colorGenerator: ColorGenerator
-};
-
 export default connect(pick(['tagsList']), { listTags })(TagsList);

src/tags/helpers/DeleteTagConfirmModal.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  tag: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};
+
+export default function DeleteTagConfirmModal({ tag, toggle, isOpen }) {
+  return (
+    <Modal toggle={toggle} isOpen={isOpen} centered>
+      <ModalHeader toggle={toggle}>
+        <span className="text-danger">Delete tag</span>
+      </ModalHeader>
+      <ModalBody>
+        Are you sure you want to delete tag <b>{tag}</b>?
+      </ModalBody>
+      <ModalFooter>
+        <button className="btn btn-link" onClick={toggle}>Cancel</button>
+        <button className="btn btn-danger">Delete tag</button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+DeleteTagConfirmModal.propTypes = propTypes;