diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx index 3e9efc13be0c4229d62b0a7a33056d1b9b413bc5..da9277ce5f7d3503c305703d1b72c31d179d50f8 100644 --- a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx +++ b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx @@ -2,6 +2,7 @@ import { ZERO } from '@/constants/common'; import { currentDrawerBioEntityRelatedSubmapSelector, currentDrawerBioEntitySelector, + currentDrawerCommentsSelector, } from '@/redux/bioEntity/bioEntity.selectors'; import { getChemicalsForBioEntityDrawerTarget, @@ -11,6 +12,7 @@ import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; import { useAppSelector } from '@/redux/hooks/useAppSelector'; import { DrawerHeading } from '@/shared/DrawerHeading'; import { ElementSearchResultType } from '@/types/models'; +import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component'; import { CollapsibleSection } from '../ExportDrawer/CollapsibleSection'; import { AnnotationItem } from './AnnotationItem'; import { AssociatedSubmap } from './AssociatedSubmap'; @@ -23,6 +25,7 @@ const TARGET_PREFIX: ElementSearchResultType = `ALIAS`; export const BioEntityDrawer = (): React.ReactNode => { const dispatch = useAppDispatch(); const bioEntityData = useAppSelector(currentDrawerBioEntitySelector); + const commentsData = useAppSelector(currentDrawerCommentsSelector); const relatedSubmap = useAppSelector(currentDrawerBioEntityRelatedSubmapSelector); const currentTargetId = bioEntityData?.id ? `${TARGET_PREFIX}:${bioEntityData.id}` : ''; @@ -38,6 +41,7 @@ export const BioEntityDrawer = (): React.ReactNode => { } const isReferenceAvailable = bioEntityData.references.length > ZERO; + const isCommentAvailable = commentsData.length > ZERO; return ( <div className="h-calc-drawer" data-testid="bioentity-drawer"> @@ -86,6 +90,9 @@ export const BioEntityDrawer = (): React.ReactNode => { isShowGroupedOverlays={Boolean(relatedSubmap)} isShowOverlayBioEntityName={Boolean(relatedSubmap)} /> + {isCommentAvailable && <div> Comments</div>} + {isCommentAvailable && + commentsData.map(comment => <CommentItem key={comment.id} comment={comment} />)} </div> </div> ); diff --git a/src/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component.tsx new file mode 100644 index 0000000000000000000000000000000000000000..5e875af0f63ef567bc199b34ea17b5b7b71dfaff --- /dev/null +++ b/src/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component.tsx @@ -0,0 +1,19 @@ +import { Icon } from '@/shared/Icon'; +import { Comment } from '@/types/models'; +import React from 'react'; + +interface CommentItemProps { + comment: Comment; +} + +export const CommentItem = (commentItemProps: CommentItemProps): JSX.Element => { + const { comment } = commentItemProps; + const { owner, content } = comment; + return ( + <div className="flex justify-between"> + <div> {owner}</div> + <div> {content} </div> + <Icon name="arrow" className="h-6 w-6 fill-font-500" /> + </div> + ); +}; diff --git a/src/redux/bioEntity/bioEntity.selectors.ts b/src/redux/bioEntity/bioEntity.selectors.ts index cdf19b29fc0214183d7318f6628e42acb2d7a9bb..cd5e2a153f34e1b376419081922cadc3d9d67759 100644 --- a/src/redux/bioEntity/bioEntity.selectors.ts +++ b/src/redux/bioEntity/bioEntity.selectors.ts @@ -3,9 +3,12 @@ import { ONE, SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common'; import { BioEntityWithPinType } from '@/types/bioEntity'; import { ElementIdTabObj } from '@/types/elements'; import { MultiSearchData } from '@/types/fetchDataState'; -import { BioEntity, BioEntityContent, MapModel } from '@/types/models'; +import { BioEntity, BioEntityContent, Comment, MapModel } from '@/types/models'; import { createSelector } from '@reduxjs/toolkit'; -import { commentElementSelector } from '@/redux/comment/comment.selectors'; +import { + allCommentsSelectorOfCurrentMap, + commentElementSelector, +} from '@/redux/comment/comment.selectors'; import { allChemicalsBioEntitesOfAllMapsSelector, allChemicalsBioEntitesOfCurrentMapSelector, @@ -260,10 +263,6 @@ export const currentDrawerBioEntitySelector = createSelector( commentElementSelector, currentSearchedBioEntityId, (bioEntities, commentElement, currentBioEntityId): BioEntity | undefined => { - // eslint-disable-next-line no-console - console.log(currentBioEntityId); - // eslint-disable-next-line no-console - console.log(commentElement); if (commentElement && commentElement.id === currentBioEntityId) { return commentElement; } @@ -311,3 +310,16 @@ export const allVisibleBioEntitiesIdsSelector = createSelector( return [...elements, ...submapConnections].map(e => e.id); }, ); + +export const currentDrawerCommentsSelector = createSelector( + currentDrawerBioEntitySelector, + allCommentsSelectorOfCurrentMap, + (element, comments): Comment[] => { + if (element) { + return comments.filter( + comment => comment.modelId === element.model && Number(comment.elementId) === element.id, + ); + } + return []; + }, +);