@plugable-io/react 0.0.2 → 0.0.3

package/README.md

@@ -238,6 +238,37 @@ function ImageGallery() {
 }
 ```
 
+### Ordering Files
+
+```tsx
+function SortedFileList() {
+  const [orderBy, setOrderBy] = useState<'created_at' | 'name' | 'byte_size'>('created_at');
+  const [orderDirection, setOrderDirection] = useState<'asc' | 'desc'>('desc');
+
+  const { files, isLoading } = useFiles({
+    orderBy,
+    orderDirection,
+    perPage: 20,
+  });
+
+  return (
+    <div>
+      <select value={orderBy} onChange={(e) => setOrderBy(e.target.value as any)}>
+        <option value="created_at">Date</option>
+        <option value="name">Name</option>
+        <option value="byte_size">Size</option>
+      </select>
+      <button onClick={() => setOrderDirection(orderDirection === 'asc' ? 'desc' : 'asc')}>
+        {orderDirection === 'asc' ? '↑' : '↓'}
+      </button>
+      {files.map((file) => (
+        <div key={file.id}>{file.name}</div>
+      ))}
+    </div>
+  );
+}
+```
+
 ### Manual Loading
 
 ```tsx
@@ -268,6 +299,8 @@ function LazyFileList() {
 | `perPage` | `number` | `20` | Files per page |
 | `startPage` | `number` | `1` | Initial page number |
 | `autoLoad` | `boolean` | `true` | Fetch on mount |
+| `orderBy` | `'created_at' \| 'name' \| 'byte_size'` | `'created_at'` | Field to order by |
+| `orderDirection` | `'asc' \| 'desc'` | `'desc'` | Sort direction |
 
 ### Return Value
 

package/dist/index.d.mts

@@ -104,6 +104,8 @@ interface UseFilesOptions {
     perPage?: number;
     mediaType?: string;
     autoLoad?: boolean;
+    orderBy?: 'created_at' | 'name' | 'byte_size';
+    orderDirection?: 'asc' | 'desc';
 }
 interface UseFilesResult {
     files: FileObject[];
@@ -118,6 +120,6 @@ interface UseFilesResult {
     setPage: (page: number) => void;
     refresh: () => Promise<void>;
 }
-declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, }?: UseFilesOptions): UseFilesResult;
+declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, }?: UseFilesOptions): UseFilesResult;
 
 export { type AuthProvider, Dropzone, type DropzoneProps, type DropzoneRenderProps, FileImage, type FileImageProps, FileList, type FileListProps, type FileListRenderProps, FilePreview, type FilePreviewProps, PlugableProvider, type PlugableProviderProps, type UseFilesOptions, type UseFilesResult, clearImageCache, useFiles, usePlugable };

package/dist/index.d.ts

@@ -104,6 +104,8 @@ interface UseFilesOptions {
     perPage?: number;
     mediaType?: string;
     autoLoad?: boolean;
+    orderBy?: 'created_at' | 'name' | 'byte_size';
+    orderDirection?: 'asc' | 'desc';
 }
 interface UseFilesResult {
     files: FileObject[];
@@ -118,6 +120,6 @@ interface UseFilesResult {
     setPage: (page: number) => void;
     refresh: () => Promise<void>;
 }
-declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, }?: UseFilesOptions): UseFilesResult;
+declare function useFiles({ metadata, startPage, perPage, mediaType, autoLoad, orderBy, orderDirection, }?: UseFilesOptions): UseFilesResult;
 
 export { type AuthProvider, Dropzone, type DropzoneProps, type DropzoneRenderProps, FileImage, type FileImageProps, FileList, type FileListProps, type FileListRenderProps, FilePreview, type FilePreviewProps, PlugableProvider, type PlugableProviderProps, type UseFilesOptions, type UseFilesResult, clearImageCache, useFiles, usePlugable };

package/dist/index.js

