Merge branch 'feature/MIN-94-display-hits-for-drugs' into 'development'

feat(results list): connected drugs drawer to results list

See merge request !38

.eslintrc.json

@@ -71,7 +71,7 @@
         "packageDir": "./"
       }
     ],
-    "indent": ["error", 2],
+    "indent": ["error", 2, { "SwitchCase": 1 }],
     "react/jsx-indent": ["error", 2],
     "react/jsx-indent-props": ["error", 2],
     "linebreak-style": ["error", "unix"],

src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx

 import lensIcon from '@/assets/vectors/icons/lens.svg';
 import { useParamsQuery } from '@/components/FunctionalArea/TopBar/SearchBar/hooks/useParamsQuery';
 import { isDrawerOpenSelector } from '@/redux/drawer/drawer.selectors';
-import { clearSearchDrawerState, openDrawer } from '@/redux/drawer/drawer.slice';
+import { openSearchDrawer } from '@/redux/drawer/drawer.slice';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import {
   isPendingSearchStatusSelector,
@@ -28,8 +28,7 @@ export const SearchBar = (): JSX.Element => {
 
   const openSearchDrawerIfClosed = (): void => {
     if (!isDrawerOpen) {
-      dispatch(openDrawer('search'));
-      dispatch(clearSearchDrawerState());
+      dispatch(openSearchDrawer());
     }
   };
 

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

-import { openDrawer } from '@/redux/drawer/drawer.slice';
+import { openSearchDrawer } from '@/redux/drawer/drawer.slice';
 import { StoreType } from '@/redux/store';
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { act, fireEvent, render, screen } from '@testing-library/react';
@@ -38,7 +38,7 @@ describe('Drawer - component', () => {
       expect(screen.queryByTestId('search-drawer-content')).not.toBeInTheDocument();
 
       await act(() => {
-        store.dispatch(openDrawer('search'));
+        store.dispatch(openSearchDrawer());
       });
 
       expect(screen.getByTestId('search-drawer-content')).toBeInTheDocument();
@@ -48,7 +48,7 @@ describe('Drawer - component', () => {
       const { store } = renderComponent();
 
       await act(() => {
-        store.dispatch(openDrawer('search'));
+        store.dispatch(openSearchDrawer());
       });
 
       expect(screen.getByTestId('search-drawer-content')).toBeInTheDocument();

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

 import { DRAWER_ROLE } from '@/components/Map/Drawer/Drawer.constants';
 import { drawerSelector } from '@/redux/drawer/drawer.selectors';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import dynamic from 'next/dynamic';
 import { twMerge } from 'tailwind-merge';
-
-const SearchDrawerContent = dynamic(
-  async () =>
-    import('@/components/Map/Drawer/SearchDrawerContent').then(
-      module => module.SearchDrawerContent,
-    ),
-  {
-    ssr: false,
-  },
-);
+import { SearchDrawerWrapper as SearchDrawerContent } from './SearchDrawerWrapper';
 
 export const Drawer = (): JSX.Element => {
   const { isOpen, drawerName } = useAppSelector(drawerSelector);
@@ -26,7 +16,6 @@ export const Drawer = (): JSX.Element => {
       role={DRAWER_ROLE}
     >
       {isOpen && drawerName === 'search' && <SearchDrawerContent />}
-      {/* other drawers comes here, should use dynamic import */}
     </div>
   );
 };

src/components/Map/Drawer/SearchDrawerContent/Results/PinsList/PinsList.component.tsx

-import { PinItem } from './PinsList.types';
-import { PinsListItem } from './PinsListItem';
-
-interface PinsListProps {
-  pinsList: PinItem[];
-}
-
-export const PinsList = ({ pinsList }: PinsListProps): JSX.Element => (
-  <ul className="px-6 py-2">
-    {pinsList.map(pin => (
-      <PinsListItem key={pin.name} name={pin.name} />
-    ))}
-  </ul>
-);

src/components/Map/Drawer/SearchDrawerContent/Results/PinsList/PinsList.types.tsx

-export type PinItem = {
-  name: string;
-};

src/components/Map/Drawer/SearchDrawerContent/Results/PinsList/PinsListItem/PinsListItem.component.tsx

-import { Icon } from '@/shared/Icon';
-
-interface PinsListItemProps {
-  name: string;
-}
-
-export const PinsListItem = ({ name }: PinsListItemProps): JSX.Element => (
-  <div className="flex flex-row justify-between pt-4">
-    <Icon name="pin" className="mr-2 shrink-0" />
-    <p className="w-full text-left">{name}</p>
-    <Icon name="chevron-right" className="h-6 w-6 shrink-0" />
-  </div>
-);

src/components/Map/Drawer/SearchDrawerContent/Results/Results.component.tsx

-import { DrawerHeadingBackwardButton } from '@/shared/DrawerHeadingBackwardButton';
-import { PinsList } from './PinsList';
-import { PinItem } from './PinsList/PinsList.types';
-
-const PINS_LIST: PinItem[] = [
-  { name: 'Glyceraldehyde-3-phosphate dehydrogenase' },
-  { name: 'D-3-phosphoglycerate dehydrogenase' },
-  { name: 'Glutathione reductase, mitochondrial' },
-  { name: 'NADH dehydrogenase [ubiquinone] iron-sulfur protein 8, mitochondrial' },
-];
-
-export const Results = (): JSX.Element => {
-  const drugName = 'Aspirin';
-
-  const navigateToGroupedSearchResults = (): void => {};
-
-  return (
-    <div>
-      <DrawerHeadingBackwardButton
-        title="Drugs"
-        value={drugName}
-        backwardFunction={navigateToGroupedSearchResults}
-      />
-      <PinsList pinsList={PINS_LIST} />
-    </div>
-  );
-};

src/components/Map/Drawer/SearchDrawerContent/Results/index.ts

-export { Results } from './Results.component';

src/components/Map/Drawer/SearchDrawerContent/index.ts

-export { SearchDrawerContent } from './SearchDrawerContent.component';

src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx → src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx

@@ -5,7 +5,7 @@ import {
   AccordionItemHeading,
 } from '@/shared/Accordion';
 
-import { BioEntitiesSubmapItem } from '@/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem';
+import { BioEntitiesSubmapItem } from '@/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem';
 
 export const BioEntitiesAccordion = (): JSX.Element => {
   const entity = { mapName: 'main map', numberOfEntities: 21 };

src/components/Map/Drawer/SearchDrawerContent/DrugsAccordion/DrugsAccordion.component.tsx → src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.tsx

+import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
+import { displayDrugsList } from '@/redux/drawer/drawer.slice';
 import { loadingDrugsStatusSelector, numberOfDrugsSelector } from '@/redux/drugs/drugs.selectors';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { AccordionItem, AccordionItemHeading, AccordionItemButton } from '@/shared/Accordion';
 
 export const DrugsAccordion = (): JSX.Element => {
   const drugsNumber = useAppSelector(numberOfDrugsSelector);
   const drugsState = useAppSelector(loadingDrugsStatusSelector);
+  const dispatch = useAppDispatch();
+
+  const isPending = drugsState === 'pending';
+
+  const onAccordionClick = (): void => {
+    dispatch(displayDrugsList());
+  };
 
   return (
     <AccordionItem>
       <AccordionItemHeading>
-        <AccordionItemButton variant="non-expandable">
+        <AccordionItemButton
+          variant="non-expandable"
+          onClick={onAccordionClick}
+          disabled={isPending || drugsNumber === SIZE_OF_EMPTY_ARRAY}
+        >
           Drugs
           {drugsState === 'pending' && ' (Loading...)'}
           {drugsState === 'succeeded' && ` (${drugsNumber})`}