From 199116fdbdf11c6bc331fab3cac45462832007f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tadeusz=20Miesi=C4=85c?= <tadeusz.miesiac@gmail.com>
Date: Fri, 1 Dec 2023 11:45:52 +0100
Subject: [PATCH] feat(search drawer headings): fixed heading naming in steps
---
.../BioEntitiesResultsList.component.tsx | 12 +++++------
.../ResultsList.component.test.tsx | 4 ++--
.../ResultsList/ResultsList.component.tsx | 12 +++++------
src/redux/models/models.selectors.ts | 6 ++++++
...erHeadingBackwardButton.component.test.tsx | 20 ++++++++-----------
.../DrawerHeadingBackwardButton.component.tsx | 9 +++------
6 files changed, 29 insertions(+), 34 deletions(-)
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesResultsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesResultsList.component.tsx
index 6960843c..eea837b2 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesResultsList.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesResultsList.component.tsx
@@ -3,13 +3,13 @@ import { bioEnititiesResultListSelector } from '@/redux/drawer/drawer.selectors'
import { DrawerHeadingBackwardButton } from '@/shared/DrawerHeadingBackwardButton';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { displayGroupedSearchResults } from '@/redux/drawer/drawer.slice';
-import { searchValueSelector } from '@/redux/search/search.selectors';
+import { currentModelNameSelector } from '@/redux/models/models.selectors';
import { BioEntitiesPinsList } from './BioEntitiesPinsList';
export const BioEntitiesResultsList = (): JSX.Element => {
const dispatch = useAppDispatch();
const bioEntityData = useAppSelector(bioEnititiesResultListSelector);
- const searchValue = useAppSelector(searchValueSelector);
+ const mapName = useAppSelector(currentModelNameSelector);
const navigateToGroupedSearchResults = (): void => {
dispatch(displayGroupedSearchResults());
@@ -17,11 +17,9 @@ export const BioEntitiesResultsList = (): JSX.Element => {
return (
<div>
- <DrawerHeadingBackwardButton
- title="BioEntity"
- value={searchValue}
- backwardFunction={navigateToGroupedSearchResults}
- />
+ <DrawerHeadingBackwardButton backwardFunction={navigateToGroupedSearchResults}>
+ {mapName}
+ </DrawerHeadingBackwardButton>
<BioEntitiesPinsList bioEnititesPins={bioEntityData} />
</div>
);
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
index 8b34ebc6..eef88b04 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
@@ -59,8 +59,8 @@ describe('ResultsList - component ', () => {
it('should render results and navigation panel', () => {
renderComponent(INITIAL_STATE);
- expect(screen.getByText('drugs:')).toBeInTheDocument();
- expect(screen.getByText('aspirin')).toBeInTheDocument();
+ const headingText = screen.getByTestId('drawer-heading-text');
+ expect(headingText.textContent).toBe('drugs');
const fristDrugName = drugsFixture[0].targets[0].name;
const secondDrugName = drugsFixture[0].targets[1].name;
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx
index 25000b8f..0d5ab7ed 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.tsx
@@ -3,14 +3,12 @@ import { resultListSelector, stepTypeDrawerSelector } from '@/redux/drawer/drawe
import { DrawerHeadingBackwardButton } from '@/shared/DrawerHeadingBackwardButton';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { displayGroupedSearchResults } from '@/redux/drawer/drawer.slice';
-import { searchValueSelector } from '@/redux/search/search.selectors';
import { PinsList } from './PinsList';
export const ResultsList = (): JSX.Element => {
const dispatch = useAppDispatch();
const data = useAppSelector(resultListSelector);
const stepType = useAppSelector(stepTypeDrawerSelector);
- const searchValue = useAppSelector(searchValueSelector);
const navigateToGroupedSearchResults = (): void => {
dispatch(displayGroupedSearchResults());
@@ -18,11 +16,11 @@ export const ResultsList = (): JSX.Element => {
return (
<div>
- <DrawerHeadingBackwardButton
- title={stepType}
- value={searchValue}
- backwardFunction={navigateToGroupedSearchResults}
- />
+ <DrawerHeadingBackwardButton backwardFunction={navigateToGroupedSearchResults}>
+ <span className="capitalize" data-testid="drawer-heading-text">
+ {stepType}
+ </span>
+ </DrawerHeadingBackwardButton>
{data && <PinsList pinsList={data} type={stepType} />}
</div>
);
diff --git a/src/redux/models/models.selectors.ts b/src/redux/models/models.selectors.ts
index a71c53eb..92cd6b71 100644
--- a/src/redux/models/models.selectors.ts
+++ b/src/redux/models/models.selectors.ts
@@ -17,6 +17,12 @@ export const currentModelIdSelector = createSelector(
currentModelSelector,
model => model?.idObject || MODEL_ID_DEFAULT,
);
+
+export const currentModelNameSelector = createSelector(
+ currentModelSelector,
+ model => model?.name || '',
+);
+
export const modelByIdSelector = createSelector(
[modelsSelector, (_state, modelId: number): number => modelId],
(models, modelId) => (models?.data || []).find(({ idObject }) => idObject === modelId),
diff --git a/src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.test.tsx b/src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.test.tsx
index 17f09c01..d35b4270 100644
--- a/src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.test.tsx
+++ b/src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.test.tsx
@@ -10,8 +10,7 @@ import { DrawerHeadingBackwardButton } from './DrawerHeadingBackwardButton.compo
const backwardFunction = jest.fn();
const renderComponent = (
- title: string,
- value: string[],
+ children: React.ReactNode,
initialStoreState: InitialStoreState = {},
): { store: StoreType } => {
const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
@@ -19,11 +18,9 @@ const renderComponent = (
return (
render(
<Wrapper>
- <DrawerHeadingBackwardButton
- title={title}
- value={value}
- backwardFunction={backwardFunction}
- />
+ <DrawerHeadingBackwardButton backwardFunction={backwardFunction}>
+ {children}
+ </DrawerHeadingBackwardButton>
</Wrapper>,
),
{
@@ -38,16 +35,15 @@ describe('DrawerHeadingBackwardButton - component', () => {
});
it('should render passed values', () => {
- renderComponent('Title', ['value']);
+ renderComponent('Title');
expect(screen.getByRole('back-button')).toBeInTheDocument();
- expect(screen.getByText('Title:')).toBeInTheDocument();
- expect(screen.getByText('value')).toBeInTheDocument();
+ expect(screen.getByText('Title')).toBeInTheDocument();
expect(screen.getByRole('close-drawer-button')).toBeInTheDocument();
});
it('should call backward function on back button click', () => {
- renderComponent('Title', ['value']);
+ renderComponent('Title');
const backButton = screen.getByRole('back-button');
backButton.click();
@@ -56,7 +52,7 @@ describe('DrawerHeadingBackwardButton - component', () => {
});
it('should call class drawer on close button click', () => {
- const { store } = renderComponent('Title', ['value'], {
+ const { store } = renderComponent('Title', {
drawer: {
...drawerSearchStepOneFixture,
},
diff --git a/src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.tsx b/src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.tsx
index 75b97b5e..3b920cdf 100644
--- a/src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.tsx
+++ b/src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.tsx
@@ -4,15 +4,13 @@ import { IconButton } from '@/shared/IconButton';
import { BACK_BUTTON_ROLE, CLOSE_BUTTON_ROLE } from './DrawerHeadingBackwardButton.constants';
export interface DrawerHeadingBackwardButtonProps {
- title: string;
- value: string[];
backwardFunction: () => void;
+ children: React.ReactNode;
}
export const DrawerHeadingBackwardButton = ({
backwardFunction,
- title,
- value,
+ children,
}: DrawerHeadingBackwardButtonProps): JSX.Element => {
const dispatch = useAppDispatch();
@@ -35,8 +33,7 @@ export const DrawerHeadingBackwardButton = ({
role={BACK_BUTTON_ROLE}
/>
<div className="ml-2 py-8 text-xl">
- <span className="font-normal">{title}: </span>
- <span className="font-semibold">{value}</span>
+ <span className="font-semibold">{children}</span>
</div>
</div>
<IconButton
--
GitLab