updateProfileImage

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import md5 from 'md5';
 
+import { toastSuccess, toastError } from '../../util/apiNotification';
 import { createSubscribedElement } from '../UnstatedUtils';
 
 import AppContainer from '../../services/AppContainer';
@@ -12,56 +14,84 @@ class ProfileImageSettings extends React.Component {
   constructor(appContainer) {
     super();
 
+    this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  async onClickSubmit() {
+    const { t, personalContainer } = this.props;
+
+    try {
+      await personalContainer.updateProfileImage();
+      toastSuccess(t('toaster.update_successed', { target: t('Set Profile Image') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }
+
+  generateGravatarSrc() {
+    const email = this.props.personalContainer.state.email || '';
+    const hash = md5(email.trim().toLowerCase());
+    return `https://gravatar.com/avatar/${hash}`;
+  }
 
   render() {
     const { t, personalContainer } = this.props;
 
     return (
-      <div className="row">
-        <div className="col-md-2 col-sm-offset-1 col-sm-4">
-          <h4>
-            <div className="radio radio-primary">
-              <input
-                type="radio"
-                id="radioGravatar"
-                form="formImageType"
-                name="imagetypeForm[isGravatarEnabled]"
-                checked={personalContainer.state.isGravatarEnabled}
-                onChange={() => { personalContainer.changeIsGravatarEnabled(true) }}
-              />
-              <label htmlFor="radioGravatar">
-                <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravatar
-              </label>
-              <a href="https://gravatar.com/">
-                <small><i className="icon-arrow-right-circle" aria-hidden="true"></i></small>
-              </a>
-            </div>
-          </h4>
-
-          {/* TODO set gravator src */}
-          <img src="" width="64" />
+      <React.Fragment>
+        <div className="row">
+          <div className="col-md-2 col-sm-offset-1 col-sm-4">
+            <h4>
+              <div className="radio radio-primary">
+                <input
+                  type="radio"
+                  id="radioGravatar"
+                  form="formImageType"
+                  name="imagetypeForm[isGravatarEnabled]"
+                  checked={personalContainer.state.isGravatarEnabled}
+                  onChange={() => { personalContainer.changeIsGravatarEnabled(true) }}
+                />
+                <label htmlFor="radioGravatar">
+                  <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravatar
+                </label>
+                <a href="https://gravatar.com/">
+                  <small><i className="icon-arrow-right-circle" aria-hidden="true"></i></small>
+                </a>
+              </div>
+            </h4>
+
+            <img src={this.generateGravatarSrc()} width="64" />
+          </div>
+
+          <div className="col-md-4 col-sm-7">
+            <h4>
+              <div className="radio radio-primary">
+                <input
+                  type="radio"
+                  id="radioUploadPicture"
+                  form="formImageType"
+                  name="imagetypeForm[isGravatarEnabled]"
+                  checked={!personalContainer.state.isGravatarEnabled}
+                  onChange={() => { personalContainer.changeIsGravatarEnabled(false) }}
+                />
+                <label htmlFor="radioUploadPicture">
+                  { t('Upload Image') }
+                </label>
+              </div>
+            </h4>
+          </div>
         </div>
 
-        <div className="col-md-4 col-sm-7">
-          <h4>
-            <div className="radio radio-primary">
-              <input
-                type="radio"
-                id="radioUploadPicture"
-                form="formImageType"
-                name="imagetypeForm[isGravatarEnabled]"
-                checked={!personalContainer.state.isGravatarEnabled}
-                onChange={() => { personalContainer.changeIsGravatarEnabled(false) }}
-              />
-              <label htmlFor="radioUploadPicture">
-                { t('Upload Image') }
-              </label>
-            </div>
-          </h4>
+        <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}>
+              {t('Update')}
+            </button>
+          </div>
         </div>
-      </div>
+
+      </React.Fragment>
     );
   }
 

src/client/js/services/PersonalContainer.js

@@ -144,4 +144,12 @@ export default class PersonalContainer extends Container {
     }
   }
 
+  /**
+   * Update profile image
+   * @memberOf PersonalContainer
+   */
+  async updateProfileImage() {
+    // TODO create apiV3
+  }
+
 }