refactor: optimize code

Author: sundasnoreen12

src/profile/__mocks__/invalidUser.mockStore.js

@@ -29,7 +29,7 @@ module.exports = {
     drafts: {},
     isLoadingProfile: false,
     isAuthenticatedUserProfile: true,
-    countries: [],
+    countriesCodesList: [],
   },
   router: {
     location: {

src/profile/__mocks__/savingEditedBio.mockStore.js

@@ -126,7 +126,7 @@ module.exports = {
     ],
     drafts: {},
     isLoadingProfile: false,
-    countries: [],
+    countriesCodesList: [],
   },
   router: {
     location: {

src/profile/__mocks__/viewOtherProfile.mockStore.js

@@ -86,7 +86,7 @@ module.exports = {
     drafts: {},
     isLoadingProfile: false,
     learningGoal: 'advance_career',
-    countries: [],
+    countriesCodesList: [],
   },
   router: {
     location: {

src/profile/__mocks__/viewOwnProfile.mockStore.js

@@ -124,7 +124,7 @@ module.exports = {
         createdDate: '2019-03-04T19:31:39.896806Z'
       }
     ],
-    countries:[{code:"AX", name:"Åland Islands"},{code:"AL", name:"Albania"}],
+    countriesCodesList:[{code:"AX"},{code:"AL"}],
     drafts: {},
     isLoadingProfile: false
   },

src/profile/data/actions.js

@@ -25,14 +25,14 @@ export const fetchProfileSuccess = (
   preferences,
   courseCertificates,
   isAuthenticatedUserProfile,
-  countries,
+  countriesCodesList,
 ) => ({
   type: FETCH_PROFILE.SUCCESS,
   account,
   preferences,
   courseCertificates,
   isAuthenticatedUserProfile,
-  countries,
+  countriesCodesList,
 });
 
 export const fetchProfileReset = () => ({

src/profile/data/reducers.js

@@ -22,7 +22,7 @@ export const initialState = {
   drafts: {},
   isLoadingProfile: true,
   isAuthenticatedUserProfile: false,
-  countries: [],
+  countriesCodesList: [],
 };
 
 const profilePage = (state = initialState, action = {}) => {
@@ -43,7 +43,7 @@ const profilePage = (state = initialState, action = {}) => {
         courseCertificates: action.courseCertificates,
         isLoadingProfile: false,
         isAuthenticatedUserProfile: action.isAuthenticatedUserProfile,
-        countries: action.countries,
+        countriesCodesList: action.countriesCodesList,
       };
     case SAVE_PROFILE.BEGIN:
       return {

src/profile/data/sagas.js

@@ -41,7 +41,7 @@ export function* handleFetchProfile(action) {
   let preferences = {};
   let account = userAccount;
   let courseCertificates = null;
-  let countries = [];
+  let countriesCodesList = [];
 
   try {
     yield put(fetchProfileBegin());
@@ -63,9 +63,9 @@ export function* handleFetchProfile(action) {
     const result = yield all(calls);
 
     if (isAuthenticatedUserProfile) {
-      [account, courseCertificates, countries, preferences] = result;
+      [account, courseCertificates, countriesCodesList, preferences] = result;
     } else {
-      [account, courseCertificates, countries] = result;
+      [account, courseCertificates, countriesCodesList] = result;
     }
 
     // Set initial visibility values for account
@@ -91,7 +91,7 @@ export function* handleFetchProfile(action) {
       preferences,
       courseCertificates,
       isAuthenticatedUserProfile,
-      countries,
+      countriesCodesList,
     ));
 
     yield put(fetchProfileReset());

src/profile/data/sagas.test.js

@@ -91,7 +91,7 @@ describe('RootSaga', () => {
         username: 'gonzo',
         other: 'data',
       };
-      const countries = [{ code: 'AX', name: 'Åland Islands' }, { code: 'AL', name: 'Albania' }];
+      const countriesCodesList = [{ code: 'AX' }, { code: 'AL' }];
       getAuthenticatedUser.mockReturnValue(userAccount);
       const selectorData = {
         userAccount,
@@ -100,7 +100,7 @@ describe('RootSaga', () => {
       const action = profileActions.fetchProfile('booyah');
       const gen = handleFetchProfile(action);
 
-      const result = [{}, [1, 2, 3], countries];
+      const result = [{}, [1, 2, 3], countriesCodesList];
 
       expect(gen.next().value).toEqual(select(userAccountSelector));
       expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin()));
@@ -110,7 +110,7 @@ describe('RootSaga', () => {
         call(ProfileApiService.getCountryList),
       ]));
       expect(gen.next(result).value)
-        .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false, countries)));
+        .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false, countriesCodesList)));
       expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
       expect(gen.next().value).toBeUndefined();
     });

src/profile/data/selectors.js

@@ -23,7 +23,7 @@ export const isLoadingProfileSelector = state => state.profilePage.isLoadingProf
 export const currentlyEditingFieldSelector = state => state.profilePage.currentlyEditingField;
 export const accountErrorsSelector = state => state.profilePage.errors;
 export const isAuthenticatedUserProfileSelector = state => state.profilePage.isAuthenticatedUserProfile;
-export const countriesSelector = state => state.profilePage.countries;
+export const countriesCodesListSelector = state => state.profilePage.countriesCodesList;
 
 export const editableFormModeSelector = createSelector(
   profileAccountSelector,
@@ -113,14 +113,13 @@ export const sortedLanguagesSelector = createSelector(
 
 export const sortedCountriesSelector = createSelector(
   localeSelector,
-  countriesSelector,
+  countriesCodesListSelector,
   profileAccountSelector,
-  (locale, countries, profileAccount) => {
+  (locale, countriesCodesList, profileAccount) => {
     const countryList = getCountryList(locale);
-    const countriesCodes = new Set(countries.map(({ code }) => code));
-    const userCountryCode = profileAccount.country;
+    const userCountry = profileAccount.country;
 
-    return countryList.filter(({ code }) => code === userCountryCode || countriesCodes.has(code));
+    return countryList.filter(({ code }) => code === userCountry || countriesCodesList.find(x => x === code));
   },
 );
 
@@ -139,12 +138,12 @@ export const countrySelector = createSelector(
   editableFormSelector,
   sortedCountriesSelector,
   countryMessagesSelector,
-  countriesSelector,
-  (editableForm, sortedCountries, countryMessages, countries) => ({
+  countriesCodesListSelector,
+  (editableForm, translatedCountries, countryMessages, countriesCodesList) => ({
     ...editableForm,
-    sortedCountries,
+    translatedCountries,
     countryMessages,
-    countries,
+    countriesCodesList,
   }),
 );
 

src/profile/data/services.js

@@ -152,7 +152,7 @@ export async function getCourseCertificates(username) {
 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/profile/forms/Country.jsx

@@ -48,10 +48,9 @@ class Country extends React.Component {
   }
 
   isDisabledCountry = (country) => {
-    const { countries } = this.props;
-    const countriesCode = new Set(countries.map(({ code }) => code));
+    const { countriesCodesList } = this.props;
 
-    return countries.length > 0 && !countriesCode.has(country);
+    return countriesCodesList.length > 0 && !countriesCodesList.find(code => code === country);
   };
 
   render() {
@@ -63,14 +62,14 @@ class Country extends React.Component {
       saveState,
       error,
       intl,
-      sortedCountries,
+      translatedCountries,
       countryMessages,
     } = this.props;
 
     return (
       <SwitchContent
         className="mb-5"
-        expression={editMode}
+        expression={'editing'}
         cases={{
           editing: (
             <div role="dialog" aria-labelledby={`${formId}-label`}>
@@ -92,7 +91,7 @@ class Country extends React.Component {
                     onChange={this.handleChange}
                   >
                     <option value="">&nbsp;</option>
-                    {sortedCountries.map(({ code, name }) => (
+                    {translatedCountries.map(({ code, name }) => (
                       <option key={code} value={code} disabled={this.isDisabledCountry(code)}>{name}</option>
                     ))}
                   </select>
@@ -161,11 +160,11 @@ Country.propTypes = {
   editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']),
   saveState: PropTypes.string,
   error: PropTypes.string,
-  sortedCountries: PropTypes.arrayOf(PropTypes.shape({
+  translatedCountries: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,
-  countries: PropTypes.arrayOf(PropTypes.shape({
+  countriesCodesList: PropTypes.arrayOf(PropTypes.shape({
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,