Use some sort of multiple select component for Tag input

To improve UX and let user intuitively add multiple tags, this commit
contains functionality that allows to add multiple tags by simply
clicking Enter button
Closes: #46

Author: lotrien

package-lock.json

@@ -37,6 +37,7 @@
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
+    "react-tagging-input": "^2.1.2",
     "redux": "^3.7.2",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.2.0"

package.json

@@ -1,11 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Controlled as CodeMirror } from 'react-codemirror2';
+import Tags from 'react-tagging-input';
 
 import 'codemirror/lib/codemirror.css';
 
 import Title from './common/Title';
-import Input from './common/Input';
 import ListBoxWithSearch from './ListBoxWithSearch';
 import * as actions from '../actions';
 
@@ -20,28 +20,35 @@ class NewSnippet extends React.Component {
       tags: [],
       syntax: '', // eslint-disable-line react/no-unused-state
     };
+    this.onKeyPress = (e) => {
+      if (e.which === 13) { e.preventDefault(); }
+    };
     this.postSnippet = this.postSnippet.bind(this);
     this.onSyntaxClick = this.onSyntaxClick.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
+    this.onTagAdded = this.onTagAdded.bind(this);
+    this.onTagRemoved = this.onTagRemoved.bind(this);
   }
 
   componentDidMount() {
     const { dispatch } = this.props;
-
     dispatch(actions.fetchSyntaxes);
   }
 
+  onTagAdded(tag) {
+    this.setState({ tags: [...this.state.tags, tag] });
+  }
+
+  onTagRemoved(tag) {
+    this.setState({ tags: this.state.tags.filter(item => item !== tag) });
+  }
+
   onSyntaxClick(syntax) {
     this.setState({ syntax }); // eslint-disable-line react/no-unused-state
   }
 
   onInputChange(e) {
-    const { name } = e.target;
-    let { value } = e.target;
-
-    if (name === 'tags') {
-      value = value.split(',').map(item => item.trim());
-    }
+    const { name, value } = e.target;
 
     this.setState({ [name]: value });
   }
@@ -56,20 +63,28 @@ class NewSnippet extends React.Component {
     return (
       [
         <Title title="New snippet" key="New Snippet Title" />,
-        <form className="new-snippet" key="New Snippet" onSubmit={this.postSnippet}>
+        <form
+          className="new-snippet"
+          key="New Snippet"
+          onKeyPress={this.onKeyPress}
+          onSubmit={this.postSnippet}
+          role="presentation"
+        >
           <div className="new-snippet-code-wrapper">
             <div className="new-snippet-code-header">
-              <Input
+              <input
+                className="input"
                 placeholder="Title"
                 name="title"
-                onChangeHandler={this.onInputChange}
+                type="text"
                 value={this.state.title}
+                onChange={this.onInputChange}
               />
-              <Input
-                placeholder="Tags (separate tags by comma)"
-                name="tags"
-                onChangeHandler={this.onInputChange}
-                value={this.state.tags.toString()}
+              <Tags
+                tags={this.state.tags}
+                placeholder="Tags"
+                onAdded={this.onTagAdded}
+                onRemoved={this.onTagRemoved}
               />
             </div>
             <div className="new-snippet-code">

src/components/NewSnippet.jsx

@@ -6,7 +6,6 @@ import codemirror from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 
 import Title from './common/Title';
-import Input from './common/Input';
 import Spinner from './common/Spinner';
 import * as actions from '../actions';
 import { downloadSnippet } from '../helpers';
@@ -70,7 +69,11 @@ class Snippet extends React.Component {
               In order to embed this content into your website or blog,
               simply copy and paste code provided below:
             </p>
-            <Input value={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`} />
+            <input
+              className="input"
+              type="text"
+              defaultValue={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`}
+            />
           </div>
           <div className="snippet-code">
             <CodeMirror

src/components/Snippet.jsx

@@ -1,5 +1,6 @@
 @import './common/variables.styl'
 @import './common/overwrite.styl'
+@import './common/mixins.styl'
 
 lang-bar-width = 230px
 
@@ -17,6 +18,7 @@ lang-bar-width = 230px
       flex-flow: row nowrap
       height: offset
       min-height: offset
+      align-items: flex-end
 
   &-code
     flex: 1
@@ -29,6 +31,7 @@ lang-bar-width = 230px
     &-header
       background-color: snippet-header-light
       .input
+        basic-input()
         width: 47%
       & > input
         margin-right: 5%
@@ -65,7 +68,7 @@ lang-bar-width = 230px
     &-header
       background-color: snippet-header-normal
       .input
-        width: 100%
+        basic-input()
     &-list
       height: 100%
       &-wrapper

src/styles/NewSnippet.styl

@@ -1,4 +1,5 @@
 @import './common/variables.styl'
+@import './common/mixins.styl'
 
 .snippet
   display: flex
@@ -52,6 +53,7 @@
       font-size: 14px
       padding-bottom: 10px
     & input
+      basic-input()
       color: text-dark
       background-color: snippet-content-light
       padding: 4px 9px

src/styles/Snippet.styl

@@ -0,0 +1,16 @@
+@import './common/variables.styl'
+
+basic-input()
+  width: 100%
+  background-color: transparent
+  border: none
+  border-bottom: 1px solid rgba(text-light, .4)
+  outline: none
+  color: text-light
+  font-size: 15px
+  font-family: font-quicksand
+  letter-spacing: -.3px
+  &::placeholder
+    color: rgba(text-light, .6)
+  &:focus
+    border-bottom: 1px solid text-light

src/styles/common/mixins.styl

@@ -1,4 +1,5 @@
 @import './common/variables.styl'
+@import './common/mixins.styl'
 
 .react-codemirror2,
 .CodeMirror
@@ -26,3 +27,21 @@
 .snippet .CodeMirror-cursor {
   display: none !important
 }
+
+.react-tags
+  display: flex
+  width: 47%
+  input
+    basic-input()
+  .react-tags__container
+    display: flex
+    color: text-light
+    li
+      border: 1px solid rgba(text-light, .4)
+      margin-right: 4px
+      padding: 7px
+      &:hover
+        border-color: text-light
+      a
+        margin-left: 3px
+        cursor: pointer