Feature/avatar

package.json

@@ -97,6 +97,7 @@
     "normalize.css": "^4.1.1",
     "postcss-loader": "^0.13.0",
     "react": "15.4.0",
+    "react-avatar-cropper": "^0.1.3",
     "react-dom": "^15.0.0",
     "react-redux": "^4.4.5",
     "react-router": "3.0.0",

src/containers/profile/profilePageContent.jsx

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import autobind from 'autobind-decorator';
 import { SubmissionError } from 'redux-form';
 
+import AvatarForm from 'forms/profile/avatarForm.jsx';
 import BasicInfoForm from 'forms/profile/basicInfoForm.jsx';
 import AddressForm from 'forms/profile/addressForm.jsx';
 import PersonalTagForm from 'forms/profile/personalTagForm.jsx';
@@ -46,14 +47,21 @@ class ProfilePageContent extends React.Component {
 
   state = {
     isExpanded: {
+      avatarForm: true,
       basicInfoForm: true,
       addressForm: true,
       personalTagForm: true
     },
     basicInforFormInitialValues: null,
     addressFormInitialValues: null,
-    personalTagFormInitialValues: null
-  }
+    personalTagFormInitialValues: null,
+    avatarFormInitialValues: {
+      last: null,
+      cropperOpen: false,
+      img: null,
+      croppedImage: 'http://ww3.sinaimg.cn/mw690/6f6fe5a7jw1e5oococe8lj20c80lrab6.jpg'
+    }
+  };
 
   componentWillMount() {
     this.componentWillReceiveProps(this.props);
@@ -98,7 +106,7 @@ class ProfilePageContent extends React.Component {
         addressFormInitialValues: newAddressInitialValues
       });
     }
-  }
+  };
 
   @autobind
   updateAddress(formData) {
@@ -138,6 +146,40 @@ class ProfilePageContent extends React.Component {
     console.log(geoCode);
   }
 
+  @autobind
+  avatarHandleFileChange(dataURI) {
+    const avatarConfig = this.state.avatarFormInitialValues;
+    avatarConfig.cropperOpen = true;
+    avatarConfig.img = dataURI;
+    if (avatarConfig.last) {
+      avatarConfig.croppedImage = avatarConfig.last;
+    }
+    this.setState({
+      avatarFormInitialValues: avatarConfig
+    });
+  }
+
+  @autobind
+  avatarHandleCrop(dataURI) {
+    this.setState({
+      avatarFormInitialValues: {
+        last: dataURI,
+        cropperOpen: false,
+        img: null,
+        croppedImage: dataURI
+      }
+    });
+  }
+
+  @autobind
+  avatarHandleRequestHide() {
+    const temp = this.state.avatarFormInitialValues;
+    temp.cropperOpen = false;
+    this.setState({
+      avatarFormInitialValues: temp
+    });
+  }
+
   @autobind
   expandForm(form) {
     const newState = this.state.isExpanded;
@@ -152,6 +194,14 @@ class ProfilePageContent extends React.Component {
     return (
       <div className="profile-content">
         <div className="profile-content__container">
+          <div className="profile-content__form-group">
+            <FormGroupHeader expandForm={this.expandForm} formName="avatarForm" />
+            {
+              isExpanded.avatarForm ?
+                <AvatarForm handleFileChange={this.avatarHandleFileChange} handleCrop={this.avatarHandleCrop} handleRequestHide={this.avatarHandleRequestHide} initialValues={this.state.avatarFormInitialValues} /> :
+                null
+            }
+          </div>
           <div className="profile-content__form-group">
             <FormGroupHeader expandForm={this.expandForm} formName="basicInfoForm" />
             {

src/forms/profile/avatarForm.jsx

@@ -0,0 +1,56 @@
+import AvatarCropper from 'react-avatar-cropper';
+import React from 'react';
+import FileUpload from 'utils/avatarUpload.jsx';
+import autobind from 'autobind-decorator';
+
+class AvatarForm extends React.Component {
+
+  static propTypes = {
+    handleFileChange: React.PropTypes.func.isRequired,
+    handleCrop: React.PropTypes.func.isRequired,
+    handleRequestHide: React.PropTypes.func.isRequired,
+    initialValues: React.PropTypes.object.isRequired
+  };
+
+  @autobind
+  handleFileChange(dataURI) {
+    this.props.handleFileChange(dataURI);
+  }
+
+  @autobind
+  handleCrop(dataURI) {
+    this.props.handleCrop(dataURI);
+  }
+
+  @autobind
+  handleRequestHide() {
+    this.props.handleRequestHide();
+  }
+
+  render() {
+    const { initialValues } = this.props;
+    return (
+      <div>
+        <div className="avatar-photo">
+          <FileUpload handleFileChange={this.handleFileChange} />
+          <div className="avatar-edit">
+            <span>Click to pick avatar</span>
+          </div>
+          <img src={initialValues.croppedImage} />
+        </div>
+        {initialValues.cropperOpen &&
+          <AvatarCropper
+            onRequestHide={this.handleRequestHide}
+            cropperOpen={initialValues.cropperOpen}
+            onCrop={this.handleCrop}
+            image={initialValues.img}
+            width={400}
+            height={400}
+          />
+        }
+      </div>
+    );
+  }
+};
+
+export default AvatarForm;

src/routes/restrictedRoute.jsx

@@ -11,6 +11,7 @@ const connectDispatch = (dispatch) => ({
 });
 
 const unrestrcitedPathNames = [
+  '/profile/info',
   '/home',
   '/error'
 ];

src/utils/avatarUpload.jsx

@@ -0,0 +1,41 @@
+/**
+ * Created by 50528 on 1/7/2017.
+ */
+import React from 'react';
+import ReactDom from 'react-dom';
+import autobind from 'autobind-decorator';
+
+class FileUpload extends React.Component {
+  static propTypes = {
+    handleFileChange: React.PropTypes.func.isRequired
+  };
+
+  // constructor(props) {
+  //   super(props);
+  //   this.node = null;
+  // }
+  @autobind
+  handleFile(e) {
+    const reader = new FileReader();
+    const file = e.target.files[0];
+
+    if (!file) {
+      return;
+    }
+
+    reader.onload = function(img) {
+      ReactDom.findDOMNode(this.refs.in).value = '';
+      this.props.handleFileChange(img.target.result);
+      //console.log(this.node);
+    }.bind(this);
+    reader.readAsDataURL(file);
+  }
+
+  render() {
+    return (
+      <input ref="in" type="file" accept="image/*" onChange={this.handleFile} />
+    );
+  }
+}
+
+export default FileUpload;