From 0ddee5fcf935d3620dd26c48bc9f861016293474 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 11 Apr 2024 10:17:44 +0200
Subject: [PATCH 1/5] fix scroll problem

---
 .../src/containers/datasets/layers/projects/hooks.tsx |  1 -
 client/src/containers/projects/detail/panel.tsx       |  2 +-
 client/src/containers/projects/list.tsx               | 11 +----------
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/client/src/containers/datasets/layers/projects/hooks.tsx b/client/src/containers/datasets/layers/projects/hooks.tsx
index ee0ed90c..d800c6b6 100644
--- a/client/src/containers/datasets/layers/projects/hooks.tsx
+++ b/client/src/containers/datasets/layers/projects/hooks.tsx
@@ -3,7 +3,6 @@ import { useState } from 'react';
 import type { LayerProps } from 'react-map-gl';
 
 import { useAtomValue } from 'jotai';
-import { useSetAtom } from 'jotai';
 
 import { hoveredProjectMapAtom } from '@/store';
 
diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
index 899f4357..8634e3eb 100644
--- a/client/src/containers/projects/detail/panel.tsx
+++ b/client/src/containers/projects/detail/panel.tsx
@@ -288,7 +288,7 @@ export default function ProjectDetailPanel() {
             <p className="pb-16 text-sm text-gray-500">
               If you have pictures of this project to share, please sent them to{' '}
               <a className="underline hover:no-underline" href="mailto:email@afoco.com">
-                email@afoco.com
+                contact@afocosec.org
               </a>
             </p>
           </div>
diff --git a/client/src/containers/projects/list.tsx b/client/src/containers/projects/list.tsx
index 5e0c1482..fc8190f1 100644
--- a/client/src/containers/projects/list.tsx
+++ b/client/src/containers/projects/list.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState, MouseEvent } from 'react';
+import { useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import { Search, X } from 'lucide-react';
@@ -132,14 +132,6 @@ export default function ProjectsList() {
     }
   );
 
-  const handleHover = useCallback(
-    (e: MouseEvent<HTMLElement>) => {
-      const currentValue = e.currentTarget.getAttribute('data-value');
-      setHoveredProjectList(currentValue);
-    },
-    [setHoveredProjectList]
-  );
-
   const filtersLength = Object.entries(filtersSettings)
     .flat()
     .filter((el) => typeof el === 'object')
