fix: fix "no datasets match search" when not searching

devflowinc · Jun 24, 2024 · 591b528 · 591b528
1 parent a74c79f
commit 591b528
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 15 deletions.
diff --git a/dashboard/src/components/DatasetOverview.tsx b/dashboard/src/components/DatasetOverview.tsx
@@ -28,25 +28,15 @@ export const DatasetOverview = (props: DatasetOverviewProps) => {
   const navigate = useNavigate();
   const [page, setPage] = createSignal(0);
   const [datasetSearchQuery, setDatasetSearchQuery] = createSignal("");
-  const [maxDatasetsLength, setMaxDatasetsLength] = createSignal(0);
 
-  const { datasets, maxPageDiscovered, removeDataset, hasLoaded } =
+  const { datasets, maxPageDiscovered, maxDatasets, removeDataset, hasLoaded } =
     useDatasetPages({
       org: props.selectedOrganization,
       searchQuery: datasetSearchQuery,
       page: page,
       setPage,
     });
 
-  createEffect((prevLength: number) => {
-    const datasetsLength = datasets().length;
-    if (datasetsLength > prevLength) {
-      setMaxDatasetsLength(datasetsLength);
-    }
-
-    return prevLength > datasetsLength ? prevLength : datasetsLength;
-  }, 0);
-
   createEffect(() => {
     props.selectedOrganization();
     setPage(0);
@@ -86,7 +76,7 @@ export const DatasetOverview = (props: DatasetOverviewProps) => {
             <h1 class="text-base font-semibold leading-6">Datasets</h1>
             <Show
               fallback={
-                maxDatasetsLength() > 0 ? (
+                maxDatasets() > 0 ? (
                   <p class="text-sm text-red-700">
                     No datasets match your search query.
                   </p>
@@ -114,7 +104,7 @@ export const DatasetOverview = (props: DatasetOverviewProps) => {
               placeholder="Search datasets..."
               class="rounded border border-neutral-300/80 bg-white px-2 py-1 text-sm placeholder:text-neutral-400"
             />
-            <Show when={maxDatasetsLength() != 0}>
+            <Show when={maxDatasets() != 0}>
               <button
                 class="rounded bg-magenta-500 px-3 py-2 text-sm font-semibold text-white"
                 onClick={() => props.setOpenNewDatasetModal(true)}
@@ -125,7 +115,7 @@ export const DatasetOverview = (props: DatasetOverviewProps) => {
           </div>
         </div>
       </div>
-      <Show when={maxDatasetsLength() === 0 && page() === 0 && hasLoaded}>
+      <Show when={maxDatasets() === 0 && page() === 0 && hasLoaded}>
         <button
           onClick={() => props.setOpenNewDatasetModal(true)}
           class="relative block w-full rounded-lg border-2 border-dashed border-neutral-300 p-12 text-center hover:border-neutral-400 focus:outline-none focus:ring-2 focus:ring-magenta-500 focus:ring-offset-2"
@@ -134,7 +124,7 @@ export const DatasetOverview = (props: DatasetOverviewProps) => {
           <span class="mt-2 block font-semibold">Create A New Dataset</span>
         </button>
       </Show>
-      <Show when={maxDatasetsLength() > 0}>
+      <Show when={maxDatasets() > 0}>
         <div class="mt-8">
           <div class="overflow-hidden rounded shadow ring-1 ring-black ring-opacity-5">
             <table class="min-w-full divide-y divide-neutral-300">

diff --git a/dashboard/src/hooks/useDatasetPages.ts b/dashboard/src/hooks/useDatasetPages.ts
@@ -90,13 +90,19 @@ export const useDatasetPages = (props: {
     );
     return sliced;
   });
+
   const maxPageDiscovered = createMemo(() => {
     return Math.floor(realDatasets().length / PAGE_SIZE);
   });
 
+  const maxDatasets = createMemo(() => {
+    return realDatasets().length;
+  });
+
   return {
     datasets: currDatasets,
     maxPageDiscovered,
+    maxDatasets,
     removeDataset,
     hasLoaded,
   };