merge profileImageUploader

src/client/js/app.jsx

@@ -38,8 +38,6 @@ import EditorContainer from './services/EditorContainer';
 import TagContainer from './services/TagContainer';
 import PersonalContainer from './services/PersonalContainer';
 
-import ProfileImageUploader from './components/Me/ProfileImageUploader';
-
 import { appContainer, componentMappings } from './bootstrap';
 
 const logger = loggerFactory('growi:app');
@@ -76,8 +74,6 @@ Object.assign(componentMappings, {
   'page-status-alert': <PageStatusAlert />,
   'save-page-controls': <SavePageControls />,
 
-  'profile-image-uploader': <ProfileImageUploader />,
-
   'user-created-list': <RecentCreated />,
   'user-draft-list': <MyDraftList />,
 });

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -9,11 +9,23 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
 
+import ImageCropModal from './ImageCropModal';
+
 class ProfileImageSettings extends React.Component {
 
   constructor(appContainer) {
     super();
 
+    this.state = {
+      show: false,
+      src: null,
+    };
+
+    this.imageRef = null;
+    this.onSelectFile = this.onSelectFile.bind(this);
+    this.hideModal = this.hideModal.bind(this);
+    this.cancelModal = this.cancelModal.bind(this);
+    this.onCropCompleted = this.onCropCompleted.bind(this);
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
@@ -35,8 +47,35 @@ class ProfileImageSettings extends React.Component {
     return `https://gravatar.com/avatar/${hash}`;
   }
 
+  onSelectFile(e) {
+    if (e.target.files && e.target.files.length > 0) {
+      const reader = new FileReader();
+      reader.addEventListener('load', () => this.setState({ src: reader.result }));
+      reader.readAsDataURL(e.target.files[0]);
+      this.setState({ show: true });
+    }
+  }
+
+  onCropCompleted(croppedImageUrl) {
+    this.props.personalContainer.setState({ croppedImageUrl });
+    this.hideModal();
+  }
+
+  showModal() {
+    this.setState({ show: true });
+  }
+
+  hideModal() {
+    this.setState({ show: false });
+  }
+
+  cancelModal() {
+    this.hideModal();
+  }
+
   render() {
     const { t, personalContainer } = this.props;
+    const { croppedImageUrl, isGravatarEnabled } = personalContainer.state;
 
     return (
       <React.Fragment>
@@ -49,7 +88,7 @@ class ProfileImageSettings extends React.Component {
                   id="radioGravatar"
                   form="formImageType"
                   name="imagetypeForm[isGravatarEnabled]"
-                  checked={personalContainer.state.isGravatarEnabled}
+                  checked={isGravatarEnabled}
                   onChange={() => { personalContainer.changeIsGravatarEnabled(true) }}
                 />
                 <label htmlFor="radioGravatar">
@@ -72,7 +111,7 @@ class ProfileImageSettings extends React.Component {
                   id="radioUploadPicture"
                   form="formImageType"
                   name="imagetypeForm[isGravatarEnabled]"
-                  checked={!personalContainer.state.isGravatarEnabled}
+                  checked={!isGravatarEnabled}
                   onChange={() => { personalContainer.changeIsGravatarEnabled(false) }}
                 />
                 <label htmlFor="radioUploadPicture">
@@ -80,16 +119,33 @@ class ProfileImageSettings extends React.Component {
                 </label>
               </div>
             </h4>
-            <div className="form-group">
-              <div id="pictureUploadFormMessage"></div>
+            <div className="row mb-3">
               <label className="col-sm-4 control-label">
                 { t('Current Image') }
               </label>
-              {/* TDOO GW-1198 uproad profile image */}
+              <div className="col-sm-8">
+                {croppedImageUrl && (<p><img src={croppedImageUrl} className="picture picture-lg img-circle" id="settingUserPicture" /></p>)}
+                <button type="button" className="btn btn-danger">{ t('Delete Image') }</button>
+              </div>
+            </div>
+            <div className="row">
+              <label className="col-sm-4 control-label">
+                {t('Upload new image')}
+              </label>
+              <div className="col-sm-8">
+                <input type="file" onChange={this.onSelectFile} name="profileImage" accept="image/*" />
+              </div>
             </div>
           </div>
         </div>
 
+        <ImageCropModal
+          show={this.state.show}
+          src={this.state.src}
+          onModalClose={this.cancelModal}
+          onCropCompleted={this.onCropCompleted}
+        />
+
         <div className="row my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="button" className="btn btn-primary" onClick={this.onClickSubmit} disabled={personalContainer.state.retrieveError != null}>

src/client/js/components/Me/ProfileImageUploader.jsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-import AppContainer from '../../services/AppContainer';
-import { createSubscribedElement } from '../UnstatedUtils';
-import ImageCropModal from './ImageCropModal';
-
-class ProfileImageUploader extends React.Component {
-
-  constructor(props) {
-    super();
-    this.state = {
-      show: false,
-      src: null,
-      croppedImageUrl: null,
-    };
-    this.imageRef = null;
-    this.onSelectFile = this.onSelectFile.bind(this);
-    this.hideModal = this.hideModal.bind(this);
-    this.cancelModal = this.cancelModal.bind(this);
-    this.onCropCompleted = this.onCropCompleted.bind(this);
-  }
-
-  onSelectFile(e) {
-    if (e.target.files && e.target.files.length > 0) {
-      const reader = new FileReader();
-      reader.addEventListener('load', () => this.setState({ src: reader.result }));
-      reader.readAsDataURL(e.target.files[0]);
-      this.setState({ show: true });
-    }
-  }
-
-  onCropCompleted(croppedImageUrl) {
-    this.setState({ croppedImageUrl });
-    this.hideModal();
-  }
-
-  showModal() {
-    this.setState({ show: true });
-  }
-
-  hideModal() {
-    this.setState({ show: false });
-  }
-
-  cancelModal() {
-    this.hideModal();
-  }
-
-  render() {
-    const { t } = this.props;
-    const { croppedImageUrl } = this.state;
-    return (
-      <div className="ProfileImageUploader">
-        <div className="form-group">
-          <label className="col-sm-4 control-label">
-            {t('Upload new image')}
-          </label>
-        </div>
-        <div className="col-sm-8">
-          {croppedImageUrl && (
-            <img src={croppedImageUrl} className="picture picture-lg img-circle" id="settingUserPicture" />
-          )}
-          <input type="file" onChange={this.onSelectFile} name="profileImage" accept="image/*" />
-          <ImageCropModal
-            show={this.state.show}
-            src={this.state.src}
-            onModalClose={this.cancelModal}
-            onCropCompleted={this.onCropCompleted}
-          />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const ProfileImageFormWrapper = (props) => {
-  return createSubscribedElement(ProfileImageUploader, props, [AppContainer]);
-};
-ProfileImageUploader.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-};
-export default withTranslation()(ProfileImageFormWrapper);

src/client/js/services/PersonalContainer.js

@@ -24,6 +24,7 @@ export default class PersonalContainer extends Container {
       isEmailPublished: false,
       lang: 'en-US',
       isGravatarEnabled: false,
+      croppedImageUrl: '',
       externalAccounts: [],
       isPasswordSet: false,
       apiToken: '',
@@ -45,7 +46,7 @@ export default class PersonalContainer extends Container {
     try {
       const response = await this.appContainer.apiv3.get('/personal-setting/');
       const { currentUser } = response.data;
-
+      const croppedImageUrl = this.getUploadedPictureSrc(currentUser);
       this.setState({
         name: currentUser.name,
         email: currentUser.email,
@@ -54,6 +55,7 @@ export default class PersonalContainer extends Container {
         isGravatarEnabled: currentUser.isGravatarEnabled,
         isPasswordSet: (currentUser.password != null),
         apiToken: currentUser.apiToken,
+        croppedImageUrl,
       });
     }
     catch (err) {
@@ -63,6 +65,20 @@ export default class PersonalContainer extends Container {
     }
   }
 
+  /**
+   * define a function for uploaded picture
+   */
+  getUploadedPictureSrc(user) {
+    if (user.image) {
+      return user.image;
+    }
+    if (user.imageAttachment != null) {
+      return user.imageAttachment.filePathProxied;
+    }
+
+    return '/images/icons/user.svg';
+  }
+
   /**
    * retrieve external accounts that linked me
    */