Migrate /data route to react context

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",

src/components/DatasetTableTab/index.tsx

@@ -77,7 +77,6 @@ const DatasetTable = ({isModal = false, closeFullScreenModal} : {isModal?: boole
           <DataTable
             canResize={true}
             columns={columns}
-            setSort={resource.setSort}
             sortTransform={transformTableSortToQuerySort}
             tablePadding={'ds-u-padding-y--2'}
             loading={resource.loading}

src/components/Datatable/Datatable.jsx

@@ -16,7 +16,6 @@ import { ManageColumnsContext } from "../DatasetTableTab/DataTableStateWrapper";
 
 const DataTable = ({
   columns,
-  setSort,
   sortTransform,
   tablePadding,
   canResize,
@@ -83,7 +82,7 @@ const DataTable = ({
 
   useEffect(() => {
     const normalizedSort = sortTransform ? sortTransform(sorting) : filters;
-    setSort(normalizedSort);
+    resource.setSort(normalizedSort);
   }, [sorting]);
 
   const defaultColumnOrder = useMemo(() => table_columns.map(column => column.accessorKey), []);

src/components/ResourcePreview/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
-import { TextField, Spinner } from '@cmsgov/design-system';
+import { TextField } from '@cmsgov/design-system';
 import { transformTableSortToQuerySort} from '../../services/useDatastore/transformSorts';
 import DataTable from '../Datatable';
+import { DataTableContext } from '../../templates/Dataset';
 
 export function prepareColumns(columns, schema) {
   return columns.map((column) => ({
@@ -29,45 +30,24 @@ function DefaultColumnFilter({ column: { Header, accessor, setFilter, filterValu
 const ResourcePreview = ({
   tablePadding,
   id,
-  options,
-  resource,
-  defaultSort,
-  customColumns,
   canResize,
 }) => {
+  const {resource, customColumns} = useContext(DataTableContext);
 
   return (
     <div
       id="resource-preview"
       className="ds-u-overflow--auto ds-u-border-x--1 ds-u-border-bottom--1"
     >
       <DataTable
-        data={resource.values}
         canResize={canResize}
-        sortDefaults={defaultSort}
         columns={
           customColumns ? customColumns : prepareColumns(resource.columns, resource.schema[id])
         }
-        setSort={resource.setSort}
         sortTransform={transformTableSortToQuerySort}
         tablePadding={tablePadding}
         className="dc-c-datatable"
         customColumnFilter={DefaultColumnFilter}
-        options={options}
-        CustomLoadingComponent={
-          <div className="ds-u-display--flex ds-u-padding--3">
-            <Spinner
-              className="ds-u-valign--middle"
-              role="status"
-              aria-valuetext="Datatable loading"
-            />
-          </div>
-        }
-        CustomNoResults={
-          <div className="ds-u-display--flex ds-u-padding--3">
-            <p>No results returned.</p>
-          </div>
-        }
       />
     </div>
   );

src/templates/Dataset/index.tsx

@@ -10,7 +10,6 @@ import PageNotFound from '../PageNotFound';
 import { defaultMetadataMapping } from '../../assets/metadataMapping';
 import { Tabs, TabPanel } from '@cmsgov/design-system';
 import SearchItemIcon from '../../assets/icons/searchItem';
-import DatasetTable from '../../components/DatasetTableTab';
 import DatasetOverview from '../../components/DatasetOverviewTab';
 import DatasetAPI from '../../components/DatasetAPITab';
 import DataDictionary from '../../components/DatasetDataDictionaryTab';

src/templates/FilteredResource/FilteredResourceBody.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import qs from 'qs';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import SwaggerUI from 'swagger-ui-react';
 import useDatastore from '../../services/useDatastore';
 import {Spinner } from '@cmsgov/design-system';
@@ -12,6 +12,8 @@ import QueryBuilder from './QueryBuilder';
 import TransformedDate from '../../components/TransformedDate';
 import FilteredResourceDescription from './FilteredResourceDescription';
 import 'swagger-ui-react/swagger-ui.css';
+import { DataTableContext } from '../Dataset';
+import { ManageColumnsContext } from '../../components/DatasetTableTab/DataTableStateWrapper';
 
 const FilteredResourceBody = ({
   id,
@@ -25,22 +27,18 @@ const FilteredResourceBody = ({
   customTitle,
   rootUrl
 }) => {
-  const navigate = useNavigate();
   const [tablePadding, setTablePadding] = React.useState('ds-u-padding-y--1');
   let apiDocs = useRef();
-  const [filtersOpen, setFiltersOpen] = React.useState(false);
   let distribution = {};
   let distribution_array = dataset.distribution ? dataset.distribution : [];
   if (distribution_array.length) {
     distribution = distribution_array.find(
       (dist) => dist.identifier === distribution_array[distIndex].identifier
     );
   }
-  let buttonRef = null;
   const options = location.search
     ? { ...qs.parse(location.search, { ignoreQueryPrefix: true }) }
     : { conditions: [] };
-  let conditions = options.conditions.length ? options.conditions : [];
   const resource = useDatastore(
     '',
     rootUrl,
@@ -86,7 +84,7 @@ const FilteredResourceBody = ({
           <div className={'ds-l-md-col--9'}>
             <FilteredResourceDescription distribution={distribution} dataset={dataset} />
           </div>
-          {resource.columns && Object.keys(resource.schema).length && (
+          {Object.keys(resource).length && resource.columns && Object.keys(resource.schema).length && (
             <div className={'ds-l-md-col--12'}>
               <QueryBuilder
                 resource={resource}
@@ -95,37 +93,47 @@ const FilteredResourceBody = ({
               />
             </div>
           )}
-          {resource.columns && Object.keys(resource.schema).length ? (
-            <div className={'ds-l-md-col--12'}>
-              <ResourceHeader
-                includeDensity={true}
-                setTablePadding={setTablePadding}
-                distribution={distribution}
-                resource={resource}
-                downloadUrl={downloadUrl}
-                tablePadding={tablePadding}
-                includeDownload
-              />
-              <ResourcePreview
-                id={distribution.identifier}
-                tablePadding={tablePadding}
-                resource={resource}
-                customColumns={buildCustomColHeaders(
-                  customColumns,
-                  resource.columns,
-                  resource.schema[distribution_array[distIndex].identifier]
-                )}
-                columnSettings={columnSettings}
-                options={{
-                  layout: 'flex',
-                  columnFilter: false,
-                  columnSort: true,
-                  columnResize: true,
-                }}
-                columnWidths={columnWidths}
-              />
-              <ResourceFooter resource={resource} />
-            </div>
+          {Object.keys(resource).length && resource.columns && Object.keys(resource.schema).length ? (
+            <DataTableContext.Provider value={{
+              id: id,
+              resource: resource,
+              distribution: distribution,
+              rootUrl: rootUrl,
+              customColumns: buildCustomColHeaders(
+                customColumns,
+                resource.columns,
+                resource.schema[distribution_array[distIndex].identifier]
+              ),
+            }}>
+              <div className={'ds-l-md-col--12'}>
+                <ResourceHeader
+                  includeDensity={true}
+                  setTablePadding={setTablePadding}
+                  distribution={distribution}
+                  resource={resource}
+                  downloadUrl={downloadUrl}
+                  tablePadding={tablePadding}
+                  includeDownload
+                />
+                <ManageColumnsContext.Provider value={{
+                  columnOrder: [],
+                  setColumnOrder: () => {},
+                  columnVisibility: {},
+                  setColumnVisibility: () => {},
+                  page: 1,
+                  setPage: () => {}
+                }}>
+                <ResourcePreview
+                  id={distribution.identifier}
+                  tablePadding={tablePadding}
+                  columnSettings={columnSettings}
+                  columnWidths={columnWidths}
+                />
+
+                <ResourceFooter resource={resource} />
+                </ManageColumnsContext.Provider>
+              </div>
+            </DataTableContext.Provider>
           ) : (
             <Spinner role="status" aria-valuetext="Resource loading" />
           )}