feat(results 2nd step): created dummy component for results

Group.svg

+<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C4.575 0 0 3.375 0 9C0 14.325 8.1 22.65 8.475 23.025C8.625 23.175 8.775 23.25 9 23.25C9.225 23.25 9.375 23.175 9.525 23.025C9.9 22.65 18 14.4 18 9C18 3.375 13.425 0 9 0ZM9 12C7.35 12 6 10.65 6 9C6 7.35 7.35 6 9 6C10.65 6 12 7.35 12 9C12 10.65 10.65 12 9 12Z" fill="#E17221"/>
+<circle cx="9.0002" cy="8.99922" r="4.8" fill="#E17221"/>
+</svg>

src/assets/vectors/icons/Group.svg

+<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C4.575 0 0 3.375 0 9C0 14.325 8.1 22.65 8.475 23.025C8.625 23.175 8.775 23.25 9 23.25C9.225 23.25 9.375 23.175 9.525 23.025C9.9 22.65 18 14.4 18 9C18 3.375 13.425 0 9 0ZM9 12C7.35 12 6 10.65 6 9C6 7.35 7.35 6 9 6C10.65 6 12 7.35 12 9C12 10.65 10.65 12 9 12Z" fill="#E17221"/>
+<circle cx="9.0002" cy="8.99922" r="4.8" fill="#E17221"/>
+<path d="M8.846 15V7.344L7.22 8.322V7.332L8.846 6.36H9.74V15H8.846Z" fill="white"/>
+</svg>

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-orange" 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/PinsList/PinsListItem/index.ts

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

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

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

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

