From e2a9c3afdad2830be1a28a7ba58d840700238f93 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 6 Jun 2024 14:55:27 +0200
Subject: [PATCH] show comments in the left tab

---
 .../BioEntityDrawer.component.tsx             |  7 ++++++
 .../Comments/CommentItem.component.tsx        | 19 +++++++++++++++
 src/redux/bioEntity/bioEntity.selectors.ts    | 24 ++++++++++++++-----
 3 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component.tsx

diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx
index 3e9efc13..da9277ce 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 00000000..5e875af0
--- /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 cdf19b29..cd5e2a15 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 [];
+  },
+);
-- 
GitLab