From 68b1aee3d38889954ebc4c3af5138c4f9cfc3f67 Mon Sep 17 00:00:00 2001
From: mluena <maluenarod@gmail.com>
Date: Wed, 10 Apr 2024 16:01:06 +0200
Subject: [PATCH] fly to project fix

---
 .../src/containers/countries/detail/panel.tsx |  2 +-
 client/src/containers/map/index.tsx           |  4 ++-
 client/src/containers/projects/item.tsx       |  2 +-
 client/src/containers/sidebar/index.tsx       |  4 +--
 client/src/hooks/datasets/index.ts            | 31 +++++++++++++++++--
 5 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
index 51a36924..bcc89051 100644
--- a/client/src/containers/countries/detail/panel.tsx
+++ b/client/src/containers/countries/detail/panel.tsx
@@ -67,7 +67,7 @@ export default function CountryDetailPanel() {
       },
     }
   );
-  const queryParams = useSyncQueryParams();
+  const queryParams = useSyncQueryParams({ filters: true });
   const jsonToCsv = (json: CountryCountryIndicatorFieldsDataItem['attributes'] & Country) => {
     let csv = '';
 
diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
index 037fc4ad..b07777b6 100644
--- a/client/src/containers/map/index.tsx
+++ b/client/src/containers/map/index.tsx
@@ -127,8 +127,10 @@ export default function MapContainer() {
 
   const handleMapClick = useCallback(
     (e: MapLayerMouseEvent) => {
-      const ProjectData = e.features && e.features.find(({ layer }) => layer.id === 'projects');
+      const ProjectData =
+        e.features && e.features.find(({ layer }) => layer.id === 'projects_circle');
       const ProjectsDataGeometry = e.features?.find(({ layer }) => layer.id === 'projects_fill');
+
       if (e.features && e.features.length && map) {
         if (ProjectData || ProjectsDataGeometry) {
           push(
diff --git a/client/src/containers/projects/item.tsx b/client/src/containers/projects/item.tsx
index f505d044..f84e0b37 100644
--- a/client/src/containers/projects/item.tsx
+++ b/client/src/containers/projects/item.tsx
@@ -15,7 +15,7 @@ import { useSyncQueryParams } from '@/hooks/datasets';
 
 export default function ProjectItem({ data }: { data: ProjectListResponseDataItem }) {
   const hoveredProjectMap = useAtomValue(hoveredProjectMapAtom);
-  const queryParams = useSyncQueryParams();
+  const queryParams = useSyncQueryParams({ filters: true });
 
   return (
     data && (
diff --git a/client/src/containers/sidebar/index.tsx b/client/src/containers/sidebar/index.tsx
index 950982f4..75ee7a49 100644
--- a/client/src/containers/sidebar/index.tsx
+++ b/client/src/containers/sidebar/index.tsx
@@ -27,11 +27,11 @@ export default function Sidebar() {
   return (
     <div className="rounded-8xl absolute bottom-0 left-2 top-0 z-20 my-2 w-16 bg-yellow-700 py-10 text-xs text-yellow-50 xl:left-3 xl:w-20">
       <div className="h-[88%]">
-        <div className="mx-2 flex hidden items-center pb-12 xl:block">
+        <div className="mx-2 hidden items-center pb-12 xl:block">
           <Image src="/images/logo.svg" alt="logo" width={60} height={29} />
         </div>
 
-        <div className="mx-2 block flex items-center pb-12 xl:hidden">
+        <div className="mx-2 flex items-center pb-12 xl:hidden">
           <Image src="/images/logo.svg" alt="logo" width={48} height={19} />
         </div>
 
diff --git a/client/src/hooks/datasets/index.ts b/client/src/hooks/datasets/index.ts
index b1bb9fa2..e60ea88f 100644
--- a/client/src/hooks/datasets/index.ts
+++ b/client/src/hooks/datasets/index.ts
@@ -3,10 +3,37 @@
 import { serialize } from './query-parsers';
 import { useSyncFilters, useSyncLayers, useSyncBasemap } from './sync-query';
 
-export const useSyncQueryParams = () => {
+// Define a type for the data structure
+type QueryParamsData = {
+  filters: any;
+  layers: any;
+  settings: any;
+};
+
+// Define a type for the exclusion parameters
+type ExcludeParams = {
+  filters?: boolean;
+  layers?: boolean;
+  settings?: boolean;
+};
+
+export const useSyncQueryParams = (exclude: ExcludeParams = {}) => {
   const [filters] = useSyncFilters();
   const [layers] = useSyncLayers();
   const [settings] = useSyncBasemap();
 
-  return serialize({ filters, layers, settings });
+  // Construct the data object with correct typing
+  const data: QueryParamsData = { filters, layers, settings };
+
+  // Filter out excluded keys
+  const result: Partial<QueryParamsData> = {};
+  Object.keys(data).forEach((key) => {
+    if (!(key in exclude && exclude[key as keyof ExcludeParams])) {
+      // Use type assertion here to ensure keys are recognized as valid
+      result[key as keyof QueryParamsData] = data[key as keyof QueryParamsData];
+    }
+  });
+
+  // Return the serialized object
+  return serialize(result);
 };