+import { DrawerHeadingBackwardButton } from '@/shared/DrawerHeadingBackwardButton';
+import { PinsList } from './PinsList';
+
+const PINS_LIST = [
+  { 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/redux/store.ts

@@ -26,3 +26,4 @@ export const store = configureStore({
 export type RootState = ReturnType<typeof store.getState>;
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
 export type AppDispatch = typeof store.dispatch;
+export type StoreType = typeof store;

src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.test.tsx

+import { StoreType } from '@/redux/store';
+import { InitialStoreState, getReduxWrapperWithStore } from '@/utils/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { DrawerHeadingBackwardButton } from './DrawerHeadingBackwardButton.component';
+
+const backwardFunction = jest.fn();
+
+const renderComponent = (
+  title: string,
+  value: string,
+  initialStoreState: InitialStoreState = {},
+): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <DrawerHeadingBackwardButton
+          title={title}
+          value={value}
+          backwardFunction={backwardFunction}
+        />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('DrawerHeadingBackwardButton - component', () => {
+  beforeEach(() => {
+    backwardFunction.mockReset();
+  });
+
+  it('should render passed values', () => {
+    renderComponent('Title', 'value');
+
+    expect(screen.getByRole('back-button')).toBeInTheDocument();
+    expect(screen.getByText('Title:')).toBeInTheDocument();
+    expect(screen.getByText('value')).toBeInTheDocument();
+    expect(screen.getByRole('close-drawer-button')).toBeInTheDocument();
+  });
+
+  it('should call backward function on back button click', () => {
+    renderComponent('Title', 'value');
+
+    const backButton = screen.getByRole('back-button');
+    backButton.click();
+
+    expect(backwardFunction).toBeCalled();
+  });
+
+  it('should call class drawer on close button click', () => {
+    const { store } = renderComponent('Title', 'value', {
+      drawer: { open: true, drawerName: 'search' },
+    });
+    expect(store.getState().drawer.open).toBe(true);
+
+    const closeButton = screen.getByRole('close-drawer-button');
+    closeButton.click();
+
+    expect(store.getState().drawer.open).toBe(false);
+  });
+});

src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.tsx

+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { closeDrawer } from '@/redux/drawer/drawer.slice';
+import { IconButton } from '@/shared/IconButton';
+
+export const CLOSE_BUTTON_ROLE = 'close-drawer-button';
+export const BACK_BUTTON_ROLE = 'back-button';
+
+export interface DrawerHeadingBackwardButtonProps {
+  title: string;
+  value: string;
+  backwardFunction: () => void;
+}
+
+export const DrawerHeadingBackwardButton = ({
+  backwardFunction,
+  title,
+  value,
+}: DrawerHeadingBackwardButtonProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+
+  const handleCloseDrawer = (): void => {
+    dispatch(closeDrawer());
+  };
+
+  const onBackwardClick = (): void => {
+    backwardFunction();
+  };
+
+  return (
+    <div className="flex items-center justify-between border-b border-b-divide pl-4 pr-5">
+      <div className="flex flex-row flex-nowrap items-center">
+        <IconButton
+          className="h-6 w-6 bg-white-pearl"
+          icon="chevron-left"
+          classNameIcon="fill-font-500 h-6 w-6"
+          onClick={onBackwardClick}
+          role={BACK_BUTTON_ROLE}
+        />
+        <div className="ml-2 py-8 text-xl">
+          <span className="font-normal">{title}: </span>
+          <span className="font-semibold">{value}</span>
+        </div>
+      </div>
+      <IconButton
+        className="bg-white-pearl"
+        classNameIcon="fill-font-500"
+        icon="close"
+        role={CLOSE_BUTTON_ROLE}
+        onClick={handleCloseDrawer}
+      />
+    </div>
+  );
+};

src/shared/DrawerHeadingBackwardButton/index.ts

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

src/shared/Icon/Icon.component.tsx

@@ -12,6 +12,7 @@ import { PageIcon } from '@/shared/Icon/Icons/PageIcon';
 import { PluginIcon } from '@/shared/Icon/Icons/PluginIcon';
 import { PlusIcon } from '@/shared/Icon/Icons/PlusIcon';
 import { CloseIcon } from '@/shared/Icon/Icons/CloseIcon';
+import { PinOrange } from '@/shared/Icon/Icons/PinOrance';
 
 import type { IconTypes } from '@/types/iconTypes';
 
@@ -25,6 +26,7 @@ const icons = {
   'chevron-left': ChevronLeftIcon,
   'chevron-up': ChevronUpIcon,
   'chevron-down': ChevronDownIcon,
+  'pin-orange': PinOrange,
   plus: PlusIcon,
   arrow: ArrowIcon,
   dots: DotsIcon,

src/shared/Icon/Icons/PinOrance.tsx

+interface PinOrangeProps {
+  className: string;
+}
+
+export const PinOrange = ({ className }: PinOrangeProps): JSX.Element => (
+  <svg
+    width="18"
+    height="24"
+    viewBox="0 0 18 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M9 0C4.575 0 0 3.375 0 9C0 14.325 8.1 22.65 8.475 23.025C8.625 23.175 8.775 23.25 9 23.25C9.225 23.25 9.375 23.175 9.525 23.025C9.9 22.65 18 14.4 18 9C18 3.375 13.425 0 9 0ZM9 12C7.35 12 6 10.65 6 9C6 7.35 7.35 6 9 6C10.65 6 12 7.35 12 9C12 10.65 10.65 12 9 12Z"
+      fill="#E17221"
+    />
+    <circle cx="9.0002" cy="8.99922" r="4.8" fill="#E17221" />
+  </svg>
+);

src/types/iconTypes.ts

@@ -12,4 +12,5 @@ export type IconTypes =
   | 'legend'
   | 'page'
   | 'plugin'
-  | 'close';
+  | 'close'
+  | 'pin-orange';

src/utils/getReduxWrapperWithStore.tsx

+import { StoreType } from '@/redux/store';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import bioEntityContentsReducer from '@/redux/bioEntityContents/bioEntityContents.slice';
+import chemicalsReducer from '@/redux/chemicals/chemicals.slice';
+import drawerReducer from '@/redux/drawer/drawer.slice';
+import drugsReducer from '@/redux/drugs/drugs.slice';
+import mirnasReducer from '@/redux/mirnas/mirnas.slice';
+import projectReducer from '@/redux/project/project.slice';
+import searchReducer from '@/redux/search/search.slice';
+import modelsReducer from '@/redux/models/models.slice';
+import { SearchState } from '@/redux/search/search.types';
+import { ProjectState } from '@/redux/project/project.types';
+import { DrugsState } from '@/redux/drugs/drugs.types';
+import { MirnasState } from '@/redux/mirnas/mirnas.types';
+import { ChemicalsState } from '@/redux/chemicals/chemicals.types';
+import { BioEntityContentsState } from '@/redux/bioEntityContents/bioEntityContents.types';
+import { DrawerState } from '@/redux/drawer/drawer.types';
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+export type InitialStoreState = {
+  search?: SearchState;
+  project?: ProjectState;
+  drugs?: DrugsState;
+  mirnas?: MirnasState;
+  chemicals?: ChemicalsState;
+  bioEntityContents?: BioEntityContentsState;
+  drawer?: DrawerState;
+};
+
+type GetReduxWrapperUsingSliceReducer = (initialState?: InitialStoreState) => {
+  Wrapper: ({ children }: WrapperProps) => JSX.Element;
+  store: StoreType;
+};
+
+export const getReduxWrapperWithStore: GetReduxWrapperUsingSliceReducer = (
+  preloadedState: InitialStoreState = {},
+) => {
+  const testStore = configureStore({
+    reducer: {
+      search: searchReducer,
+      project: projectReducer,
+      drugs: drugsReducer,
+      mirnas: mirnasReducer,
+      chemicals: chemicalsReducer,
+      bioEntityContents: bioEntityContentsReducer,
+      drawer: drawerReducer,
+      models: modelsReducer,
+    },
+    preloadedState,
+  });
+
+  const Wrapper = ({ children }: WrapperProps): JSX.Element => (
+    <Provider store={testStore}>{children}</Provider>
+  );
+
+  return { Wrapper, store: testStore };
+};