toggle comments is working

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 (

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(() => {

src/redux/comment/comment.constants.ts

@@ -11,4 +11,5 @@ export const COMMENT_INITIAL_STATE: CommentsState = {
   data: [],
   loading: 'idle',
   error: { name: '', message: '' },
+  isOpen: false,
 };

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

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

src/redux/comment/comment.slice.ts

 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;

src/redux/comment/comment.types.ts

 import { FetchDataState } from '@/types/fetchDataState';
 import { Comment } from '@/types/models';
 
-export type CommentsState = FetchDataState<Comment[], []>;
+export interface CommentsState extends FetchDataState<Comment[], []> {
+  isOpen: boolean;
+}