@bigbinary/neeto-image-uploader-frontend 1.6.0-beta1 → 2.0.0

package/dist/index.js

@@ -4,7 +4,7 @@ import { noop as noop$1, keysToCamelCase, findBy, isPresent } from '@bigbinary/n
 import { Delete, LeftArrow, MenuHorizontal } from '@bigbinary/neeto-icons';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
-import { pipe, values, flatten as flatten$1, map, toUpper, join, equals, isNil, isEmpty, mergeRight, mergeLeft, concat, __, inc, mergeDeepRight } from 'ramda';
+import { pipe, values, flatten as flatten$1, map, toUpper, join, equals, isNil, isEmpty, mergeRight, mergeLeft, identity, prop, mergeDeepRight } from 'ramda';
 import { Trans, useTranslation } from 'react-i18next';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import i18next, { t as t$1 } from 'i18next';
@@ -14,8 +14,8 @@ import Dropdown from '@bigbinary/neetoui/Dropdown';
 import NeetoUIModal from '@bigbinary/neetoui/Modal';
 import Tab from '@bigbinary/neetoui/Tab';
 import Spinner from '@bigbinary/neetoui/Spinner';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { useMutationWithInvalidation, useDebounce, useFuncDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { useMutation, useInfiniteQuery, keepPreviousData } from '@tanstack/react-query';
+import { useMutationWithInvalidation, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import axios from 'axios';
 import { DirectUpload } from '@rails/activestorage';
 import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
@@ -3905,19 +3905,30 @@ function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t
 var useFetchAssets = function useFetchAssets(_ref) {
   var searchTerm = _ref.searchTerm,
     url = _ref.url,
-    page = _ref.page,
     per = _ref.per;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery(_objectSpread$3({
-    queryKey: [QUERY_KEYS.ASSETS_LIST],
-    queryFn: function queryFn() {
+  return useInfiniteQuery(_objectSpread$3({
+    queryKey: [QUERY_KEYS.ASSETS_LIST, searchTerm],
+    queryFn: function queryFn(_ref2) {
+      var _ref2$pageParam = _ref2.pageParam,
+        pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
       return imagesApi.fetch({
         searchTerm: searchTerm,
         url: url,
-        page: page,
+        page: pageParam,
         per: per
       });
     },
+    getNextPageParam: function getNextPageParam(lastPage, _, lastPageParam) {
+      return lastPage.length === IMAGES_PER_PAGE ? lastPageParam + 1 : null;
+    },
+    select: function select(data) {
+      var results = data.pages.flatMap(identity);
+      return {
+        results: results
+      };
+    },
+    initialPageParam: 1,
     staleTime: ASSETS_STALE_TIME
   }, options));
 };
@@ -4751,74 +4762,42 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
 };
 
 var Images = function Images(_ref) {
-  var query = _ref.query,
-    debouncedQuery = _ref.debouncedQuery,
+  var debouncedQuery = _ref.debouncedQuery,
     setSelectedImage = _ref.setSelectedImage;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray$2(_useState, 2),
-    hasMore = _useState2[0],
-    setHasMore = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray$2(_useState3, 2),
-    images = _useState4[0],
-    setImages = _useState4[1];
-  var _useState5 = useState(1),
-    _useState6 = _slicedToArray$2(_useState5, 2),
-    pageNo = _useState6[0],
-    setPageNo = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray$2(_useState7, 2),
-    error = _useState8[0],
-    setError = _useState8[1];
-  var onSuccess = function onSuccess() {
-    var results = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    equals(pageNo, 1) ? setImages(results) : setImages(concat(__, results));
-    setPageNo(inc);
-    setHasMore(results.length === IMAGES_PER_PAGE);
-  };
-  var onError = function onError() {
-    return setError(true);
-  };
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFetchAssets = useFetchAssets({
       searchTerm: debouncedQuery,
-      page: pageNo,
       per: IMAGES_PER_PAGE,
       url: ASSETS_FETCH_URL
-    }, {
-      onSuccess: onSuccess,
-      onError: onError
     }),
-    refetch = _useFetchAssets.refetch,
-    isFetching = _useFetchAssets.isFetching;
-  var loadMore = useFuncDebounce(function () {
-    if (isFetching) return;
-    if (!hasMore) return;
-    if (pageNo > 1) {
-      setError(false);
-      refetch();
-    }
-  }, 500);
-  useEffect(function () {
-    setPageNo(1);
-  }, [query]);
-  useEffect(function () {
-    setImages([]);
-    refetch();
-  }, [debouncedQuery]);
-  if (error) {
+    fetchNextPage = _useFetchAssets.fetchNextPage,
+    hasNextPage = _useFetchAssets.hasNextPage,
+    _useFetchAssets$data = _useFetchAssets.data,
+    _useFetchAssets$data2 = _useFetchAssets$data === void 0 ? {} : _useFetchAssets$data,
+    _useFetchAssets$data3 = _useFetchAssets$data2.results,
+    results = _useFetchAssets$data3 === void 0 ? [] : _useFetchAssets$data3,
+    isLoading = _useFetchAssets.isLoading,
+    isError = _useFetchAssets.isError;
+  if (isError) {
     return /*#__PURE__*/jsx(Typography, {
       className: "mt-9 flex justify-center",
       style: "body2",
       children: t("neetoImageUploader.unsplash.errorMessage")
     });
   }
-  return /*#__PURE__*/jsx(InfiniteScroller, {
-    hasMore: hasMore,
-    images: images,
-    loadMore: loadMore,
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex justify-around",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/createElement(InfiniteScroller, {
     setSelectedImage: setSelectedImage,
+    hasMore: hasNextPage,
+    images: results,
+    key: debouncedQuery,
+    loadMore: fetchNextPage,
     tab: TABS[0].key
   });
 };
@@ -4848,18 +4827,32 @@ function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var UNSPLASH_LIST = QUERY_KEYS.UNSPLASH_LIST;
 var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
-  var pageNo = _ref.pageNo,
-    query = _ref.query;
+  var query = _ref.query;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery(_objectSpread$2({
-    queryKey: [UNSPLASH_LIST],
-    queryFn: function queryFn() {
+  return useInfiniteQuery(_objectSpread$2({
+    queryKey: [UNSPLASH_LIST, {
+      query: query
+    }],
+    queryFn: function queryFn(_ref2) {
+      var _ref2$pageParam = _ref2.pageParam,
+        pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
       return unsplashApi.searchUnsplashImages({
-        pageNo: pageNo,
+        pageNo: pageParam,
         query: query
       });
     },
-    staleTime: UNSPLASH_STALE_TIME
+    initialPageParam: 1,
+    getNextPageParam: function getNextPageParam(lastPage, _, lastPageParam) {
+      return lastPageParam < lastPage.totalPages ? lastPageParam + 1 : null;
+    },
+    select: function select(data) {
+      var results = data.pages.flatMap(prop("results"));
+      return {
+        results: results
+      };
+    },
+    staleTime: UNSPLASH_STALE_TIME,
+    placeholderData: keepPreviousData
   }, options));
 };
 
@@ -4906,37 +4899,12 @@ var uploadWithImageKit = function uploadWithImageKit(file) {
 };
 
 var UnsplashLibrary = function UnsplashLibrary(_ref) {
-  var query = _ref.query,
-    debouncedQuery = _ref.debouncedQuery,
+  var debouncedQuery = _ref.debouncedQuery,
     setSelectedImage = _ref.setSelectedImage,
     setIsUploading = _ref.setIsUploading,
     setActiveTab = _ref.setActiveTab;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray$2(_useState, 2),
-    hasMore = _useState2[0],
-    setHasMore = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray$2(_useState3, 2),
-    images = _useState4[0],
-    setImages = _useState4[1];
-  var _useState5 = useState(1),
-    _useState6 = _slicedToArray$2(_useState5, 2),
-    pageNo = _useState6[0],
-    setPageNo = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray$2(_useState7, 2),
-    error = _useState8[0],
-    setError = _useState8[1];
-  var onSuccess = function onSuccess(_ref2) {
-    var _ref2$results = _ref2.results,
-      results = _ref2$results === void 0 ? [] : _ref2$results,
-      totalPages = _ref2.totalPages;
-    equals(pageNo, 1) ? setImages(results) : setImages(concat(__, results));
-    setPageNo(inc);
-    setHasMore(pageNo < totalPages);
-  };
   var handleUnsplashImageSelect = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
       var _image$urls, response, file, result;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -4986,50 +4954,42 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
       }, _callee, null, [[0, 19, 23, 26]]);
     }));
     return function handleUnsplashImageSelect(_x) {
-      return _ref3.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
-  var onError = function onError() {
-    return setError(true);
-  };
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useFetchUnsplashImag = useFetchUnsplashImages({
-      query: debouncedQuery,
-      pageNo: pageNo
-    }, {
-      onSuccess: onSuccess,
-      onError: onError
+      query: debouncedQuery
     }),
-    refetch = _useFetchUnsplashImag.refetch,
-    isFetching = _useFetchUnsplashImag.isFetching;
-  var loadMore = useFuncDebounce(function () {
-    if (isFetching || !hasMore) return;
-    if (pageNo > 1) {
-      setError(false);
-      refetch();
-    }
-  }, 500);
-  useEffect(function () {
-    setPageNo(1);
-  }, [query]);
-  useEffect(function () {
-    setPageNo(1);
-    setImages([]);
-    refetch();
-  }, [debouncedQuery]);
-  if (error) {
+    fetchNextPage = _useFetchUnsplashImag.fetchNextPage,
+    hasNextPage = _useFetchUnsplashImag.hasNextPage,
+    _useFetchUnsplashImag2 = _useFetchUnsplashImag.data,
+    _useFetchUnsplashImag3 = _useFetchUnsplashImag2 === void 0 ? {} : _useFetchUnsplashImag2,
+    _useFetchUnsplashImag4 = _useFetchUnsplashImag3.results,
+    results = _useFetchUnsplashImag4 === void 0 ? [] : _useFetchUnsplashImag4,
+    isError = _useFetchUnsplashImag.isError,
+    isLoading = _useFetchUnsplashImag.isLoading;
+  if (isError) {
     return /*#__PURE__*/jsx(Typography, {
       className: "mt-9 flex justify-center",
       style: "body2",
       children: t("neetoImageUploader.unsplash.errorMessage")
     });
   }
-  return /*#__PURE__*/jsx(InfiniteScroller, {
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex justify-around",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  return /*#__PURE__*/createElement(InfiniteScroller, {
+    debouncedQuery: debouncedQuery,
     handleUnsplashImageSelect: handleUnsplashImageSelect,
-    hasMore: hasMore,
-    images: images,
-    loadMore: loadMore,
+    hasMore: hasNextPage,
+    images: results,
+    key: debouncedQuery,
+    loadMore: fetchNextPage,
     tab: TABS[1].key
   });
 };