Merge pull request #77 from Vizzuality/SKY30-136-data-tool-tables-fir…

…st-column-should-be-clickable [SKY30-136] Data Tool tables first column should be clickable
Vizzuality · Nov 24, 2023 · 216f323 · 216f323
2 parents 0b4edbc + a4a23ac
commit 216f323
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/frontend/src/containers/data-tool/content/details/tables/global-regional/index.tsx b/frontend/src/containers/data-tool/content/details/tables/global-regional/index.tsx
@@ -199,6 +199,7 @@ const GlobalRegionalTable: React.FC = () => {
 
       return {
         location: location.name,
+        locationCode: location.code,
         coverage: coveragePercentage,
         area: location.totalMarineArea,
         locationType: location.type,

diff --git a/frontend/src/containers/data-tool/content/details/tables/global-regional/useColumns.tsx b/frontend/src/containers/data-tool/content/details/tables/global-regional/useColumns.tsx
@@ -1,17 +1,22 @@
 import { useMemo } from 'react';
 
+import Link from 'next/link';
+
 import { ColumnDef } from '@tanstack/react-table';
 
+import { PAGES } from '@/constants/pages';
 import FiltersButton from '@/containers/data-tool/content/details/table/filters-button';
 import HeaderItem from '@/containers/data-tool/content/details/table/header-item';
 import { cellFormatter } from '@/containers/data-tool/content/details/table/helpers';
 import SortingButton from '@/containers/data-tool/content/details/table/sorting-button';
 import TooltipButton from '@/containers/data-tool/content/details/table/tooltip-button';
 import useFiltersOptions from '@/containers/data-tool/content/details/tables/global-regional/useFiltersOptions';
 import useTooltips from '@/containers/data-tool/content/details/tables/global-regional/useTooltips';
+import { useDataToolSearchParams } from '@/containers/data-tool/content/map/sync-settings';
 
 export type GlobalRegionalTableColumns = {
   location: string;
+  locationCode: string;
   coverage: number;
   locationType: string;
   mpas: number;
@@ -28,6 +33,7 @@ type UseColumnsProps = {
 };
 
 const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
+  const searchParams = useDataToolSearchParams();
   const { locationTypes: locationTypesOptions } = useFiltersOptions();
 
   const tooltips = useTooltips();
@@ -38,8 +44,15 @@ const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
         accessorKey: 'location',
         header: 'Location',
         cell: ({ row }) => {
-          const { location } = row.original;
-          return <span className="underline">{location}</span>;
+          const { location, locationCode } = row.original;
+          return (
+            <Link
+              className="underline"
+              href={`${PAGES.dataTool}/${locationCode}?${searchParams.toString()}`}
+            >
+              {location}
+            </Link>
+          );
         },
       },
       {