@@ -199,7 +191,6 @@ export default function ProjectsList() {
                   type="button"
                   key={project?.id}
                   data-value={project?.attributes?.project_code}
-                  onMouseEnter={handleHover}
                   onMouseLeave={() => setHoveredProjectList(null)}
                 >
                   <ProjectItem data={project} />

From 374be87ba8e1f1f801777d8fed673d884aae8aca Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 11 Apr 2024 10:19:44 +0200
Subject: [PATCH 2/5] fix search close brn on countries searcher

---
 client/src/containers/countries/list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/containers/countries/list.tsx b/client/src/containers/countries/list.tsx
index 974dc160..2b4837ff 100644
--- a/client/src/containers/countries/list.tsx
+++ b/client/src/containers/countries/list.tsx
@@ -39,7 +39,7 @@ export default function CountriesList() {
         {!!searchValue && (
           <button
             type="button"
-            className="absolute right-3 top-3"
+            className="absolute right-8 top-3.5"
             aria-label="reset-search"
             onClick={() => setSearchValue(null)}
           >

From 2c926efe3a36189c45c3e00bc9240d081fdf597c Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 11 Apr 2024 10:22:29 +0200
Subject: [PATCH 3/5] add email

---
 client/src/containers/projects/detail/panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
index 8634e3eb..b9fe1a8b 100644
--- a/client/src/containers/projects/detail/panel.tsx
+++ b/client/src/containers/projects/detail/panel.tsx
@@ -287,7 +287,7 @@ export default function ProjectDetailPanel() {
 
             <p className="pb-16 text-sm text-gray-500">
               If you have pictures of this project to share, please sent them to{' '}
-              <a className="underline hover:no-underline" href="mailto:email@afoco.com">
+              <a className="underline hover:no-underline" href="mailto:contact@afocosec.org">
                 contact@afocosec.org
               </a>
             </p>

From 162007724fa37b07ef32dd03341c9cab0a22e99b Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 11 Apr 2024 10:57:12 +0200
Subject: [PATCH 4/5] add scrollableArea state to manage scroll

---
 client/src/containers/panel/index.tsx   | 10 +++++++---
 client/src/containers/projects/list.tsx | 11 ++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/src/containers/panel/index.tsx b/client/src/containers/panel/index.tsx
index 70743926..86139eed 100644
--- a/client/src/containers/panel/index.tsx
+++ b/client/src/containers/panel/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useAtomValue, useAtom } from 'jotai';
 import { ChevronLeft } from 'lucide-react';
@@ -17,16 +17,20 @@ export default function Panel({ children }: { children: React.ReactNode }) {
   const hoveredProjectMap = useAtomValue(hoveredProjectMapAtom);
   const [open, setOpen] = useAtom(openAtom);
 
+  const [scrollableArea, setScrollableArea] = useState<boolean>(false);
+
   const scrollRef = useRef(null);
 
   useEffect(() => {
     if (!hoveredProjectMap) return;
     const element = document.getElementById(hoveredProjectMap);
-    element?.scrollIntoView({ behavior: 'smooth' });
-  }, [hoveredProjectMap]);
+    !scrollableArea && element?.scrollIntoView({ behavior: 'smooth' });
+  }, [hoveredProjectMap, scrollableArea]);
 
   return (
     <div
+      onMouseEnter={() => setScrollableArea(true)}
+      onMouseLeave={() => setScrollableArea(false)}
       className={cn({
         'animate-in slide-in-from-left fade-in rounded-4xl bg-background after:rounded-b-4xl before:rounded-t-4xl absolute bottom-0 top-0 z-10 my-2 flex w-full max-w-[342px] flex-col shadow-md transition-transform duration-700 before:absolute before:left-0 before:top-1 before:h-6 before:w-full before:bg-gradient-to-b before:from-white/100 before:to-white/0 before:content-[""] after:absolute after:bottom-1 after:left-0 after:h-6 after:w-full after:bg-gradient-to-t after:from-white/0 after:to-white/100 after:content-[""] xl:max-w-[400px]':
           true,
diff --git a/client/src/containers/projects/list.tsx b/client/src/containers/projects/list.tsx
index fc8190f1..51ab58d9 100644
--- a/client/src/containers/projects/list.tsx
+++ b/client/src/containers/projects/list.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { MouseEvent, useCallback, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import { Search, X } from 'lucide-react';
@@ -132,6 +132,14 @@ export default function ProjectsList() {
     }
   );
 
+  const handleHover = useCallback(
+    (e: MouseEvent<HTMLElement>) => {
+      const currentValue = e.currentTarget.getAttribute('data-value');
+      setHoveredProjectList(currentValue);
+    },
+    [setHoveredProjectList]
+  );
+
   const filtersLength = Object.entries(filtersSettings)
     .flat()
     .filter((el) => typeof el === 'object')
@@ -191,6 +199,7 @@ export default function ProjectsList() {
                   type="button"
                   key={project?.id}
                   data-value={project?.attributes?.project_code}
+                  onMouseEnter={handleHover}
                   onMouseLeave={() => setHoveredProjectList(null)}
                 >
                   <ProjectItem data={project} />

From 16fa6b4cd5af92644cecad270d67b6db4d4db3dc Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Thu, 11 Apr 2024 11:29:04 +0200
Subject: [PATCH 5/5] save tab on url

---
 client/src/app/(landing)/projects/page.tsx | 26 ++------------
 client/src/containers/projects/tabs.tsx    | 40 ++++++++++++++++++++++
 client/src/hooks/datasets/query-parsers.ts |  4 +++
 client/src/hooks/datasets/sync-query.ts    |  9 ++++-
 4 files changed, 54 insertions(+), 25 deletions(-)
 create mode 100644 client/src/containers/projects/tabs.tsx

diff --git a/client/src/app/(landing)/projects/page.tsx b/client/src/app/(landing)/projects/page.tsx
index b8781c45..8bbd1024 100644
--- a/client/src/app/(landing)/projects/page.tsx
+++ b/client/src/app/(landing)/projects/page.tsx
@@ -6,36 +6,14 @@ export const metadata: Metadata = {
 };
 
 import Panel from '@/containers/panel';
-import ProjectsList from '@/containers/projects/list';
-import Stats from '@/containers/projects/stats';
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import ProjectsTabs from '@/containers/projects/tabs';
 
 export default function Projects() {
   return (
     <Panel>
       <div className="space-y-5 py-7">
         <h2 className="px-5 text-3xl font-normal">Projects</h2>
-        <Tabs defaultValue="statistics">
-          <TabsList className="w-full px-5">
-            <TabsTrigger
-              value="statistics"
-              className="rounded-l-lg"
-              data-cy="projects-statistics-tab"
-            >
-              Statistics
-            </TabsTrigger>
-            <TabsTrigger value="list" className="rounded-r-lg" data-cy="projects-list-tab">
-              List
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="statistics" className="mt-6 space-y-5">
-            <Stats />
-          </TabsContent>
-          <TabsContent value="list" className="mt-6 space-y-5">
-            <ProjectsList />
-          </TabsContent>
-        </Tabs>
+        <ProjectsTabs />
       </div>
     </Panel>
   );
diff --git a/client/src/containers/projects/tabs.tsx b/client/src/containers/projects/tabs.tsx
new file mode 100644
index 00000000..07d16fcc
--- /dev/null
+++ b/client/src/containers/projects/tabs.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { useSyncProjectsTab } from '@/hooks/datasets/sync-query';
+
+import ProjectsList from '@/containers/projects/list';
+import Stats from '@/containers/projects/stats';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+export default function ProjectsTabs() {
+  const [projectsTab, setProjectsTab] = useSyncProjectsTab();
+  return (
+    <Tabs defaultValue={projectsTab}>
+      <TabsList className="w-full px-5">
+        <TabsTrigger
+          value="statistics"
+          className="rounded-l-lg"
+          data-cy="projects-statistics-tab"
+          onClick={() => setProjectsTab('statistics')}
+        >
+          Statistics
+        </TabsTrigger>
+        <TabsTrigger
+          value="list"
+          className="rounded-r-lg"
+          data-cy="projects-list-tab"
+          onClick={() => setProjectsTab('list')}
+        >
+          List
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="statistics" className="mt-6 space-y-5">
+        <Stats />
+      </TabsContent>
+      <TabsContent value="list" className="mt-6 space-y-5">
+        <ProjectsList />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/client/src/hooks/datasets/query-parsers.ts b/client/src/hooks/datasets/query-parsers.ts
index a9a33437..da008066 100644
--- a/client/src/hooks/datasets/query-parsers.ts
+++ b/client/src/hooks/datasets/query-parsers.ts
@@ -5,6 +5,8 @@ import type { MapSettings } from '@/types/map';
 
 import type { FilterSettings } from '@/containers/filters/types';
 
+export type ProjectsTab = 'statistics' | 'list';
+
 export const filtersParser = parseAsJson<FilterSettings>().withDefault({});
 
 export const layersParser = parseAsJson<LayerSettings[]>().withDefault([
@@ -18,6 +20,8 @@ export const basemapSettingsParser = parseAsJson<MapSettings>().withDefault({
   roads: false,
 });
 
+export const projectsTabParser = parseAsJson<ProjectsTab>().withDefault('statistics');
+
 // query params parsers
 const searchQueryParams = {
   filters: filtersParser,
diff --git a/client/src/hooks/datasets/sync-query.ts b/client/src/hooks/datasets/sync-query.ts
index 48989d1c..657aa3b6 100644
--- a/client/src/hooks/datasets/sync-query.ts
+++ b/client/src/hooks/datasets/sync-query.ts
@@ -1,9 +1,16 @@
 import { useQueryState } from 'nuqs';
 
-import { basemapSettingsParser, filtersParser, layersParser } from './query-parsers';
+import {
+  basemapSettingsParser,
+  filtersParser,
+  layersParser,
+  projectsTabParser,
+} from './query-parsers';
 
 export const useSyncFilters = () => useQueryState('filters', filtersParser);
 
 export const useSyncLayers = () => useQueryState('layers', layersParser);
 
 export const useSyncBasemap = () => useQueryState('settings', basemapSettingsParser);
+
+export const useSyncProjectsTab = () => useQueryState('tab', projectsTabParser);