load reaction when comment for reaction is clicked

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts

@@ -5,7 +5,7 @@ import { AppDispatch } from '@/redux/store';
 import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
 import { FeatureLike } from 'ol/Feature';
 import { Comment } from '@/types/models';
-import { getCommentElement } from '@/redux/comment/thunks/getComments';
+import { getCommentElement, getCommentReaction } from '@/redux/comment/thunks/getComments';
 
 interface HandleFeaturesClickResult {
   shouldBlockCoordSearch: boolean;
@@ -34,6 +34,7 @@ export const handleFeaturesClick = (
           dispatch(getCommentElement({ elementId: Number(elementId), modelId }));
           dispatch(openBioEntityDrawerById(Number(elementId)));
         } else if (type === 'REACTION') {
+          dispatch(getCommentReaction({ elementId: Number(elementId), modelId }));
           dispatch(openReactionDrawerById(Number(elementId)));
         } else if (type === 'POINT') {
           throw new Error(`Opening point comment is not implemented yet`);

src/redux/apiPath.ts

@@ -22,6 +22,8 @@ const getPublicationsURLSearchParams = (
 export const apiPath = {
   getElementById: (elementId: number, modelId: number): string =>
     `projects/${PROJECT_ID}/models/${modelId}/bioEntities/elements/${elementId}`,
+  getReactionById: (reactionId: number, modelId: number): string =>
+    `projects/${PROJECT_ID}/models/${modelId}/bioEntities/reactions/?id=${reactionId}`,
   getBioEntityContentsStringWithQuery: ({
     searchQuery,
     isPerfectMatch,

src/redux/comment/comment.constants.ts

@@ -13,4 +13,5 @@ export const COMMENT_INITIAL_STATE: CommentsState = {
   error: { name: '', message: '' },
   isOpen: false,
   commentElement: null,
+  commentReaction: null,
 };

src/redux/comment/comment.mock.ts

@@ -7,4 +7,5 @@ export const COMMENT_INITIAL_STATE_MOCK: CommentsState = {
   error: DEFAULT_ERROR,
   isOpen: false,
   commentElement: null,
+  commentReaction: null,
 };

src/redux/comment/comment.reducers.ts

 import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
 import { CommentsState } from '@/redux/comment/comment.types';
-import { getCommentElement, getComments } from '@/redux/comment/thunks/getComments';
+import {
+  getCommentElement,
+  getCommentReaction,
+  getComments,
+} from '@/redux/comment/thunks/getComments';
 
 export const getCommentsReducer = (builder: ActionReducerMapBuilder<CommentsState>): void => {
   builder.addCase(getComments.pending, state => {
@@ -34,6 +38,25 @@ export const getCommentElementReducer = (builder: ActionReducerMapBuilder<Commen
   });
 };
 
+export const getCommentReactionReducer = (
+  builder: ActionReducerMapBuilder<CommentsState>,
+): void => {
+  builder.addCase(getCommentReaction.pending, state => {
+    state.loading = 'pending';
+    state.commentReaction = null;
+  });
+
+  builder.addCase(getCommentReaction.fulfilled, (state, action) => {
+    state.loading = 'succeeded';
+    state.commentReaction = action.payload;
+  });
+
+  builder.addCase(getCommentReaction.rejected, state => {
+    state.loading = 'failed';
+    state.commentReaction = null;
+  });
+};
+
 export const showCommentsReducer = (state: CommentsState): void => {
   state.isOpen = true;
 };

src/redux/comment/comment.selectors.ts

@@ -10,6 +10,11 @@ export const commentElementSelector = createSelector(
   commentState => commentState.commentElement,
 );
 
+export const commentReactionSelector = createSelector(
+  commentSelector,
+  commentState => commentState.commentReaction,
+);
+
 export const allCommentsSelectorOfCurrentMap = createSelector(
   commentSelector,
   currentModelIdSelector,

src/redux/comment/comment.slice.ts

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 import { COMMENT_INITIAL_STATE } from '@/redux/comment/comment.constants';
 import {
   getCommentElementReducer,
+  getCommentReactionReducer,
   getCommentsReducer,
   hideCommentsReducer,
   showCommentsReducer,
@@ -17,6 +18,7 @@ export const commentsSlice = createSlice({
   extraReducers: builder => {
     getCommentsReducer(builder);
     getCommentElementReducer(builder);
+    getCommentReactionReducer(builder);
   },
 });
 

src/redux/comment/comment.types.ts

 import { FetchDataState } from '@/types/fetchDataState';
-import { BioEntity, Comment } from '@/types/models';
+import { BioEntity, Comment, Reaction } from '@/types/models';
 import { PayloadAction } from '@reduxjs/toolkit';
 
 export interface CommentsState extends FetchDataState<Comment[], []> {
   isOpen: boolean;
   commentElement: BioEntity | null;
+  commentReaction: Reaction | null;
 }
 
 export type OpenCommentByIdPayload = number | string;

src/redux/comment/thunks/getComments.ts

@@ -4,10 +4,12 @@ import { axiosInstance, axiosInstanceNewAPI } from '@/services/api/utils/axiosIn
 import { ThunkConfig } from '@/types/store';
 import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import { BioEntity, Comment } from '@/types/models';
+import { BioEntity, Comment, Reaction } from '@/types/models';
 import { z } from 'zod';
 import { bioEntitySchema } from '@/models/bioEntitySchema';
 import { GetElementProps } from '@/redux/comment/comment.types';
+import { reactionSchema } from '@/models/reaction';
+import { ZERO } from '@/constants/common';
 
 export const getComments = createAsyncThunk<Comment[], void, ThunkConfig>(
   'project/getComments',
@@ -40,3 +42,20 @@ export const getCommentElement = createAsyncThunk<BioEntity | null, GetElementPr
     }
   },
 );
+
+export const getCommentReaction = createAsyncThunk<Reaction | null, GetElementProps, ThunkConfig>(
+  'project/getCommentReaction',
+  async ({ elementId, modelId }) => {
+    try {
+      const response = await axiosInstance.get<Reaction[]>(
+        apiPath.getReactionById(elementId, modelId),
+      );
+
+      const isDataValid = validateDataUsingZodSchema(response.data, z.array(reactionSchema));
+
+      return isDataValid && response.data.length > ZERO ? response.data[ZERO] : null;
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  },
+);

src/redux/reactions/reactions.selector.ts

 import { Reaction } from '@/types/models';
 import { createSelector } from '@reduxjs/toolkit';
+import { commentReactionSelector } from '@/redux/comment/comment.selectors';
 import { currentDrawerReactionIdSelector } from '../drawer/drawer.selectors';
 import { currentModelIdSelector } from '../models/models.selectors';
 import { rootSelector } from '../root/root.selectors';
@@ -23,9 +24,15 @@ export const allReactionsSelectorOfCurrentMap = createSelector(
 
 export const currentDrawerReactionSelector = createSelector(
   reactionsDataSelector,
+  commentReactionSelector,
   currentDrawerReactionIdSelector,
-  (reactions, currentDrawerReactionId) =>
-    reactions.find(({ id }) => id === currentDrawerReactionId),
+  (reactions, commentReaction, currentDrawerReactionId) => {
+    if (commentReaction && commentReaction.id === currentDrawerReactionId) {
+      return commentReaction;
+    }
+
+    return reactions.find(({ id }) => id === currentDrawerReactionId);
+  },
 );
 
 export const currentDrawerReactionGroupedReferencesSelector = createSelector(