[FE](feat): add tab to url [AF-127]

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>
   );

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)}
           >

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';
 

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,

client/src/containers/projects/detail/panel.tsx

@@ -287,8 +287,8 @@ 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 protected]">
-                [email protected]
+              <a className="underline hover:no-underline" href="mailto:[email protected]">
+                [email protected]
               </a>
             </p>
           </div>

client/src/containers/projects/list.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState, MouseEvent } from 'react';
+import { MouseEvent, useCallback, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import { Search, X } from 'lucide-react';

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>
+  );
+}

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,

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);