Merge branch 'feature/MIN-121-list-of-available-submaps' into 'development'

feat(submaps drawer component): submaps drawer component

See merge request !46

src/components/FunctionalArea/TopBar/SearchBar/hooks/useParamsQuery.ts

@@ -32,7 +32,7 @@ export const useParamsQuery = (): UseParamsQuery => {
 
   useEffect(() => {
     if (searchParams?.search) dispatch(getSearchData(searchParams.search as string));
-  }, [dispatch]);
+  }, [dispatch, searchParams.search]);
 
   return { setSearchQueryInRouter, searchParams };
 };

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

 import { StoreType } from '@/redux/store';
-import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
 import { render, screen } from '@testing-library/react';
+import { initialStateFixture } from '@/redux/drawer/drawerFixture';
 import { TopBar } from './TopBar.component';
 
-const renderComponent = (): { store: StoreType } => {
-  const { Wrapper, store } = getReduxWrapperWithStore();
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
 
   return (
     render(
@@ -25,4 +29,16 @@ describe('TopBar - component', () => {
     expect(screen.getByTestId('user-avatar')).toBeInTheDocument();
     expect(screen.getByTestId('search-bar')).toBeInTheDocument();
   });
+
+  it('should open submaps drawer on submaps button click', () => {
+    const { store } = renderComponent({ drawer: initialStateFixture });
+
+    const button = screen.getByRole('button', { name: 'Submaps' });
+    button.click();
+
+    const { isOpen, drawerName } = store.getState().drawer;
+
+    expect(isOpen).toBe(true);
+    expect(drawerName).toBe('submaps');
+  });
 });

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

 import { SearchBar } from '@/components/FunctionalArea/TopBar/SearchBar';
 import { UserAvatar } from '@/components/FunctionalArea/TopBar/UserAvatar';
+import { openSubmapsDrawer } from '@/redux/drawer/drawer.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { Button } from '@/shared/Button';
 
-export const TopBar = (): JSX.Element => (
-  <div className="flex h-16 w-full flex-row items-center justify-between border-b border-font-500 border-opacity-[0.12] bg-white py-4 pl-7 pr-6">
-    <div className="flex flex-row items-center">
-      <UserAvatar />
-      <SearchBar />
-      <Button icon="plus" isIcon isFrontIcon className="ml-8 mr-4">
-        Submaps
-      </Button>
-      <Button icon="plus" isIcon isFrontIcon>
-        Overlays
-      </Button>
-    </div>
-    <div className="bg-primary-100 px-4 py-1 text-xs leading-6 text-primary-500">
-      Parkinson disease map
+export const TopBar = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+
+  const onSubmapsClick = (): void => {
+    dispatch(openSubmapsDrawer());
+  };
+
+  return (
+    <div className="flex h-16 w-full flex-row items-center justify-between border-b border-font-500 border-opacity-[0.12] bg-white py-4 pl-7 pr-6">
+      <div className="flex flex-row items-center">
+        <UserAvatar />
+        <SearchBar />
+        <Button icon="plus" isIcon isFrontIcon className="ml-8 mr-4" onClick={onSubmapsClick}>
+          Submaps
+        </Button>
+        <Button icon="plus" isIcon isFrontIcon>
+          Overlays
+        </Button>
+      </div>
+      <div className="bg-primary-100 px-4 py-1 text-xs leading-6 text-primary-500">
+        Parkinson disease map
+      </div>
     </div>
-  </div>
-);
+  );
+};

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

-import { openSearchDrawer } from '@/redux/drawer/drawer.slice';
+import { openSearchDrawer, openSubmapsDrawer } 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';
@@ -63,4 +63,18 @@ describe('Drawer - component', () => {
       expect(screen.queryByTestId('search-drawer-content')).not.toBeInTheDocument();
     });
   });
+
+  describe('submap drawer', () => {
+    it('should open drawer and display submaps', async () => {
+      const { store } = renderComponent();
+
+      expect(screen.queryByTestId('submap-drawer')).not.toBeInTheDocument();
+
+      await act(() => {
+        store.dispatch(openSubmapsDrawer());
+      });
+
+      expect(screen.getByTestId('submap-drawer')).toBeInTheDocument();
+    });
+  });
 });

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

@@ -3,6 +3,7 @@ import { drawerSelector } from '@/redux/drawer/drawer.selectors';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { twMerge } from 'tailwind-merge';
 import { SearchDrawerWrapper as SearchDrawerContent } from './SearchDrawerWrapper';
