create the isInvitationEmailSended state

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

@@ -7,10 +7,12 @@ import AdminUsersContainer from '../../../services/AdminUsersContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 const SendInvitationEmailButton = (props) => {
-  const { appContainer, user } = props;
+  const {
+    appContainer, user, isInvitationEmailSended, updateIsInvitationEmailSended,
+  } = props;
   const { t } = useTranslation();
 
-  const textColor = !user.isInvitationEmailSended ? 'text-danger' : '';
+  const textColor = !isInvitationEmailSended ? 'text-danger' : '';
 
   const onClickSendInvitationEmailButton = async() => {
     try {
@@ -19,6 +21,7 @@ const SendInvitationEmailButton = (props) => {
       if (failedToSendEmail == null) {
         const msg = `Email has been sent<br>・${user.email}`;
         toastSuccess(msg);
+        updateIsInvitationEmailSended();
       }
       else {
         const msg = { message: `email: ${failedToSendEmail.email}<br>reason: ${failedToSendEmail.reason}` };
@@ -33,8 +36,8 @@ const SendInvitationEmailButton = (props) => {
   return (
     <button className={`dropdown-item ${textColor}`} type="button" onClick={() => { onClickSendInvitationEmailButton() }}>
       <i className="icon-fw icon-envelope"></i>
-      {user.isInvitationEmailSended && (<>{t('admin:user_management.user_table.resend_invitation_email')}</>)}
-      {!user.isInvitationEmailSended && (<>{t('admin:user_management.user_table.send_invitation_email')}</>)}
+      {isInvitationEmailSended && (<>{t('admin:user_management.user_table.resend_invitation_email')}</>)}
+      {!isInvitationEmailSended && (<>{t('admin:user_management.user_table.send_invitation_email')}</>)}
     </button>
   );
 };
@@ -44,6 +47,8 @@ const SendInvitationEmailButtonWrapper = withUnstatedContainers(SendInvitationEm
 SendInvitationEmailButton.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   user: PropTypes.object.isRequired,
+  isInvitationEmailSended: PropTypes.bool.isRequired,
+  updateIsInvitationEmailSended: PropTypes.func.isRequired,
 };
 
 export default SendInvitationEmailButtonWrapper;

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

@@ -22,16 +22,21 @@ class UserMenu extends React.Component {
     super(props);
 
     this.state = {
-
+      isInvitationEmailSended: this.props.user.isInvitationEmailSended,
     };
 
     this.onPasswordResetClicked = this.onPasswordResetClicked.bind(this);
+    this.updateIsInvitationEmailSended = this.updateIsInvitationEmailSended.bind(this);
   }
 
   onPasswordResetClicked() {
     this.props.adminUsersContainer.showPasswordResetModal(this.props.user);
   }
 
+  updateIsInvitationEmailSended() {
+    this.setState({ isInvitationEmailSended: true });
+  }
+
   renderEditMenu() {
     const { t } = this.props;
 
@@ -50,6 +55,7 @@ class UserMenu extends React.Component {
 
   renderStatusMenu() {
     const { t, user } = this.props;
+    const { isInvitationEmailSended } = this.state;
 
     return (
       <Fragment>
@@ -58,7 +64,13 @@ class UserMenu extends React.Component {
         <li>
           {(user.status === 1 || user.status === 3) && <StatusActivateButton user={user} />}
           {user.status === 2 && <StatusSuspendedButton user={user} />}
-          {user.status === 5 && <SendInvitationEmailButton user={user} />}
+          {user.status === 5 && (
+          <SendInvitationEmailButton
+            user={user}
+            isInvitationEmailSended={isInvitationEmailSended}
+            updateIsInvitationEmailSended={this.updateIsInvitationEmailSended}
+          />
+          )}
           {(user.status === 1 || user.status === 3 || user.status === 5) && <UserRemoveButton user={user} />}
         </li>
       </Fragment>
@@ -82,12 +94,13 @@ class UserMenu extends React.Component {
 
   render() {
     const { user } = this.props;
+    const { isInvitationEmailSended } = this.state;
 
     return (
       <UncontrolledDropdown id="userMenu" size="sm">
         <DropdownToggle caret color="secondary" outline>
           <i className="icon-settings" />
-          {(user.status === 5 && !user.isInvitationEmailSended) && <i className="fa fa-circle text-danger grw-usermenu-notification-icon" />}
+          {(user.status === 5 && !isInvitationEmailSended) && <i className="fa fa-circle text-danger grw-usermenu-notification-icon" />}
         </DropdownToggle>
         <DropdownMenu positionFixed>
           {this.renderEditMenu()}