fix: fix useSelector usage in logistration and login component (#1203)

Author: syedsajjadkazmii

src/common-components/data/reducers.js

@@ -1,6 +1,8 @@
 import { THIRD_PARTY_AUTH_CONTEXT, THIRD_PARTY_AUTH_CONTEXT_CLEAR_ERROR_MSG } from './actions';
 import { COMPLETE_STATE, FAILURE_STATE, PENDING_STATE } from '../../data/constants';
 
+export const storeName = 'commonComponents';
+
 export const defaultState = {
   fieldDescriptions: {},
   optionalFields: {

src/common-components/data/selectors.js

@@ -9,7 +9,7 @@ export { default as InstitutionLogistration } from './InstitutionLogistration';
 export { RenderInstitutionButton } from './InstitutionLogistration';
 export { default as reducer } from './data/reducers';
 export { default as saga } from './data/sagas';
-export { storeName } from './data/selectors';
+export { storeName } from './data/reducers';
 export { default as FormGroup } from './FormGroup';
 export { default as PasswordField } from './PasswordField';
 export { default as Zendesk } from './Zendesk';

src/common-components/index.jsx

@@ -46,28 +46,21 @@ import ResetPasswordSuccess from '../reset-password/ResetPasswordSuccess';
 const LoginPage = (props) => {
   const dispatch = useDispatch();
   const { formatMessage } = useIntl();
+  const backedUpFormData = useSelector(state => state.login.loginFormData);
+  const loginErrorCode = useSelector(state => state.login.loginErrorCode);
+  const loginErrorContext = useSelector(state => state.login.loginErrorContext);
+  const loginResult = useSelector(state => state.login.loginResult);
+  const shouldBackupState = useSelector(state => state.login.shouldBackupState);
+  const showResetPasswordSuccessBanner = useSelector(state => state.login.showResetPasswordSuccessBanner);
+  const submitState = useSelector(state => state.login.submitState);
 
-  const {
-    loginFormData: backedUpFormData,
-    loginErrorCode,
-    loginErrorContext,
-    loginResult,
-    shouldBackupState,
-    showResetPasswordSuccessBanner,
-    submitState,
-  } = useSelector(state => state.login);
-
-  const {
-    thirdPartyAuthApiStatus,
-    thirdPartyAuthContext: {
-      providers,
-      currentProvider,
-      secondaryProviders,
-      finishAuthUrl,
-      platformName,
-      errorMessage: thirdPartyErrorMessage,
-    },
-  } = useSelector(state => state.commonComponents);
+  const thirdPartyAuthApiStatus = useSelector(state => state.commonComponents.thirdPartyAuthApiStatus);
+  const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
+  const currentProvider = useSelector(state => state.commonComponents.thirdPartyAuthContext.currentProvider);
+  const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
+  const finishAuthUrl = useSelector(state => state.commonComponents.thirdPartyAuthContext.finishAuthUrl);
+  const platformName = useSelector(state => state.commonComponents.thirdPartyAuthContext.platformName);
+  const thirdPartyErrorMessage = useSelector(state => state.commonComponents.thirdPartyAuthContext.errorMessage);
 
   const {
     institutionLogin,
@@ -92,6 +85,7 @@ const LoginPage = (props) => {
     }
     dispatch(getTPADataFromBackend(payload));
   }, [dispatch, queryParams, tpaHint]);
+
   /**
    * Backup the login form in redux when login page is toggled.
    */

src/login/LoginPage.jsx

@@ -39,15 +39,16 @@ describe('LoginPage', () => {
       </MemoryRouter>
     </IntlProvider>
   );
+
   const loginFormData = {
     formFields: {
       emailOrUsername: '', password: '',
     },
-
     errors: {
       emailOrUsername: '', password: '',
     },
   };
+
   const initialState = {
     login: {
       loginFormData,

src/login/tests/LoginPage.test.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -16,9 +16,6 @@ import { Navigate, useNavigate } from 'react-router-dom';
 
 import BaseContainer from '../base-container';
 import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
-import {
-  tpaProvidersSelector,
-} from '../common-components/data/selectors';
 import messages from '../common-components/messages';
 import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
 import {
@@ -30,18 +27,19 @@ import { RegistrationPage } from '../register';
 import { backupRegistrationForm } from '../register/data/actions';
 
 const Logistration = (props) => {
-  const { selectedPage, tpaProviders } = props;
+  const { selectedPage } = props;
   const tpaHint = getTpaHint();
-  const {
-    providers, secondaryProviders,
-  } = tpaProviders;
   const { formatMessage } = useIntl();
   const [institutionLogin, setInstitutionLogin] = useState(false);
   const [key, setKey] = useState('');
   const navigate = useNavigate();
   const disablePublicAccountCreation = getConfig().ALLOW_PUBLIC_ACCOUNT_CREATION === false;
   const hideRegistrationLink = getConfig().SHOW_REGISTRATION_LINKS === false;
 
+  const dispatch = useDispatch();
+  const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
+  const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
+
   useEffect(() => {
     const authService = getAuthService();
     if (authService) {
@@ -71,11 +69,11 @@ const Logistration = (props) => {
       return;
     }
     sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
-    props.clearThirdPartyAuthContextErrorMessage();
+    dispatch(clearThirdPartyAuthContextErrorMessage());
     if (tabKey === LOGIN_PAGE) {
-      props.backupRegistrationForm();
+      dispatch(backupRegistrationForm());
     } else if (tabKey === REGISTER_PAGE) {
-      props.backupLoginForm();
+      dispatch(backupLoginForm());
     }
     setKey(tabKey);
   };
@@ -156,35 +154,10 @@ const Logistration = (props) => {
 
 Logistration.propTypes = {
   selectedPage: PropTypes.string,
-  backupLoginForm: PropTypes.func.isRequired,
-  backupRegistrationForm: PropTypes.func.isRequired,
-  clearThirdPartyAuthContextErrorMessage: PropTypes.func.isRequired,
-  tpaProviders: PropTypes.shape({
-    providers: PropTypes.arrayOf(PropTypes.shape({})),
-    secondaryProviders: PropTypes.arrayOf(PropTypes.shape({})),
-  }),
-};
-
-Logistration.defaultProps = {
-  tpaProviders: {
-    providers: [],
-    secondaryProviders: [],
-  },
 };
 
 Logistration.defaultProps = {
   selectedPage: REGISTER_PAGE,
 };
 
-const mapStateToProps = state => ({
-  tpaProviders: tpaProvidersSelector(state),
-});
-
-export default connect(
-  mapStateToProps,
-  {
-    backupLoginForm,
-    backupRegistrationForm,
-    clearThirdPartyAuthContextErrorMessage,
-  },
-)(Logistration);
+export default Logistration;

src/logistration/Logistration.jsx

@@ -42,11 +42,11 @@ describe('Logistration', () => {
       </MemoryRouter>
     </IntlProvider>
   );
+
   const loginFormData = {
     formFields: {
       emailOrUsername: '', password: '',
     },
-
     errors: {
       emailOrUsername: '', password: '',
     },
@@ -82,7 +82,6 @@ describe('Logistration', () => {
     login: {
       loginFormData,
       loginResult: { success: false, redirectUrl: '' },
-
     },
   };