fix: caching issue with resource fetching (#6165)

* fix: caching issue with resource fetching

* chore: reset local storage directly

Author: asalem1

src/flows/shared/BucketSelector/index.tsx

@@ -36,7 +36,7 @@ const BucketSelector: FC<Props> = ({
   testID = 'flow-bucket-selector',
   style = {},
 }) => {
-  const {buckets, loading} = useContext(BucketContext)
+  const {buckets, loading, refresh} = useContext(BucketContext)
   let buttonText = 'Loading buckets...'
 
   useEffect(() => {
@@ -51,6 +51,11 @@ const BucketSelector: FC<Props> = ({
     onSelect(null)
   }, [buckets, onSelect])
 
+  const addBucket = (bucket: Bucket) => {
+    refresh()
+    onSelect(bucket)
+  }
+
   let menuItems = (
     <Dropdown.ItemEmpty>
       <TechnoSpinner strokeWidth={ComponentSize.Small} diameterPixels={32} />
@@ -99,7 +104,7 @@ const BucketSelector: FC<Props> = ({
     menuItems = (
       <>
         <CreateBucketDropdownItem
-          onUpdateBucket={onSelect}
+          onUpdateBucket={addBucket}
           testID={`${testID}--create`}
         />
         <Dropdown.Divider />

src/shared/contexts/buckets.tsx

@@ -89,21 +89,6 @@ export const BucketProvider: FC<Props> = ({
     }
   }, [controller])
 
-  // keep the redux store in sync
-  useEffect(() => {
-    if (loading === RemoteDataState.Done) {
-      dispatch(
-        setBuckets(
-          RemoteDataState.Done,
-          normalize<Bucket, BucketEntities, string[]>(
-            buckets.filter(b => b.type !== 'sample'),
-            arrayOfBuckets
-          )
-        )
-      )
-    }
-  }, [buckets, dispatch, loading])
-
   // TODO: load bucket creation limits on org change
   // expose limits to frontend
 
@@ -145,7 +130,7 @@ export const BucketProvider: FC<Props> = ({
       {
         method: 'GET',
         headers,
-        signal: controller.current.signal,
+        signal: controller.current?.signal,
       }
     )
       .then(response => {
@@ -173,11 +158,24 @@ export const BucketProvider: FC<Props> = ({
         bucks.user.sort((a, b) =>
           `${a.name}`.toLowerCase().localeCompare(`${b.name}`.toLowerCase())
         )
+
+        const _buckets = [...bucks.user, ...bucks.system]
         updateCache({
           loading: RemoteDataState.Done,
           lastFetch: Date.now(),
-          buckets: [...bucks.user, ...bucks.system],
+          buckets: _buckets,
         })
+
+        // keep the redux store in sync
+        dispatch(
+          setBuckets(
+            RemoteDataState.Done,
+            normalize<Bucket, BucketEntities, string[]>(
+              _buckets.filter(b => b.type !== 'sample'),
+              arrayOfBuckets
+            )
+          )
+        )
       })
       .catch(error => {
         console.error({error})
@@ -195,6 +193,11 @@ export const BucketProvider: FC<Props> = ({
     } else if (loading === RemoteDataState.NotStarted) {
       fetchBuckets()
     }
+
+    return () => {
+      // reset the lastFetch to trigger a fresh fetch on mount
+      window.localStorage.setItem('buckets', JSON.stringify({}))
+    }
   }, [])
 
   const createBucket = (bucket: ExtendedBucket) => {
@@ -283,11 +286,14 @@ export const BucketProvider: FC<Props> = ({
     updateCache({
       buckets: [...bucks.user, ...bucks.system],
     })
+
+    refresh()
   }
 
   const refresh = () => {
     fetchBuckets()
   }
+
   const outBuckets = useMemo(
     () =>
       buckets