@bigbinary/neeto-image-uploader-frontend 1.5.4 → 1.5.5

package/dist/index.cjs.js

@@ -2197,6 +2197,7 @@ var IS_DEVELOPMENT_OR_HEROKU_ENV = process.env.RAILS_ENV === "development" || pr
 
 var UNSPLASH_DEFAULT_NAME = "Unsplash-asset";
 var UNSPLASH_URL = "https://unsplash.com/";
+var IMAGES_PER_PAGE = 30;
 var UNSPLASH_DEFAULT_REQUEST_CONFIG = {
   headers: {
     "Access-Control-Allow-Origin": "*",
@@ -3840,11 +3841,15 @@ var ImageEditor = function ImageEditor(_ref) {
 };
 
 var fetch = function fetch(_ref) {
-  var search = _ref.search,
-    url = _ref.url;
+  var searchTerm = _ref.searchTerm,
+    url = _ref.url,
+    page = _ref.page,
+    per = _ref.per;
   return axios__default["default"].get(url, {
     params: {
-      search: search
+      searchTerm: searchTerm,
+      page: page,
+      per: per
     }
   });
 };
@@ -3853,13 +3858,17 @@ var imagesApi = {
 };
 
 var useFetchAssets = function useFetchAssets(_ref) {
-  var search = _ref.search,
-    url = _ref.url;
+  var searchTerm = _ref.searchTerm,
+    url = _ref.url,
+    page = _ref.page,
+    per = _ref.per;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([QUERY_KEYS.ASSETS_LIST, search], function () {
+  return reactQuery.useQuery([QUERY_KEYS.ASSETS_LIST], function () {
     return imagesApi.fetch({
-      search: search,
-      url: url
+      searchTerm: searchTerm,
+      url: url,
+      page: page,
+      per: per
     });
   }, ramda.mergeRight({
     staleTime: ASSETS_STALE_TIME
@@ -4686,31 +4695,75 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
 };
 
 var Images = function Images(_ref) {
-  var setSelectedImage = _ref.setSelectedImage,
-    debouncedQuery = _ref.debouncedQuery;
+  var query = _ref.query,
+    debouncedQuery = _ref.debouncedQuery,
+    setSelectedImage = _ref.setSelectedImage;
+  var _useState = React.useState(true),
+    _useState2 = _slicedToArray$2(_useState, 2),
+    hasMore = _useState2[0],
+    setHasMore = _useState2[1];
+  var _useState3 = React.useState([]),
+    _useState4 = _slicedToArray$2(_useState3, 2),
+    images = _useState4[0],
+    setImages = _useState4[1];
+  var _useState5 = React.useState(1),
+    _useState6 = _slicedToArray$2(_useState5, 2),
+    pageNo = _useState6[0],
+    setPageNo = _useState6[1];
+  var _useState7 = React.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] : [];
+    ramda.equals(pageNo, 1) ? setImages(results) : setImages(ramda.concat(ramda.__, results));
+    setPageNo(ramda.inc);
+    setHasMore(results.length === IMAGES_PER_PAGE);
+  };
+  var onError = function onError() {
+    return setError(true);
+  };
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFetchAssets = useFetchAssets({
-      search: debouncedQuery,
+      searchTerm: debouncedQuery,
+      page: pageNo,
+      per: IMAGES_PER_PAGE,
       url: ASSETS_FETCH_URL
+    }, {
+      onSuccess: onSuccess,
+      onError: onError
     }),
-    _useFetchAssets$data = _useFetchAssets.data,
-    images = _useFetchAssets$data === void 0 ? [] : _useFetchAssets$data,
+    refetch = _useFetchAssets.refetch,
     isFetching = _useFetchAssets.isFetching;
-  if (isFetching) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
+  var loadMore = reactUtils.useFuncDebounce(function () {
+    if (isFetching) return;
+    if (!hasMore) return;
+    if (pageNo > 1) {
+      setError(false);
+      refetch();
+    }
+  }, 500);
+  React.useEffect(function () {
+    setPageNo(1);
+  }, [query]);
+  React.useEffect(function () {
+    setImages([]);
+    refetch();
+  }, [debouncedQuery]);
+  if (error) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "mt-9 flex justify-center",
+      style: "body2"
+    }, t("neetoImageUploader.unsplash.errorMessage"));
   }
-  return neetoCist.isNotEmpty(images) ? /*#__PURE__*/React__default["default"].createElement(InfiniteScroller, {
+  return /*#__PURE__*/React__default["default"].createElement(InfiniteScroller, {
+    hasMore: hasMore,
     images: images,
+    loadMore: loadMore,
     setSelectedImage: setSelectedImage,
     tab: TABS[0].key
-  }) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h3"
-  }, t("neetoImageUploader.common.noImages")));
+  });
 };
 
 var newAxiosInstance = axios__default["default"].create();
@@ -4792,7 +4845,8 @@ var uploadWithImageKit = function uploadWithImageKit(file) {
 };
 
 var UnsplashLibrary = function UnsplashLibrary(_ref) {
-  var debouncedQuery = _ref.debouncedQuery,
+  var query = _ref.query,
+    debouncedQuery = _ref.debouncedQuery,
     setSelectedImage = _ref.setSelectedImage,
     setIsUploading = _ref.setIsUploading,
     setActiveTab = _ref.setActiveTab;
@@ -4895,6 +4949,9 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
       refetch();
     }
   }, 500);
+  React.useEffect(function () {
+    setPageNo(1);
+  }, [query]);
   React.useEffect(function () {
     setPageNo(1);
     setImages([]);
@@ -4946,9 +5003,11 @@ var ImageLibrary = function ImageLibrary(_ref) {
     }
   }), tab === TABS[0].key ? /*#__PURE__*/React__default["default"].createElement(Images, {
     debouncedQuery: debouncedQuery,
+    query: query,
     setSelectedImage: setSelectedImage
   }) : /*#__PURE__*/React__default["default"].createElement(UnsplashLibrary, {
     debouncedQuery: debouncedQuery,
+    query: query,
     setActiveTab: setActiveTab,
     setIsUploading: setIsUploading,
     setSelectedImage: setSelectedImage