fixing cache bug, improving code structure

Signed-off-by: Sean Li <[email protected]>
sejli · Oct 3, 2024 · 38f0748 · 38f0748
1 parent 62d035b
commit 38f0748
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 18 deletions.
diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.test.ts
@@ -112,8 +112,9 @@ describe('DatasetService', () => {
     };
 
     service.addRecentDataset(mockDataset1);
-    expect(service.getRecentDataset(mockDataset1.id)).toEqual(mockDataset1);
-    expect(service.getRecentDatasets().length).toEqual(1);
+    const recents = service.getRecentDatasets();
+    expect(recents).toContainEqual(mockDataset1);
+    expect(recents.length).toEqual(1);
     expect(sessionStorage.get('recentDatasets')).toContainEqual(mockDataset1);
   });
 

diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
@@ -79,12 +79,6 @@ export class DatasetService {
     }
   }
 
-  public getRecentDataset(datasetID: string | undefined): Dataset | undefined {
-    if (datasetID) {
-      return this.recentDatasets.get(datasetID);
-    }
-  }
-
   public getRecentDatasets(): Dataset[] {
     return this.recentDatasets.values();
   }

diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
@@ -44,7 +44,6 @@ export const DatasetSelector = ({
 }: DatasetSelectorProps) => {
   const isMounted = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
-  const [datasets, setDatasets] = useState<Dataset[]>([]);
   const [indexPatterns, setIndexPatterns] = useState<Dataset[]>([]);
   const { overlays } = services;
   const datasetService = getQueryService().queryString.getDatasetService();
@@ -82,10 +81,11 @@ export const DatasetSelector = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [datasetService]);
 
-  useEffect(() => {
-    const recentDatasets = datasetService.getRecentDatasets();
-    setDatasets([...recentDatasets, ...indexPatterns]);
-  }, [isOpen, datasetService, indexPatterns]);
+  const recentDatasets = useMemo(() => {
+    return datasetService.getRecentDatasets();
+    // NOTE: Intentionally adding dependencies to ensure that we have the latest recentDatasets
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, datasetService]);
 
   const togglePopover = useCallback(async () => {
     setIsOpen(!isOpen);
@@ -118,30 +118,32 @@ export const DatasetSelector = ({
     };
     const recentDatasetOptions = buildDatasetOptions(
       'Recently selected data',
-      datasetService.getRecentDatasets(),
+      recentDatasets,
       selectedDataset?.id
     );
     const indexPatternOptions = buildDatasetOptions(
       'Index patterns',
-      indexPatterns.filter((indexPattern) => !datasetService.getRecentDataset(indexPattern.id)),
+      indexPatterns.filter((dataset) => !recentDatasets.includes(dataset)),
       selectedDataset?.id
     );
 
     return [...recentDatasetOptions, ...indexPatternOptions];
-  }, [indexPatterns, selectedDataset?.id, datasetService]);
+  }, [indexPatterns, selectedDataset?.id, datasetService, recentDatasets]);
 
   const handleOptionChange = useCallback(
     (newOptions: EuiSelectableOption[]) => {
       const selectedOption = newOptions.find((option) => option.checked === 'on');
       if (selectedOption) {
-        const foundDataset = datasets.find((dataset) => dataset.id === selectedOption.key);
+        const foundDataset =
+          recentDatasets.find((dataset) => dataset.id === selectedOption.key) ||
+          indexPatterns.find((dataset) => dataset.id === selectedOption.key);
         if (foundDataset) {
           closePopover();
           setSelectedDataset(foundDataset);
         }
       }
     },
-    [datasets, setSelectedDataset, closePopover]
+    [recentDatasets, indexPatterns, setSelectedDataset, closePopover]
   );
 
   const datasetTitle = useMemo(() => {