scroll element when hovering

Vizzuality · Feb 26, 2024 · d082c93 · d082c93
1 parent cefc497
commit d082c93
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 14 deletions.
diff --git a/client/.env.local b/client/.env.local
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_MAPBOX_API_TOKEN=pk.eyJ1IjoiYWZvY28iLCJhIjoiY2xnMDNnamh3MDA4ZTNsbWo0dXpxbzBqayJ9.noXhkm6BAa_flAiyCt6D0g
+NEXT_PUBLIC_API_URL=https://climation-staging.afocosec.org/cms/api
+CYPRESS_BASE_URL=http://localhost:3000
diff --git a/client/src/containers/datasets/layers/projects/mock.json b/client/src/containers/datasets/layers/projects/mock.json
@@ -108,7 +108,7 @@
       },
       "properties": {
         "slug": "indonesia-landscape",
-        "ID": "uniqueId9"
+        "ID": "uniqueId10"
       }
     },
     {
@@ -119,7 +119,7 @@
       },
       "properties": {
         "slug": "indonesia-landscape",
-        "ID": "uniqueId10"
+        "ID": "uniqueId11"
       }
     },
     {
@@ -130,7 +130,7 @@
       },
       "properties": {
         "slug": "indonesia-landscape",
-        "ID": "uniqueId11"
+        "ID": "uniqueId12"
       }
     },
     {
@@ -141,7 +141,7 @@
       },
       "properties": {
         "slug": "indonesia-landscape",
-        "ID": "uniqueId12"
+        "ID": "uniqueId13"
       }
     },
     {
@@ -152,7 +152,7 @@
       },
       "properties": {
         "slug": "indonesia-landscape",
-        "ID": "uniqueId13"
+        "ID": "uniqueId14"
       }
     },
     {
@@ -163,7 +163,7 @@
       },
       "properties": {
         "slug": "indonesia-landscape",
-        "ID": "uniqueId14"
+        "ID": "uniqueId15"
       }
     },
     {
@@ -174,7 +174,7 @@
       },
       "properties": {
         "slug": "indonesia-landscape",
-        "ID": "uniqueId15"
+        "ID": "uniqueId16"
       }
     },
     {
@@ -185,7 +185,7 @@
       },
       "properties": {
         "slug": "indonesia-landscape",
-        "ID": "uniqueId16"
+        "ID": "uniqueId17"
       }
     }
   ]

diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -13,6 +13,7 @@ import { useAtomValue, useSetAtom, useAtom } from 'jotai';
 import {
   bboxAtom,
   cursorAtom,
+  hoveredProjectAtom,
   layersInteractiveAtom,
   layersInteractiveIdsAtom,
   popupAtom,
@@ -64,6 +65,7 @@ export default function MapContainer() {
 
   const layersInteractive = useAtomValue(layersInteractiveAtom);
   const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom);
+  const setHoveredProject = useSetAtom(hoveredProjectAtom);
   const [cursor, setCursor] = useAtom(cursorAtom);
 
   const setPopup = useSetAtom(popupAtom);
@@ -154,6 +156,8 @@ export default function MapContainer() {
       // *ON MOUSE ENTER
       if (e.features && e.features[0] && map) {
         setCursor('pointer');
+
+        setHoveredProject(e.features[0].properties?.ID);
       }
 
       if (ProjectsLayer && map) {
@@ -180,6 +184,7 @@ export default function MapContainer() {
       // *ON MOUSE LEAVE
       if (!ProjectsLayer && map && hoveredStateId) {
         setCursor('grab');
+        setHoveredProject(null);
 
         map?.setFeatureState(
           {

diff --git a/client/src/containers/panel/index.tsx b/client/src/containers/panel/index.tsx
@@ -1,19 +1,30 @@
 'use client';
 
+import { useEffect, useRef } from 'react';
+
 import { useAtomValue, useAtom } from 'jotai';
 import { ChevronLeft } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 
-import { dashboardAtom } from '@/store';
+import { dashboardAtom, hoveredProjectAtom } from '@/store';
 import { openAtom } from '@/store';
 
 import { Button } from '@/components/ui/button';
 
 export default function Panel({ children }: { children: React.ReactNode }) {
   const dashboard = useAtomValue(dashboardAtom);
+  const hoveredProject = useAtomValue(hoveredProjectAtom);
   const [open, setOpen] = useAtom(openAtom);
 
+  const scrollRef = useRef(null);
+
+  useEffect(() => {
+    if (!hoveredProject) return;
+    const element = document.getElementById(hoveredProject);
+    element?.scrollIntoView({ behavior: 'smooth' });
+  }, [hoveredProject]);
+
   return (
     <div
       className={cn({
@@ -47,8 +58,9 @@ export default function Panel({ children }: { children: React.ReactNode }) {
       </div>
 
       <div
+        ref={scrollRef}
         className={cn({
-          'prose flex grow flex-col overflow-y-auto': true,
+          'prose no-scrollbar my-1 flex grow flex-col overflow-y-auto': true,
           'opacity-100': open,
           'opacity-0': !open,
         })}

diff --git a/client/src/containers/projects/item.tsx b/client/src/containers/projects/item.tsx
@@ -3,12 +3,25 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-export default function ProjectItem() {
+import { useAtomValue } from 'jotai';
+
+import { cn } from '@/lib/classnames';
+
+import { hoveredProjectAtom } from '@/store';
+
+export default function ProjectItem({ id }: { id: string }) {
+  const hoveredProject = useAtomValue(hoveredProjectAtom);
+
   return (
     <Link
       href={'/projects/indonesia-landscape'}
       data-cy="project-item-link"
-      className="flex space-x-4 rounded-lg border border-gray-100 bg-white py-2 pl-2 pr-4 shadow-sm transition-all duration-300 hover:border-yellow-500"
+      className={cn({
+        'flex space-x-4 rounded-lg border border-gray-100 bg-white py-2 pl-2 pr-4 shadow-sm transition-all duration-300 hover:border-yellow-500':
+          true,
+        'border-yellow-500': hoveredProject === id,
+      })}
+      id={id}
     >
       <Image src="/images/projects/placeholder.png" alt="Project Image" width={300} height={300} />
       <div className="flex flex-col space-y-2">

diff --git a/client/src/containers/projects/list.tsx b/client/src/containers/projects/list.tsx
@@ -3,8 +3,18 @@ import ProjectItem from '@/containers/projects/item';
 export default function ProjectsList() {
   return (
     <div className="flex flex-col space-y-2">
-      <ProjectItem />
-      <ProjectItem />
+      <ProjectItem id="uniqueId1" />
+      <ProjectItem id="uniqueId2" />
+      <ProjectItem id="uniqueId3" />
+      <ProjectItem id="uniqueId4" />
+      <ProjectItem id="uniqueId5" />
+      <ProjectItem id="uniqueId6" />
+      <ProjectItem id="uniqueId7" />
+      <ProjectItem id="uniqueId8" />
+      <ProjectItem id="uniqueId9" />
+      <ProjectItem id="uniqueId10" />
+      <ProjectItem id="uniqueId11" />
+      <ProjectItem id="uniqueId12" />
     </div>
   );
 }
diff --git a/client/src/store/index.ts b/client/src/store/index.ts
@@ -60,6 +60,8 @@ export const mapSettingsAtom = atom<MapSettings>({
 
 export const cursorAtom = atom<Cursor>('grab');
 
+export const hoveredProjectAtom = atom<string | null>(null);
+
 export const DEFAULT_SETTINGS = {
   expand: true,
 };