Created common component to handle tags and modal to edit tags

src/utils/ColorGenerator.js

@@ -1,4 +1,5 @@
 import Storage from './Storage';
+import PropTypes from 'prop-types';
 
 const buildRandomColor = () => {
   const letters = '0123456789ABCDEF';
@@ -29,4 +30,8 @@ export class ColorGenerator {
   };
 }
 
+export const colorGeneratorType = PropTypes.shape({
+  getColorForKey: PropTypes.func,
+});
+
 export default new ColorGenerator(Storage);

src/utils/TagsSelector.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import TagsInput from 'react-tagsinput';
+import ColorGenerator, { colorGeneratorType } from './ColorGenerator';
+import PropTypes from 'prop-types';
+
+const defaultProps = {
+  colorGenerator: ColorGenerator,
+  placeholder: 'Add tags to the URL',
+};
+const propTypes = {
+  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  colorGenerator: colorGeneratorType
+};
+
+export default function TagsSelector({ tags, onChange, placeholder, colorGenerator }) {
+  const renderTag = (props) => {
+    const { tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other } = props;
+    return (
+      <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
+        {getTagDisplayValue(tag)}
+        {!disabled && <a className={classNameRemove} onClick={() => onRemove(key)} />}
+      </span>
+    )
+  };
+
+  return (
+    <TagsInput
+      value={tags}
+      onChange={onChange}
+      inputProps={{ placeholder }}
+      onlyUnique
+      addOnBlur // FIXME Workaround to be able to add tags on Android
+      renderTag={renderTag}
+    />
+  );
+}
+
+TagsSelector.defaultProps = defaultProps;
+TagsSelector.propTypes = propTypes;