making avatar cropping work

src/views/acc-general-view.jsx

@@ -68,7 +68,6 @@ export default class AccGeneralView extends React.Component {
 
   handleImageChanged(img) {
     this.setState({avatar: img});
-    this.props.onBasicNavigate('crop');
     // this.props.onUpdateAccount(undefined, theCard(null, img || Tinode.DEL_CHAR));
   }
 
@@ -151,6 +150,7 @@ export default class AccGeneralView extends React.Component {
             avatar={this.state.avatar}
             uid={this.props.myUserId}
             title={this.state.fullName}
+            onImageReceived={this.props.onImageReceived}
             onImageChanged={this.handleImageChanged}
             onError={this.props.onError} />
         </div>

src/views/avatar-crop-view.jsx

@@ -21,7 +21,7 @@ export default class AvatarCropView extends React.PureComponent {
     return (
       <div className="panel-form">
         <div className="panel-form-row">
-          <Cropper source="/img/logo192.png" />
+          <Cropper source={this.props.avatar} />
         </div>
         <div className="dialog-buttons">
           <button className="primary" onClick={this.handleSubmit}>

src/views/sidepanel-view.jsx

@@ -184,7 +184,7 @@ class SidepanelView extends React.Component {
             onCredAdd={this.props.onCredAdd}
             onCredDelete={this.props.onCredDelete}
             onCredConfirm={this.props.onCredConfirm}
-            onBasicNavigate={this.props.onBasicNavigate}
+            onImageReceived={this.props.onImageReceived}
             onError={this.props.onError} /> :
 
           view === 'notif' ?
@@ -248,6 +248,7 @@ class SidepanelView extends React.Component {
 
           view === 'crop' ?
           <AvatarCropView
+            avatar={this.props.newAvatar}
             onSubmit={this.props.onAvatarCropped}
             onCancel={this.props.onCancel} /> :
 

src/views/tinode-web.jsx

@@ -111,6 +111,7 @@ class TinodeWeb extends React.Component {
     this.handleCredAdd = this.handleCredAdd.bind(this);
     this.handleCredDelete = this.handleCredDelete.bind(this);
     this.handleCredConfirm = this.handleCredConfirm.bind(this);
+    this.handleImageReceived = this.handleImageReceived.bind(this);
     this.initFCMessaging = this.initFCMessaging.bind(this);
     this.togglePushToken = this.togglePushToken.bind(this);
     this.requestPushToken = this.requestPushToken.bind(this);
@@ -1148,6 +1149,13 @@ class TinodeWeb extends React.Component {
     this.handleCredentialsRequest({cred: [method]});
   }
 
+  handleImageReceived(url) {
+    this.setState({newAvatar: url});
+    if (url) {
+      this.basicNavigator('crop');
+    }
+  }
+
   // User clicked Cancel button in Setting or Sign Up panel.
   handleSidepanelCancel() {
     const parsed = HashNavigation.parseUrlHash(window.location.hash);
@@ -1552,6 +1560,7 @@ class TinodeWeb extends React.Component {
           myUserId={this.state.myUserId}
           loginDisabled={this.state.loginDisabled}
           loadSpinnerVisible={this.state.loadSpinnerVisible}
+          newAvatar={this.state.newAvatar}
 
           errorText={this.state.errorText}
           errorLevel={this.state.errorLevel}
@@ -1586,6 +1595,7 @@ class TinodeWeb extends React.Component {
           onCredAdd={this.handleCredAdd}
           onCredDelete={this.handleCredDelete}
           onCredConfirm={this.handleCredConfirm}
+          onImageReceived={this.handleImageReceived}
           onTopicSelected={this.handleTopicSelected}
           onCreateTopic={this.handleStartTopicRequest}
           onLogout={this.handleLogout}

src/widgets/avatar-upload.jsx

@@ -27,6 +27,11 @@ export default class AvatarUpload extends React.Component {
 
   handleFileUpload(e) {
     const image = e.target.files[0];
+    if (this.props.onImageReceived) {
+      this.props.onFileReceived(URL.createObjectURL(image));
+      return;
+    }
+
     if (image.size > MAX_AVATAR_BYTES) {
       // Too large to send inband - uploading out of band and sending as a link.
       const uploader = this.props.tinode.getLargeFileHelper();