Merge pull request #374 from jorilallo/jori/colorpicker

Color picker

app/scenes/CollectionEdit/CollectionEdit.js

@@ -7,6 +7,7 @@ import Button from 'components/Button';
 import Input from 'components/Input';
 import Flex from 'shared/components/Flex';
 import HelpText from 'components/HelpText';
+import ColorPicker from 'components/ColorPicker';
 import Collection from 'models/Collection';
 
 type Props = {
@@ -18,6 +19,7 @@ type Props = {
 @observer class CollectionEdit extends Component {
   props: Props;
   @observable name: string;
+  @observable color: string = '';
   @observable isSaving: boolean;
 
   componentWillMount() {
@@ -28,7 +30,7 @@ type Props = {
     ev.preventDefault();
     this.isSaving = true;
 
-    this.props.collection.updateData({ name: this.name });
+    this.props.collection.updateData({ name: this.name, color: this.color });
     const success = await this.props.collection.save();
 
     if (success) {
@@ -42,6 +44,10 @@ type Props = {
     this.name = ev.target.value;
   };
 
+  handleColor = (color: string) => {
+    this.color = color;
+  };
+
   render() {
     return (
       <Flex column>
@@ -58,6 +64,10 @@ type Props = {
             required
             autoFocus
           />
+          <ColorPicker
+            onSelect={this.handleColor}
+            value={this.props.collection.color}
+          />
           <Button
             type="submit"
             disabled={this.isSaving || !this.props.collection.name}

app/scenes/CollectionNew/CollectionNew.js

@@ -5,6 +5,7 @@ import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import Button from 'components/Button';
 import Input from 'components/Input';
+import ColorPicker from 'components/ColorPicker';
 import HelpText from 'components/HelpText';
 
 import Collection from 'models/Collection';
@@ -20,6 +21,7 @@ type Props = {
   props: Props;
   @observable collection: Collection;
   @observable name: string = '';
+  @observable color: string = '';
   @observable isSaving: boolean;
 
   constructor(props: Props) {
@@ -30,7 +32,7 @@ type Props = {
   handleSubmit = async (ev: SyntheticEvent) => {
     ev.preventDefault();
     this.isSaving = true;
-    this.collection.updateData({ name: this.name });
+    this.collection.updateData({ name: this.name, color: this.color });
     const success = await this.collection.save();
 
     if (success) {
@@ -46,6 +48,10 @@ type Props = {
     this.name = ev.target.value;
   };
 
+  handleColor = (color: string) => {
+    this.color = color;
+  };
+
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
@@ -61,6 +67,7 @@ type Props = {
           required
           autoFocus
         />
+        <ColorPicker onSelect={this.handleColor} />
         <Button type="submit" disabled={this.isSaving || !this.name}>
           {this.isSaving ? 'Creating…' : 'Create'}
         </Button>