LEARNER-5427 Ensure StudentAccountDeletion.jsx checks socialAccountLinks object because reunning .reduce on it

lms/static/js/student_account/components/StudentAccountDeletion.jsx

@@ -1,6 +1,7 @@
 /* globals gettext */
 /* eslint-disable react/no-danger, import/prefer-default-export */
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Button, Icon, StatusAlert } from '@edx/paragon/static';
 import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
 import StudentAccountDeletionModal from './StudentAccountDeletionModal';
@@ -12,11 +13,20 @@ export class StudentAccountDeletion extends React.Component {
     this.loadDeletionModal = this.loadDeletionModal.bind(this);
     this.state = {
       deletionModalOpen: false,
-      socialAuthConnected: props.socialAccountLinks.providers.reduce((acc, value) => acc || value.connected, false),
       isActive: props.isActive,
+      socialAuthConnected: this.getConnectedSocialAuth(),
     };
   }
 
+  getConnectedSocialAuth() {
+    const { socialAccountLinks } = this.props;
+    if (socialAccountLinks && socialAccountLinks.providers) {
+      return socialAccountLinks.providers.reduce((acc, value) => acc || value.connected, false);
+    }
+
+    return false;
+  }
+
   closeDeletionModal() {
     this.setState({ deletionModalOpen: false });
     this.modalTrigger.focus();
@@ -27,7 +37,7 @@ export class StudentAccountDeletion extends React.Component {
   }
 
   render() {
-    const { deletionModalOpen, socialAuthConnected, isActive } = this.state
+    const { deletionModalOpen, socialAuthConnected, isActive } = this.state;
     const loseAccessText = StringUtils.interpolate(
       gettext('You may also lose access to verified certificates and other program credentials like MicroMasters certificates. If you want to make a copy of these for your records before proceeding with deletion, follow the instructions for {htmlStart}printing or downloading a certificate{htmlEnd}.'),
       {
@@ -43,7 +53,7 @@ export class StudentAccountDeletion extends React.Component {
       {
         htmlStart: '<a href="https://support.edx.org/hc/en-us/articles/207206067" target="_blank">',
         htmlEnd: '</a>',
-      }
+      },
     );
 
     const activationError = StringUtils.interpolate(
@@ -51,7 +61,7 @@ export class StudentAccountDeletion extends React.Component {
       {
         htmlStart: '<a href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-activate-my-account-" target="_blank">',
         htmlEnd: '</a>',
-      }
+      },
     );
 
     return (
@@ -72,24 +82,35 @@ export class StudentAccountDeletion extends React.Component {
           inputRef={(input) => { this.modalTrigger = input; }}
           onClick={this.loadDeletionModal}
         />
-        {showError && <StatusAlert
-                  dialog={(
-                    <div className="modal-alert">
-                      <div className="icon-wrapper">
-                        <Icon id="delete-confirmation-body-error-icon" className={['fa', 'fa-exclamation-circle']} />
-                      </div>
-                      <div className="alert-content">
-                        {socialAuthConnected && isActive && <p dangerouslySetInnerHTML={{ __html: socialAuthError }}/> }
-                        {!isActive && <p dangerouslySetInnerHTML={{ __html:activationError }}/> }
-                      </div>
-                    </div>
-                  )}
-                  alertType="danger"
-                  dismissible={false}
-                  open
-              />}
+        {showError &&
+          <StatusAlert
+            dialog={(
+              <div className="modal-alert">
+                <div className="icon-wrapper">
+                  <Icon id="delete-confirmation-body-error-icon" className={['fa', 'fa-exclamation-circle']} />
+                </div>
+                <div className="alert-content">
+                  {socialAuthConnected && isActive &&
+                    <p dangerouslySetInnerHTML={{ __html: socialAuthError }} />
+                  }
+                  {!isActive && <p dangerouslySetInnerHTML={{ __html: activationError }} /> }
+                </div>
+              </div>
+            )}
+            alertType="danger"
+            dismissible={false}
+            open
+          />
+        }
         {deletionModalOpen && <StudentAccountDeletionModal onClose={this.closeDeletionModal} />}
       </div>
     );
   }
 }
+
+StudentAccountDeletion.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  socialAccountLinks: PropTypes.shape({
+    providers: PropTypes.arrayOf(PropTypes.object),
+  }).isRequired,
+};