Resolve "[MIN-113] Show comments on the map"

Closes #67 (closed)

src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx

@@ -10,6 +10,9 @@ import { Button } from '@/shared/Button';
 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();
@@ -20,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)) {
@@ -45,27 +50,47 @@ export const MapNavigation = (): JSX.Element => {
     }
   };
 
+  const toggleComments = async (): Promise<void> => {
+    if (!commentsOpen) {
+      await dispatch(getComments());
+      dispatch(showComments());
+    } else {
+      dispatch(hideComments());
+    }
+  };
+
   return (
-    <div className="flex h-10 w-full flex-row flex-nowrap justify-start overflow-y-auto bg-white-pearl text-xs shadow-primary">
-      {openedMaps.map(map => (
+    <div className="flex h-10 w-full flex-row flex-nowrap justify-between overflow-y-auto bg-white-pearl text-xs shadow-primary">
+      <div className="flex flex-row items-center justify-start">
+        {openedMaps.map(map => (
+          <Button
+            key={map.modelId}
+            className={twMerge(
+              'relative h-10 whitespace-nowrap',
+              isActive(map.modelId) ? 'bg-[#EBF4FF]' : 'font-normal',
+            )}
+            variantStyles={isActive(map.modelId) ? 'secondary' : 'ghost'}
+            onClick={(): void => onSubmapTabClick(map)}
+          >
+            {map.modelName}
+            {isNotMainMap(map.modelName) && (
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+              <div onClick={(event): void => onCloseSubmap(event, map)} data-testid="close-icon">
+                <Icon name="close" className="ml-3 h-5 w-5 fill-font-400" />
+              </div>
+            )}
+          </Button>
+        ))}
+      </div>
+      <div className="flex items-center">
         <Button
-          key={map.modelId}
-          className={twMerge(
-            'h-10 whitespace-nowrap',
-            isActive(map.modelId) ? 'bg-[#EBF4FF]' : 'font-normal',
-          )}
-          variantStyles={isActive(map.modelId) ? 'secondary' : 'ghost'}
-          onClick={(): void => onSubmapTabClick(map)}
+          className="mx-4 flex-none"
+          variantStyles="secondary"
+          onClick={() => toggleComments()}
         >
-          {map.modelName}
-          {isNotMainMap(map.modelName) && (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-            <div onClick={(event): void => onCloseSubmap(event, map)} data-testid="close-icon">
-              <Icon name="close" className="ml-3 h-5 w-5 fill-font-400" />
-            </div>
-          )}
+          {commentsOpen ? 'Hide Comments' : 'Show Comments'}
         </Button>
-      ))}
+      </div>
     </div>
   );
 };