show comments

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>

src/components/Map/MapViewer/utils/config/useOlMapLayers.ts

 /* eslint-disable no-magic-numbers */
 import { MapInstance } from '@/types/map';
 import { useEffect } from 'react';
+import { useOlMapCommentsLayer } from '@/components/Map/MapViewer/utils/config/commentsLayer/useOlMapCommentsLayer';
 import { MapConfig } from '../../MapViewer.types';
 import { useOlMapOverlaysLayer } from './overlaysLayer/useOlMapOverlaysLayer';
 import { useOlMapPinsLayer } from './pinsLayer/useOlMapPinsLayer';
@@ -16,14 +17,15 @@ export const useOlMapLayers = ({ mapInstance }: UseOlMapLayersInput): MapConfig[
   const pinsLayer = useOlMapPinsLayer();
   const reactionsLayer = useOlMapReactionsLayer();
   const overlaysLayer = useOlMapOverlaysLayer();
+  const commentsLayer = useOlMapCommentsLayer();
 
   useEffect(() => {
     if (!mapInstance) {
       return;
     }
 
-    mapInstance.setLayers([tileLayer, reactionsLayer, overlaysLayer, pinsLayer]);
-  }, [reactionsLayer, tileLayer, pinsLayer, mapInstance, overlaysLayer]);
+    mapInstance.setLayers([tileLayer, reactionsLayer, overlaysLayer, pinsLayer, commentsLayer]);
+  }, [reactionsLayer, tileLayer, pinsLayer, mapInstance, overlaysLayer, commentsLayer]);
 
   return [tileLayer, pinsLayer, reactionsLayer, overlaysLayer];
 };

src/redux/comment/thunks/getComments.ts

-import { bioEntityResponseSchema } from '@/models/bioEntityResponseSchema';
+import { commentSchema } from '@/models/commentSchema';
 import { apiPath } from '@/redux/apiPath';
-import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
+import { axiosInstance } from '@/services/api/utils/axiosInstance';
 import { ThunkConfig } from '@/types/store';
 import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { Comment } from '@/types/models';
+import { z } from 'zod';
 
-export const getComments = createAsyncThunk<Comment[], object, ThunkConfig>(
+export const getComments = createAsyncThunk<Comment[], void, ThunkConfig>(
   'project/getComments',
   async () => {
     try {
-      const response = await axiosInstanceNewAPI.get<Comment[]>(apiPath.getComments());
+      const response = await axiosInstance.get<Comment[]>(apiPath.getComments());
 
-      const isDataValid = validateDataUsingZodSchema(response.data, bioEntityResponseSchema);
+      const isDataValid = validateDataUsingZodSchema(response.data, z.array(commentSchema));
 
       return isDataValid ? response.data : [];
     } catch (error) {

src/utils/validateDataUsingZodSchema.ts

@@ -8,7 +8,7 @@ export const validateDataUsingZodSchema: IsApiResponseValid = (data, schema: Zod
   if (validationResults.success === false) {
     // TODO - probably need to rething way of handling parsing errors, for now let's leave it to console.log
     // eslint-disable-next-line no-console
-    console.error('Error on parsing data', validationResults.error);
+    console.error('Error on parsing data', validationResults.error.message);
   }
 
   return validationResults.success;