+import { SubmapsDrawer } from './SubmapsDrawer';
 
 export const Drawer = (): JSX.Element => {
   const { isOpen, drawerName } = useAppSelector(drawerSelector);
@@ -10,12 +11,13 @@ export const Drawer = (): JSX.Element => {
   return (
     <div
       className={twMerge(
-        'absolute left-[88px] top-[104px] z-10 h-calc-drawer w-[432px] -translate-x-full transform bg-white-pearl text-font-500 transition-all duration-500',
+        'absolute bottom-0 left-[88px] top-[104px] z-10 h-calc-drawer w-[432px] -translate-x-full transform bg-white-pearl text-font-500 transition-all duration-500',
         isOpen && 'translate-x-0',
       )}
       role={DRAWER_ROLE}
     >
       {isOpen && drawerName === 'search' && <SearchDrawerContent />}
+      {isOpen && drawerName === 'submaps' && <SubmapsDrawer />}
     </div>
   );
 };

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

+import { Button } from '@/shared/Button';
+import { IconButton } from '@/shared/IconButton';
+
+interface SubmapItemProps {
+  modelName: string;
+}
+
+export const SubmpamItem = ({ modelName }: SubmapItemProps): JSX.Element => (
+  <div className="flex flex-row flex-nowrap items-center justify-between border-b py-6">
+    {modelName}
+    <div className="flex flex-row flex-nowrap items-center">
+      <Button variantStyles="ghost" className="mr-4">
+        Download
+      </Button>
+      <IconButton
+        icon="chevron-right"
+        className="h-6 w-6 bg-white-pearl"
+        classNameIcon="fill-font-500 h-6 w-6"
+      />
+    </div>
+  </div>
+);

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

+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { StoreType } from '@/redux/store';
+import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
+import { openedDrawerSubmapsFixture } from '@/redux/drawer/drawerFixture';
+import { SubmapsDrawer } from './SubmapsDrawer';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <SubmapsDrawer />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('SubmapsDrawer - component', () => {
+  it('should display drawer heading and list of submaps', () => {
+    renderComponent({
+      models: { data: MODELS_MOCK_SHORT, loading: 'succeeded', error: { name: '', message: '' } },
+    });
+
+    expect(screen.getByText('Core PD map')).toBeInTheDocument();
+    expect(screen.getByText('Histamine signaling')).toBeInTheDocument();
+    expect(screen.getByText('PRKN substrates')).toBeInTheDocument();
+  });
+  it('should close drawer after clicking close button', () => {
+    const { store } = renderComponent({
+      models: { data: MODELS_MOCK_SHORT, loading: 'succeeded', error: { name: '', message: '' } },
+      drawer: openedDrawerSubmapsFixture,
+    });
+    const closeButton = screen.getByRole('close-drawer-button');
+
+    closeButton.click();
+
+    const {
+      drawer: { isOpen },
+    } = store.getState();
+
+    expect(isOpen).toBe(false);
+  });
+});

src/components/Map/Drawer/SubmapsDrawer/SubmapsDrawer.tsx

+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { modelsDataSelector } from '@/redux/models/models.selectors';
+import { DrawerHeading } from '@/shared/DrawerHeading';
+import { SubmpamItem } from './SubmapItem/SubmapItem.component';
+
+export const SubmapsDrawer = (): JSX.Element => {
+  const models = useAppSelector(modelsDataSelector);
+
+  return (
+    <div data-testid="submap-drawer" className="h-full max-h-full">
+      <DrawerHeading title="Submaps" />
+      <ul className="h-[calc(100%-93px)] max-h-[calc(100%-93px)] overflow-y-auto px-6">
+        {models.map(model => (
+          <SubmpamItem key={model.idObject} modelName={model.name} />
+        ))}
+      </ul>
+    </div>
+  );
+};

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

+export { SubmapsDrawer } from './SubmapsDrawer';

src/models/mocks/modelsMock.ts

@@ -403,3 +403,57 @@ export const MODELS_MOCK: MapModel[] = [
     maxZoom: 7,
   },
 ];
+
+export const MODELS_MOCK_SHORT: MapModel[] = [
+  {
+    idObject: 5053,
+    width: 26779.25,
+    height: 13503.0,
+    defaultCenterX: null,
+    defaultCenterY: null,
+    description: '',
+    name: 'Core PD map',
+    defaultZoomLevel: null,
+    tileSize: 256,
+    references: [],
+    authors: [],
+    creationDate: null,
+    modificationDates: [],
+    minZoom: 2,
+    maxZoom: 9,
+  },
+  {
+    idObject: 5052,
+    width: 3511.09375,
+    height: 1312.125,
+    defaultCenterX: null,
+    defaultCenterY: null,
+    description: '',
+    name: 'Histamine signaling',
+    defaultZoomLevel: null,
+    tileSize: 256,
+    references: [],
+    authors: [],
+    creationDate: null,
+    modificationDates: [],
+    minZoom: 2,
+    maxZoom: 6,
+  },
+  {
+    idObject: 5054,
+    width: 1652.75,
+    height: 1171.9429798877356,
+    defaultCenterX: null,
+    defaultCenterY: null,
+    description: '',
+    name: 'PRKN substrates',
+    defaultZoomLevel: null,
+    tileSize: 256,
+    references: [],
+    authors: [],
+    creationDate: null,
+    modificationDates: [],
+    minZoom: 2,
+    maxZoom: 5,
+  },
+];

src/redux/drawer/drawer.reducers.test.ts

@@ -10,6 +10,7 @@ import drawerReducer, {
   displayGroupedSearchResults,
   openDrawer,
   openSearchDrawer,
+  openSubmapsDrawer,
 } from './drawer.slice';
 import type { DrawerState } from './drawer.types';
 
