From 122b61c5bbe96d30d8dd1df48b35384a8485758d Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 6 Jun 2024 09:40:11 +0200
Subject: [PATCH] show comments

---
 .../MapNavigation/MapNavigation.component.tsx       | 13 +++++++++++--
 .../Map/MapViewer/utils/config/useOlMapLayers.ts    |  6 ++++--
 src/redux/comment/thunks/getComments.ts             | 11 ++++++-----
 src/utils/validateDataUsingZodSchema.ts             |  2 +-
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
index cc0ddb9e..3a6517e9 100644
--- a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
+++ b/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>
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts b/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
index a42e9677..5739c302 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
@@ -1,6 +1,7 @@
 /* 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];
 };
diff --git a/src/redux/comment/thunks/getComments.ts b/src/redux/comment/thunks/getComments.ts
index 6d13305e..5bc9013c 100644
--- a/src/redux/comment/thunks/getComments.ts
+++ b/src/redux/comment/thunks/getComments.ts
@@ -1,18 +1,19 @@
-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) {
diff --git a/src/utils/validateDataUsingZodSchema.ts b/src/utils/validateDataUsingZodSchema.ts
index a7b0cf08..673e253d 100644
--- a/src/utils/validateDataUsingZodSchema.ts
+++ b/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;
-- 
GitLab