feat: implement useSchemaSearch hook for improved dataset navigation and filtering

Author: ErwanDecoster

src/hooks/useSchemaSearch.ts

@@ -0,0 +1,49 @@
+import { useNavigate, useSearch } from '@tanstack/react-router';
+import {
+  encodeSchemaFilters,
+  SchemaFilter,
+} from '@/modules/datasets/schemaFilters';
+import useUserStore from '@/stores/useUser.store';
+import { getChainFromId } from '@/utils/chain.utils';
+
+type SchemaField = { path?: string | null; type?: string | null };
+
+export function useSchemaSearch() {
+  const navigate = useNavigate();
+  const search = useSearch({ strict: false });
+  const { chainId } = useUserStore();
+
+  const navigateToDatasets = (schemaFields: SchemaField[]) => {
+    const schemaFilters: SchemaFilter[] = schemaFields
+      .filter(
+        (field): field is { path: string; type: string } =>
+          field.path != null && field.type != null
+      )
+      .map((field) => ({ path: field.path, type: field.type }));
+
+    const encoded = encodeSchemaFilters(schemaFilters);
+    navigate({
+      to: `/${getChainFromId(chainId)?.slug}/datasets`,
+      search: { ...search, schema: encoded },
+      replace: false,
+      resetScroll: true,
+    });
+  };
+
+  const updateCurrentPage = (
+    schemaFilters: SchemaFilter[],
+    setCurrentPage?: (page: number) => void
+  ) => {
+    navigate({
+      search: { ...search, schema: encodeSchemaFilters(schemaFilters) },
+      replace: false,
+      resetScroll: true,
+    });
+    setCurrentPage?.(0);
+  };
+
+  return {
+    navigateToDatasets,
+    updateCurrentPage,
+  };
+}

src/modules/datasets/DatasetsPreviewTable.tsx

@@ -7,15 +7,17 @@ import { ChainLink } from '@/components/ChainLink';
 import { DataTable } from '@/components/DataTable';
 import DatasetIcon from '@/components/icons/DatasetIcon';
 import { Button } from '@/components/ui/button';
+import { useSchemaSearch } from '@/hooks/useSchemaSearch';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
 import { ErrorAlert } from '../ErrorAlert';
 import { datasetsQuery } from './datasetsQuery';
