First working draft of icon upload

meetfranz · Dec 27, 2017 · 150cfe7 · 150cfe7
1 parent df44b69
commit 150cfe7
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,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",

diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
@@ -167,27 +167,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
@@ -127,6 +127,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 {
@@ -224,7 +229,7 @@ export default class EditServiceForm extends Component {
               </div>
               <div className="service-icon">
                 {/* <Input field={form.$('name')} focus /> */}
-                <ImageUpload field={form.$('icon')} />
+                <ImageUpload field={form.$('customIcon')} />
               </div>
             </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (

diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
@@ -12,82 +12,64 @@ export default class ImageUpload extends Component {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
     multiple: PropTypes.bool,
-    // disabled: PropTypes.bool,
-    // onClick: PropTypes.func,
-    // type: PropTypes.string,
-    // buttonType: PropTypes.string,
-    // loaded: PropTypes.bool,
-    // htmlForm: PropTypes.string,
   };
 
   static defaultProps = {
     className: null,
     multiple: false,
-    // disabled: false,
-    // onClick: () => {},
-    // type: 'button',
-    // buttonType: '',
-    // loaded: true,
-    // htmlForm: '',
   };
 
-  dropzoneRef = null;
-
   state = {
     path: null,
   }
 
   onDrop(acceptedFiles) {
-    // const req = request.post('/upload');
     acceptedFiles.forEach((file) => {
-      console.log(file);
       this.setState({
         path: file.path,
       });
-      // req.attach(file.name, file);
+      this.props.field.onDrop(file);
     });
-    // req.end(callback);
   }
 
+  dropzoneRef = null;
+
   render() {
     const {
       field,
       className,
       multiple,
-      // disabled,
-      // onClick,
-      // type,
-      // buttonType,
-      // loaded,
-      // htmlForm,
     } = this.props;
 
     const cssClasses = classnames({
       'franz-form__button': true,
-      // [`franz-form__button--${buttonType}`]: buttonType,
       [`${className}`]: className,
     });
 
     return (
       <div>
         {field.label}
-        {this.state.path ? (
+        {(field.value && field.value !== 'delete') || this.state.path ? (
           <div
             className="image-upload"
           >
             <div
               className="image-upload__preview"
               style={({
-                backgroundImage: `url(${this.state.path})`,
+                backgroundImage: `url(${field.value || this.state.path})`,
               })}
             />
             <div className="image-upload__action">
               <button
                 type="button"
                 onClick={() => {
-                  this.setState({
-                    path: null,
-                  });
+                  if (field.value) {
+                    field.value = 'delete';
+                  } else {
+                    this.setState({
+                      path: null,
+                    });
+                  }
                 }}
               >
                 remove icon

diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
@@ -106,10 +106,11 @@ export default class EditServiceScreen extends Component {
           value: !service.isMuted,
           default: true,
         },
-        icon: {
+        customIcon: {
           label: intl.formatMessage(messages.icon),
-          value: service.icon,
-          default: true,
+          value: service.hasCustomIcon ? service.icon : false,
+          default: null,
+          type: 'file',
         },
       },
     };

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -127,6 +127,7 @@
   "settings.service.form.headlineNotifications": "Notifications",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineGeneral": "General",
+  "settings.service.form.icon": "Icon",
   "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
@@ -24,7 +24,7 @@ export default class Service {
   @observable isNotificationEnabled = true;
   @observable isBadgeEnabled = true;
   @observable isIndirectMessageBadgeEnabled = true;
-  @observable customIconUrl = '';
+  @observable iconUrl = '';
   @observable hasCrashed = false;
 
   constructor(data, recipe) {
@@ -42,7 +42,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;
@@ -97,15 +98,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
@@ -172,9 +172,21 @@ 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;
+    }
+
     this.allServicesRequest.patch((result) => {
       if (!result) return;
-      Object.assign(result.find(c => c.id === serviceId), serviceData);
+
+      if (data.customIcon === 'delete') {
+        data.iconUrl = '';
+      }
+
+      Object.assign(result.find(c => c.id === serviceId), newData);
     });
 
     await request._promise;

diff --git a/yarn.lock b/yarn.lock
@@ -4231,9 +4231,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"