feat(client): Add download link for Flood & Drought layers

Vizzuality · Nov 8, 2024 · c3ad518 · c3ad518
1 parent 3e89f56
commit c3ad518
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
@@ -1,7 +1,9 @@
 "use client";
 
+import Link from "next/link";
 import { useCallback, useMemo, useState } from "react";
 
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -12,6 +14,8 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import useMapLayers from "@/hooks/use-map-layers";
+import { cn } from "@/lib/utils";
+import DownloadIcon from "@/svgs/download.svg";
 import { DatasetLayersDataItem } from "@/types/generated/strapi.schemas";
 
 import { getDefaultReturnPeriod, getDefaultSelectedLayerId, getReturnPeriods } from "./utils";
@@ -39,6 +43,11 @@ const DatasetCard = ({ id, name, defaultLayerId, layers }: DatasetCardProps) =>
   const [selectedLayerId, setSelectedLayerId] = useState(defaultSelectedLayerId);
   const [selectedReturnPeriod, setSelectedReturnPeriod] = useState(defaultSelectedReturnPeriod);
 
+  const selectedLayer = useMemo(
+    () => layers.find(({ id }) => id === selectedLayerId),
+    [layers, selectedLayerId],
+  );
+
   const isDatasetActive = useMemo(() => {
     if (selectedLayerId === undefined) {
       return false;
@@ -111,7 +120,30 @@ const DatasetCard = ({ id, name, defaultLayerId, layers }: DatasetCardProps) =>
         <Label htmlFor={`${id}-toggle`} className="text-[20px]">
           {name}
         </Label>
-        <div className="pt-1">
+        <div className="flex items-center gap-0.5 pt-1">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className={cn({
+              "group/download": true,
+              "pointer-events-none opacity-20": !selectedLayer?.attributes!.download_link,
+            })}
+            aria-disabled={!selectedLayer?.attributes!.download_link}
+            tabIndex={!selectedLayer?.attributes!.download_link ? -1 : undefined}
+            asChild
+          >
+            <Link
+              href={selectedLayer?.attributes!.download_link ?? ""}
+              rel="noopener noreferrer"
+              download={selectedLayer?.attributes!.name}
+            >
+              <span className="sr-only">Download</span>
+              <DownloadIcon
+                className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
+                aria-hidden
+              />
+            </Link>
+          </Button>
           <Switch id={`${id}-toggle`} checked={isDatasetActive} onCheckedChange={onToggleDataset} />
         </div>
       </div>

diff --git a/client/src/components/panels/drought/index.tsx b/client/src/components/panels/drought/index.tsx
@@ -6,7 +6,11 @@ import { Skeleton } from "@/components/ui/skeleton";
 import useDatasetsBySubTopic from "@/hooks/use-datasets-by-sub-topic";
 
 const DroughtPanel = () => {
-  const { data, isLoading } = useDatasetsBySubTopic("drought", ["name", "params_config"]);
+  const { data, isLoading } = useDatasetsBySubTopic("drought", [
+    "name",
+    "params_config",
+    "download_link",
+  ]);
 
   return (
     <div className="min-h-screen px-5 py-5 lg:min-h-0 lg:px-10">

diff --git a/client/src/components/panels/flood/index.tsx b/client/src/components/panels/flood/index.tsx
@@ -6,7 +6,11 @@ import { Skeleton } from "@/components/ui/skeleton";
 import useDatasetsBySubTopic from "@/hooks/use-datasets-by-sub-topic";
 
 const FloodPanel = () => {
-  const { data, isLoading } = useDatasetsBySubTopic("flood", ["name", "params_config"]);
+  const { data, isLoading } = useDatasetsBySubTopic("flood", [
+    "name",
+    "params_config",
+    "download_link",
+  ]);
 
   return (
     <div className="min-h-screen px-5 py-5 lg:min-h-0 lg:px-10">