From 8e5adaf521f6130411fa82d2ed447e592499e0a8 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Fri, 7 Jun 2024 10:12:36 +0200
Subject: [PATCH] open add comment modal

---
 .../ContextMenu/ContextMenu.component.tsx        | 16 +++++++++++++++-
 .../FunctionalArea/Modal/Modal.component.tsx     |  6 ++++++
 .../Modal/ModalLayout/ModalLayout.component.tsx  |  1 +
 src/redux/modal/modal.reducers.ts                |  6 ++++++
 src/redux/modal/modal.slice.ts                   |  3 +++
 5 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx b/src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx
index a6811e65..59bb7f07 100644
--- a/src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx
+++ b/src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx
@@ -3,7 +3,7 @@ import { contextMenuSelector } from '@/redux/contextMenu/contextMenu.selector';
 import { closeContextMenu } from '@/redux/contextMenu/contextMenu.slice';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { openMolArtModalById } from '@/redux/modal/modal.slice';
+import { openAddCommentModal, openMolArtModalById } from '@/redux/modal/modal.slice';
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -27,6 +27,11 @@ export const ContextMenu = (): React.ReactNode => {
     }
   };
 
+  const handleAddCommentClick = (): void => {
+    dispatch(closeContextMenu());
+    dispatch(openAddCommentModal());
+  };
+
   return (
     <div
       className={twMerge(
@@ -50,6 +55,15 @@ export const ContextMenu = (): React.ReactNode => {
       >
         Open MolArt ({getUnitProtId()})
       </button>
+      <hr />
+      <button
+        className={twMerge('cursor-pointer text-xs font-normal')}
+        onClick={handleAddCommentClick}
+        type="button"
+        data-testid="add-comment"
+      >
+        Add comment
+      </button>
     </div>
   );
 };
diff --git a/src/components/FunctionalArea/Modal/Modal.component.tsx b/src/components/FunctionalArea/Modal/Modal.component.tsx
index 3fb3fb37..cb7fd132 100644
--- a/src/components/FunctionalArea/Modal/Modal.component.tsx
+++ b/src/components/FunctionalArea/Modal/Modal.component.tsx
@@ -1,6 +1,7 @@
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { modalSelector } from '@/redux/modal/modal.selector';
 import dynamic from 'next/dynamic';
+import { AddCommentModal } from '@/components/FunctionalArea/Modal/AddCommentModal/AddCommentModal.component';
 import { EditOverlayModal } from './EditOverlayModal';
 import { LoginModal } from './LoginModal';
 import { ModalLayout } from './ModalLayout';
@@ -44,6 +45,11 @@ export const Modal = (): React.ReactNode => {
           <LoggedInMenuModal />
         </ModalLayout>
       )}
+      {isOpen && modalName === 'add-comment' && (
+        <ModalLayout>
+          <AddCommentModal />
+        </ModalLayout>
+      )}
     </>
   );
 };
diff --git a/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx b/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx
index d5979910..bdfea134 100644
--- a/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx
+++ b/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx
@@ -28,6 +28,7 @@ export const ModalLayout = ({ children }: ModalLayoutProps): JSX.Element => {
           className={twMerge(
             'flex h-5/6 w-10/12	flex-col	overflow-hidden rounded-lg',
             modalName === 'login' && 'h-auto w-[400px]',
+            modalName === 'add-comment' && 'h-auto w-[400px]',
             ['edit-overlay', 'logged-in-menu'].includes(modalName) && 'h-auto w-[432px]',
           )}
         >
diff --git a/src/redux/modal/modal.reducers.ts b/src/redux/modal/modal.reducers.ts
index 4871a245..070e3771 100644
--- a/src/redux/modal/modal.reducers.ts
+++ b/src/redux/modal/modal.reducers.ts
@@ -42,6 +42,12 @@ export const openLoginModalReducer = (state: ModalState): void => {
   state.modalTitle = 'You need to login';
 };
 
+export const openAddCommentModalReducer = (state: ModalState): void => {
+  state.isOpen = true;
+  state.modalName = 'add-comment';
+  state.modalTitle = 'Add comment';
+};
+
 export const openLoggedInMenuModalReducer = (state: ModalState): void => {
   state.isOpen = true;
   state.modalName = 'logged-in-menu';
diff --git a/src/redux/modal/modal.slice.ts b/src/redux/modal/modal.slice.ts
index c1fe7b36..d05b2436 100644
--- a/src/redux/modal/modal.slice.ts
+++ b/src/redux/modal/modal.slice.ts
@@ -10,6 +10,7 @@ import {
   openPublicationsModalReducer,
   openEditOverlayModalReducer,
   openLoggedInMenuModalReducer,
+  openAddCommentModalReducer,
 } from './modal.reducers';
 
 const modalSlice = createSlice({
@@ -22,6 +23,7 @@ const modalSlice = createSlice({
     openMolArtModalById: openMolArtModalByIdReducer,
     setOverviewImageId: setOverviewImageIdReducer,
     openLoginModal: openLoginModalReducer,
+    openAddCommentModal: openAddCommentModalReducer,
     openPublicationsModal: openPublicationsModalReducer,
     openEditOverlayModal: openEditOverlayModalReducer,
     openLoggedInMenuModal: openLoggedInMenuModalReducer,
@@ -33,6 +35,7 @@ export const {
   closeModal,
   openOverviewImagesModalById,
   setOverviewImageId,
+  openAddCommentModal,
   openMolArtModalById,
   openLoginModal,
   openPublicationsModal,
-- 
GitLab