@@ -79,6 +80,15 @@ describe('drawer reducer', () => {
     expect(currentStep).toEqual(STEP.FIRST);
   });
 
+  it('should update the store after openSubmapsDrawer action', async () => {
+    const { type } = await store.dispatch(openSubmapsDrawer());
+    const { isOpen, drawerName } = store.getState().drawer;
+
+    expect(type).toBe('drawer/openSubmapsDrawer');
+    expect(isOpen).toBe(true);
+    expect(drawerName).toEqual('submaps');
+  });
+
   it('should update the store after closeDrawerReducer action', async () => {
     const { type } = await store.dispatch(closeDrawer());
     const {

src/redux/drawer/drawer.reducers.ts

@@ -14,6 +14,11 @@ export const openSearchDrawerReducer = (state: DrawerState): void => {
   state.searchDrawerState.currentStep = STEP.FIRST;
 };
 
+export const openSubmapsDrawerReducer = (state: DrawerState): void => {
+  state.isOpen = true;
+  state.drawerName = 'submaps';
+};
+
 export const closeDrawerReducer = (state: DrawerState): void => {
   state.isOpen = false;
   state.drawerName = 'none';

src/redux/drawer/drawer.slice.ts

@@ -9,6 +9,7 @@ import {
   displayMirnaListReducer,
   openDrawerReducer,
   openSearchDrawerReducer,
+  openSubmapsDrawerReducer,
 } from './drawer.reducers';
 
 const initialState: DrawerState = {
@@ -27,6 +28,7 @@ const drawerSlice = createSlice({
   reducers: {
     openDrawer: openDrawerReducer,
     openSearchDrawer: openSearchDrawerReducer,
+    openSubmapsDrawer: openSubmapsDrawerReducer,
     closeDrawer: closeDrawerReducer,
     displayDrugsList: displayDrugsListReducer,
     displayChemicalsList: displayChemicalsListReducer,
@@ -39,6 +41,7 @@ const drawerSlice = createSlice({
 export const {
   openDrawer,
   openSearchDrawer,
+  openSubmapsDrawer,
   closeDrawer,
   displayDrugsList,
   displayChemicalsList,

src/redux/drawer/drawerFixture.ts

@@ -10,6 +10,16 @@ export const initialStateFixture: DrawerState = {
   },
 };
 
+export const openedDrawerSubmapsFixture: DrawerState = {
+  isOpen: true,
+  drawerName: 'submaps',
+  searchDrawerState: {
+    currentStep: 0,
+    stepType: 'none',
+    selectedValue: undefined,
+  },
+};
+
 export const drawerSearchStepOneFixture: DrawerState = {
   isOpen: true,
   drawerName: 'search',

src/shared/DrawerHeading/DrawerHeading.component.test.tsx

+import { StoreType } from '@/redux/store';
+import { render, screen } from '@testing-library/react';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { openedDrawerSubmapsFixture } from '@/redux/drawer/drawerFixture';
+import { DrawerHeading } from './DrawerHeading.component';
+
+const renderComponent = (
+  title: string,
+  initialStoreState: InitialStoreState = {},
+): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <DrawerHeading title={title} />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('DrawerHeading - component', () => {
+  it('should display passed title', () => {
+    renderComponent('Example');
+
+    expect(screen.getByText('Example')).toBeInTheDocument();
+  });
+
+  it('should call class drawer on close button click', () => {
+    const { store } = renderComponent('Example', {
+      drawer: {
+        ...openedDrawerSubmapsFixture,
+      },
+    });
+
+    expect(store.getState().drawer.isOpen).toBe(true);
+
+    const closeButton = screen.getByRole('close-drawer-button');
+    closeButton.click();
+
+    expect(store.getState().drawer.isOpen).toBe(false);
+  });
+});

src/shared/DrawerHeading/DrawerHeading.component.tsx

+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { IconButton } from '@/shared/IconButton';
+import { closeDrawer } from '@/redux/drawer/drawer.slice';
+import { CLOSE_BUTTON_ROLE } from '../DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.constants';
+
+interface DrawerHeadingProps {
+  title: string;
+}
+
+export const DrawerHeading = ({ title }: DrawerHeadingProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+
+  const onCloseButtonClick = (): void => {
+    dispatch(closeDrawer());
+  };
+
+  return (
+    <div className="flex items-center justify-between border-b border-b-divide px-6">
+      <div className=" py-8 text-xl">
+        <span className="font-semibold">{title}</span>
+      </div>
+      <IconButton
+        className="bg-white-pearl"
+        classNameIcon="fill-font-500"
+        icon="close"
+        role={CLOSE_BUTTON_ROLE}
+        onClick={onCloseButtonClick}
+      />
+    </div>
+  );
+};

src/shared/DrawerHeading/index.ts

+export { DrawerHeading } from './DrawerHeading.component';

src/types/drawerName.ts

-export type DrawerName = 'none' | 'search' | 'project-info' | 'plugins' | 'export' | 'legend';
+export type DrawerName =
+  | 'none'
+  | 'search'
+  | 'project-info'
+  | 'plugins'
+  | 'export'
+  | 'legend'
+  | 'submaps';