Skip to content

Commit

Permalink
fix: fix useSelector usage in logistration and login component (#1203)
Browse files Browse the repository at this point in the history
  • Loading branch information
syedsajjadkazmii committed Mar 15, 2024
1 parent 899ad4e commit be5bd1e
Show file tree
Hide file tree
Showing 7 changed files with 31 additions and 90 deletions.
2 changes: 2 additions & 0 deletions src/common-components/data/reducers.js
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
28 changes: 0 additions & 28 deletions src/common-components/data/selectors.js

This file was deleted.

2 changes: 1 addition & 1 deletion src/common-components/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
36 changes: 15 additions & 21 deletions src/login/LoginPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -92,6 +85,7 @@ const LoginPage = (props) => {
}
dispatch(getTPADataFromBackend(payload));
}, [dispatch, queryParams, tpaHint]);

/**
* Backup the login form in redux when login page is toggled.
*/
Expand Down
3 changes: 2 additions & 1 deletion src/login/tests/LoginPage.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,16 @@ describe('LoginPage', () => {
</MemoryRouter>
</IntlProvider>
);

const loginFormData = {
formFields: {
emailOrUsername: '', password: '',
},

errors: {
emailOrUsername: '', password: '',
},
};

const initialState = {
login: {
loginFormData,
Expand Down
47 changes: 10 additions & 37 deletions src/logistration/Logistration.jsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {
Expand All @@ -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) {
Expand Down Expand Up @@ -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);
};
Expand Down Expand Up @@ -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;
3 changes: 1 addition & 2 deletions src/logistration/Logistration.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@ describe('Logistration', () => {
</MemoryRouter>
</IntlProvider>
);

const loginFormData = {
formFields: {
emailOrUsername: '', password: '',
},

errors: {
emailOrUsername: '', password: '',
},
Expand Down Expand Up @@ -82,7 +82,6 @@ describe('Logistration', () => {
login: {
loginFormData,
loginResult: { success: false, redirectUrl: '' },

},
};

Expand Down

0 comments on commit be5bd1e

Please sign in to comment.