@@ -369,7 +369,9 @@ function useFiles({
   startPage = 1,
   perPage = 20,
   mediaType,
-  autoLoad = true
+  autoLoad = true,
+  orderBy,
+  orderDirection
 } = {}) {
   const { client, on } = usePlugable();
   const [files, setFiles] = (0, import_react3.useState)([]);
@@ -378,6 +380,15 @@ function useFiles({
   const [hasNext, setHasNext] = (0, import_react3.useState)(false);
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = (0, import_react3.useMemo)(() => metadata, [metadataKey]);
+  const loadedParamsRef = (0, import_react3.useRef)(null);
+  const paramsKeyWithPage = (0, import_react3.useMemo)(() => JSON.stringify({
+    metadata: stableMetadata,
+    mediaType,
+    perPage,
+    orderBy,
+    orderDirection,
+    page
+  }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page]);
   const fetchFiles = (0, import_react3.useCallback)(async (pageNum) => {
     setIsLoading(true);
     try {
@@ -386,11 +397,22 @@ function useFiles({
         media_type: mediaType,
         page: pageNum,
         per_page: perPage,
-        with_download_url: true
+        with_download_url: true,
+        order_by: orderBy,
+        order_direction: orderDirection
       };
       const response = await client.list(options);
       setFiles(response.files);
       setHasNext(response.paging.has_next_page);
+      const currentParamsKey = JSON.stringify({
+        metadata: stableMetadata,
+        mediaType,
+        perPage,
+        orderBy,
+        orderDirection,
+        page: pageNum
+      });
+      loadedParamsRef.current = currentParamsKey;
     } catch (err) {
       console.error("Failed to load files:", err);
       setFiles([]);
@@ -398,12 +420,14 @@ function useFiles({
     } finally {
       setIsLoading(false);
     }
-  }, [client, stableMetadata, mediaType, perPage]);
+  }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection]);
   (0, import_react3.useEffect)(() => {
-    if (autoLoad) {
+    const hasLoadedForParams = loadedParamsRef.current === paramsKeyWithPage;
+    const shouldLoad = autoLoad || !hasLoadedForParams && files.length === 0 && !isLoading;
+    if (shouldLoad) {
       fetchFiles(page);
     }
-  }, [fetchFiles, page, autoLoad]);
+  }, [fetchFiles, page, autoLoad, paramsKeyWithPage, isLoading]);
   (0, import_react3.useEffect)(() => {
     const unsubscribe = on("file.uploaded", () => {
       fetchFiles(page);

package/dist/index.mjs

@@ -320,13 +320,15 @@ function Dropzone({
 }
 
 // src/hooks/useFiles.ts
-import { useState as useState2, useCallback as useCallback3, useEffect, useMemo as useMemo2 } from "react";
+import { useState as useState2, useCallback as useCallback3, useEffect, useMemo as useMemo2, useRef as useRef2 } from "react";
 function useFiles({
   metadata,
   startPage = 1,
   perPage = 20,
   mediaType,
-  autoLoad = true
+  autoLoad = true,
+  orderBy,
+  orderDirection
 } = {}) {
   const { client, on } = usePlugable();
   const [files, setFiles] = useState2([]);
@@ -335,6 +337,15 @@ function useFiles({
   const [hasNext, setHasNext] = useState2(false);
   const metadataKey = JSON.stringify(metadata);
   const stableMetadata = useMemo2(() => metadata, [metadataKey]);
+  const loadedParamsRef = useRef2(null);
+  const paramsKeyWithPage = useMemo2(() => JSON.stringify({
+    metadata: stableMetadata,
+    mediaType,
+    perPage,
+    orderBy,
+    orderDirection,
+    page
+  }), [stableMetadata, mediaType, perPage, orderBy, orderDirection, page]);
   const fetchFiles = useCallback3(async (pageNum) => {
     setIsLoading(true);
     try {
@@ -343,11 +354,22 @@ function useFiles({
         media_type: mediaType,
         page: pageNum,
         per_page: perPage,
-        with_download_url: true
+        with_download_url: true,
+        order_by: orderBy,
+        order_direction: orderDirection
       };
       const response = await client.list(options);
       setFiles(response.files);
       setHasNext(response.paging.has_next_page);
+      const currentParamsKey = JSON.stringify({
+        metadata: stableMetadata,
+        mediaType,
+        perPage,
+        orderBy,
+        orderDirection,
+        page: pageNum
+      });
+      loadedParamsRef.current = currentParamsKey;
     } catch (err) {
       console.error("Failed to load files:", err);
       setFiles([]);
@@ -355,12 +377,14 @@ function useFiles({
     } finally {
       setIsLoading(false);
     }
-  }, [client, stableMetadata, mediaType, perPage]);
+  }, [client, stableMetadata, mediaType, perPage, orderBy, orderDirection]);
   useEffect(() => {
-    if (autoLoad) {
+    const hasLoadedForParams = loadedParamsRef.current === paramsKeyWithPage;
+    const shouldLoad = autoLoad || !hasLoadedForParams && files.length === 0 && !isLoading;
+    if (shouldLoad) {
       fetchFiles(page);
     }
-  }, [fetchFiles, page, autoLoad]);
+  }, [fetchFiles, page, autoLoad, paramsKeyWithPage, isLoading]);
   useEffect(() => {
     const unsubscribe = on("file.uploaded", () => {
       fetchFiles(page);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@plugable-io/react",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "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.8"
+        "@plugable-io/js": "^0.0.9"
     },
     "devDependencies": {
         "@types/node": "^20.0.0",