refactor(export): improved code from PR review

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExcludedCompartmentPathways/ExcludedCompartmentPathways.component.tsx

@@ -8,7 +8,7 @@ import { ZERO } from '@/constants/common';
 import { CheckboxFilter } from '../../CheckboxFilter';
 import { CollapsibleSection } from '../../CollapsibleSection';
 import { ExportContext } from '../ExportCompound.context';
-import { getCompartmentPathwaysCheckboxElements } from '../ExportCompound.utils';
+import { getCompartmentPathwaysCheckboxElements } from '../utils/getCompartmentPathwaysCheckboxElements';
 
 export const ExcludedCompartmentPathways = (): React.ReactNode => {
   const { setExcludedCompartmentPathways } = useContext(ExportContext);

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx

@@ -9,10 +9,8 @@ import { ExcludedCompartmentPathways } from './ExcludedCompartmentPathways';
 import { IncludedCompartmentPathways } from './IncludedCompartmentPathways ';
 import { DownloadElements } from './DownloadElements/DownloadElements';
 import { ExportContext } from './ExportCompound.context';
-import {
-  getDownloadElementsBodyRequest,
-  getNetworkDownloadBodyRequest,
-} from './ExportCompound.utils';
+import { getNetworkDownloadBodyRequest } from './utils/getNetworkBodyRequest';
+import { getDownloadElementsBodyRequest } from './utils/getDownloadElementsBodyRequest';
 
 type ExportProps = {
   children: ReactNode;

src/components/Map/Drawer/ExportDrawer/ExportCompound/IncludedCompartmentPathways /IncludedCompartmentPathways.component.tsx

@@ -8,7 +8,7 @@ import { ZERO } from '@/constants/common';
 import { CheckboxFilter } from '../../CheckboxFilter';
 import { CollapsibleSection } from '../../CollapsibleSection';
 import { ExportContext } from '../ExportCompound.context';
-import { getCompartmentPathwaysCheckboxElements } from '../ExportCompound.utils';
+import { getCompartmentPathwaysCheckboxElements } from '../utils/getCompartmentPathwaysCheckboxElements';
 
 export const IncludedCompartmentPathways = (): React.ReactNode => {
   const { setIncludedCompartmentPathways } = useContext(ExportContext);

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.utils.test.ts → src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.test.ts

 /* eslint-disable no-magic-numbers */
 import { CompartmentPathwayDetails } from '@/types/models';
-import { getCompartmentPathwaysCheckboxElements } from './ExportCompound.utils';
+import { getCompartmentPathwaysCheckboxElements } from './getCompartmentPathwaysCheckboxElements';
 
 describe('getCompartmentPathwaysCheckboxElements', () => {
   it('should return an empty array when given an empty items array', () => {

src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.ts

+/* eslint-disable no-magic-numbers */
+import { CompartmentPathwayDetails } from '@/types/models';
+
+type AddedNames = { [key: string]: number };
+
+type CheckboxElement = { id: string; label: string };
+
+type CheckboxElements = CheckboxElement[];
+
+export const getCompartmentPathwaysCheckboxElements = (
+  items: CompartmentPathwayDetails[],
+): CheckboxElements => {
+  const addedNames: AddedNames = {};
+
+  const setNameToIdIfUndefined = (item: CompartmentPathwayDetails): void => {
+    if (addedNames[item.name] === undefined) {
+      addedNames[item.name] = item.id;
+    }
+  };
+
+  items.forEach(setNameToIdIfUndefined);
+
+  const parseIdAndLabel = ([name, id]: [name: string, id: number]): CheckboxElement => ({
+    id: id.toString(),
+    label: name,
+  });
+
+  const sortByLabel = (a: CheckboxElement, b: CheckboxElement): number => {
+    if (a.label > b.label) return 1;
+    return -1;
+  };
+
+  const elements = Object.entries(addedNames).map(parseIdAndLabel).sort(sortByLabel);
+
+  return elements;
+};

src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.test.ts

+import { getDownloadElementsBodyRequest } from './getDownloadElementsBodyRequest';
+
+describe('getDownloadElementsBodyRequest', () => {
+  it('should return the correct DownloadBodyRequest object', () => {
+    const types = [
+      { id: '1', label: 'Type 1' },
+      { id: '2', label: 'Type 2' },
+    ];
+    const columns = [
+      { id: '1', label: 'Column 1' },
+      { id: '2', label: 'Column 2' },
+    ];
+    // eslint-disable-next-line no-magic-numbers
+    const modelIds = [1, 2, 3];
+    const annotations = [
+      { id: '1', label: 'Annotation 1' },
+      { id: '2', label: 'Annotation 2' },
+    ];
+    const includedCompartmentPathways = [
+      { id: '1', label: 'Compartment 1' },
+      { id: '2', label: 'Compartment 2' },
+    ];
+    const excludedCompartmentPathways = [
+      { id: '1', label: 'Compartment 3' },
+      { id: '2', label: 'Compartment 4' },
+    ];
+
+    const result = getDownloadElementsBodyRequest({
+      types,
+      columns,
+      modelIds,
+      annotations,
+      includedCompartmentPathways,
+      excludedCompartmentPathways,
+    });
+
+    expect(result).toEqual({
+      types: ['Type 1', 'Type 2'],
+      columns: ['Column 1', 'Column 2'],
+      // eslint-disable-next-line no-magic-numbers
+      submaps: [1, 2, 3],
+      annotations: ['Annotation 1', 'Annotation 2'],
+      includedCompartmentIds: ['Compartment 1', 'Compartment 2'],
+      excludedCompartmentIds: ['Compartment 3', 'Compartment 4'],
+    });
+  });
+});

src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.utils.ts → src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.ts

-/* eslint-disable no-magic-numbers */
-import { CompartmentPathwayDetails } from '@/types/models';
-import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.component';
+import { CheckboxItem } from '../../CheckboxFilter/CheckboxFilter.component';
 
 type DownloadBodyRequest = {
   types: string[];
@@ -35,39 +33,3 @@ export const getDownloadElementsBodyRequest = ({
   includedCompartmentIds: includedCompartmentPathways.map(compartment => compartment.label),
   excludedCompartmentIds: excludedCompartmentPathways.map(compartment => compartment.label),
 });
-
-export const getNetworkDownloadBodyRequest = (): object => ({});
-
-type AddedNames = { [key: string]: number };
-
-type CheckboxElement = { id: string; label: string };
-
-type CheckboxElements = CheckboxElement[];
-
-export const getCompartmentPathwaysCheckboxElements = (
-  items: CompartmentPathwayDetails[],
-): CheckboxElements => {
-  const addedNames: AddedNames = {};
-
-  const setNameToIdIfUndefined = (item: CompartmentPathwayDetails): void => {
-    if (addedNames[item.name] === undefined) {
-      addedNames[item.name] = item.id;
-    }
-  };
-
-  items.forEach(setNameToIdIfUndefined);
-
-  const parseIdAndLabel = ([name, id]: [name: string, id: number]): CheckboxElement => ({
-    id: id.toString(),
-    label: name,
-  });
-
-  const sortByLabel = (a: CheckboxElement, b: CheckboxElement): number => {
-    if (a.label > b.label) return 1;
-    return -1;
-  };
-
-  const elements = Object.entries(addedNames).map(parseIdAndLabel).sort(sortByLabel);
-
-  return elements;
-};

src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.test.ts

+import { getNetworkDownloadBodyRequest } from './getNetworkBodyRequest';
+
+describe('getNetworkDownloadBodyRequest', () => {
+  it('should return an empty object', () => {
+    const result = getNetworkDownloadBodyRequest();
+    expect(result).toEqual({});
+  });
+});

src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.ts

+export const getNetworkDownloadBodyRequest = (): object => ({});

src/components/Map/Drawer/ExportDrawer/ExportDrawer.component.tsx

 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { modelsDataSelector } from '@/redux/models/models.selectors';
+import { modelsIdsSelector } from '@/redux/models/models.selectors';
 import { DrawerHeading } from '@/shared/DrawerHeading';
 import { getCompartmentPathways } from '@/redux/compartmentPathways/compartmentPathways.thunks';
 import { useEffect, useState } from 'react';
@@ -9,10 +9,9 @@ import { Elements } from './Elements';
 import { TAB_NAMES } from './TabNavigator/TabNavigator.constants';
 import { TabNames } from './TabNavigator/TabNavigator.types';
 import { Network } from './Network';
-import { getModelsIds } from './ExportDrawer.component.utils';
 
 export const ExportDrawer = (): React.ReactNode => {
-  const models = useAppSelector(modelsDataSelector);
+  const modelsIds = useAppSelector(modelsIdsSelector);
   const dispatch = useAppDispatch();
   const [activeTab, setActiveTab] = useState<TabNames>(TAB_NAMES.ELEMENTS);
 
@@ -21,9 +20,8 @@ export const ExportDrawer = (): React.ReactNode => {
   };
 
   useEffect(() => {
-    const modelsIds = getModelsIds(models);
     dispatch(getCompartmentPathways(modelsIds));
-  }, [dispatch, models]);
+  }, [dispatch, modelsIds]);
 
   return (
     <div data-testid="export-drawer" className="h-full max-h-full">