Create catalog-view dir and move catalog logic over

NASA-IMPACT · May 13, 2024 · 7e099b4 · 7e099b4
1 parent 216650f
commit 7e099b4
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 17 deletions.
diff --git a/app/scripts/components/common/browse-controls/use-browse-controls.ts b/app/scripts/components/common/browse-controls/use-browse-controls.ts
@@ -45,6 +45,8 @@ export const optionAll = {
   name: 'All'
 };
 
+export const minSearchLength = 3;
+
 export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) {
   // Setup Qs State to store data in the url's query string
   // react-router function to get the navigation.

diff --git a/...ts/components/data-catalog/filter-tag.tsx → ...content-views/catalog-view/filter-tag.tsx b/...ts/components/data-catalog/filter-tag.tsx → ...content-views/catalog-view/filter-tag.tsx
diff --git a/...mponents/data-catalog/filters-control.tsx → ...nt-views/catalog-view/filters-control.tsx b/...mponents/data-catalog/filters-control.tsx → ...nt-views/catalog-view/filters-control.tsx
diff --git a/...scripts/components/data-catalog/index.tsx → ...ents/content-views/catalog-view/index.tsx b/...scripts/components/data-catalog/index.tsx → ...ents/content-views/catalog-view/index.tsx
@@ -3,11 +3,12 @@ import styled from 'styled-components';
 import { DatasetData } from 'veda';
 import { useNavigate } from 'react-router-dom';
 import { themeVal } from '@devseed-ui/theme-provider';
+import prepareDatasets from '../../data-catalog/prepare-datasets';
 import FiltersControl from './filters-control';
 import FilterTag from './filter-tag';
-import prepareDatasets from './prepare-datasets';
 import {
   Actions,
+  minSearchLength,
   useBrowserControls
 } from '$components/common/browse-controls/use-browse-controls';
 import {
@@ -39,7 +40,7 @@ import { getAllDatasetsWithEnhancedLayers } from '$components/exploration/data-u
  * Allows you to browse through datasets using the filters sidebar control
  */
 
-const DataCatalogWrapper = styled.div`
+const CatalogWrapper = styled.div`
   width: 100%;
   max-width: ${themeVal('layout.max')};
   margin: 0 auto;
@@ -59,7 +60,7 @@ const Content = styled.div`
   position: relative;
 `;
 
-const CatalogWrapper = styled.div`
+const Catalog = styled.div`
   width: 100%;
 `;
 
@@ -92,18 +93,18 @@ const EmptyState = styled(EmptyHub)`
 
 export const sortOptions = [{ id: 'name', name: 'Name' }];
 
-export interface DataCatalogProps {
+export interface CatalogViewProps {
   datasets: DatasetData[];
   cardComponentOverride?: { // Allow user to override with a different cardType with optional props
     CardComponent: ComponentType<CardComponentProps>;
     props: Partial<CardComponentProps>;
   } 
 }
 
-function DataCatalog({ 
+function CatalogView({ 
   datasets,
   cardComponentOverride, 
-}: DataCatalogProps) {
+}: CatalogViewProps) {
   const controlVars = useBrowserControls({
     sortOptions
   });
@@ -211,15 +212,15 @@ function DataCatalog({
         title={
           <TextHighlight
             value={search}
-            disabled={search.length < 3}
+            disabled={search.length < minSearchLength}
           >
             {dataset.name}
           </TextHighlight>
         }
         description={
           <TextHighlight
             value={search}
-            disabled={search.length < 3}
+            disabled={search.length < minSearchLength}
           >
             {dataset.description}
           </TextHighlight>
@@ -231,7 +232,7 @@ function DataCatalog({
   };
 
   return (
-    <DataCatalogWrapper>
+    <CatalogWrapper>
       <CatalogFoldHeader
         style={{
           scrollMarginTop: `${headerHeight + 16}px`
@@ -250,7 +251,7 @@ function DataCatalog({
           setClearedTagItem={setClearedTagItem}
           allSelected={allSelectedFilters}
         />
-        <CatalogWrapper>
+        <Catalog>
           {renderTags}
           {datasetsToDisplay.length ? (
             <Cards>
@@ -269,10 +270,10 @@ function DataCatalog({
               There are no datasets to show with the selected filters.
             </EmptyState>
           )}
-        </CatalogWrapper>
+        </Catalog>
       </Content>
-    </DataCatalogWrapper>
+    </CatalogWrapper>
   );
 }
 
-export default DataCatalog;
+export default CatalogView;
diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { getString } from 'veda';
 import { allDatasets } from '$components/exploration/data-utils';
-import DataCatalog from '$components/data-catalog';
+import CatalogView from '$components/content-views/catalog-view';
 import { PageMainContent } from '$styles/page';
 import { LayoutProps } from '$components/common/layout-root';
 import PageHero from '$components/common/page-hero';
@@ -20,7 +20,7 @@ export default function DataCatalogContainer() {
       <LayoutProps title='Data Catalog' description={getString('dataCatalogBanner').other} />
       <PageHero title='Data Catalog' description={getString('dataCatalogBanner').other} />
       <FeaturedDatasets />
-      <DataCatalog datasets={allDatasets} />
+      <CatalogView datasets={allDatasets} />
     </PageMainContent>
   );
 }
diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx
@@ -15,7 +15,7 @@ import {
   allExploreDatasetsWithEnhancedLayers as allDatasets
 } from '$components/exploration/data-utils';
 import { generateTaxonomies } from '$utils/veda-data';
-import { sortOptions } from '$components/data-catalog';
+import { sortOptions } from '$components/content-views/catalog-view';
 
 const StyledModalHeadline = styled(ModalHeadline)`
   width: 100%;

diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -28,7 +28,7 @@ import {
   TaxonomyFilterOption,
   useBrowserControls
 } from '$components/common/browse-controls/use-browse-controls';
-import { sortOptions } from '$components/data-catalog';
+import { sortOptions } from '$components/content-views/catalog-view';
 import prepareDatasets from '$components/data-catalog/prepare-datasets';
 import { TAXONOMY_SOURCE, getTaxonomy } from '$utils/veda-data';
 import { usePreviousValue } from '$utils/use-effect-previous';