From 8b5ac299effe331bafe18e956ed5d689597073e7 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 6 Jun 2024 10:38:51 +0200
Subject: [PATCH] toggle comments is working
---
.../MapNavigation/MapNavigation.component.tsx | 11 ++++++++++-
.../config/commentsLayer/useOlMapCommentsLayer.ts | 10 +++++++---
src/redux/comment/comment.constants.ts | 1 +
src/redux/comment/comment.mock.ts | 1 +
src/redux/comment/comment.reducers.ts | 9 +++++++++
src/redux/comment/comment.slice.ts | 13 +++++++++++--
src/redux/comment/comment.types.ts | 4 +++-
7 files changed, 42 insertions(+), 7 deletions(-)
diff --git a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
index 3a6517e9..b5b638aa 100644
--- a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
+++ b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
@@ -11,6 +11,8 @@ import { Icon } from '@/shared/Icon';
import { MouseEvent } from 'react';
import { twMerge } from 'tailwind-merge';
import { getComments } from '@/redux/comment/thunks/getComments';
+import { commentSelector } from '@/redux/comment/comment.selectors';
+import { hideComments, showComments } from '@/redux/comment/comment.slice';
export const MapNavigation = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -21,6 +23,8 @@ export const MapNavigation = (): JSX.Element => {
const isActive = (modelId: number): boolean => currentModelId === modelId;
const isNotMainMap = (modelName: string): boolean => modelName !== MAIN_MAP;
+ const commentsOpen = useAppSelector(commentSelector).isOpen;
+
const onCloseSubmap = (event: MouseEvent<HTMLDivElement>, map: OppenedMap): void => {
event.stopPropagation();
if (isActive(map.modelId)) {
@@ -47,7 +51,12 @@ export const MapNavigation = (): JSX.Element => {
};
const toggleComments = async (): Promise<void> => {
- await dispatch(getComments());
+ if (!commentsOpen) {
+ await dispatch(getComments());
+ dispatch(showComments());
+ } else {
+ dispatch(hideComments());
+ }
};
return (
diff --git a/src/components/Map/MapViewer/utils/config/commentsLayer/useOlMapCommentsLayer.ts b/src/components/Map/MapViewer/utils/config/commentsLayer/useOlMapCommentsLayer.ts
index 638d7f4c..6eb9e2cb 100644
--- a/src/components/Map/MapViewer/utils/config/commentsLayer/useOlMapCommentsLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/commentsLayer/useOlMapCommentsLayer.ts
@@ -5,22 +5,26 @@ import { Geometry } from 'ol/geom';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { useSelector } from 'react-redux';
-import { allCommentsSelectorOfCurrentMap } from '@/redux/comment/comment.selectors';
+import {
+ allCommentsSelectorOfCurrentMap,
+ commentSelector,
+} from '@/redux/comment/comment.selectors';
import { getCommentsFeatures } from '@/components/Map/MapViewer/utils/config/commentsLayer/getCommentsFeatures';
import { useMemo } from 'react';
export const useOlMapCommentsLayer = (): VectorLayer<VectorSource<Feature<Geometry>>> => {
const pointToProjection = usePointToProjection();
const comments = useSelector(allCommentsSelectorOfCurrentMap);
+ const isVisible = useSelector(commentSelector).isOpen;
const elementsFeatures = useMemo(
() =>
[
- getCommentsFeatures(comments, {
+ getCommentsFeatures(isVisible ? comments : [], {
pointToProjection,
}),
].flat(),
- [comments, pointToProjection],
+ [comments, pointToProjection, isVisible],
);
const vectorSource = useMemo(() => {
diff --git a/src/redux/comment/comment.constants.ts b/src/redux/comment/comment.constants.ts
index 389a12dc..36914070 100644
--- a/src/redux/comment/comment.constants.ts
+++ b/src/redux/comment/comment.constants.ts
@@ -11,4 +11,5 @@ export const COMMENT_INITIAL_STATE: CommentsState = {
data: [],
loading: 'idle',
error: { name: '', message: '' },
+ isOpen: false,
};
diff --git a/src/redux/comment/comment.mock.ts b/src/redux/comment/comment.mock.ts
index 121df19f..e84f898d 100644
--- a/src/redux/comment/comment.mock.ts
+++ b/src/redux/comment/comment.mock.ts
@@ -5,4 +5,5 @@ export const COMMENT_INITIAL_STATE_MOCK: CommentsState = {
data: [],
loading: 'idle',
error: DEFAULT_ERROR,
+ isOpen: false,
};
diff --git a/src/redux/comment/comment.reducers.ts b/src/redux/comment/comment.reducers.ts
index e9d5f098..df94d014 100644
--- a/src/redux/comment/comment.reducers.ts
+++ b/src/redux/comment/comment.reducers.ts
@@ -11,7 +11,16 @@ export const getCommentsReducer = (builder: ActionReducerMapBuilder<CommentsStat
state.loading = 'succeeded';
state.data = action.payload;
});
+
builder.addCase(getComments.rejected, state => {
state.loading = 'failed';
});
};
+
+export const showCommentsReducer = (state: CommentsState): void => {
+ state.isOpen = true;
+};
+
+export const hideCommentsReducer = (state: CommentsState): void => {
+ state.isOpen = false;
+};
diff --git a/src/redux/comment/comment.slice.ts b/src/redux/comment/comment.slice.ts
index 9524be05..2910a872 100644
--- a/src/redux/comment/comment.slice.ts
+++ b/src/redux/comment/comment.slice.ts
@@ -1,14 +1,23 @@
import { createSlice } from '@reduxjs/toolkit';
import { COMMENT_INITIAL_STATE } from '@/redux/comment/comment.constants';
-import { getCommentsReducer } from '@/redux/comment/comment.reducers';
+import {
+ getCommentsReducer,
+ hideCommentsReducer,
+ showCommentsReducer,
+} from '@/redux/comment/comment.reducers';
export const commentsSlice = createSlice({
name: 'comments',
initialState: COMMENT_INITIAL_STATE,
- reducers: {},
+ reducers: {
+ showComments: showCommentsReducer,
+ hideComments: hideCommentsReducer,
+ },
extraReducers: builder => {
getCommentsReducer(builder);
},
});
+export const { showComments, hideComments } = commentsSlice.actions;
+
export default commentsSlice.reducer;
diff --git a/src/redux/comment/comment.types.ts b/src/redux/comment/comment.types.ts
index 08975985..b6389d95 100644
--- a/src/redux/comment/comment.types.ts
+++ b/src/redux/comment/comment.types.ts
@@ -1,4 +1,6 @@
import { FetchDataState } from '@/types/fetchDataState';
import { Comment } from '@/types/models';
-export type CommentsState = FetchDataState<Comment[], []>;
+export interface CommentsState extends FetchDataState<Comment[], []> {
+ isOpen: boolean;
+}
--
GitLab