wip: cropping mostly works, uploads do not yet

src/views/acc-general-view.jsx

@@ -4,6 +4,8 @@ import { FormattedMessage } from 'react-intl';
 
 import Tinode from 'tinode-sdk';
 
+import AvatarCropView from './avatar-crop-view.jsx';
+
 import AvatarUpload from '../widgets/avatar-upload.jsx';
 import InPlaceEdit from '../widgets/in-place-edit.jsx';
 import TagManager from '../widgets/tag-manager.jsx';
@@ -25,13 +27,17 @@ export default class AccGeneralView extends React.Component {
       addCredActive: false,
       addCredInvalid: false,
       newCred: '',
+      newAvatar: null,
+      newAvatarMime: null,
       previousOnTags: me.onTagsUpdated
     };
 
     this.tnNewTags = this.tnNewTags.bind(this);
     this.tnCredsUpdated = this.tnCredsUpdated.bind(this);
     this.handleFullNameUpdate = this.handleFullNameUpdate.bind(this);
-    this.handleImageChanged = this.handleImageChanged.bind(this);
+    this.handleImageUploaded = this.handleImageUploaded.bind(this);
+    this.handleAvatarCropped = this.handleAvatarCropped.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
     this.handleCredChange = this.handleCredChange.bind(this);
     this.handleCredKeyDown = this.handleCredKeyDown.bind(this);
     this.handleCredEntered = this.handleCredEntered.bind(this);
@@ -66,11 +72,20 @@ export default class AccGeneralView extends React.Component {
     }
   }
 
-  handleImageChanged(img) {
-    this.setState({avatar: img});
+  handleImageUploaded(mime, img) {
+    this.setState({newAvatar: img, newAvatarMime: mime});
+  }
+
+  handleAvatarCropped(mime, blob, width, height) {
+    const url = blob ? URL.createObjectURL(blob) : null;
+    this.setState({avatar: url, newAvatar: null, newAvatarMime: null});
     // this.props.onUpdateAccount(undefined, theCard(null, img || Tinode.DEL_CHAR));
   }
 
+  handleCancel(img) {
+    this.setState({newAvatar: null, newAvatarMime: null});
+  }
+
   handleCredChange(e) {
     this.setState({newCred: e.target.value, addCredInvalid: false});
   }
@@ -119,6 +134,17 @@ export default class AccGeneralView extends React.Component {
   }
 
   render() {
+    if (this.state.newAvatar) {
+      return (
+        <AvatarCropView
+          avatar={this.state.newAvatar}
+          mime={this.state.newAvatarMime}
+          onSubmit={this.handleAvatarCropped}
+          onCancel={this.handleCancel}
+          onError={this.props.onError} />
+      );
+    }
+
     const credentials = [];
     this.state.credentials.map((cred) => {
       credentials.push(<div key={cred.meth + ":" + cred.val + ":" + cred.done}>{cred.meth}: <tt>{cred.val}</tt>
@@ -150,7 +176,7 @@ export default class AccGeneralView extends React.Component {
             avatar={this.state.avatar}
             uid={this.props.myUserId}
             title={this.state.fullName}
-            onImageReceived={this.props.onImageReceived}
+            onImageReceived={this.handleImageUploaded}
             onImageChanged={this.handleImageChanged}
             onError={this.props.onError} />
         </div>

src/views/avatar-crop-view.jsx

@@ -3,25 +3,63 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Cropper from '../widgets/cropper.jsx';
+import { imageCrop } from '../lib/blob-helpers.js';
+
+/*
+crop: {
+  id: 'sidepanel_title_crop',
+  description: 'Sidepanel title for AvatarCropView.',
+  defaultMessage: 'Drag to Adjust'
+},
+*/
 
 export default class AvatarCropView extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.state = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+      scale: 1
+    };
+
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  // Cut out in image coordinates and desired scale factor.
+  handleChange(top, left, width, height, scale) {
+    this.setState({
+      top: top,
+      left: left,
+      width: width,
+      height: height,
+      scale: scale
+    });
   }
 
   handleSubmit() {
-    if (this.props.onSubmit) {
-      this.props.onSubmit();
-    }
+    console.log(this.state);
+    imageCrop(this.props.mime, this.props.avatar, this.state.top,
+      this.state.left, this.state.width, this.state.height, this.state.scale,
+      (mime, blob, width, height) => {
+        this.props.onSubmit(mime, blob, width, height);
+      },
+      (err) => {
+        this.props.onError(err);
+      }
+    );
   }
 
   render() {
     return (
       <div className="panel-form">
         <div className="panel-form-row">
-          <Cropper source={this.props.avatar} />
+          <Cropper
+            source={this.props.avatar}
+            onChange={this.handleChange} />
         </div>
         <div className="dialog-buttons">
           <button className="primary" onClick={this.handleSubmit}>

src/views/sidepanel-view.jsx

@@ -5,7 +5,6 @@ import ErrorPanel from '../widgets/error-panel.jsx';
 import LoadSpinner from '../widgets/load-spinner.jsx';
 import SideNavbar from '../widgets/side-navbar.jsx';
 
-import AvatarCropView from './avatar-crop-view.jsx';
 import ContactsView from './contacts-view.jsx';
 import CreateAccountView from './create-account-view.jsx';
 import EditAccountView from './edit-account-view.jsx';
@@ -51,6 +50,11 @@ const messages = defineMessages({
     description: 'Sidepanel title for AccSecurityView.',
     defaultMessage: 'Security'
   },
+  crop: {
+    id: 'sidepanel_title_crop',
+    description: 'Sidepanel title for AvatarCropView.',
+    defaultMessage: 'Drag to Adjust'
+  },
   notif: {
     id: 'sidepanel_title_acc_notifications',
     description: 'Sidepanel title for AccNotificationsView.',
@@ -71,11 +75,6 @@ const messages = defineMessages({
     description: 'Sidepanel title for ValidationView.',
     defaultMessage: 'Confirm Credentials'
   },
-  crop: {
-    id: 'sidepanel_title_crop',
-    description: 'Sidepanel title for AvatarCropView.',
-    defaultMessage: 'Drag to Adjust'
-  },
   reset: {
     id: 'sidepanel_title_reset',
     description: 'Sidepanel title for PasswordResetView.',
@@ -175,16 +174,16 @@ class SidepanelView extends React.Component {
             trustedBadges={this.props.trustedBadges}
             onBasicNavigate={this.props.onBasicNavigate} /> :
 
-          view === 'general' ?
+          (view === 'general' || view === 'crop') ?
           <AccGeneralView
             tinode={this.props.tinode}
             myUserId={this.props.myUserId}
+            onBasicNavigate={this.props.onBasicNavigate}
             onUpdateAccount={this.props.onUpdateAccount}
             onUpdateTags={this.props.onUpdateAccountTags}
             onCredAdd={this.props.onCredAdd}
             onCredDelete={this.props.onCredDelete}
             onCredConfirm={this.props.onCredConfirm}
-            onImageReceived={this.props.onImageReceived}
             onError={this.props.onError} /> :
 
           view === 'notif' ?
@@ -246,12 +245,6 @@ class SidepanelView extends React.Component {
             onRequest={this.props.onPasswordResetRequest}
             onReset={this.props.onResetPassword} /> :
 
-          view === 'crop' ?
-          <AvatarCropView
-            avatar={this.props.newAvatar}
-            onSubmit={this.props.onAvatarCropped}
-            onCancel={this.props.onCancel} /> :
-
           null}
       </div>
     );