-import { columns } from './datasetsTable/columns';
+import { createColumns } from './datasetsTable/columns';
 import { useDatasetsSchemas } from './hooks/useDatasetsSchemas';
 
 export function DatasetsPreviewTable({ className }: { className?: string }) {
   const { chainId } = useUserStore();
+  const { navigateToDatasets } = useSchemaSearch();
 
   const queryKey = [chainId, 'datasets_preview'];
   const datasets = useQuery({
@@ -38,6 +40,8 @@ export function DatasetsPreviewTable({ className }: { className?: string }) {
     chainId!
   );
 
+  const columns = createColumns(navigateToDatasets);
+
   const formattedData =
     datasets.data?.datasets.map((dataset) => ({
       ...dataset,

src/routes/$chainSlug/_layout/dataset/$datasetAddress.tsx

@@ -2,30 +2,22 @@ import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute as executeDp } from '@/graphql/dataprotector/execute';
 import { execute } from '@/graphql/poco/execute';
 import { useQuery } from '@tanstack/react-query';
-import {
-  createFileRoute,
-  useNavigate,
-  useSearch,
-} from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import DatasetIcon from '@/components/icons/DatasetIcon';
 import { BackButton } from '@/components/ui/BackButton';
+import { useSchemaSearch } from '@/hooks/useSchemaSearch';
 import { DetailsTable } from '@/modules/DetailsTable';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { DatasetBreadcrumbs } from '@/modules/datasets/dataset/DatasetBreadcrumbs';
 import { DatasetDealsTable } from '@/modules/datasets/dataset/DatasetDealsTable';
 import { buildDatasetDetails } from '@/modules/datasets/dataset/buildDatasetDetails';
 import { datasetQuery } from '@/modules/datasets/dataset/datasetQuery';
 import { datasetSchemaQuery } from '@/modules/datasets/dataset/schema/datasetSchemaDpQuery';
-import {
-  encodeSchemaFilters,
-  SchemaFilter,
-} from '@/modules/datasets/schemaFilters';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import useUserStore from '@/stores/useUser.store';
 import { NotFoundError } from '@/utils/NotFoundError';
 import { isValidAddress } from '@/utils/addressOrIdCheck';
-import { getChainFromId } from '@/utils/chain.utils';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
 
 export const Route = createFileRoute(
@@ -96,30 +88,19 @@ function useDatasetData(datasetAddress: string, chainId: number) {
 function DatasetsRoute() {
   const { chainId } = useUserStore();
   const { datasetAddress } = Route.useParams();
-  const navigate = useNavigate();
-  const search = useSearch({ strict: false });
+  const { navigateToDatasets } = useSchemaSearch();
 
   const { dataset, schema } = useDatasetData(
     (datasetAddress as string).toLowerCase(),
     chainId!
   );
 
-  const handleSchemaSearch = (schemaFilters: SchemaFilter[]) => {
-    const encoded = encodeSchemaFilters(schemaFilters);
-    navigate({
-      to: `/${getChainFromId(chainId)?.slug}/datasets`,
-      search: { ...search, schema: encoded },
-      replace: false,
-      resetScroll: true,
-    });
-  };
-
   const datasetDetails = dataset.data
     ? buildDatasetDetails({
         dataset: dataset.data,
         schema: schema.data,
         isSchemaLoading: schema.isLoading,
-        onSchemaSearch: handleSchemaSearch,
+        onSchemaSearch: navigateToDatasets,
       })
     : undefined;
 

src/routes/$chainSlug/_layout/datasets.tsx

@@ -16,6 +16,7 @@ import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import DatasetIcon from '@/components/icons/DatasetIcon';
 import { BackButton } from '@/components/ui/BackButton';
 import { usePageParam } from '@/hooks/usePageParam';
+import { useSchemaSearch } from '@/hooks/useSchemaSearch';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import { DatasetBreadcrumbsList } from '@/modules/datasets/DatasetBreadcrumbs';
 import { SchemaSearch } from '@/modules/datasets/SchemaSearch';
@@ -122,6 +123,7 @@ function DatasetsRoute() {
   const navigate = useNavigate();
   const filters: SchemaFilter[] = decodeSchemaFilters(search?.schema);
   const { chainId } = useUserStore();
+  const { updateCurrentPage } = useSchemaSearch();
 
   useEffect(() => {
     if (!isSchemaSearchOpen && filters.length > 0) {
@@ -166,20 +168,15 @@ function DatasetsRoute() {
     setCurrentPage(0);
   };
 
-  const handleSchemaSearch = (schemaFilters: any) => {
-    navigate({
-      search: { ...search, schema: encodeSchemaFilters(schemaFilters) },
-      replace: false,
-      resetScroll: true,
-    });
-    setCurrentPage(0);
+  const handleSchemaSearch = (schemaFields: SchemaFilter[]) => {
+    updateCurrentPage(schemaFields, setCurrentPage);
 
     if (!isSchemaSearchOpen) {
       setIsSchemaSearchOpen(true);
     }
   };
 
-  const useSchemaSearch = filters.length > 0;
+  const hasSchemaFilters = filters.length > 0;
 
   const datasetsData = useDatasetsData(currentPage - 1);
 
@@ -211,29 +208,37 @@ function DatasetsRoute() {
       };
     },
     refetchInterval: TABLE_REFETCH_INTERVAL,
-    enabled: !!chainId && useSchemaSearch,
+    enabled: !!chainId && hasSchemaFilters,
     placeholderData: {
       protectedDatas: [],
       protectedDatasHasNext: [],
       protectedDatasHasNextNext: [],
     },
   });
 
-  const data = useSchemaSearch
-    ? (schemaResult.data?.protectedDatas ?? []).map(formatDataset)
+  const data = hasSchemaFilters
+    ? (schemaResult.data?.protectedDatas ?? []).map((dataset) =>
+        formatDataset({
+          dataset,
+          schema: dataset,
+          isSchemasLoading: false,
+        })
+      )
     : datasetsData.data;
 
-  const isLoading = useSchemaSearch
+  const isLoading = hasSchemaFilters
     ? schemaResult.isLoading
     : datasetsData.isLoading;
-  const isRefetching = useSchemaSearch
+  const isRefetching = hasSchemaFilters
     ? schemaResult.isRefetching
     : datasetsData.isRefetching;
-  const isError = useSchemaSearch ? schemaResult.isError : datasetsData.isError;
-  const hasPastError = useSchemaSearch
+  const isError = hasSchemaFilters
+    ? schemaResult.isError
+    : datasetsData.isError;
+  const hasPastError = hasSchemaFilters
     ? schemaResult.isError || schemaResult.errorUpdateCount > 0
     : datasetsData.hasPastError;
-  const additionalPages = useSchemaSearch
+  const additionalPages = hasSchemaFilters
     ? getAdditionalPages(
         Boolean(schemaResult.data?.protectedDatasHasNext?.length),
         Boolean(schemaResult.data?.protectedDatasHasNextNext?.length)