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

package/dist/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState } from 'react';
 import classnames from 'classnames';
-import { noop as noop$1, keysToCamelCase, findBy, isNotEmpty } from '@bigbinary/neeto-cist';
+import { noop as noop$1, keysToCamelCase, findBy } from '@bigbinary/neeto-cist';
 import { Delete, LeftArrow, MenuHorizontal } from '@bigbinary/neeto-icons';
 import { Toastr, Typography, Button, Switch, Input, Spinner, Modal as Modal$1, Tab, Dropdown } from '@bigbinary/neetoui';
 import { pipe, values, flatten as flatten$1, join, equals, isNil, isEmpty, mergeRight, mergeLeft, concat, __, inc } from 'ramda';
@@ -2099,7 +2099,8 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
     i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
     components: {
       span: /*#__PURE__*/React.createElement("span", {
-        className: "neeto-ui-text-primary-500"
+        className: "neeto-ui-text-primary-500",
+        "data-cy": "neeto-image-uploader-browse-text"
       })
     }
   })), setIsAssetLibraryOpen && /*#__PURE__*/React.createElement(Typography, {
@@ -2118,6 +2119,7 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
       })
     }
   })), /*#__PURE__*/React.createElement("input", _extends$1({}, getInputProps(), {
+    "data-cy": "neeto-image-uploader-file-input",
     disabled: isDisabled
   })), /*#__PURE__*/React.createElement(Typography, {
     className: "neeto-ui-text-gray-700 text-center leading-4",
@@ -2184,6 +2186,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": "*",
@@ -3827,11 +3830,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.get(url, {
     params: {
-      search: search
+      searchTerm: searchTerm,
+      page: page,
+      per: per
     }
   });
 };
@@ -3840,13 +3847,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 useQuery([QUERY_KEYS.ASSETS_LIST, search], function () {
+  return useQuery([QUERY_KEYS.ASSETS_LIST], function () {
     return imagesApi.fetch({
-      search: search,
-      url: url
+      searchTerm: searchTerm,
+      url: url,
+      page: page,
+      per: per
     });
   }, mergeRight({
     staleTime: ASSETS_STALE_TIME
@@ -4673,31 +4684,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 = 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({
-      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.createElement("div", {
-      className: "flex items-center justify-center"
-    }, /*#__PURE__*/React.createElement(Spinner, null));
+  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) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      className: "mt-9 flex justify-center",
+      style: "body2"
+    }, t("neetoImageUploader.unsplash.errorMessage"));
   }
-  return isNotEmpty(images) ? /*#__PURE__*/React.createElement(InfiniteScroller, {
+  return /*#__PURE__*/React.createElement(InfiniteScroller, {
+    hasMore: hasMore,
     images: images,
+    loadMore: loadMore,
     setSelectedImage: setSelectedImage,
     tab: TABS[0].key
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h3"
-  }, t("neetoImageUploader.common.noImages")));
+  });
 };
 
 var newAxiosInstance = axios.create();
@@ -4779,7 +4834,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;
@@ -4882,6 +4938,9 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
       refetch();
     }
   }, 500);
+  useEffect(function () {
+    setPageNo(1);
+  }, [query]);
   useEffect(function () {
     setPageNo(1);
     setImages([]);
@@ -4933,9 +4992,11 @@ var ImageLibrary = function ImageLibrary(_ref) {
     }
   }), tab === TABS[0].key ? /*#__PURE__*/React.createElement(Images, {
     debouncedQuery: debouncedQuery,
+    query: query,
     setSelectedImage: setSelectedImage
   }) : /*#__PURE__*/React.createElement(UnsplashLibrary, {
     debouncedQuery: debouncedQuery,
+    query: query,
     setActiveTab: setActiveTab,
     setIsUploading: setIsUploading,
     setSelectedImage: setSelectedImage