Revert "feat: improve asset loading (#484)"

This reverts commit f3ae225d64.

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js

@@ -43,14 +43,7 @@ export const displayList = ({ sortBy, searchString, images }) => (
     imageList: images,
   }).sort(sortFunctions[sortBy in sortKeys ? sortKeys[sortBy] : sortKeys.dateNewest]));
 
-export const imgListHooks = ({
-  searchSortProps,
-  setSelection,
-  images,
-  imageCount,
-}) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const dispatch = useDispatch();
+export const imgListHooks = ({ searchSortProps, setSelection, images }) => {
   const [highlighted, setHighlighted] = module.state.highlighted(null);
   const [
     showSelectImageError,
@@ -80,9 +73,6 @@ export const imgListHooks = ({
       highlighted,
       onHighlightChange: (e) => setHighlighted(e.target.value),
       emptyGalleryLabel: messages.emptyGalleryLabel,
-      allowLazyLoad: true,
-      fetchNextPage: ({ pageNumber }) => dispatch(thunkActions.app.fetchImages({ pageNumber })),
-      assetCount: imageCount,
     },
     // highlight by id
     selectBtnProps: {
@@ -128,7 +118,7 @@ export const fileInputHooks = ({ setSelection, clearSelection, imgList }) => {
       },
     })) {
       dispatch(
-        thunkActions.app.uploadAsset({
+        thunkActions.app.uploadImage({
           file: selectedFile,
           setSelection,
         }),
@@ -143,19 +133,9 @@ export const fileInputHooks = ({ setSelection, clearSelection, imgList }) => {
   };
 };
 
-export const imgHooks = ({
-  setSelection,
-  clearSelection,
-  images,
-  imageCount,
-}) => {
+export const imgHooks = ({ setSelection, clearSelection, images }) => {
   const searchSortProps = module.searchAndSortHooks();
-  const imgList = module.imgListHooks({
-    setSelection,
-    searchSortProps,
-    images,
-    imageCount,
-  });
+  const imgList = module.imgListHooks({ setSelection, searchSortProps, images });
   const fileInput = module.fileInputHooks({
     setSelection,
     clearSelection,

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js

@@ -27,7 +27,7 @@ jest.mock('react-redux', () => {
 jest.mock('../../../data/redux', () => ({
   thunkActions: {
     app: {
-      uploadAsset: jest.fn(),
+      uploadImage: jest.fn(),
     },
   },
 }));
@@ -248,7 +248,7 @@ describe('SelectImageModal hooks', () => {
       hook.click();
       expect(click).toHaveBeenCalled();
     });
-    describe('addFile (uploadAsset args)', () => {
+    describe('addFile (uploadImage args)', () => {
       const eventSuccess = { target: { files: [{ value: testValue, size: 2000 }] } };
       const eventFailure = { target: { files: [testValueInvalidImage] } };
       it('image fails to upload if file size is greater than 1000000', () => {
@@ -259,14 +259,14 @@ describe('SelectImageModal hooks', () => {
         expect(spies.checkValidFileSize.mock.calls.length).toEqual(1);
         expect(spies.checkValidFileSize).toHaveReturnedWith(false);
       });
-      it('dispatches uploadAsset thunkAction with the first target file and setSelection', () => {
+      it('dispatches uploadImage thunkAction with the first target file and setSelection', () => {
         const checkValidFileSize = true;
         spies.checkValidFileSize = jest.spyOn(hooks, hookKeys.checkValidFileSize)
           .mockReturnValueOnce(checkValidFileSize);
         hook.addFile(eventSuccess);
         expect(spies.checkValidFileSize.mock.calls.length).toEqual(1);
         expect(spies.checkValidFileSize).toHaveReturnedWith(true);
-        expect(dispatch).toHaveBeenCalledWith(thunkActions.app.uploadAsset({
+        expect(dispatch).toHaveBeenCalledWith(thunkActions.app.uploadImage({
           file: testValue,
           setSelection,
         }));
@@ -281,7 +281,6 @@ describe('SelectImageModal hooks', () => {
     const searchAndSortHooks = { search: 'props' };
     const fileInputHooks = { file: 'input hooks' };
     const images = { sOmEuiMAge: { staTICUrl: '/assets/sOmEuiMAge' } };
-    const imageCount = 1;
 
     const setSelection = jest.fn();
     const clearSelection = jest.fn();
@@ -293,11 +292,9 @@ describe('SelectImageModal hooks', () => {
         .mockReturnValueOnce(searchAndSortHooks);
       spies.file = jest.spyOn(hooks, hookKeys.fileInputHooks)
         .mockReturnValueOnce(fileInputHooks);
-      hook = hooks.imgHooks({
-        setSelection, clearSelection, images, imageCount,
-      });
+      hook = hooks.imgHooks({ setSelection, clearSelection, images });
     });
-    it('forwards fileInputHooks as fileInput, called with uploadAsset prop', () => {
+    it('forwards fileInputHooks as fileInput, called with uploadImage prop', () => {
       expect(hook.fileInput).toEqual(fileInputHooks);
       expect(spies.file.mock.calls.length).toEqual(1);
       expect(spies.file).toHaveBeenCalledWith({
@@ -310,7 +307,6 @@ describe('SelectImageModal hooks', () => {
         setSelection,
         searchSortProps: searchAndSortHooks,
         images,
-        imageCount,
       });
     });
     it('forwards searchAndSortHooks as searchSortProps', () => {

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx

@@ -17,7 +17,6 @@ export const SelectImageModal = ({
   isLoaded,
   isFetchError,
   isUploadError,
-  imageCount,
 }) => {
   const {
     galleryError,
@@ -26,12 +25,7 @@ export const SelectImageModal = ({
     galleryProps,
     searchSortProps,
     selectBtnProps,
-  } = hooks.imgHooks({
-    setSelection,
-    clearSelection,
-    images: images.current,
-    imageCount,
-  });
+  } = hooks.imgHooks({ setSelection, clearSelection, images: images.current });
 
   const modalMessages = {
     confirmMsg: messages.nextButtonLabel,
@@ -72,14 +66,12 @@ SelectImageModal.propTypes = {
   isLoaded: PropTypes.bool.isRequired,
   isFetchError: PropTypes.bool.isRequired,
   isUploadError: PropTypes.bool.isRequired,
-  imageCount: PropTypes.number.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
-  isLoaded: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchImages }),
-  isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchImages }),
+  isLoaded: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAssets }),
+  isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchAssets }),
   isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
-  imageCount: state.app.imageCount,
 });
 
 export const mapDispatchToProps = {};