Web: People: refactoring

products/ASC.People/Client/src/components/dialogs/BackupCodesDialog/index.js

@@ -52,17 +52,9 @@ class BackupCodesDialogComponent extends React.Component {
   render() {
     //console.log("Render BackupCodesDialog");
     const { backupCodes } = this.state;
-    const { t, visible, onClose } = this.props;
+    const { t, visible, onClose, backupCodesCount } = this.props;
     let count = 0;
 
-    if (backupCodes.length > 0) {
-      backupCodes.map((item) => {
-        if (!item.isUsed) {
-          count++;
-        }
-      });
-    }
-
     return (
       <ModalDialogContainer visible={visible} onClose={onClose}>
         <ModalDialog.Header>{t("BackupCodesTitle")}</ModalDialog.Header>
@@ -77,10 +69,10 @@ class BackupCodesDialogComponent extends React.Component {
               t={t}
               i18nKey="CodesCounter"
               ns="BackupCodesDialog"
-              count={count}
+              count={backupCodesCount}
             >
               <Text className="text-dialog">
-                <strong>{{ count }} codes:</strong>
+                <strong>{{ count: backupCodesCount }} codes:</strong>
               </Text>
             </Trans>
             <Text className="text-dialog" isBold={true}>
@@ -128,6 +120,7 @@ BackupCodesDialog.propTypes = {
   onClose: PropTypes.func.isRequired,
   getBackupCodes: PropTypes.func.isRequired,
   getNewBackupCodes: PropTypes.func.isRequired,
+  backupCodesCount: PropTypes.number.isRequired,
 };
 
 export default BackupCodesDialog;

products/ASC.People/Client/src/pages/Profile/Section/Body/index.js

@@ -331,12 +331,12 @@ class SectionBodyContent extends React.PureComponent {
     const infoContacts = contacts && createContacts(contacts.contact);
     //const isSelf = isMe(viewer, profile.userName);
 
-    let count = 0;
+    let backupCodesCount = 0;
 
     if (backupCodes && backupCodes.length > 0) {
       backupCodes.map((item) => {
         if (!item.isUsed) {
-          count++;
+          backupCodesCount++;
         }
       });
     }
@@ -425,9 +425,11 @@ class SectionBodyContent extends React.PureComponent {
                   t={t}
                   i18nKey="CountCodesRemaining"
                   ns="Profile"
-                  count={count}
+                  count={backupCodesCount}
                 >
-                  <Text color="#A3A9AE">({{ count }} codes remaining)</Text>
+                  <Text color="#A3A9AE">
+                    ({{ count: backupCodesCount }} codes remaining)
+                  </Text>
                 </Trans>
               </LinkActionWrapper>
             </ToggleContent>
@@ -468,6 +470,7 @@ class SectionBodyContent extends React.PureComponent {
             onClose={this.toggleBackupCodesDialogVisible}
             getBackupCodes={this.props.getBackupCodes}
             getNewBackupCodes={this.props.getNewBackupCodes}
+            backupCodesCount={backupCodesCount}
           />
         )}
       </ProfileWrapper>