@pushwoosh/smart-components-kit 1.1.0 → 1.1.1

package/MediaStore/MediaStore.d.ts

@@ -1,12 +1,8 @@
 import { type FC } from 'react';
-export type MediaStoreProps = {
-    /** Application code whose media files are listed. */
-    application: string;
-    /** Initial page to load (zero-based). Defaults to 0. */
-    page?: number;
-    /** Page size. Defaults to 30. */
-    perPage?: number;
-    /** Called with the chosen file URL (original or variant). */
-    onSelect: (url: string) => void;
-};
+import type { MediaStoreProps } from './types';
+/**
+ * Controlled media gallery: the parent owns the current page (and page size)
+ * and is notified of navigation via `onPageChange`. For a self-contained
+ * variant that keeps the page in internal state, use `MediaStorePaginated`.
+ */
 export declare const MediaStore: FC<MediaStoreProps>;

package/MediaStore/MediaStore.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, useToast } from '@pushwoosh/dumb-components';
-import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, EditIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
@@ -9,14 +9,20 @@ import { CreateVariantDrawer } from './CreateVariantDrawer';
 import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
 import { Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, VariantBadge } from './styled';
-const DEFAULT_PER_PAGE = 30;
 const UPLOAD_PATH = '/api/media/upload';
+/**
+ * Controlled media gallery: the parent owns the current page (and page size)
+ * and is notified of navigation via `onPageChange`. For a self-contained
+ * variant that keeps the page in internal state, use `MediaStorePaginated`.
+ */
 export const MediaStore = ({
   application,
-  page: initialPage = 0,
-  perPage = DEFAULT_PER_PAGE,
+  page,
+  perPage,
+  onPageChange,
   onSelect
 }) => {
+  var _listAsync$value, _listAsync$value2;
   const lang = useLang();
   const {
     rpcGateway,
@@ -29,51 +35,54 @@ export const MediaStore = ({
     openToast
   } = useToast();
   const uploadInputRef = useRef(null);
-  const loadTokenRef = useRef(0);
-  const [files, setFiles] = useState([]);
+  // `uploadFiles` resolves asynchronously; read the latest page from the ref so
+  // the post-upload decision isn't made on a value captured at click time.
+  const pageRef = useRef(page);
+  pageRef.current = page;
   const [variantsByUuid, setVariantsByUuid] = useState({});
-  const [loading, setLoading] = useState(false);
-  const [page, setPage] = useState(initialPage);
-  const [total, setTotal] = useState(0);
+  // Bumped to force a reload of the current page (e.g. after an upload) when
+  // the page prop itself does not change.
+  const [reloadToken, setReloadToken] = useState(0);
   const [isUploading, setIsUploading] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
   const [createVariantFor, setCreateVariantFor] = useState(null);
-  const fetchFiles = useCallback(async p => {
-    // Guard against races: a newer load invalidates in-flight results of older ones.
-    const token = ++loadTokenRef.current;
-    setLoading(true);
-    setVariantsByUuid({});
-    let originals;
-    try {
-      const response = await rpcGateway.mediaFiles.List({
-        application,
-        page: p,
-        perPage
+  const listAsync = useAsync(async () => {
+    const response = await rpcGateway.mediaFiles.List({
+      application,
+      page,
+      perPage
+    });
+    // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
+    return {
+      files: response.files ?? [],
+      total: response.total
+    };
+  }, [rpcGateway, application, page, perPage, reloadToken]);
+  const {
+    loading
+  } = listAsync;
+  const files = ((_listAsync$value = listAsync.value) === null || _listAsync$value === void 0 ? void 0 : _listAsync$value.files) ?? [];
+  const total = ((_listAsync$value2 = listAsync.value) === null || _listAsync$value2 === void 0 ? void 0 : _listAsync$value2.total) ?? 0;
+  useEffect(() => {
+    if (listAsync.error) {
+      openToast({
+        title: listAsync.error.message || lang({
+          message: 'SMART.MEDIA_STORE.LOAD_ERROR'
+        }),
+        type: 'error'
       });
-      if (token !== loadTokenRef.current) return;
-      // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
-      originals = response.files ?? [];
-      setFiles(originals);
-      setTotal(response.total);
-      setPage(response.page);
-    } catch (error) {
-      if (token === loadTokenRef.current) {
-        openToast({
-          title: error.message || lang({
-            message: 'SMART.MEDIA_STORE.LOAD_ERROR'
-          }),
-          type: 'error'
-        });
-      }
-      return;
-    } finally {
-      if (token === loadTokenRef.current) {
-        setLoading(false);
-      }
     }
-    // Originals are already on screen. The List of originals carries no variant
-    // count, so fetch each original's variants in the background and let the
-    // "N variants" badge appear per file as soon as its request resolves.
+  }, [listAsync.error, openToast, lang]);
+  // The List of originals carries no variant count, so once a page of originals
+  // resolves, fetch each one's variants in the background and let the
+  // "N variants" badge appear per file as soon as its request resolves. The
+  // cleanup flag drops results of a page that has since been replaced.
+  useEffect(() => {
+    var _listAsync$value3;
+    const originals = (_listAsync$value3 = listAsync.value) === null || _listAsync$value3 === void 0 ? void 0 : _listAsync$value3.files;
+    if (!originals) return undefined;
+    setVariantsByUuid({});
+    let cancelled = false;
     originals.forEach(file => {
       void (async () => {
         try {
@@ -81,7 +90,7 @@ export const MediaStore = ({
             application,
             parentUuid: file.uuid
           });
-          if (token !== loadTokenRef.current) return;
+          if (cancelled) return;
           setVariantsByUuid(prev => ({
             ...prev,
             [file.uuid]: response.files ?? []
@@ -91,10 +100,10 @@ export const MediaStore = ({
         }
       })();
     });
-  }, [rpcGateway, application, perPage, openToast, lang]);
-  useEffect(() => {
-    void fetchFiles(initialPage);
-  }, [fetchFiles, initialPage]);
+    return () => {
+      cancelled = true;
+    };
+  }, [listAsync.value, rpcGateway, application]);
   const uploadFiles = async selected => {
     const images = selected.filter(file => file.type.startsWith('image/'));
     if (images.length === 0) return;
@@ -120,7 +129,13 @@ export const MediaStore = ({
           }),
           type: 'success'
         });
-        void fetchFiles(0);
+        // Jump back to the first page to surface the freshly uploaded files. If
+        // already there, the prop won't change, so bump the reload token too.
+        if (pageRef.current === 0) {
+          setReloadToken(token => token + 1);
+        } else {
+          onPageChange(0);
+        }
       }
       if (failed > 0) {
         openToast({
@@ -254,7 +269,7 @@ export const MediaStore = ({
           color: "secondary",
           size: "field",
           isDisabled: page <= 0,
-          onClick: () => void fetchFiles(page - 1),
+          onClick: () => onPageChange(page - 1),
           children: lang({
             message: 'SMART.MEDIA_STORE.PREV_BUTTON'
           })
@@ -265,7 +280,7 @@ export const MediaStore = ({
           color: "secondary",
           size: "field",
           isDisabled: page + 1 >= totalPages,
-          onClick: () => void fetchFiles(page + 1),
+          onClick: () => onPageChange(page + 1),
           children: lang({
             message: 'SMART.MEDIA_STORE.NEXT_BUTTON'
           })

package/MediaStore/MediaStorePaginated.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import type { MediaStorePaginatedProps } from './types';
+/**
+ * Self-contained {@link MediaStore} that owns the current page in internal
+ * state. Use this when the host has no opinion on pagination state; reach for
+ * `MediaStore` directly to drive the page from the URL or another store.
+ */
+export declare const MediaStorePaginated: FC<MediaStorePaginatedProps>;

package/MediaStore/MediaStorePaginated.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MediaStore } from './MediaStore';
+const DEFAULT_PER_PAGE = 30;
+/**
+ * Self-contained {@link MediaStore} that owns the current page in internal
+ * state. Use this when the host has no opinion on pagination state; reach for
+ * `MediaStore` directly to drive the page from the URL or another store.
+ */
+export const MediaStorePaginated = ({
+  application,
+  initialPage = 0,
+  perPage = DEFAULT_PER_PAGE,
+  onSelect
+}) => {
+  const [page, setPage] = useState(initialPage);
+  return _jsx(MediaStore, {
+    application: application,
+    page: page,
+    perPage: perPage,
+    onPageChange: setPage,
+    onSelect: onSelect
+  });
+};

package/MediaStore/index.d.ts

@@ -1 +1,3 @@
-export { MediaStore, type MediaStoreProps } from './MediaStore';
+export { MediaStore } from './MediaStore';
+export { MediaStorePaginated } from './MediaStorePaginated';
+export type { MediaStoreProps, MediaStorePaginatedProps } from './types';

package/MediaStore/index.js

@@ -1 +1,2 @@
-export { MediaStore } from './MediaStore';
+export { MediaStore } from './MediaStore';
+export { MediaStorePaginated } from './MediaStorePaginated';

package/MediaStore/types.d.ts

@@ -0,0 +1,22 @@
+export type MediaStoreProps = {
+    /** Application code whose media files are listed. */
+    application: string;
+    /** Current page (zero-based). Controlled by the parent. */
+    page: number;
+    /** Page size. */
+    perPage: number;
+    /** Called when the user requests a different page. */
+    onPageChange: (page: number) => void;
+    /** Called with the chosen file URL (original or variant). */
+    onSelect: (url: string) => void;
+};
+export type MediaStorePaginatedProps = {
+    /** Application code whose media files are listed. */
+    application: string;
+    /** Initial page to load (zero-based). Defaults to 0. */
+    initialPage?: number;
+    /** Page size. Defaults to 30. */
+    perPage?: number;
+    /** Called with the chosen file URL (original or variant). */
+    onSelect: (url: string) => void;
+};

package/MediaStore/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -49,5 +49,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.1.0"
+  "version": "1.1.1"
 }