From 766fdd053879770bef31abd73db5c187fa229c44 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 6 Jun 2024 15:43:02 +0200
Subject: [PATCH] load reaction when comment for reaction is clicked
---
.../mapSingleClick/handleFeaturesClick.ts | 3 ++-
src/redux/apiPath.ts | 2 ++
src/redux/comment/comment.constants.ts | 1 +
src/redux/comment/comment.mock.ts | 1 +
src/redux/comment/comment.reducers.ts | 25 ++++++++++++++++++-
src/redux/comment/comment.selectors.ts | 5 ++++
src/redux/comment/comment.slice.ts | 2 ++
src/redux/comment/comment.types.ts | 3 ++-
src/redux/comment/thunks/getComments.ts | 21 +++++++++++++++-
src/redux/reactions/reactions.selector.ts | 11 ++++++--
10 files changed, 68 insertions(+), 6 deletions(-)
diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts
index 752d6571..fd48e330 100644
--- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleFeaturesClick.ts
+++ b/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`);
diff --git a/src/redux/apiPath.ts b/src/redux/apiPath.ts
index 200b9a56..d5a42e1c 100644
--- a/src/redux/apiPath.ts
+++ b/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,
diff --git a/src/redux/comment/comment.constants.ts b/src/redux/comment/comment.constants.ts
index b0600d4b..cff58977 100644
--- a/src/redux/comment/comment.constants.ts
+++ b/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,
};
diff --git a/src/redux/comment/comment.mock.ts b/src/redux/comment/comment.mock.ts
index 0320d9aa..be42596a 100644
--- a/src/redux/comment/comment.mock.ts
+++ b/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,
};
diff --git a/src/redux/comment/comment.reducers.ts b/src/redux/comment/comment.reducers.ts
index c06fe01d..b113cdfd 100644
--- a/src/redux/comment/comment.reducers.ts
+++ b/src/redux/comment/comment.reducers.ts
@@ -1,6 +1,10 @@
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;
};
diff --git a/src/redux/comment/comment.selectors.ts b/src/redux/comment/comment.selectors.ts
index da477218..7af687a2 100644
--- a/src/redux/comment/comment.selectors.ts
+++ b/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,
diff --git a/src/redux/comment/comment.slice.ts b/src/redux/comment/comment.slice.ts
index 35534688..ae4efb81 100644
--- a/src/redux/comment/comment.slice.ts
+++ b/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);
},
});
diff --git a/src/redux/comment/comment.types.ts b/src/redux/comment/comment.types.ts
index f8d9648b..581da6e4 100644
--- a/src/redux/comment/comment.types.ts
+++ b/src/redux/comment/comment.types.ts
@@ -1,10 +1,11 @@
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;
diff --git a/src/redux/comment/thunks/getComments.ts b/src/redux/comment/thunks/getComments.ts
index 663bca4e..7f526700 100644
--- a/src/redux/comment/thunks/getComments.ts
+++ b/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);
+ }
+ },
+);
diff --git a/src/redux/reactions/reactions.selector.ts b/src/redux/reactions/reactions.selector.ts
index 8dbc6990..14590fda 100644
--- a/src/redux/reactions/reactions.selector.ts
+++ b/src/redux/reactions/reactions.selector.ts
@@ -1,5 +1,6 @@
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(
--
GitLab