Merge pull request #525 from meetfranz/feature/icon-upload

[PR] Feature/icon upload

12 files changed, 377 insertions, 44 deletions

diff --git a/package.json b/package.json
index 0a2bd8991..5f5dd4182 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "mkdirp": "^0.5.1",
     "mobx": "^3.1.0",
     "mobx-react": "^4.1.0",
-    "mobx-react-form": "1.24.0",
+    "mobx-react-form": "^1.32.2",
     "mobx-react-router": "^3.1.2",
     "moment": "^2.17.1",
     "normalize-url": "^1.9.1",
@@ -61,6 +61,7 @@
     "react": "^15.4.1",
     "react-addons-css-transition-group": "^15.4.2",
     "react-dom": "^15.4.1",
+    "react-dropzone": "^4.2.1",
     "react-electron-web-view": "^2.0.1",
     "react-intl": "^2.3.0",
     "react-loader": "^2.4.0",
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index d75d2e559..a684ff98b 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -171,27 +171,65 @@ export default class ServerApi {
       throw request;
     }
     const serviceData = await request.json();
+
+    if (data.iconFile) {
+      const iconUrl = await this.uploadServiceIcon(serviceData.data.id, data.iconFile);
+
+      serviceData.data.iconUrl = iconUrl;
+    }
+
     const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
 
     console.debug('ServerApi::createService resolves', service);
     return service;
   }
 
