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

Closes #67 (closed)

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

@@ -10,6 +10,7 @@ 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';
 
 export const MapNavigation = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -45,6 +46,10 @@ export const MapNavigation = (): JSX.Element => {
     }
   };
 
+  const toggleComments = async (): Promise<void> => {
+    await dispatch(getComments());
+  };
+
   return (
     <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">
@@ -69,8 +74,12 @@ export const MapNavigation = (): JSX.Element => {
         ))}
       </div>
       <div className="flex items-center">
-        <Button className="mx-4 flex-none" variantStyles="secondary">
-          Comments
+        <Button
+          className="mx-4 flex-none"
+          variantStyles="secondary"
+          onClick={() => toggleComments()}
+        >
+          Show Comments
         </Button>
       </div>
     </div>