From bbdc1ed55f2a36c1780eb84ac6ecc845462834a0 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Fri, 26 Apr 2024 13:43:18 +0200
Subject: [PATCH] don't show links when disease and organism is not provided
---
.../ProjectInfoDrawer.component.test.tsx | 14 ++++--
.../ProjectInfoDrawer.component.tsx | 48 ++++++++++---------
src/redux/project/project.selectors.ts | 4 +-
3 files changed, 37 insertions(+), 29 deletions(-)
diff --git a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.test.tsx b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.test.tsx
index e7e1a3ef..ef21f2dc 100644
--- a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.test.tsx
+++ b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.test.tsx
@@ -69,12 +69,14 @@ describe('ProjectInfoDrawer', () => {
const diseaseLink = screen.getByText(/Disease:/i);
expect(diseaseLink).toBeInTheDocument();
- const linkelement = screen.getByRole('link', { name: projectFixture.diseaseName });
+ const linkelement = screen.getByRole('link', {
+ name: projectFixture.diseaseName ? projectFixture.diseaseName : 'xyz',
+ });
expect(linkelement).toBeInTheDocument();
- expect(linkelement).toHaveAttribute('href', projectFixture.disease.link);
+ expect(linkelement).toHaveAttribute('href', projectFixture.disease?.link);
});
- it('should fetch diesease name when diseaseId is provided', async () => {
+ it('should fetch disease name when diseaseId is provided', async () => {
await act(() => {
renderComponent(MOCKED_STORE);
});
@@ -82,9 +84,11 @@ describe('ProjectInfoDrawer', () => {
const organismLink = screen.getByText(/Organism:/i);
expect(organismLink).toBeInTheDocument();
- const linkelement = screen.getByRole('link', { name: projectFixture.organismName });
+ const linkelement = screen.getByRole('link', {
+ name: projectFixture.organismName ? projectFixture.organismName : 'xyz',
+ });
expect(linkelement).toBeInTheDocument();
- expect(linkelement).toHaveAttribute('href', projectFixture.organism.link);
+ expect(linkelement).toHaveAttribute('href', projectFixture.organism?.link);
});
it('should render the source file download button', () => {
diff --git a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx
index 73894aaf..5a04b6fa 100644
--- a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx
+++ b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx
@@ -63,28 +63,32 @@ export const ProjectInfoDrawer = (): JSX.Element => {
Manual
</a>
</li>
- <li className="mt-2 text-hyperlink-blue">
- <span className="text-black">Disease: </span>
- <a
- href={diseaseLink}
- target="_blank"
- rel="noopener noreferrer"
- className="font-semibold hover:underline"
- >
- {diseaseName}
- </a>
- </li>
- <li className="mt-2 text-hyperlink-blue">
- <span className="text-black">Organism: </span>
- <a
- href={organismLink}
- target="_blank"
- rel="noopener noreferrer"
- className="font-semibold hover:underline"
- >
- {organismName}
- </a>
- </li>
+ {diseaseName && (
+ <li className="mt-2 text-hyperlink-blue">
+ <span className="text-black">Disease: </span>
+ <a
+ href={diseaseLink}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="font-semibold hover:underline"
+ >
+ {diseaseName}
+ </a>
+ </li>
+ )}
+ {organismName && (
+ <li className="mt-2 text-hyperlink-blue">
+ <span className="text-black">Organism: </span>
+ <a
+ href={organismLink}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="font-semibold hover:underline"
+ >
+ {organismName}
+ </a>
+ </li>
+ )}
</ul>
<LinkButton className="mt-6" href={sourceDownloadLink} download="sourceFile.txt">
Download source file
diff --git a/src/redux/project/project.selectors.ts b/src/redux/project/project.selectors.ts
index aa0c62ae..7ab9a0c2 100644
--- a/src/redux/project/project.selectors.ts
+++ b/src/redux/project/project.selectors.ts
@@ -49,12 +49,12 @@ export const diseaseNameSelector = createSelector(
export const diseaseLinkSelector = createSelector(
projectDataSelector,
- projectData => projectData?.disease.link,
+ projectData => projectData?.disease?.link,
);
export const organismLinkSelector = createSelector(
projectDataSelector,
- projectData => projectData?.organism.link,
+ projectData => projectData?.organism?.link,
);
export const organismNameSelector = createSelector(
--
GitLab