From 21aafc4af3f2778ba0df87a5cd64586464ef2984 Mon Sep 17 00:00:00 2001
From: David Inga <david.inga@vizzuality.com>
Date: Wed, 28 Feb 2024 11:02:14 +0100
Subject: [PATCH] eudr page and layout

---
 client/src/components/map/types.d.ts          |   2 +-
 .../containers/collapse-button/component.tsx  |  17 +--
 .../src/containers/collapse-button/index.tsx  |  20 ++-
 client/src/layouts/application/component.tsx  |   9 ++
 client/src/pages/eudr/index.tsx               | 115 ++++++++++++++++++
 5 files changed, 150 insertions(+), 13 deletions(-)
 create mode 100644 client/src/pages/eudr/index.tsx

diff --git a/client/src/components/map/types.d.ts b/client/src/components/map/types.d.ts
index 2e19a87a3..2db511b8b 100644
--- a/client/src/components/map/types.d.ts
+++ b/client/src/components/map/types.d.ts
@@ -10,7 +10,7 @@ export interface CustomMapProps extends MapProps {
   /** Custom css class for styling */
   className?: string;
 
-  mapStyle: MapStyle;
+  mapStyle?: MapStyle;
 
   /** An object that defines the viewport
    * @see https://visgl.github.io/react-map-gl/docs/api-reference/map#initialviewstate
diff --git a/client/src/containers/collapse-button/component.tsx b/client/src/containers/collapse-button/component.tsx
index 26958d1ad..9b2175e33 100644
--- a/client/src/containers/collapse-button/component.tsx
+++ b/client/src/containers/collapse-button/component.tsx
@@ -1,18 +1,13 @@
 import { useCallback } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/outline';
 
-import { useAppSelector, useAppDispatch } from 'store/hooks';
-import { analysisUI, setSidebarCollapsed } from 'store/features/analysis/ui';
-
 const ICON_CLASSNAMES = 'h-4 w-4 text-gray-900';
 
-const CollapseButton: React.FC = () => {
-  const { isSidebarCollapsed } = useAppSelector(analysisUI);
-  const dispatch = useAppDispatch();
-
-  const handleClick = useCallback(() => {
-    dispatch(setSidebarCollapsed(!isSidebarCollapsed));
-  }, [dispatch, isSidebarCollapsed]);
+const CollapseButton: React.FC<{
+  isCollapsed: boolean;
+  onClick: (isCollapsed: boolean) => void;
+}> = ({ isCollapsed, onClick }) => {
+  const handleClick = useCallback(() => onClick(!isCollapsed), [isCollapsed, onClick]);
 
   return (
     <button
@@ -20,7 +15,7 @@ const CollapseButton: React.FC = () => {
       className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-navy-400/20 focus:ring-offset-1"
       onClick={handleClick}
     >
-      {isSidebarCollapsed ? (
+      {isCollapsed ? (
         <ChevronRightIcon className={ICON_CLASSNAMES} />
       ) : (
         <ChevronLeftIcon className={ICON_CLASSNAMES} />
diff --git a/client/src/containers/collapse-button/index.tsx b/client/src/containers/collapse-button/index.tsx
index b404d7fd4..19408652b 100644
--- a/client/src/containers/collapse-button/index.tsx
+++ b/client/src/containers/collapse-button/index.tsx
@@ -1 +1,19 @@
-export { default } from './component';
+import { useCallback } from 'react';
+
+import Component from './component';
+
+import { useAppSelector, useAppDispatch } from 'store/hooks';
+import { analysisUI, setSidebarCollapsed } from 'store/features/analysis/ui';
+
+const CollapseButton: React.FC = () => {
+  const { isSidebarCollapsed } = useAppSelector(analysisUI);
+  const dispatch = useAppDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(setSidebarCollapsed(!isSidebarCollapsed));
+  }, [dispatch, isSidebarCollapsed]);
+
+  return <Component onClick={handleClick} isCollapsed={isSidebarCollapsed} />;
+};
+
+export default CollapseButton;
diff --git a/client/src/layouts/application/component.tsx b/client/src/layouts/application/component.tsx
index e7d70265a..eceabffe5 100644
--- a/client/src/layouts/application/component.tsx
+++ b/client/src/layouts/application/component.tsx
@@ -31,6 +31,15 @@ const ApplicationLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
     },
   ];
 
+  if (process.env.NEXT_PUBLIC_MODULE_EUDR === 'true') {
+    navigationItems.push({
+      name: 'EUDR',
+      href: '/eudr',
+      icon: { default: ChartBarIconOutline, active: ChartBarIconSolid },
+      disabled: !!(!lastTask || lastTask?.status === 'processing'),
+    });
+  }
+
   return (
     <div className="min-w-screen-lg flex h-screen min-h-[700px] overflow-hidden bg-navy-600">
       <div className="flex w-28 shrink-0 grow-0 flex-col">
diff --git a/client/src/pages/eudr/index.tsx b/client/src/pages/eudr/index.tsx
new file mode 100644
index 000000000..cc110951d
--- /dev/null
+++ b/client/src/pages/eudr/index.tsx
@@ -0,0 +1,115 @@
+import { useRef, useState } from 'react';
+import { Transition } from '@headlessui/react';
+import { MapProvider } from 'react-map-gl/maplibre';
+
+import { tasksSSR } from 'services/ssr';
+import ApplicationLayout from 'layouts/application';
+import CollapseButton from 'containers/collapse-button/component';
+import TitleTemplate from 'utils/titleTemplate';
+import Map from 'components/map';
+import LayerManager from 'components/map/layer-manager';
+
+import type { NextPageWithLayout } from 'pages/_app';
+import type { ReactElement } from 'react';
+import type { GetServerSideProps } from 'next';
+
+const MapPage: NextPageWithLayout = () => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <MapProvider>
+      <TitleTemplate title="EUDR" />
+      <div className="flex h-full w-full">
+        <aside className="relative h-full flex-shrink-0 rounded-tl-3xl bg-gray-100">
+          <div className="absolute right-0 top-6 z-40 translate-x-1/2 transform">
+            <CollapseButton isCollapsed={isCollapsed} onClick={setIsCollapsed} />
+          </div>
+          <Transition
+            as="div"
+            show={!isCollapsed}
+            enter="transform transition ease-in duration-100"
+            enterFrom="opacity-10"
+            enterTo="opacity-100"
+            leave="transform transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-10"
+            className="h-full w-[820px] overflow-y-auto overflow-x-hidden"
+            ref={scrollRef}
+          >
+            <div className="flex h-full flex-col">
+              <div className="px-6 py-8">
+                <h2>EUDR complience Analysis</h2>
+              </div>
+              <div className="flex-1 bg-white px-6 py-8">
+                <div>
+                  <div className="text-xs text-gray-400">
+                    Total numbers of suppliers: <span className="font-mono">46.53P</span>
+                  </div>
+                  <h3>Suppliers by category</h3>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </aside>
+
+        <section className="relative flex h-screen flex-1 flex-col overflow-auto">
+          <Map id="eudr-map">
+            {() => (
+              <>
+                <LayerManager layers={[]} />
+                {/* {tooltipData && tooltipData.data?.v && (
+                  <PopUp
+                    position={{
+                      ...tooltipData.viewport,
+                      x: tooltipData.x,
+                      y: tooltipData.y,
+                    }}
+                  >
+                    <div className="space-y-2 rounded-md bg-white p-4 shadow-md">
+                      <div className="text-sm font-semibold text-gray-900">
+                        {tooltipData.data.v}
+                        {tooltipData.data.unit && ` ${tooltipData.data.unit}`}
+                      </div>
+                      <div className="text-xs text-gray-500">{tooltipData.data.name}</div>
+                    </div>
+                  </PopUp>
+                )} */}
+              </>
+            )}
+          </Map>
+        </section>
+      </div>
+    </MapProvider>
+  );
+};
+
+MapPage.Layout = function getLayout(page: ReactElement) {
+  return <ApplicationLayout>{page}</ApplicationLayout>;
+};
+
+export const getServerSideProps: GetServerSideProps = async ({ req, res, query }) => {
+  try {
+    const tasks = await tasksSSR({ req, res });
+    if (tasks && tasks[0]?.attributes.status === 'processing') {
+      return {
+        redirect: {
+          permanent: false,
+          destination: '/data',
+        },
+      };
+    }
+    return { props: { query } };
+  } catch (error) {
+    if (error.response.status === 401) {
+      return {
+        redirect: {
+          permanent: false,
+          destination: '/auth/signin',
+        },
+      };
+    }
+  }
+};
+
+export default MapPage;