From 8ea0a1adf27e6f1ed53a6886287a76f17ebd8adc Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 6 Jun 2024 16:23:47 +0200
Subject: [PATCH] show general comments
---
.../CommentDrawer/CommentDrawer.component.tsx | 31 +++++++++++++++++++
.../Map/Drawer/CommentDrawer/index.ts | 1 +
.../Map/Drawer/Drawer.component.tsx | 2 ++
.../ResultsList.component.test.tsx | 3 ++
.../SearchDrawerWrapper.component.test.tsx | 6 ++++
.../mapSingleClick/handleFeaturesClick.ts | 8 +++--
src/redux/drawer/drawer.constants.ts | 3 ++
src/redux/drawer/drawer.reducers.ts | 10 ++++++
src/redux/drawer/drawer.selectors.ts | 10 ++++++
src/redux/drawer/drawer.slice.ts | 3 ++
src/redux/drawer/drawer.types.ts | 8 +++++
src/redux/drawer/drawerFixture.ts | 21 +++++++++++++
src/types/drawerName.ts | 1 +
13 files changed, 105 insertions(+), 2 deletions(-)
create mode 100644 src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx
create mode 100644 src/components/Map/Drawer/CommentDrawer/index.ts
diff --git a/src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx b/src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx
new file mode 100644
index 00000000..5079669e
--- /dev/null
+++ b/src/components/Map/Drawer/CommentDrawer/CommentDrawer.component.tsx
@@ -0,0 +1,31 @@
+import { DrawerHeading } from '@/shared/DrawerHeading';
+import { useSelector } from 'react-redux';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component';
+import { ZERO } from '@/constants/common';
+import { currentDrawerCommentId } from '@/redux/drawer/drawer.selectors';
+import { allCommentsSelectorOfCurrentMap } from '@/redux/comment/comment.selectors';
+
+export const CommentDrawer = (): React.ReactNode => {
+ const commentId = useSelector(currentDrawerCommentId);
+
+ const commentsData = useAppSelector(allCommentsSelectorOfCurrentMap);
+
+ const comments = commentsData.filter(commentEntry => commentEntry.id === commentId);
+
+ if (comments.length === ZERO) {
+ return null;
+ }
+
+ return (
+ <div className="h-full max-h-full" data-testid="reaction-drawer">
+ <DrawerHeading title={<span className="font-normal">Area: </span>} />
+ <div className="flex h-[calc(100%-93px)] max-h-[calc(100%-93px)] flex-col gap-6 overflow-y-auto p-6">
+ <div className="font-bold"> Comments</div>
+ {comments.map(comment => (
+ <CommentItem key={comment.id} comment={comment} />
+ ))}
+ </div>
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/CommentDrawer/index.ts b/src/components/Map/Drawer/CommentDrawer/index.ts
new file mode 100644
index 00000000..c55db1b1
--- /dev/null
+++ b/src/components/Map/Drawer/CommentDrawer/index.ts
@@ -0,0 +1 @@
+export { CommentDrawer } from './CommentDrawer.component';
diff --git a/src/components/Map/Drawer/Drawer.component.tsx b/src/components/Map/Drawer/Drawer.component.tsx
index de1aa94e..71f10406 100644
--- a/src/components/Map/Drawer/Drawer.component.tsx
+++ b/src/components/Map/Drawer/Drawer.component.tsx
@@ -2,6 +2,7 @@ import { DRAWER_ROLE } from '@/components/Map/Drawer/Drawer.constants';
import { drawerSelector } from '@/redux/drawer/drawer.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { twMerge } from 'tailwind-merge';
+import { CommentDrawer } from '@/components/Map/Drawer/CommentDrawer';
import { AvailablePluginsDrawer } from './AvailablePluginsDrawer';
import { BioEntityDrawer } from './BioEntityDrawer/BioEntityDrawer.component';
import { ExportDrawer } from './ExportDrawer';
@@ -30,6 +31,7 @@ export const Drawer = (): JSX.Element => {
{isOpen && drawerName === 'project-info' && <ProjectInfoDrawer />}
{isOpen && drawerName === 'export' && <ExportDrawer />}
{isOpen && drawerName === 'available-plugins' && <AvailablePluginsDrawer />}
+ {isOpen && drawerName === 'comment' && <CommentDrawer />}
</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 0be1f6dd..3a46ecdc 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
@@ -32,6 +32,9 @@ const INITIAL_STATE: InitialStoreState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
},
drugs: {
data: [
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.test.tsx
index 3ad3dbab..3d5b627b 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/SearchDrawerWrapper.component.test.tsx
@@ -51,6 +51,9 @@ describe('SearchDrawerWrapper - component', () => {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
},
});
@@ -77,6 +80,9 @@ describe('SearchDrawerWrapper - component', () => {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
},
});
diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts
index fd48e330..f1b980a9 100644
--- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts
+++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts
@@ -1,6 +1,10 @@
import { SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common';
import { FEATURE_TYPE, PIN_ICON_ANY, SURFACE_ANY } from '@/constants/features';
-import { openBioEntityDrawerById, openReactionDrawerById } from '@/redux/drawer/drawer.slice';
+import {
+ openBioEntityDrawerById,
+ openCommentDrawerById,
+ openReactionDrawerById,
+} from '@/redux/drawer/drawer.slice';
import { AppDispatch } from '@/redux/store';
import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
import { FeatureLike } from 'ol/Feature';
@@ -37,7 +41,7 @@ export const handleFeaturesClick = (
dispatch(getCommentReaction({ elementId: Number(elementId), modelId }));
dispatch(openReactionDrawerById(Number(elementId)));
} else if (type === 'POINT') {
- throw new Error(`Opening point comment is not implemented yet`);
+ dispatch(openCommentDrawerById(Number(pinId)));
} else {
throw new Error(`Unknown comment type${type}`);
}
diff --git a/src/redux/drawer/drawer.constants.ts b/src/redux/drawer/drawer.constants.ts
index 84246ac3..a55405a7 100644
--- a/src/redux/drawer/drawer.constants.ts
+++ b/src/redux/drawer/drawer.constants.ts
@@ -18,6 +18,9 @@ export const DRAWER_INITIAL_STATE: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const RESULT_DRAWERS = ['search', 'reaction', 'bio-entity'];
diff --git a/src/redux/drawer/drawer.reducers.ts b/src/redux/drawer/drawer.reducers.ts
index 29333ec2..88f1096c 100644
--- a/src/redux/drawer/drawer.reducers.ts
+++ b/src/redux/drawer/drawer.reducers.ts
@@ -2,6 +2,7 @@ import { STEP } from '@/constants/searchDrawer';
import type {
DrawerState,
OpenBioEntityDrawerByIdAction,
+ OpenCommentDrawerByIdAction,
OpenReactionDrawerByIdAction,
OpenSearchDrawerWithSelectedTabReducerAction,
} from '@/redux/drawer/drawer.types';
@@ -113,6 +114,15 @@ export const openBioEntityDrawerByIdReducer = (
state.bioEntityDrawerState.bioentityId = action.payload;
};
+export const openCommentDrawerByIdReducer = (
+ state: DrawerState,
+ action: OpenCommentDrawerByIdAction,
+): void => {
+ state.isOpen = true;
+ state.drawerName = 'comment';
+ state.commentDrawerState.commentId = action.payload;
+};
+
export const getBioEntityDrugsForTargetReducers = (
builder: ActionReducerMapBuilder<DrawerState>,
): void => {
diff --git a/src/redux/drawer/drawer.selectors.ts b/src/redux/drawer/drawer.selectors.ts
index 96fab201..6c3a2a01 100644
--- a/src/redux/drawer/drawer.selectors.ts
+++ b/src/redux/drawer/drawer.selectors.ts
@@ -43,11 +43,21 @@ export const bioEntityDrawerStateSelector = createSelector(
state => state.bioEntityDrawerState,
);
+export const commentDrawerStateSelector = createSelector(
+ drawerSelector,
+ state => state.commentDrawerState,
+);
+
export const currentSearchedBioEntityId = createSelector(
bioEntityDrawerStateSelector,
state => state.bioentityId,
);
+export const currentDrawerCommentId = createSelector(
+ commentDrawerStateSelector,
+ state => state.commentId,
+);
+
export const currentSearchedBioEntityDrugsSelector = createSelector(
bioEntityDrawerStateSelector,
currentSearchedBioEntityId,
diff --git a/src/redux/drawer/drawer.slice.ts b/src/redux/drawer/drawer.slice.ts
index 99d928db..ddb7c23e 100644
--- a/src/redux/drawer/drawer.slice.ts
+++ b/src/redux/drawer/drawer.slice.ts
@@ -11,6 +11,7 @@ import {
getBioEntityChemicalsForTargetReducers,
getBioEntityDrugsForTargetReducers,
openBioEntityDrawerByIdReducer,
+ openCommentDrawerByIdReducer,
openDrawerReducer,
openOverlaysDrawerReducer,
openReactionDrawerByIdReducer,
@@ -37,6 +38,7 @@ const drawerSlice = createSlice({
displayEntityDetails: displayEntityDetailsReducer,
openReactionDrawerById: openReactionDrawerByIdReducer,
openBioEntityDrawerById: openBioEntityDrawerByIdReducer,
+ openCommentDrawerById: openCommentDrawerByIdReducer,
},
extraReducers: builder => {
getBioEntityDrugsForTargetReducers(builder);
@@ -59,6 +61,7 @@ export const {
displayEntityDetails,
openReactionDrawerById,
openBioEntityDrawerById,
+ openCommentDrawerById,
} = drawerSlice.actions;
export default drawerSlice.reducer;
diff --git a/src/redux/drawer/drawer.types.ts b/src/redux/drawer/drawer.types.ts
index a0d51989..4cf1440f 100644
--- a/src/redux/drawer/drawer.types.ts
+++ b/src/redux/drawer/drawer.types.ts
@@ -25,6 +25,10 @@ export type BioEntityDrawerState = {
chemicals: KeyedFetchDataState<Chemical[], []>;
};
+export type CommentDrawerState = {
+ commentId?: number;
+};
+
export type DrawerState = {
isOpen: boolean;
drawerName: DrawerName;
@@ -32,6 +36,7 @@ export type DrawerState = {
reactionDrawerState: ReactionDrawerState;
bioEntityDrawerState: BioEntityDrawerState;
overlayDrawerState: OverlayDrawerState;
+ commentDrawerState: CommentDrawerState;
};
export type OpenSearchDrawerWithSelectedTabReducerPayload = string;
@@ -46,3 +51,6 @@ export type OpenBioEntityDrawerByIdAction = PayloadAction<OpenBioEntityDrawerByI
export type SetSelectedSearchElementPayload = string;
export type SetSelectedSearchElementAction = PayloadAction<SetSelectedSearchElementPayload>;
+
+export type OpenCommentDrawerByIdPayload = number;
+export type OpenCommentDrawerByIdAction = PayloadAction<OpenCommentDrawerByIdPayload>;
diff --git a/src/redux/drawer/drawerFixture.ts b/src/redux/drawer/drawerFixture.ts
index fc7138ab..a2a5adac 100644
--- a/src/redux/drawer/drawerFixture.ts
+++ b/src/redux/drawer/drawerFixture.ts
@@ -18,6 +18,9 @@ export const initialStateFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const openedDrawerSubmapsFixture: DrawerState = {
@@ -38,6 +41,9 @@ export const openedDrawerSubmapsFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const drawerSearchStepOneFixture: DrawerState = {
@@ -58,6 +64,9 @@ export const drawerSearchStepOneFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const drawerSearchDrugsStepTwoFixture: DrawerState = {
@@ -78,6 +87,9 @@ export const drawerSearchDrugsStepTwoFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const drawerSearchChemicalsStepTwoFixture: DrawerState = {
@@ -98,6 +110,9 @@ export const drawerSearchChemicalsStepTwoFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const drawerOverlaysStepOneFixture: DrawerState = {
@@ -118,6 +133,9 @@ export const drawerOverlaysStepOneFixture: DrawerState = {
overlayDrawerState: {
currentStep: 2,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
export const openedExportDrawerFixture: DrawerState = {
@@ -138,4 +156,7 @@ export const openedExportDrawerFixture: DrawerState = {
overlayDrawerState: {
currentStep: 0,
},
+ commentDrawerState: {
+ commentId: undefined,
+ },
};
diff --git a/src/types/drawerName.ts b/src/types/drawerName.ts
index 3715c57d..d6f79610 100644
--- a/src/types/drawerName.ts
+++ b/src/types/drawerName.ts
@@ -9,4 +9,5 @@ export type DrawerName =
| 'reaction'
| 'overlays'
| 'bio-entity'
+ | 'comment'
| 'available-plugins';
--
GitLab