open add comment modal

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>
   );
 };

src/components/FunctionalArea/Modal/Modal.component.tsx

 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>
+      )}
     </>
   );
 };

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]',
           )}
         >

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';

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,