From be5bd1e2690ff3d9ba2af334ee8564af74ccf4c5 Mon Sep 17 00:00:00 2001 From: Syed Sajjad Hussain Shah <52817156+syedsajjadkazmii@users.noreply.github.com> Date: Fri, 15 Mar 2024 10:56:02 +0500 Subject: [PATCH] fix: fix useSelector usage in logistration and login component (#1203) --- src/common-components/data/reducers.js | 2 ++ src/common-components/data/selectors.js | 28 --------------- src/common-components/index.jsx | 2 +- src/login/LoginPage.jsx | 36 ++++++++----------- src/login/tests/LoginPage.test.jsx | 3 +- src/logistration/Logistration.jsx | 47 ++++++------------------- src/logistration/Logistration.test.jsx | 3 +- 7 files changed, 31 insertions(+), 90 deletions(-) delete mode 100644 src/common-components/data/selectors.js diff --git a/src/common-components/data/reducers.js b/src/common-components/data/reducers.js index c2150cda80..08ee0bd734 100644 --- a/src/common-components/data/reducers.js +++ b/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: { diff --git a/src/common-components/data/selectors.js b/src/common-components/data/selectors.js deleted file mode 100644 index 2faa24ce07..0000000000 --- a/src/common-components/data/selectors.js +++ /dev/null @@ -1,28 +0,0 @@ -import { createSelector } from 'reselect'; - -export const storeName = 'commonComponents'; - -export const commonComponentsSelector = state => ({ ...state[storeName] }); - -export const thirdPartyAuthContextSelector = createSelector( - commonComponentsSelector, - commonComponents => commonComponents.thirdPartyAuthContext, -); - -export const fieldDescriptionSelector = createSelector( - commonComponentsSelector, - commonComponents => commonComponents.fieldDescriptions, -); - -export const optionalFieldsSelector = createSelector( - commonComponentsSelector, - commonComponents => commonComponents.optionalFields, -); - -export const tpaProvidersSelector = createSelector( - commonComponentsSelector, - commonComponents => ({ - providers: commonComponents.thirdPartyAuthContext.providers, - secondaryProviders: commonComponents.thirdPartyAuthContext.secondaryProviders, - }), -); diff --git a/src/common-components/index.jsx b/src/common-components/index.jsx index 1334873c10..f3f16198e3 100644 --- a/src/common-components/index.jsx +++ b/src/common-components/index.jsx @@ -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'; diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx index b44051432a..c523da957c 100644 --- a/src/login/LoginPage.jsx +++ b/src/login/LoginPage.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. */ diff --git a/src/login/tests/LoginPage.test.jsx b/src/login/tests/LoginPage.test.jsx index c6ec00b138..c12aeb131f 100644 --- a/src/login/tests/LoginPage.test.jsx +++ b/src/login/tests/LoginPage.test.jsx @@ -39,15 +39,16 @@ describe('LoginPage', () => { ); + const loginFormData = { formFields: { emailOrUsername: '', password: '', }, - errors: { emailOrUsername: '', password: '', }, }; + const initialState = { login: { loginFormData, diff --git a/src/logistration/Logistration.jsx b/src/logistration/Logistration.jsx index 9451aa2745..032a37cc61 100644 --- a/src/logistration/Logistration.jsx +++ b/src/logistration/Logistration.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,11 +27,8 @@ 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(''); @@ -42,6 +36,10 @@ const Logistration = (props) => { 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; diff --git a/src/logistration/Logistration.test.jsx b/src/logistration/Logistration.test.jsx index a344aea81f..bfbf1c1ad3 100644 --- a/src/logistration/Logistration.test.jsx +++ b/src/logistration/Logistration.test.jsx @@ -42,11 +42,11 @@ describe('Logistration', () => { ); + const loginFormData = { formFields: { emailOrUsername: '', password: '', }, - errors: { emailOrUsername: '', password: '', }, @@ -82,7 +82,6 @@ describe('Logistration', () => { login: { loginFormData, loginResult: { success: false, redirectUrl: '' }, - }, };