@plugable-io/react 0.0.11 → 0.0.13

package/dist/index.d.mts

@@ -122,6 +122,7 @@ interface UseFilesOptions {
     orderBy?: 'created_at' | 'name' | 'byte_size';
     orderDirection?: 'asc' | 'desc';
     staleTime?: number;
+    date?: string;
 }
 interface UseFilesResult {
     files: FileObject[];
@@ -136,7 +137,7 @@ interface UseFilesResult {
     setPage: (page: number) => void;
     refresh: () => Promise<void>;
 }
-declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, staleTime, }?: UseFilesOptions): UseFilesResult;
+declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, staleTime, date, }?: UseFilesOptions): UseFilesResult;
 
 interface ThemeConfig {
     accentColor?: string;

package/dist/index.d.ts

@@ -122,6 +122,7 @@ interface UseFilesOptions {
     orderBy?: 'created_at' | 'name' | 'byte_size';
     orderDirection?: 'asc' | 'desc';
     staleTime?: number;
+    date?: string;
 }
 interface UseFilesResult {
     files: FileObject[];
@@ -136,7 +137,7 @@ interface UseFilesResult {
     setPage: (page: number) => void;
     refresh: () => Promise<void>;
 }
-declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, staleTime, }?: UseFilesOptions): UseFilesResult;
+declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, staleTime, date, }?: UseFilesOptions): UseFilesResult;
 
 interface ThemeConfig {
     accentColor?: string;

package/dist/index.js

@@ -583,15 +583,15 @@ function useFiles({
   autoLoad = true,
   orderBy,
   orderDirection,
-  staleTime
+  staleTime,
+  date
 } = {}) {
   const { client, on, getCache, setCache, staleTime: providerStaleTime } = usePlugable();
   const [files, setFiles] = (0, import_react3.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
   const [page, setPage] = (0, import_react3.useState)(startPage);
   const [hasNext, setHasNext] = (0, import_react3.useState)(false);
-  const previousParamsRef = (0, import_react3.useRef)(null);
-  const isInitialMountRef = (0, import_react3.useRef)(true);
+  const hasInitializedRef = (0, import_react3.useRef)(false);
   const effectiveStaleTime = staleTime ?? providerStaleTime;
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = (0, import_react3.useMemo)(() => metadata, [metadataKey]);
@@ -601,19 +601,21 @@ function useFiles({
     perPage,
     orderBy,
     orderDirection,
-    page
-  }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page]);
+    page,
+    date
+  }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page, date]);
   const fetchFiles = (0, import_react3.useCallback)(async (pageNum, skipCache = false) => {
+    const currentParamsKey = JSON.stringify({
+      metadata: stableMetadata,
+      mediaType,
+      perPage,
+      orderBy,
+      orderDirection,
+      page: pageNum,
+      date
+    });
     if (!skipCache) {
-      const cacheKey = JSON.stringify({
-        metadata: stableMetadata,
-        mediaType,
-        perPage,
-        orderBy,
-        orderDirection,
-        page: pageNum
-      });
-      const cachedEntry = getCache(cacheKey);
+      const cachedEntry = getCache(currentParamsKey);
       if (cachedEntry) {
         const age = Date.now() - cachedEntry.timestamp;
         const isStale = age > effectiveStaleTime;
@@ -633,18 +635,11 @@ function useFiles({
         per_page: perPage,
         with_download_url: true,
         ...orderBy && { order_by: orderBy },
-        ...orderDirection && { order_direction: orderDirection }
+        ...orderDirection && { order_direction: orderDirection },
+        date
       };
       const response = await client.list(options);
-      const cacheKey = JSON.stringify({
-        metadata: stableMetadata,
-        mediaType,
-        perPage,
-        orderBy,
-        orderDirection,
-        page: pageNum
-      });
-      setCache(cacheKey, {
+      setCache(currentParamsKey, {
         files: response.files,
         paging: response.paging,
         timestamp: Date.now()
@@ -658,27 +653,24 @@ function useFiles({
     } finally {
       setIsLoading(false);
     }
-  }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime]);
+  }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime, date]);
   (0, import_react3.useEffect)(() => {
-    const paramsChanged = previousParamsRef.current !== null && previousParamsRef.current !== paramsKeyWithPage;
-    const isInitialMount = isInitialMountRef.current;
-    previousParamsRef.current = paramsKeyWithPage;
-    if (isInitialMount) {
-      isInitialMountRef.current = false;
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      if (!autoLoad) {
+        return;
+      }
     }
     const cachedEntry = getCache(paramsKeyWithPage);
-    const shouldFetch = paramsChanged || isInitialMount && autoLoad;
+    const isStale = cachedEntry ? Date.now() - cachedEntry.timestamp > effectiveStaleTime : true;
     if (cachedEntry) {
-      const age = Date.now() - cachedEntry.timestamp;
-      const isStale = age > effectiveStaleTime;
       setFiles(cachedEntry.files);
       setHasNext(cachedEntry.paging.has_next_page);
-      if (paramsChanged || isStale && shouldFetch) {
-        fetchFiles(page, true);
+      if (!isStale) {
+        return;
       }
-    } else if (shouldFetch) {
-      fetchFiles(page, true);
     }
+    fetchFiles(page, true);
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);
   (0, import_react3.useEffect)(() => {
     const unsubscribe = on("file.uploaded", () => {
@@ -687,9 +679,7 @@ function useFiles({
     return unsubscribe;
   }, [on, fetchFiles, page]);
   const loadNextPage = (0, import_react3.useCallback)(() => {
-    if (hasNext) {
-      setPage((p) => p + 1);
-    }
+    if (hasNext) setPage((p) => p + 1);
   }, [hasNext]);
   const loadPreviousPage = (0, import_react3.useCallback)(() => {
     setPage((p) => Math.max(1, p - 1));

package/dist/index.mjs

@@ -537,15 +537,15 @@ function useFiles({
   autoLoad = true,
   orderBy,
   orderDirection,
-  staleTime
+  staleTime,
+  date
 } = {}) {
   const { client, on, getCache, setCache, staleTime: providerStaleTime } = usePlugable();
   const [files, setFiles] = useState3([]);
   const [isLoading, setIsLoading] = useState3(false);
   const [page, setPage] = useState3(startPage);
   const [hasNext, setHasNext] = useState3(false);
-  const previousParamsRef = useRef2(null);
-  const isInitialMountRef = useRef2(true);
+  const hasInitializedRef = useRef2(false);
   const effectiveStaleTime = staleTime ?? providerStaleTime;
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = useMemo2(() => metadata, [metadataKey]);
@@ -555,19 +555,21 @@ function useFiles({
     perPage,
     orderBy,
     orderDirection,
-    page
-  }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page]);
+    page,
+    date
+  }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page, date]);
   const fetchFiles = useCallback3(async (pageNum, skipCache = false) => {
+    const currentParamsKey = JSON.stringify({
+      metadata: stableMetadata,
+      mediaType,
+      perPage,
+      orderBy,
+      orderDirection,
+      page: pageNum,
+      date
+    });
     if (!skipCache) {
-      const cacheKey = JSON.stringify({
-        metadata: stableMetadata,
-        mediaType,
-        perPage,
-        orderBy,
-        orderDirection,
-        page: pageNum
-      });
-      const cachedEntry = getCache(cacheKey);
+      const cachedEntry = getCache(currentParamsKey);
       if (cachedEntry) {
         const age = Date.now() - cachedEntry.timestamp;
         const isStale = age > effectiveStaleTime;
@@ -587,18 +589,11 @@ function useFiles({
         per_page: perPage,
         with_download_url: true,
         ...orderBy && { order_by: orderBy },
-        ...orderDirection && { order_direction: orderDirection }
+        ...orderDirection && { order_direction: orderDirection },
+        date
       };
       const response = await client.list(options);
-      const cacheKey = JSON.stringify({
-        metadata: stableMetadata,
-        mediaType,
-        perPage,
-        orderBy,
-        orderDirection,
-        page: pageNum
-      });
-      setCache(cacheKey, {
+      setCache(currentParamsKey, {
         files: response.files,
         paging: response.paging,
         timestamp: Date.now()
@@ -612,27 +607,24 @@ function useFiles({
     } finally {
       setIsLoading(false);
     }
-  }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime]);
+  }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection, getCache, setCache, effectiveStaleTime, date]);
   useEffect2(() => {
-    const paramsChanged = previousParamsRef.current !== null && previousParamsRef.current !== paramsKeyWithPage;
-    const isInitialMount = isInitialMountRef.current;
-    previousParamsRef.current = paramsKeyWithPage;
-    if (isInitialMount) {
-      isInitialMountRef.current = false;
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+      if (!autoLoad) {
+        return;
+      }
     }
     const cachedEntry = getCache(paramsKeyWithPage);
-    const shouldFetch = paramsChanged || isInitialMount && autoLoad;
+    const isStale = cachedEntry ? Date.now() - cachedEntry.timestamp > effectiveStaleTime : true;
     if (cachedEntry) {
-      const age = Date.now() - cachedEntry.timestamp;
-      const isStale = age > effectiveStaleTime;
       setFiles(cachedEntry.files);
       setHasNext(cachedEntry.paging.has_next_page);
-      if (paramsChanged || isStale && shouldFetch) {
-        fetchFiles(page, true);
+      if (!isStale) {
+        return;
       }
-    } else if (shouldFetch) {
-      fetchFiles(page, true);
     }
+    fetchFiles(page, true);
   }, [paramsKeyWithPage, autoLoad, getCache, effectiveStaleTime, fetchFiles, page]);
   useEffect2(() => {
     const unsubscribe = on("file.uploaded", () => {
@@ -641,9 +633,7 @@ function useFiles({
     return unsubscribe;
   }, [on, fetchFiles, page]);
   const loadNextPage = useCallback3(() => {
-    if (hasNext) {
-      setPage((p) => p + 1);
-    }
+    if (hasNext) setPage((p) => p + 1);
   }, [hasNext]);
   const loadPreviousPage = useCallback3(() => {
     setPage((p) => Math.max(1, p - 1));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@plugable-io/react",
-    "version": "0.0.11",
+    "version": "0.0.13",
     "description": "React components and hooks for Plugable File Management API",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -43,7 +43,7 @@
         "react-dom": ">=16.8.0"
     },
     "dependencies": {
-        "@plugable-io/js": "^0.0.10"
+        "@plugable-io/js": "^0.0.12"
     },
     "devDependencies": {
         "@types/node": "^20.0.0",