refactor(catalog): introduce usePathname hook, remove React Router de…

…pendency from the Catalog (#1276)

**Related Ticket:** Contributes to
#1108

### Description of Changes

- Remove `react-router` dependency from the Catalog components
- Introduce custom `usePathname` hook
- Remove prop drilling of pathname from the Catalog

### Notes & Questions About Changes

The `pathname` prop is passed down for two things:

1. Generating a link to the dataset at
https://github.com/NASA-IMPACT/veda-ui/blob/820730fd7c1e25e68997b200d31bc4ee27525f7e/app/scripts/components/common/catalog/catalog-card.tsx#L126
2. Controlling scroll in the filters control at
https://github.com/NASA-IMPACT/veda-ui/blob/820730fd7c1e25e68997b200d31bc4ee27525f7e/app/scripts/components/common/catalog/filters-control.tsx#L57

I suspect that the usage on item 1 was intented to cover the use case of
an instance running on a subpath (e.g. `https://myinstance.org/veda`),
why is hard to replicate locally but this change shouldn't affect that.

### Validation / Testing

Using `veda-config`:

1. Visit the data catalog page
1. Clicking on cards should open the proper URL (same as before)
1. Visit Explorer page, clicking on cards selected them, instead of
visiting an URL (same as before)

Using `next-veda-ui` instance:

1. Link the source of this PR to the Next.js instance 
1. Visit the catalog page
1. Clicking on cards should open the proper URL  (same as before)
1. Visit Explorer page, clicking on cards selected them, instead of
visiting an URL (same as before)

This is ready for review.

app/scripts/components/common/catalog/catalog-card.tsx

@@ -13,6 +13,7 @@ import { DatasetData, DatasetLayer } from "$types/veda";
 import { getDatasetPath } from "$utils/routes";
 import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies";
 import { Pill } from "$styles/pill";
+import { usePathname } from "$utils/use-pathname";
 
 interface CatalogCardProps {
   dataset: DatasetData;
@@ -21,7 +22,6 @@ interface CatalogCardProps {
   selectable?: boolean;
   selected?: boolean;
   onDatasetClick?: () => void;
-  pathname?: string;
   linkProperties?: LinkProperties;
 }
 
@@ -102,10 +102,11 @@ export const CatalogCard = (props: CatalogCardProps) => {
     selectable,
     selected,
     onDatasetClick,
-    linkProperties,
-    pathname
+    linkProperties
   } = props;
 
+  const pathname = usePathname();
+
   const topics = getTaxonomy(dataset, TAXONOMY_TOPICS)?.values;
   const sources = getTaxonomy(dataset, TAXONOMY_SOURCE)?.values;
   const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name);

app/scripts/components/common/catalog/catalog-content.tsx

@@ -35,7 +35,6 @@ export interface CatalogContentProps {
   taxonomies: Record<string, string[]>;
   onAction: (action: FilterActions, value?: any) => void;
   linkProperties: LinkProperties;
-  pathname?: string;
 }
 
 const DEFAULT_SORT_OPTION = 'asc';
@@ -72,7 +71,6 @@ function CatalogContent({
   search,
   taxonomies,
   onAction,
-  pathname,
   linkProperties
 }: CatalogContentProps) {
   const [exclusiveSourceSelected, setExclusiveSourceSelected] = useState<string | null>(null);
@@ -215,7 +213,6 @@ function CatalogContent({
         exclusiveSourceSelected={exclusiveSourceSelected}
         customTopOffset={isSelectable ? 50 : 0}
         openByDefault={false}
-        pathname={pathname}
       />
       <Catalog>
         <CatalogTagsContainer
@@ -264,7 +261,6 @@ function CatalogContent({
                           selectable={true}
                           selected={selectedIds.includes(datasetLayer.id)}
                           onDatasetClick={() => onCardSelect(datasetLayer.id, currentDataset)}
-                          pathname={pathname}
                         />
                       </li>
                     ))}
@@ -280,7 +276,6 @@ function CatalogContent({
                     dataset={d}
                     searchTerm={search}
                     linkProperties={linkProperties}
-                    pathname={pathname}
                   />
                 </li>
               ))}

app/scripts/components/common/catalog/filters-control.tsx

@@ -5,6 +5,7 @@ import { Taxonomy } from '$types/veda';
 import SearchField from '$components/common/search-field';
 import CheckableFilters, { OptionItem } from '$components/common/form/checkable-filter';
 import { useSlidingStickyHeader, HEADER_TRANSITION_DURATION } from '$utils/use-sliding-sticky-header';
+import { usePathname } from '$utils/use-pathname';
 
 const ControlsWrapper = styled.div<{ widthValue?: string; heightValue?: string; topValue: string }>`
   min-width: 20rem;
@@ -27,7 +28,6 @@ interface FiltersMenuProps {
   exclusiveSourceSelected?: string | null;
   customTopOffset?: number;
   openByDefault?: boolean;
-  pathname?: string;
 }
 
 export default function FiltersControl(props: FiltersMenuProps) {
@@ -48,9 +48,10 @@ export default function FiltersControl(props: FiltersMenuProps) {
     // uses as a reference (the main page header). To avoid changing the reference IDs in the
     // main logic of the sliding sticky header hook, we provide this custom top offset for more control.
     customTopOffset = 0,
-    pathname,
   } = props;
 
+  const pathname = usePathname();
+
   const controlsRef = useRef<HTMLDivElement>(null);
   const [controlsHeight, setControlsHeight] =  useState<number>(0);
   const { isHeaderHidden, wrapperHeight } = useSlidingStickyHeader(pathname);

app/scripts/components/common/catalog/index.tsx

@@ -42,13 +42,11 @@ export interface CatalogViewProps {
     onAction: () => void,
   } | any;
   linkProperties: LinkProperties;
-  pathname: string;
 }
 
 function CatalogView({
   datasets,
   onFilterChanges,
-  pathname,
   linkProperties,
 }: CatalogViewProps) {
 
@@ -72,7 +70,6 @@ function CatalogView({
         search={search}
         taxonomies={taxonomies}
         onAction={onAction}
-        pathname={pathname}
         linkProperties={linkProperties}
       />
     </CatalogWrapper>

app/scripts/components/data-catalog/container.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useLocation } from 'react-router';
 import { getString } from 'veda';
 import { getAllDatasetsProps } from '$utils/veda-data';
 import CatalogView from '$components/common/catalog';
@@ -20,7 +19,6 @@ import SmartLink from '$components/common/smart-link';
 
 export default function DataCatalogContainer() {
   const allDatasets = getAllDatasetsProps(veda_faux_module_datasets);
-  const pathname = useLocation().pathname;
   const controlVars = useFiltersWithQS();
 
   return (
@@ -37,7 +35,6 @@ export default function DataCatalogContainer() {
       <CatalogView
         datasets={allDatasets}
         onFilterChanges={() => controlVars}
-        pathname={pathname}
         linkProperties={{
           LinkElement: SmartLink,
           pathAttributeKeyName: 'to'

app/scripts/components/exploration/components/dataset-selector-modal/index.tsx

@@ -127,7 +127,6 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
           onAction={onAction}
           filterLayers={true}
           linkProperties={linkProperties}
-          pathname={datasetPathName}
           emptyStateContent={
             <>
               <p>There are no datasets to show with the selected filters.</p>

app/scripts/utils/use-pathname.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * usePathname
+ * *
+ * This hook is implemented to work in both client-side rendering
+ * and server-side rendering environments. During SSR, it initializes the
+ * `pathname` as an empty string, ensuring the application remains stable in
+ * non-browser environments.
+ *
+ * @returns {string} The current `pathname`. Returns an empty string during SSR
+ * or if the `window` object is unavailable.
+ */
+export const usePathname = () => {
+  const [pathname, setPathname] = useState(
+    typeof window !== 'undefined' ? window.location.pathname : ''
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const updatePathname = () => {
+      setPathname(window.location.pathname);
+    };
+
+    // Listen to popstate events (back/forward navigation)
+    window.addEventListener('popstate', updatePathname);
+
+    // Detect programmatic navigation by dispatching a custom event
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+
+    const customEvent = new Event('pathnamechange');
+    const dispatchPathnameChange = () => {
+      window.dispatchEvent(customEvent);
+    };
+
+    history.pushState = function (...args) {
+      originalPushState.apply(this, args);
+      dispatchPathnameChange();
+    };
+
+    history.replaceState = function (...args) {
+      originalReplaceState.apply(this, args);
+      dispatchPathnameChange();
+    };
+
+    window.addEventListener('pathnamechange', updatePathname);
+
+    return () => {
+      window.removeEventListener('popstate', updatePathname);
+      window.removeEventListener('pathnamechange', updatePathname);
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    };
+  }, []);
+
+  return pathname;
+};