refactor code according to the comments

Author: alisher-epam

lib/Donors/DonorsContainer.js

@@ -1,4 +1,9 @@
-import { map, noop, sortBy } from 'lodash';
+import {
+  keyBy,
+  map,
+  noop,
+  sortBy,
+} from 'lodash';
 import PropTypes from 'prop-types';
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
@@ -28,23 +33,18 @@ export function DonorsContainer({
   const intl = useIntl();
   const canViewOrganizations = stripes.hasPerm('ui-organizations.view');
 
-  const donorsMap = useMemo(() => {
-    return donors.reduce((acc, contact) => {
-      acc[contact.id] = contact;
-
-      return acc;
-    }, {});
-  }, [donors]);
+  const donorsMap = useMemo(() => keyBy(donors, 'id'), [donors]);
 
   const listOfDonors = useMemo(() => (fields.value || [])
-    .map((contactId, _index) => {
+    .reduce((acc, contactId, _index) => {
       const contact = donorsMap?.[contactId];
 
-      return {
-        ...(contact || { isDeleted: true }),
-        _index,
-      };
-    }), [donorsMap, fields.value]);
+      if (contact?.id) {
+        acc.push({ ...contact, _index });
+      }
+
+      return acc;
+    }, []), [donorsMap, fields.value]);
 
   const contentData = useMemo(() => sortBy(listOfDonors, [({ name }) => name?.toLowerCase()]), [listOfDonors]);
 

lib/PrivilegedDonorContacts/PrivilegedDonorContactsContainer.js renamed to lib/PrivilegedDonorContacts/ContactsContainer.js

@@ -1,19 +1,23 @@
-import { map, sortBy } from 'lodash';
+import {
+  keyBy,
+  map,
+  sortBy,
+} from 'lodash';
 import PropTypes from 'prop-types';
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
+import { useCategories } from '../hooks';
 import { acqRowFormatter } from '../utils';
 import { defaultContainerVisibleColumns } from './constants';
-import { useCategories } from './hooks';
 import { PrivilegedDonorContactsList } from './PrivilegedDonorContactsList';
 import { PrivilegedDonorContactsLookup } from './PrivilegedDonorContactsLookup';
 import {
   getContactsUrl,
   getResultsFormatter,
 } from './utils';
 
-export function PrivilegedDonorContactsContainer({
+export function ContactsContainer({
   columnMapping,
   columnWidths,
   contacts,
@@ -23,31 +27,25 @@ export function PrivilegedDonorContactsContainer({
   orgId,
   setContactIds,
   searchLabel,
-  selectedContactIds,
   showTriggerButton,
   visibleColumns,
   ...rest
 }) {
   const intl = useIntl();
   const { categories } = useCategories();
 
-  const contactsMap = useMemo(() => {
-    return contacts.reduce((acc, contact) => {
-      acc[contact.id] = contact;
-
-      return acc;
-    }, {});
-  }, [contacts]);
+  const contactsMap = useMemo(() => keyBy(contacts, 'id'), [contacts]);
 
   const listOfDonors = useMemo(() => (fields.value || [])
-    .map((contactId, _index) => {
+    .reduce((acc, contactId, _index) => {
       const contact = contactsMap?.[contactId];
 
-      return {
-        ...(contact || { isDeleted: true }),
-        _index,
-      };
-    }), [contactsMap, fields.value]);
+      if (contact?.id) {
+        acc.push({ ...contact, _index });
+      }
+
+      return acc;
+    }, []), [contactsMap, fields.value]);
 
   const contentData = useMemo(() => sortBy(listOfDonors, [({ lastName }) => lastName?.toLowerCase()]), [listOfDonors]);
 
@@ -96,15 +94,14 @@ export function PrivilegedDonorContactsContainer({
             searchLabel={searchLabel}
             columnWidths={columnWidths}
             orgId={orgId}
-            selectedContactIds={selectedContactIds}
           />
         )
       }
     </>
   );
 }
 
-PrivilegedDonorContactsContainer.propTypes = {
+ContactsContainer.propTypes = {
   columnMapping: PropTypes.object,
   columnWidths: PropTypes.object,
   contacts: PropTypes.arrayOf(PropTypes.object),
@@ -113,13 +110,12 @@ PrivilegedDonorContactsContainer.propTypes = {
   id: PropTypes.string,
   orgId: PropTypes.string,
   searchLabel: PropTypes.node,
-  selectedContactIds: PropTypes.arrayOf(PropTypes.string),
   setContactIds: PropTypes.func.isRequired,
   showTriggerButton: PropTypes.bool,
   visibleColumns: PropTypes.arrayOf(PropTypes.string),
 };
 
-PrivilegedDonorContactsContainer.defaultProps = {
+ContactsContainer.defaultProps = {
   showTriggerButton: true,
   visibleColumns: defaultContainerVisibleColumns,
 };

lib/PrivilegedDonorContacts/PrivilegedDonorContactsContainer.test.js renamed to lib/PrivilegedDonorContacts/ContactsContainer.test.js

@@ -4,8 +4,8 @@ import user from '@testing-library/user-event';
 
 import stripesFinalForm from '@folio/stripes/final-form';
 
-import { PrivilegedDonorContactsContainer } from './PrivilegedDonorContactsContainer';
-import { useCategories } from './hooks';
+import { useCategories } from '../hooks';
+import { ContactsContainer } from './ContactsContainer';
 
 const mockVendor = { id: '1', name: 'Amazon' };
 
@@ -38,7 +38,7 @@ jest.mock('./PrivilegedDonorContactsLookup', () => ({
 
 const setContactIds = jest.fn();
 
-jest.mock('./hooks', () => ({
+jest.mock('../hooks', () => ({
   useCategories: jest.fn().mockReturnValue({
     categories: [],
     isLoading: false,
@@ -65,7 +65,7 @@ const defaultProps = {
 
 const renderForm = (props = {}) => (
   <form>
-    <PrivilegedDonorContactsContainer
+    <ContactsContainer
       {...defaultProps}
       {...props}
     />

lib/PrivilegedDonorContacts/PrivilegedDonorContacts.js

@@ -10,7 +10,7 @@ import {
 
 import { defaultColumnMapping } from './constants';
 import { useFetchPrivilegedContacts } from './hooks';
-import { PrivilegedDonorContactsContainer } from './PrivilegedDonorContactsContainer';
+import { ContactsContainer } from './ContactsContainer';
 
 export function PrivilegedDonorContacts({ name, privilegedContactIds, onChange, ...rest }) {
   const [contactIds, setContactIds] = useState(privilegedContactIds);
@@ -31,11 +31,10 @@ export function PrivilegedDonorContacts({ name, privilegedContactIds, onChange,
         <FieldArray
           name={name}
           id={name}
-          component={PrivilegedDonorContactsContainer}
+          component={ContactsContainer}
           setContactIds={onSetContactIds}
           contacts={contacts}
           loading={isLoading}
-          selectedContactIds={contactIds}
           {...rest}
         />
       </Col>

lib/PrivilegedDonorContacts/PrivilegedDonorContacts.test.js

@@ -7,9 +7,12 @@ import stripesFinalForm from '@folio/stripes/final-form';
 import { useFetchPrivilegedContacts } from './hooks';
 import { PrivilegedDonorContacts } from './PrivilegedDonorContacts';
 
+jest.mock('../hooks', () => ({
+  useCategories: jest.fn().mockReturnValue({ categories: [] }),
+}));
+
 jest.mock('./hooks', () => ({
   useFetchPrivilegedContacts: jest.fn(),
-  useCategories: jest.fn().mockReturnValue({ categories: [] }),
 }));
 
 jest.mock('./PrivilegedDonorContactsLookup', () => ({

lib/PrivilegedDonorContacts/PrivilegedDonorContactsList.js

@@ -4,13 +4,13 @@ import { useIntl } from 'react-intl';
 
 import { MultiColumnList } from '@folio/stripes/components';
 
+import { useCategories } from '../hooks';
 import { acqRowFormatter } from '../utils';
 import {
   alignRowProps,
   defaultColumnMapping,
   defaultVisibleColumns,
 } from './constants';
-import { useCategories } from './hooks';
 import { getResultsFormatter } from './utils';
 
 export const PrivilegedDonorContactsList = ({

lib/PrivilegedDonorContacts/PrivilegedDonorContactsList.test.js

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 
 import { PrivilegedDonorContactsList } from './PrivilegedDonorContactsList';
 
-jest.mock('./hooks', () => ({
+jest.mock('../hooks', () => ({
   useCategories: jest.fn().mockReturnValue({
     categories: [],
     isLoading: false,

lib/PrivilegedDonorContacts/PrivilegedDonorContactsLookup.js

@@ -14,7 +14,6 @@ export const PrivilegedDonorContactsLookup = ({
   orgId,
   searchButtonStyle,
   searchLabel,
-  selectedContactIds,
 }) => {
   const stripes = useStripes();
 
@@ -44,7 +43,6 @@ export const PrivilegedDonorContactsLookup = ({
       addContacts={onAddContacts}
       renderNewContactBtn={renderNewContactBtn}
       isPrivilegedContactEnabled
-      selectedContactIds={selectedContactIds}
     >
       <span data-test-add-contact>
         <FormattedMessage id="stripes-acq-components.privilegedContacts.noFindContactPlugin" />
@@ -58,11 +56,9 @@ PrivilegedDonorContactsLookup.propTypes = {
   searchLabel: PropTypes.node,
   searchButtonStyle: PropTypes.string,
   orgId: PropTypes.string,
-  selectedContactIds: PropTypes.arrayOf(PropTypes.string),
 };
 
 PrivilegedDonorContactsLookup.defaultProps = {
   searchLabel: <FormattedMessage id="stripes-acq-components.privilegedContacts.button.addDonor" />,
   searchButtonStyle: 'default',
-  selectedContactIds: [],
 };

lib/PrivilegedDonorContacts/hooks/constants.js

@@ -1,13 +1,2 @@
 export const DEFAULT_DATA = [];
 export const PRIVILEGED_CONTACTS_API = 'organizations-storage/privileged-contacts';
-export const CATEGORIES_API = 'organizations-storage/categories';
-
-export const UNCATEGORIZED_VALUE = 'Uncategorized';
-
-export const VENDOR_DEFAULT_CATEGORIES = {
-  'Customer Service': 'customerService',
-  'Payments': 'payments',
-  'Returns': 'returns',
-  'Shipments': 'shipments',
-  [UNCATEGORIZED_VALUE]: 'uncategorized',
-};

lib/PrivilegedDonorContacts/hooks/index.js

@@ -1,3 +1 @@
 export { useFetchPrivilegedContacts } from './useFetchPrivilegedContacts';
-export { useCategories } from './useCategories';
-export { useTranslatedCategories } from './useTranslatedCategories';