refactor: optimize code

src/common-components/data/actions.js

@@ -17,10 +17,10 @@ export const getThirdPartyAuthContextSuccess = (
   fieldDescriptions,
   optionalFields,
   thirdPartyAuthContext,
-  countries) => ({
+  countriesCodesList) => ({
   type: THIRD_PARTY_AUTH_CONTEXT.SUCCESS,
   payload: {
-    fieldDescriptions, optionalFields, thirdPartyAuthContext, countries,
+    fieldDescriptions, optionalFields, thirdPartyAuthContext, countriesCodesList,
   },
 });
 

src/common-components/data/reducers.js

@@ -35,7 +35,7 @@ const reducer = (state = defaultState, action = {}) => {
         optionalFields: action.payload.optionalFields,
         thirdPartyAuthContext: action.payload.thirdPartyAuthContext,
         thirdPartyAuthApiStatus: COMPLETE_STATE,
-        countries: action.payload.countries,
+        countriesCodesList: action.payload.countriesCodesList,
       };
     }
     case THIRD_PARTY_AUTH_CONTEXT.FAILURE:

src/common-components/data/sagas.js

@@ -21,7 +21,7 @@ export function* fetchThirdPartyAuthContext(action) {
     const {
       fieldDescriptions, optionalFields, thirdPartyAuthContext,
     } = yield call(getThirdPartyAuthContext, action.payload.urlParams);
-    const countries = (yield call(getCountryList)) || [];
+    const countriesCodesList = (yield call(getCountryList)) || [];
 
     yield put(setCountryFromThirdPartyAuthContext(thirdPartyAuthContext.countryCode));
     // hard code country field, level of education and gender fields
@@ -30,10 +30,15 @@ export function* fetchThirdPartyAuthContext(action) {
         registerFields,
         progressiveProfilingFields,
         thirdPartyAuthContext,
-        countries,
+        countriesCodesList,
       ));
     } else {
-      yield put(getThirdPartyAuthContextSuccess(fieldDescriptions, optionalFields, thirdPartyAuthContext, countries));
+      yield put(getThirdPartyAuthContextSuccess(
+        fieldDescriptions,
+        optionalFields,
+        thirdPartyAuthContext,
+        countriesCodesList,
+      ));
     }
   } catch (e) {
     yield put(getThirdPartyAuthContextFailure());

src/common-components/data/service.js

@@ -30,7 +30,7 @@ export async function getThirdPartyAuthContext(urlParams) {
 function extractCountryList(data) {
   return data?.fields
     .find(({ name }) => name === FIELD_LABELS.COUNTRY)
-    ?.options?.map(({ value, name }) => ({ code: value, name })) || [];
+    ?.options?.map(({ value }) => (value)) || [];
 }
 
 export async function getCountryList() {

src/common-components/data/tests/sagas.test.js

@@ -36,7 +36,7 @@ describe('fetchThirdPartyAuthContext', () => {
         thirdPartyAuthContext: data,
         fieldDescriptions: {},
         optionalFields: {},
-        countries: [],
+        countriesCodesList: [],
       }));
 
     const dispatched = [];

src/register/RegistrationPage.jsx

@@ -93,7 +93,7 @@ const RegistrationPage = (props) => {
   const providers = useSelector(state => state.commonComponents.thirdPartyAuthContext.providers);
   const secondaryProviders = useSelector(state => state.commonComponents.thirdPartyAuthContext.secondaryProviders);
   const pipelineUserDetails = useSelector(state => state.commonComponents.thirdPartyAuthContext.pipelineUserDetails);
-  const countries = useSelector(state => state.commonComponents.countries);
+  const countriesCodesList = useSelector(state => state.commonComponents.countriesCodesList);
 
   const backendValidations = useSelector(getBackendValidations);
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
@@ -393,7 +393,7 @@ const RegistrationPage = (props) => {
                   setFormFields={setConfigurableFormFields}
                   autoSubmitRegisterForm={autoSubmitRegForm}
                   fieldDescriptions={fieldDescriptions}
-                  countries={countries}
+                  countriesCodesList={countriesCodesList}
                 />
                 <StatefulButton
                   id="register-user"

src/register/components/ConfigurableRegistrationForm.jsx

@@ -37,7 +37,7 @@ const ConfigurableRegistrationForm = (props) => {
     setFieldErrors,
     setFormFields,
     autoSubmitRegistrationForm,
-    countries,
+    countriesCodesList,
   } = props;
   const dispatch = useDispatch();
 
@@ -80,12 +80,11 @@ const ConfigurableRegistrationForm = (props) => {
   }, [autoSubmitRegistrationForm]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const removeDisabledCountries = useCallback((countryList) => {
-    if (!countries.length) {
+    if (!countriesCodesList.length) {
       return countryList;
     }
-    const allowedCountries = new Set(countries.map(({ code }) => code));
-    return countryList.filter(({ code }) => allowedCountries.has(code));
-  }, [countries]);
+    return countryList.filter(({ code }) => countriesCodesList.find(x => x === code));
+  }, [countriesCodesList]);
 
   const countryList = useMemo(() => removeDisabledCountries(
     getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }])), [removeDisabledCountries]);
@@ -270,7 +269,7 @@ ConfigurableRegistrationForm.propTypes = {
   setFieldErrors: PropTypes.func.isRequired,
   setFormFields: PropTypes.func.isRequired,
   autoSubmitRegistrationForm: PropTypes.bool,
-  countries: PropTypes.arrayOf(PropTypes.shape({
+  countriesCodesList: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   })),
@@ -279,7 +278,7 @@ ConfigurableRegistrationForm.propTypes = {
 ConfigurableRegistrationForm.defaultProps = {
   fieldDescriptions: {},
   autoSubmitRegistrationForm: false,
-  countries: [],
+  countriesCodesList: [],
 };
 
 export default ConfigurableRegistrationForm;

src/register/components/tests/ConfigurableRegistrationForm.test.jsx

@@ -192,7 +192,7 @@ describe('ConfigurableRegistrationForm', () => {
           },
         },
         autoSubmitRegistrationForm: true,
-        countries: [{ code: 'AX', name: 'Åland Islands' }, { code: 'AL', name: 'Albania' }],
+        countriesCodesList: [{ code: 'AX', name: 'Åland Islands' }, { code: 'AL', name: 'Albania' }],
       };
 
       render(routerWrapper(reduxWrapper(