-  async updateService(recipeId, data) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${recipeId}`, this._prepareAuthRequest({
+  async updateService(serviceId, rawData) {
+    const data = rawData;
+
+    if (data.iconFile) {
+      await this.uploadServiceIcon(serviceId, data.iconFile);
+    }
+
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, this._prepareAuthRequest({
       method: 'PUT',
       body: JSON.stringify(data),
     }));
+
     if (!request.ok) {
       throw request;
     }
+
     const serviceData = await request.json();
+
     const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
 
     console.debug('ServerApi::updateService resolves', service);
     return service;
   }
 
+  async uploadServiceIcon(serviceId, icon) {
+    const formData = new FormData();
+    formData.append('icon', icon);
+
+    const requestData = this._prepareAuthRequest({
+      method: 'PUT',
+      body: formData,
+    });
+
+    delete requestData.headers['Content-Type'];
+
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, requestData);
+
+    if (!request.ok) {
+      throw request;
+    }
+
+    const serviceData = await request.json();
+
+    return serviceData.data.iconUrl;
+  }
+
   async reorderService(data) {
     const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/reorder`, this._prepareAuthRequest({
       method: 'PUT',
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index b1a1c2e68..f6f2df2f3 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -13,6 +13,7 @@ import Tabs, { TabItem } from '../../ui/Tabs';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
+import ImageUpload from '../../ui/ImageUpload';
 
 const messages = defineMessages({
   saveService: {
@@ -83,6 +84,14 @@ const messages = defineMessages({
     id: 'settings.service.form.headlineGeneral',
     defaultMessage: '!!!General',
   },
+  iconDelete: {
+    id: 'settings.service.form.iconDelete',
+    defaultMessage: '!!!Delete',
+  },
+  iconUpload: {
+    id: 'settings.service.form.iconUpload',
+    defaultMessage: '!!!Drop your image, or click here',
+  },
 });
 
 @observer
@@ -126,6 +135,11 @@ export default class EditServiceForm extends Component {
         const values = form.values();
         let isValid = true;
 
+        const files = form.$('customIcon').files;
+        if (files) {
+          values.iconFile = files[0];
+        }
+
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
@@ -217,7 +231,9 @@ export default class EditServiceForm extends Component {
         </div>
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
-            <Input field={form.$('name')} focus />
+            <div className="service-name">
+              <Input field={form.$('name')} focus />
+            </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs
                 active={activeTabIndex}
@@ -261,32 +277,41 @@ export default class EditServiceForm extends Component {
                 )}
               </Tabs>
             )}
-            <div className="settings__options">
-              <div className="settings__settings-group">
-                <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
-                <Toggle field={form.$('isNotificationEnabled')} />
-                <Toggle field={form.$('isMuted')} />
-                <p className="settings__help">
-                  {intl.formatMessage(messages.isMutedInfo)}
-                </p>
-              </div>
+            <div className="service-flex-grid">
+              <div className="settings__options">
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
+                  <Toggle field={form.$('isNotificationEnabled')} />
+                  <Toggle field={form.$('isMuted')} />
+                  <p className="settings__help">
+                    {intl.formatMessage(messages.isMutedInfo)}
+                  </p>
+                </div>
 
-              <div className="settings__settings-group">
-                <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
-                <Toggle field={form.$('isBadgeEnabled')} />
-                {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                  <div>
-                    <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                    <p className="settings__help">
-                      {intl.formatMessage(messages.indirectMessageInfo)}
-                    </p>
-                  </div>
-                )}
-              </div>
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
+                  <Toggle field={form.$('isBadgeEnabled')} />
+                  {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
+                    <div>
+                      <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                      <p className="settings__help">
+                        {intl.formatMessage(messages.indirectMessageInfo)}
+                      </p>
+                    </div>
+                  )}
+                </div>
 
-              <div className="settings__settings-group">
-                <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
-                <Toggle field={form.$('isEnabled')} />
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
+                  <Toggle field={form.$('isEnabled')} />
+                </div>
+              </div>
+              <div className="service-icon">
+                <ImageUpload
+                  field={form.$('customIcon')}
+                  textDelete={intl.formatMessage(messages.iconDelete)}
+                  textUpload={intl.formatMessage(messages.iconUpload)}
+                />
               </div>
             </div>
             {recipe.message && (
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
new file mode 100644
index 000000000..81c3b8da6
--- /dev/null
+++ b/src/components/ui/ImageUpload.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+// import Loader from 'react-loader';
+import classnames from 'classnames';
+import Dropzone from 'react-dropzone';
+
+@observer
+export default class ImageUpload extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    multiple: PropTypes.bool,
+    textDelete: PropTypes.string.isRequired,
+    textUpload: PropTypes.string.isRequired,
+  };
+
+  static defaultProps = {
+    className: null,
+    multiple: false,
+  };
+
+  state = {
+    path: null,
+  }
+
+  onDrop(acceptedFiles) {
+    const { field } = this.props;
+
+    acceptedFiles.forEach((file) => {
+      this.setState({
+        path: file.path,
+      });
+      this.props.field.onDrop(file);
+    });
+
+    field.set('');
+  }
+
+  dropzoneRef = null;
+
+  render() {
+    const {
+      field,
+      className,
+      multiple,
+      textDelete,
+      textUpload,
+    } = this.props;
+
+    const cssClasses = classnames({
+      'image-upload__dropzone': true,
+      [`${className}`]: className,
+    });
+
+    return (
+      <div className="image-upload-wrapper">
+        <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label>
+        <div className="image-upload">
+          {(field.value && field.value !== 'delete') || this.state.path ? (
+            <div>
+              <div
+                className="image-upload__preview"
+                style={({
+                  backgroundImage: `url("${this.state.path || field.value}")`,
+                })}
+              />
+              <div className="image-upload__action">
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (field.value) {
+                      field.set('delete');
+                    } else {
+                      this.setState({
+                        path: null,
+                      });
+                    }
+                  }}
+                >
+                  <i className="mdi mdi-delete" />
+                  <p>
+                    {textDelete}
+                  </p>
+                </button>
+                <div className="image-upload__action-background" />
+              </div>
+            </div>
+          ) : (
+            <Dropzone
+              ref={(node) => { this.dropzoneRef = node; }}
+              onDrop={this.onDrop.bind(this)}
+              className={cssClasses}
+              multiple={multiple}
+              accept="image/jpeg, image/png"
+            >
+              <i className="mdi mdi-file-image" />
+              <p>
+                {textUpload}
+              </p>
+            </Dropzone>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 3c52152b1..c26195a1e 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -46,6 +46,10 @@ const messages = defineMessages({
     id: 'settings.service.form.indirectMessages',
     defaultMessage: '!!!Show message badge for all new messages',
   },
+  icon: {
+    id: 'settings.service.form.icon',
+    defaultMessage: '!!!Custom icon',
+  },
 });
 
 @inject('stores', 'actions') @observer
@@ -102,6 +106,12 @@ export default class EditServiceScreen extends Component {
           value: !service.isMuted,
           default: true,
         },
+        customIcon: {
+          label: intl.formatMessage(messages.icon),
+          value: service.hasCustomUploadedIcon ? service.icon : false,
+          default: null,
+          type: 'file',
+        },
       },
     };
 
@@ -199,6 +209,12 @@ export default class EditServiceScreen extends Component {
       return (<div>Loading...</div>);
     }
 
+    if (!recipe) {
+      return (
+        <div>something went wrong</div>
+      );
+    }
+
     const form = this.prepareForm(recipe, service);
 
     return (
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 2bfbf2455..7fc9eac1c 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -128,6 +128,9 @@
   "settings.service.form.headlineNotifications": "Notifications",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineGeneral": "General",
+  "settings.service.form.icon": "Custom icon",
+  "settings.service.form.iconDelete": "Delete",
+  "settings.service.form.iconUpload": "Drop your image, or click here",
   "settings.service.error.headline": "Error",
   "settings.service.error.goBack": "Back to services",
   "settings.service.error.message": "Could not load service recipe.",
diff --git a/src/models/Service.js b/src/models/Service.js
index 0b19440e7..423510c7d 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -24,7 +24,8 @@ export default class Service {
   @observable isNotificationEnabled = true;
   @observable isBadgeEnabled = true;
   @observable isIndirectMessageBadgeEnabled = true;
-  @observable customIconUrl = '';
+  @observable iconUrl = '';
+  @observable hasCustomUploadedIcon = false;
   @observable hasCrashed = false;
 
   constructor(data, recipe) {
@@ -42,7 +43,8 @@ export default class Service {
     this.name = data.name || this.name;
     this.team = data.team || this.team;
     this.customUrl = data.customUrl || this.customUrl;
-    this.customIconUrl = data.customIconUrl || this.customIconUrl;
+    // this.customIconUrl = data.customIconUrl || this.customIconUrl;
+    this.iconUrl = data.iconUrl || this.iconUrl;
 
     this.order = data.order !== undefined
       ? data.order : this.order;
@@ -61,6 +63,8 @@ export default class Service {
 
     this.isMuted = data.isMuted !== undefined ? data.isMuted : this.isMuted;
 
+    this.hasCustomUploadedIcon = data.hasCustomIcon !== undefined ? data.hasCustomIcon : this.hasCustomUploadedIcon;
+
     this.recipe = recipe;
 
     autorun(() => {
@@ -97,15 +101,15 @@ export default class Service {
   }
 
   @computed get icon() {
-    if (this.hasCustomIcon) {
-      return this.customIconUrl;
+    if (this.iconUrl) {
+      return this.iconUrl;
     }
 
     return path.join(this.recipe.path, 'icon.svg');
   }
 
   @computed get hasCustomIcon() {
-    return (this.customIconUrl !== '');
+    return Boolean(this.iconUrl);
   }
 
   @computed get iconPNG() {
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index bd5014aaa..7300a76c8 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -174,9 +174,29 @@ export default class ServicesStore extends Store {
     const data = this._cleanUpTeamIdAndCustomUrl(service.recipe.id, serviceData);
     const request = this.updateServiceRequest.execute(serviceId, data);
 
+    const newData = serviceData;
+    if (serviceData.iconFile) {
+      await request._promise;
+
+      newData.iconUrl = request.result.data.iconUrl;
+      newData.hasCustomUploadedIcon = true;
+    }
+
     this.allServicesRequest.patch((result) => {
       if (!result) return;
-      Object.assign(result.find(c => c.id === serviceId), serviceData);
+
+      // patch custom icon deletion
+      if (data.customIcon === 'delete') {
+        data.iconUrl = '';
+        data.hasCustomUploadedIcon = false;
+      }
+
+      // patch custom icon url
+      if (data.customIconUrl) {
+        data.iconUrl = data.customIconUrl;
+      }
+
+      Object.assign(result.find(c => c.id === serviceId), newData);
     });
 
     await request._promise;
@@ -325,7 +345,7 @@ export default class ServicesStore extends Store {
       }
     } else if (channel === 'avatar') {
       const url = args[0];
-      if (service.customIconUrl !== url) {
+      if (service.iconUrl !== url && !service.hasCustomUploadedIcon) {
         service.customIconUrl = url;
 
         this.actions.service.updateService({
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
new file mode 100644
index 000000000..06176a7af
--- /dev/null
+++ b/src/styles/image-upload.scss
@@ -0,0 +1,91 @@
+.image-upload {
+  position: absolute;
+  width: 140px;
+  height: 140px;
+  border: 1px solid $theme-gray-lighter;
+  border-radius: $theme-border-radius-small;
+  background: $theme-gray-lightest;
+  overflow: hidden;
+  margin-top: 5px;
+
+  &__preview,
+  &__action {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &__preview {
+    z-index: 1;
+    background-size: cover;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    border-radius: 3px;
+  }
+
+  &__action {
+    position: relative;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.5s;
+    display: flex;
+    justify-content: center;
+
+    &-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba($theme-gray, 0.7);
+      z-index: 10;
+    }
+
+    button {
+      position: relative;
+      z-index: 100;
+      color: #FFF;
+
+      .mdi {
+        color: #FFF;
+      }
+    }
+  }
+
+  &__dropzone {
+    text-align: center;
+    border-radius: 5px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  &__dropzone, 
+  button {
+    .mdi {
+      margin-bottom: 5px;
+    }
+
+    p {
+      font-size: 10px;
+      line-height: 10px;
+    }
+  }
+
+  &:hover {
+    .image-upload__action {
+      opacity: 1;
+    }
+  }
+}
+
+.image-upload-wrapper {
+  .mdi {
+    font-size: 40px;
+    color: $theme-gray-light;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0a082729c..261396f6f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -35,3 +35,4 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './button.scss';
 @import './searchInput.scss';
 @import './select.scss';
+@import './image-upload.scss';
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 2da56c930..2182c9b5f 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -111,6 +111,26 @@
     &::-webkit-scrollbar-thumb:window-inactive {
         background: none;
     }
+    
+    .service-flex-grid {
+      display: flex;
+    }
+
+    .service-name {
+      flex: 1px;
+    }
+
+    .service-icon {
+      width: 140px;
+      float: right;
+      margin-top: 30px;
+      margin-left: 40px;
+
+      label {
+        font-weight: bold;
+        letter-spacing: -0.1px;
+      }
+    }
   }
 
   .settings__close {
@@ -135,6 +155,7 @@
 
   &__options {
     margin-top: 20px;
+    flex: 1;
   }
 
   &__settings-group {
@@ -305,12 +326,6 @@
     }
   }
 
-  // @include element(add-service-teaser) {
-  //   height: auto;
-  //   margin-top: 20px;
-  //   display: block;
-  //   text-align: center;
-  // }
   .emoji {
     display: block;
     font-size: 40px;
diff --git a/yarn.lock b/yarn.lock
index dbcb33647..58befebf1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -341,6 +341,10 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
+attr-accept@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.0.tgz#b5cd35227f163935a8f1de10ed3eba16941f6be6"
+
 "auto-launch@https://github.com/meetfranz/node-auto-launch.git":
   version "5.0.1"
   resolved "https://github.com/meetfranz/node-auto-launch.git#b90a0470467eb84435e6554ae9db1e2c6db79e61"
@@ -4277,9 +4281,9 @@ mksnapshot@^0.3.0:
     fs-extra "0.26.7"
     request "^2.79.0"
 
-mobx-react-form@1.24.0:
-  version "1.24.0"
-  resolved "https://registry.yarnpkg.com/mobx-react-form/-/mobx-react-form-1.24.0.tgz#bc9fbd652e65fb1f2b51917865d465fcaab7f0d9"
+mobx-react-form@^1.32.2:
+  version "1.32.2"
+  resolved "https://registry.yarnpkg.com/mobx-react-form/-/mobx-react-form-1.32.2.tgz#5610dd0e4fab006acf2daf1becbedecad182a5a0"
   dependencies:
     lodash "^4.16.2"
 
@@ -5045,6 +5049,13 @@ react-dom@^15.4.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-dropzone@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.2.1.tgz#695e80bd0b065f1181e69f2d0f6d1d5cc72664c9"
+  dependencies:
+    attr-accept "^1.0.3"
+    prop-types "^15.5.7"
+
 react-electron-web-view@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-electron-web-view/-/react-electron-web-view-2.0.1.tgz#984b7bbbeb77e35bcca921dc50120fc8f2b0f27d"