From 5bbc83bb29417737c0486144dcd31cf8baca965f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Mon, 28 Oct 2024 12:51:52 +0100
Subject: [PATCH] work packages rework

---
 src/containers/about/partners/index.tsx      |   2 +-
 src/containers/about/work-packages/index.tsx | 158 ++++---------------
 2 files changed, 28 insertions(+), 132 deletions(-)

diff --git a/src/containers/about/partners/index.tsx b/src/containers/about/partners/index.tsx
index 84dd5c5..a29eda2 100644
--- a/src/containers/about/partners/index.tsx
+++ b/src/containers/about/partners/index.tsx
@@ -27,7 +27,7 @@ export default function Partners() {
         technology, and natural sciences, most of whom also have substantial experience with
         hands-on Citizen Science. The consortium also consists of institutional actors,
         environmental NGOs practicing Citizen Science, as well as a network of Fab Labs and
-        Designers and the private sector. This enables the more4nature consortium to implement its
+        designers and the private sector. This enables the more4nature consortium to implement its
         ambitious and truly innovative approach.
       </p>
       <ul className="grid flex-wrap divide-grey-800/30 border-l border-t border-grey-800/30 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
diff --git a/src/containers/about/work-packages/index.tsx b/src/containers/about/work-packages/index.tsx
index b3aed90..4dc25eb 100644
--- a/src/containers/about/work-packages/index.tsx
+++ b/src/containers/about/work-packages/index.tsx
@@ -1,9 +1,3 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-import { Media } from '@/containers/media';
-
 import DiscoverMoreButton from '@/components/discover-more-button';
 import {
   Dialog,
@@ -62,138 +56,40 @@ const WORK_PACKAGES = [
   },
 ];
 
-function getScrollPositionRelativeToElement(element: HTMLLIElement) {
-  const rect = element.getBoundingClientRect();
-
-  return {
-    top: rect.top + window.scrollY,
-    left: rect.left + window.scrollX,
-  };
-}
-
 export default function WorkPackages() {
-  const [pagePositionY, setPagePositionY] = useState(0);
-  const itemsRefs = useRef<HTMLLIElement[]>([]);
-  const [itemsBreakpoints, setItemsBreakpoints] = useState<
-    {
-      start: number;
-      end: number;
-    }[]
-  >([]);
-  const [currentWorkPackage, setCurrentWorkPackage] = useState(1);
-
-  useEffect(() => {
-    const getPositionY = () => {
-      setPagePositionY(window.scrollY);
-    };
-    window.addEventListener('scroll', getPositionY);
-
-    return () => {
-      window.removeEventListener('scroll', getPositionY);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (itemsRefs.current?.length) {
-      const newItemsBreakpoints = itemsRefs.current.map((itemRef) => {
-        const { top } = getScrollPositionRelativeToElement(itemRef);
-        return {
-          start: top,
-          end: top + itemRef.clientHeight,
-        };
-      });
-      setItemsBreakpoints(newItemsBreakpoints);
-    }
-  }, []);
-
-  useEffect(() => {
-    itemsBreakpoints.forEach((item, index) => {
-      if (pagePositionY >= item.start && pagePositionY <= item.end) {
-        setCurrentWorkPackage(index + 1);
-      }
-    });
-  }, [itemsBreakpoints, pagePositionY]);
-
   return (
     <div className="bg-grey-800 text-white">
       <Wrapper className="space-y-8 lg:space-y-14">
         <h3 className="text-xl lg:text-2xl">Work Packages</h3>
-        <Media lessThan="md">
-          <ul className="col-span-10 grid-cols-10 space-y-10">
-            {WORK_PACKAGES.map(({ name, description, organization }, index) => (
-              <li
-                key={name}
-                // @ts-expect-error fix later
-                ref={(el) => (itemsRefs.current[index] = el as NonNullable<typeof el>)}
-              >
-                <div className="space-y-8">
-                  <div className="flex flex-col space-y-2">
-                    <div>
-                      <span className="text-xl">0{index + 1}</span>
-                      <span className="text-white/30">/0{WORK_PACKAGES.length}</span>
-                    </div>
-                    <h4 className="text-lg">{name}</h4>
-                  </div>
-                  <Dialog>
-                    <DialogTrigger asChild>
-                      <DiscoverMoreButton />
-                    </DialogTrigger>
-                    <DialogContent>
-                      <DialogHeader>
-                        <DialogTitle>{name}</DialogTitle>
-                        <DialogDescription>
-                          <>
-                            <p>Led by {organization}</p>
-                            {description}
-                          </>
-                        </DialogDescription>
-                      </DialogHeader>
-                    </DialogContent>
-                  </Dialog>
-                </div>
-              </li>
-            ))}
-          </ul>
-        </Media>
-        <Media greaterThanOrEqual="md">
-          <div className="relative grid grid-cols-12 gap-4">
-            <div className="col-span-2">
-              <span className="sticky top-0 pt-10">
-                <span className="text-xl">0{currentWorkPackage}</span>
+        <ul className="col-span-10 grid-cols-10 space-y-20">
+          {WORK_PACKAGES.map(({ name, description, organization }, index) => (
+            <li key={name}>
+              <span className="pt-10">
+                <span className="text-xl">0{index + 1}</span>
                 <span className="text-white/30">/0{WORK_PACKAGES.length}</span>
               </span>
-            </div>
-            <ul className="col-span-10 grid-cols-10 space-y-20 pt-10">
-              {WORK_PACKAGES.map(({ name, description, organization }, index) => (
-                <li
-                  key={name}
-                  // @ts-expect-error fix later
-                  ref={(el) => (itemsRefs.current[index] = el as NonNullable<typeof el>)}
-                >
-                  <div className="space-y-8">
-                    <h4 className="text-xl">{name}</h4>
-                    <Dialog>
-                      <DialogTrigger asChild>
-                        <DiscoverMoreButton />
-                      </DialogTrigger>
-                      <DialogContent>
-                        <DialogHeader>
-                          <DialogTitle>{name}</DialogTitle>
-                          <DialogDescription>
-                            <>
-                              <p>Led by {organization}</p>
-                              {description}
-                            </>
-                          </DialogDescription>
-                        </DialogHeader>
-                      </DialogContent>
-                    </Dialog>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </Media>
+              <div className="space-y-8">
+                <h4 className="text-xl">{name}</h4>
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <DiscoverMoreButton />
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>{name}</DialogTitle>
+                      <DialogDescription>
+                        <>
+                          <p>Led by {organization}</p>
+                          {description}
+                        </>
+                      </DialogDescription>
+                    </DialogHeader>
+                  </DialogContent>
+                </Dialog>
+              </div>
+            </li>
+          ))}
+        </ul>
       </Wrapper>
     </div>
   );