From 5d2de11615bb26fbc1912903ed773f48a4c87461 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 19 Aug 2018 20:08:02 +0200
Subject: [PATCH] Allowed tags color to be changed

---
 src/common/AsideMenu.js            |  2 +-
 src/common/MenuLayout.js           |  2 +-
 src/tags/helpers/EditTagModal.js   | 41 +++++++++++++++++-------------
 src/tags/helpers/EditTagModal.scss |  4 +++
 src/tags/reducers/tagEdit.js       | 35 ++++++++++++-------------
 5 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/src/common/AsideMenu.js b/src/common/AsideMenu.js
index 92db9013..bf2f0a32 100644
--- a/src/common/AsideMenu.js
+++ b/src/common/AsideMenu.js
@@ -49,7 +49,7 @@ export default function AsideMenu({ selectedServer, className, showOnMobile }) {
         <NavLink
           className="aside-menu__item"
           activeClassName="aside-menu__item--selected"
-          to={`/server/${serverId}/tags`}
+          to={`/server/${serverId}/manage-tags`}
         >
           <FontAwesomeIcon icon={tagsIcon} />
           <span className="aside-menu__item-text">Manage tags</span>
diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index 9348438e..99ad9e7b 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -81,7 +81,7 @@ export class MenuLayout extends React.Component {
                 />
                 <Route
                   exact
-                  path="/server/:serverId/tags"
+                  path="/server/:serverId/manage-tags"
                   component={TagsList}
                 />
               </Switch>
diff --git a/src/tags/helpers/EditTagModal.js b/src/tags/helpers/EditTagModal.js
index e1c6ca91..ce038998 100644
--- a/src/tags/helpers/EditTagModal.js
+++ b/src/tags/helpers/EditTagModal.js
@@ -5,6 +5,8 @@ import { pick } from 'ramda';
 import { editTag, tagEdited } from '../reducers/tagEdit';
 import { ChromePicker } from 'react-color';
 import ColorGenerator from '../../utils/ColorGenerator';
+import colorIcon from '@fortawesome/fontawesome-free-solid/faPalette'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
 import './EditTagModal.scss';
 
 const defaultProps = {
@@ -13,14 +15,12 @@ const defaultProps = {
 
 
 export class EditTagModal extends React.Component {
-  state = { showColorPicker: false };
-
   saveTag = e => {
     e.preventDefault();
     const { tag: oldName, editTag, toggle } = this.props;
-    const { tag: newName } = this.state;
+    const { tag: newName, color } = this.state;
 
-    editTag(oldName, newName)
+    editTag(oldName, newName, color)
       .then(() => {
         this.tagWasEdited = true;
         toggle();
@@ -33,8 +33,8 @@ export class EditTagModal extends React.Component {
     }
 
     const { tag: oldName, tagEdited } = this.props;
-    const { tag: newName } = this.state;
-    tagEdited(oldName, newName);
+    const { tag: newName, color } = this.state;
+    tagEdited(oldName, newName, color);
   };
 
   constructor(props) {
@@ -42,6 +42,7 @@ export class EditTagModal extends React.Component {
 
     const { colorGenerator, tag } = props;
     this.state = {
+      showColorPicker: false,
       tag,
       color: colorGenerator.getColorForKey(tag)
     }
@@ -62,15 +63,6 @@ export class EditTagModal extends React.Component {
         <form onSubmit={this.saveTag}>
           <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
           <ModalBody>
-            <Popover
-              isOpen={this.state.showColorPicker}
-              toggle={toggleColorPicker}
-              target="colorPickerBtn"
-              placement="right"
-            >
-              <ChromePicker color={color} />
-            </Popover>
-
             <div className="input-group">
               <div
                 className="input-group-prepend"
@@ -79,11 +71,26 @@ export class EditTagModal extends React.Component {
               >
                 <div
                   className="input-group-text edit-tag-modal__color-picker-toggle"
-                  style={{backgroundColor: color}}
+                  style={{
+                    backgroundColor: color,
+                    borderColor: color,
+                  }}
                 >
-                  &nbsp;&nbsp;
+                  <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
                 </div>
               </div>
+              <Popover
+                isOpen={this.state.showColorPicker}
+                toggle={toggleColorPicker}
+                target="colorPickerBtn"
+                placement="right"
+              >
+                <ChromePicker
+                  color={color}
+                  onChange={color => this.setState({ color: color.hex })}
+                  disableAlpha
+                />
+              </Popover>
               <input
                 type="text"
                 value={tag}
diff --git a/src/tags/helpers/EditTagModal.scss b/src/tags/helpers/EditTagModal.scss
index 6c774ca0..29bc4308 100644
--- a/src/tags/helpers/EditTagModal.scss
+++ b/src/tags/helpers/EditTagModal.scss
@@ -1,3 +1,7 @@
 .edit-tag-modal__color-picker-toggle {
   cursor: pointer;
 }
+
+.edit-tag-modal__color-icon {
+  color: #fff;
+}
diff --git a/src/tags/reducers/tagEdit.js b/src/tags/reducers/tagEdit.js
index bfb940f5..f8d6aae0 100644
--- a/src/tags/reducers/tagEdit.js
+++ b/src/tags/reducers/tagEdit.js
@@ -1,6 +1,6 @@
 import ShlinkApiClient from '../../api/ShlinkApiClient';
 import ColorGenerator from '../../utils/ColorGenerator';
-import { curry } from 'ramda';
+import { curry, pick } from 'ramda';
 
 const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
 const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';
@@ -30,8 +30,7 @@ export default function reducer(state = defaultState, action) {
       };
     case EDIT_TAG:
       return {
-        oldName: action.oldName,
-        newName: action.newName,
+        ...pick(['oldName', 'newName'], action),
         editing: false,
         error: false,
       };
@@ -40,26 +39,24 @@ export default function reducer(state = defaultState, action) {
   }
 }
 
-export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName) => async dispatch => {
-  dispatch({ type: EDIT_TAG_START });
+export const _editTag = (ShlinkApiClient, ColorGenerator, oldName, newName, color) =>
+  async dispatch => {
+    dispatch({ type: EDIT_TAG_START });
 
-  try {
-    await ShlinkApiClient.editTag(oldName, newName);
-
-    // Make new tag name use the same color as the old one
-    const color = ColorGenerator.getColorForKey(oldName);
-    ColorGenerator.setColorForKey(newName, color);
-
-    dispatch({ type: EDIT_TAG, oldName, newName });
-  } catch (e) {
-    dispatch({ type: EDIT_TAG_ERROR });
-    throw e;
-  }
-};
+    try {
+      await ShlinkApiClient.editTag(oldName, newName);
+      ColorGenerator.setColorForKey(newName, color);
+      dispatch({ type: EDIT_TAG, oldName, newName });
+    } catch (e) {
+      dispatch({ type: EDIT_TAG_ERROR });
+      throw e;
+    }
+  };
 export const editTag = curry(_editTag)(ShlinkApiClient, ColorGenerator);
 
-export const tagEdited = (oldName, newName) => ({
+export const tagEdited = (oldName, newName, color) => ({
   type: TAG_EDITED,
   oldName,
   newName,
+  color,
 });