From 82f85adf9b0dec46e60cf46c47fd26f14ebf6c53 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/logistration/Logistration.jsx | 48 ++++++------------------- 5 files changed, 28 insertions(+), 88 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/logistration/Logistration.jsx b/src/logistration/Logistration.jsx index 971f146f9c..1ae0b09a4f 100644 --- a/src/logistration/Logistration.jsx +++ b/src/logistration/Logistration.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { connect, useDispatch, useSelector } 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 { @@ -31,11 +28,8 @@ import { backupRegistrationForm, setSimplifyRegExperimentData } from '../registe import { FIRST_STEP, SECOND_STEP } from '../register/data/optimizelyExperiment/helper'; 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(''); @@ -44,7 +38,10 @@ const Logistration = (props) => { const hideRegistrationLink = getConfig().SHOW_REGISTRATION_LINKS === false; const dispatch = useDispatch(); - const { simplifyRegExpVariation, simplifiedRegisterPageStep } = useSelector(state => state.register); + const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers); + const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders); + const simplifyRegExpVariation = useSelector(state => state.register.simplifyRegExpVariation); + const simplifiedRegisterPageStep = useSelector(state => state.register.simplifiedRegisterPageStep); useEffect(() => { const authService = getAuthService(); @@ -72,11 +69,11 @@ const Logistration = (props) => { const handleOnSelect = (tabKey) => { 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); }; @@ -184,35 +181,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;