Introduce Switch And Use appContainer.me

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -40,9 +40,8 @@ class UserMenu extends React.Component {
 
 
   render() {
-    const { t, user, me } = this.props;
-
-    const userEmail = user.email;
+    const { t, user } = this.props;
+    const me = this.props.appContainer.me;
 
     let contentOfStatus;
     let adminMenu;
@@ -56,7 +55,7 @@ class UserMenu extends React.Component {
     }
     if (user.status === 2) {
       contentOfStatus = (
-        user.username !== me.username
+        user.username !== me
           ? (
             <a onClick={this.susupendUser}>
               <i className="icon-fw icon-ban"></i>{ t('user_management.deactivate_account') }
@@ -95,7 +94,7 @@ class UserMenu extends React.Component {
 
     if (user.admin === true && user.status === 2) {
       adminMenu = (
-        user.username !== me.username
+        user.username !== me
           ? (
             <a onClick={this.removeFromAdmin}>
               <i className="icon-fw icon-user-unfollow mb-2"></i> { t('user_management.remove_admin_access') }
@@ -161,7 +160,7 @@ class UserMenu extends React.Component {
                   <span className="text-danger">{ t('user_management.send_new_password') }</span>
                 </p>
                 <p>
-                  { t('user_management.target_user') }: <code>{ userEmail }</code>
+                  { t('user_management.target_user') }: <code>{ user.email }</code>
                 </p>
                 <button type="submit" value="" className="btn btn-primary">
                   { t('user_management.reset_password')}
@@ -209,7 +208,6 @@ UserMenu.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   user: PropTypes.array,
-  me: PropTypes.array,
 };
 
 export default withTranslation()(UserMenuWrapper);

src/client/js/components/Admin/Users/UserTable.jsx

@@ -14,59 +14,45 @@ class UserTable extends React.Component {
     super(props);
 
     this.state = {
-      me: [],
-    };
-  }
-
-  componentDidMount() {
-    const jsonData = document.getElementById('admin-user-page');
-    const me = JSON.parse(jsonData.getAttribute('user'));
 
-    this.setState({
-      me,
-    });
+    };
   }
 
 
   render() {
     const { t } = this.props;
     let userStatusLabel;
+    let additionalClassName;
+    let text;
 
     this.props.users.forEach((user) => {
-      if (user.status === 1) {
-        userStatusLabel = (
-          <span className="label label-info">
-            Approval Pending
-          </span>
-        );
-      }
-      if (user.status === 2) {
-        userStatusLabel = (
-          <span className="label label-success">
-            Active
-          </span>
-        );
-      }
-      if (user.status === 3) {
-        userStatusLabel = (
-          <span className="label label-warning">
-            Suspended
-          </span>
-        );
-      }
-      if (user.status === 4) {
-        userStatusLabel = (
-          <span className="label label-danger">
-            Deleted
-          </span>
-        );
-      }
-      if (user.status === 5) {
-        userStatusLabel = (
-          <span className="label label-info">
-            Invited
-          </span>
-        );
+      userStatusLabel = (
+        <span className={`label ${additionalClassName}`}>
+          {text}
+        </span>
+      );
+
+      switch (user.status) {
+        case 1:
+          additionalClassName = 'label-info';
+          text = 'Approval Pending';
+          break;
+        case 2:
+          additionalClassName = 'label-success';
+          text = 'Active';
+          break;
+        case 3:
+          additionalClassName = 'label-warning';
+          text = 'Suspended';
+          break;
+        case 4:
+          additionalClassName = 'label-danger';
+          text = 'Deleted';
+          break;
+        case 5:
+          additionalClassName = 'label-info';
+          text = 'Invited';
+          break;
       }
     });
 
@@ -107,7 +93,7 @@ class UserTable extends React.Component {
                     { user.lastLoginAt && <span>{dateFnsFormat(new Date(user.lastLoginAt), 'YYYY-MM-DD HH:mm')}</span> }
                   </td>
                   <td>
-                    <UserMenu user={user} me={this.state.me} />
+                    <UserMenu user={user} />
                   </td>
                 </tr>
               );