adjust

src/client/js/components/ProfileImageForm.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -7,20 +7,40 @@ import { createSubscribedElement } from './UnstatedUtils';
 
 class ProfileImageForm extends React.Component {
 
+  constructor(props) {
+    super(props);
+    const { appContainer } = this.props;
+    // const config = appContainer.getConfig();
+    const user = appContainer.findUser(appContainer.me);
+
+    this.state = {
+      isGravatarEnabled: user.isGravatarEnabled,
+    };
+  }
+
   render() {
+
     const t = this.props.t;
 
     return (
-      <div>
+      <Fragment>
         <div className="form-group 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]" value="true" />
+              <input
+                type="radio"
+                id="radioGravatar"
+                form="formImageType"
+                name="imagetypeForm[isGravatarEnabled]"
+                value={this.state.isGravatarEnabled}
+              />
               <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>
+                <small>
+                  <i className="icon-arrow-right-circle" aria-hidden="true"></i>
+                </small>
               </a>
             </div>
           </h4>
@@ -31,30 +51,26 @@ class ProfileImageForm extends React.Component {
         <div className="form-group col-md-4 col-sm-7">
           <h4>
             <div className="radio radio-primary">
-              <input type="radio" id="radioUploadPicture" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="false" />
-              <label htmlFor="radioUploadPicture">
-                { t('Upload Image') }
-              </label>
+              <input type="radio" id="radioUploadPicture" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value={!this.state.isGravatarEnabled} />
+              <label htmlFor="radioUploadPicture">{t('Upload Image')}</label>
             </div>
           </h4>
           <div className="form-group">
             <div id="pictureUploadFormMessage"></div>
             <label htmlFor="" className="col-sm-4 control-label">
-              { t('Current Image') }
+              {t('Current Image')}
             </label>
             <div className="col-sm-8">
               <p>
-                <img src="{{ user|uploadedpicture }}" className="picture picture-lg img-circle" id="settingUserPicture" /><br />
+                <img src="{{ user|uploadedpicture }}" className="picture picture-lg img-circle" id="settingUserPicture" />
+                <br />
               </p>
               <p>
-                <form
-                  id="remove-attachment"
-                  action="/_api/attachments.removeProfileImage"
-                  method="post"
-                  className="form-horizontal"
-                >
+                <form id="remove-attachment" action="/_api/attachments.removeProfileImage" method="post" className="form-horizontal">
                   <input type="hidden" name="_csrf" value="{{ csrf() }}" />
-                  <button type="submit" className="btn btn-danger">{ t('Delete Image') }</button>
+                  <button type="submit" className="btn btn-danger">
+                    {t('Delete Image')}
+                  </button>
                 </form>
               </p>
             </div>
@@ -62,7 +78,7 @@ class ProfileImageForm extends React.Component {
 
           <div className="form-group">
             <label htmlFor="" className="col-sm-4 control-label">
-              { t('Upload new image') }
+              {t('Upload new image')}
             </label>
             <div className="col-sm-8">
               {/* {% if fileUploadService.getIsUploadable() %}
@@ -74,19 +90,20 @@ class ProfileImageForm extends React.Component {
               </form>
               {% else %} */}
               {/* * { t('page_me.form_help.profile_image1') }<br>
-              * { t('page_me.form_help.profile_image2') }<br> */}
+               * { t('page_me.form_help.profile_image2') }<br> */}
               {/* {% endif %} */}
             </div>
           </div>
-
         </div>
 
         <div className="form-group">
           <div className="col-sm-offset-4 col-sm-6">
-            <button type="submit" form="formImageType" className="btn btn-primary">{ t('Update') }</button>
+            <button type="submit" form="formImageType" className="btn btn-primary">
+              {t('Update')}
+            </button>
           </div>
         </div>
-      </div>
+      </Fragment>
     );
   }