feat: New request hook to fetch videos

src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.jsx

@@ -1,17 +1,12 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import ErrorAlert from './ErrorAlert';
-import { selectors } from '../../data/redux';
-import { RequestKeys } from '../../data/constants/requests';
 
 export const FetchErrorAlert = ({
   message,
-  // redux
   isFetchError,
-  // inject
 }) => (
   <ErrorAlert
     isError={isFetchError}
@@ -28,12 +23,8 @@ FetchErrorAlert.propTypes = {
     defaultMessage: PropTypes.string,
     description: PropTypes.string,
   }).isRequired,
-  // redux
   isFetchError: PropTypes.bool.isRequired,
 
 };
-export const mapStateToProps = (state) => ({
-  isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchAssets }),
-});
-export const mapDispatchToProps = {};
-export default connect(mapStateToProps, mapDispatchToProps)(FetchErrorAlert);
+
+export default FetchErrorAlert;

src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.test.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { FetchErrorAlert, mapStateToProps } from './FetchErrorAlert';
-import { selectors } from '../../data/redux';
-import { RequestKeys } from '../../data/constants/requests';
+import { FetchErrorAlert } from './FetchErrorAlert';
 
 jest.mock('../../data/redux', () => ({
   selectors: {
@@ -18,12 +16,4 @@ describe('FetchErrorAlert', () => {
       expect(shallow(<FetchErrorAlert isFetchError />)).toMatchSnapshot();
     });
   });
-  describe('mapStateToProps', () => {
-    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
-    test('isFetchError from requests.isFinished', () => {
-      expect(
-        mapStateToProps(testState).isFetchError,
-      ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.fetchAssets }));
-    });
-  });
 });

src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.jsx

@@ -1,17 +1,12 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import ErrorAlert from './ErrorAlert';
-import { selectors } from '../../data/redux';
-import { RequestKeys } from '../../data/constants/requests';
 
 export const UploadErrorAlert = ({
   message,
-  // redux
   isUploadError,
-  // inject
 }) => (
   <ErrorAlert
     isError={isUploadError}
@@ -28,11 +23,7 @@ UploadErrorAlert.propTypes = {
     defaultMessage: PropTypes.string,
     description: PropTypes.string,
   }).isRequired,
-  // redux
   isUploadError: PropTypes.bool.isRequired,
 };
-export const mapStateToProps = (state) => ({
-  isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
-});
-export const mapDispatchToProps = {};
-export default connect(mapStateToProps, mapDispatchToProps)(UploadErrorAlert);
+
+export default UploadErrorAlert;

src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.test.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { UploadErrorAlert, mapStateToProps } from './UploadErrorAlert';
-import { selectors } from '../../data/redux';
-import { RequestKeys } from '../../data/constants/requests';
+import { UploadErrorAlert } from './UploadErrorAlert';
 
 jest.mock('../../data/redux', () => ({
   selectors: {
@@ -18,12 +16,4 @@ describe('UploadErrorAlert', () => {
       expect(shallow(<UploadErrorAlert isUploadError />)).toMatchSnapshot();
     });
   });
-  describe('mapStateToProps', () => {
-    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
-    test('isUploadError from requests.isFinished', () => {
-      expect(
-        mapStateToProps(testState).isUploadError,
-      ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.uploadAsset }));
-    });
-  });
 });

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

@@ -1,8 +1,11 @@
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import hooks from './hooks';
 import { acceptedImgKeys } from './utils';
 import SelectionModal from '../../SelectionModal';
 import messages from './messages';
+import { RequestKeys } from '../../../data/constants/requests';
+import { selectors } from '../../../data/redux';
 
 export const SelectImageModal = ({
   isOpen,
@@ -10,6 +13,10 @@ export const SelectImageModal = ({
   setSelection,
   clearSelection,
   images,
+  // redux
+  isLoaded,
+  isFetchError,
+  isUploadError,
 }) => {
   const {
     galleryError,
@@ -41,6 +48,9 @@ export const SelectImageModal = ({
         selectBtnProps,
         acceptedFiles: acceptedImgKeys,
         modalMessages,
+        isLoaded,
+        isFetchError,
+        isUploadError,
       }}
     />
   );
@@ -52,6 +62,18 @@ SelectImageModal.propTypes = {
   setSelection: PropTypes.func.isRequired,
   clearSelection: PropTypes.func.isRequired,
   images: PropTypes.arrayOf(PropTypes.string).isRequired,
+  // redux
+  isLoaded: PropTypes.bool.isRequired,
+  isFetchError: PropTypes.bool.isRequired,
+  isUploadError: PropTypes.bool.isRequired,
 };
 
-export default SelectImageModal;
+export const mapStateToProps = (state) => ({
+  isLoaded: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAssets }),
+  isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchAssets }),
+  isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
+});
+
+export const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectImageModal);

src/editors/sharedComponents/SelectionModal/Gallery.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import {
@@ -13,9 +12,6 @@ import {
   MessageDescriptor,
 } from '@edx/frontend-platform/i18n';
 
-import { selectors } from '../../data/redux';
-import { RequestKeys } from '../../data/constants/requests';
-
 import messages from './messages';
 import GalleryCard from './GalleryCard';
 
@@ -28,10 +24,9 @@ export const Gallery = ({
   emptyGalleryLabel,
   showIdsOnCards,
   height,
+  isLoaded,
   // injected
   intl,
-  // redux
-  isLoaded,
 }) => {
   if (!isLoaded) {
     return (
@@ -80,6 +75,7 @@ Gallery.defaultProps = {
   emptyGalleryLabel: null,
 };
 Gallery.propTypes = {
+  isLoaded: PropTypes.bool.isRequired,
   galleryIsEmpty: PropTypes.bool.isRequired,
   searchIsEmpty: PropTypes.bool.isRequired,
   displayList: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -90,15 +86,6 @@ Gallery.propTypes = {
   height: PropTypes.string,
   // injected
   intl: intlShape.isRequired,
-  // redux
-  isLoaded: PropTypes.bool.isRequired,
 };
 
-const requestKey = RequestKeys.fetchAssets;
-export const mapStateToProps = (state) => ({
-  isLoaded: selectors.requests.isFinished(state, { requestKey }),
-});
-
-export const mapDispatchToProps = {};
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Gallery));
+export default injectIntl(Gallery);

src/editors/sharedComponents/SelectionModal/Gallery.test.jsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { formatMessage } from '../../../testUtils';
-import { RequestKeys } from '../../data/constants/requests';
-import { selectors } from '../../data/redux';
-import { Gallery, mapStateToProps, mapDispatchToProps } from './Gallery';
+import { Gallery } from './Gallery';
 
 jest.mock('../../data/redux', () => ({
   selectors: {
@@ -40,17 +38,4 @@ describe('TextEditor Image Gallery component', () => {
       expect(shallow(<Gallery {...props} />)).toMatchSnapshot();
     });
   });
-  describe('mapStateToProps', () => {
-    const testState = { some: 'testState' };
-    test('loads isLoaded from requests.isFinished selector for fetchAssets request', () => {
-      expect(mapStateToProps(testState).isLoaded).toEqual(
-        selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchAssets }),
-      );
-    });
-  });
-  describe('mapDispatchToProps', () => {
-    test('is empty', () => {
-      expect(mapDispatchToProps).toEqual({});
-    });
-  });
 });

src/editors/sharedComponents/SelectionModal/GalleryCard.jsx

@@ -60,6 +60,8 @@ GalleryCard.propTypes = {
     portableUrl: PropTypes.string,
     thumbnail: PropTypes.string,
     url: PropTypes.string,
+    duration: PropTypes.number,
+    status: PropTypes.string,
   }).isRequired,
   showId: PropTypes.bool,
 };

src/editors/sharedComponents/SelectionModal/index.jsx

@@ -31,6 +31,9 @@ export const SelectionModal = ({
   selectBtnProps,
   acceptedFiles,
   modalMessages,
+  isLoaded,
+  isFetchError,
+  isUploadError,
   // injected
   intl,
 }) => {
@@ -41,6 +44,10 @@ export const SelectionModal = ({
     fetchError,
     uploadError,
   } = modalMessages;
+  const galleryPropsValues = {
+    isLoaded,
+    ...galleryProps,
+  };
   return (
     <BaseModal
       close={close}
@@ -60,8 +67,8 @@ export const SelectionModal = ({
       title={intl.formatMessage(titleMsg)}
     >
       {/* Error Alerts */}
-      <FetchErrorAlert message={fetchError} />
-      <UploadErrorAlert message={uploadError} />
+      <FetchErrorAlert isFetchError={isFetchError} message={fetchError} />
+      <UploadErrorAlert isUploadError={isUploadError} message={uploadError} />
       <ErrorAlert
         dismissError={inputError.dismiss}
         hideHeading
@@ -80,7 +87,7 @@ export const SelectionModal = ({
       </ErrorAlert>
       <Stack gap={3}>
         <SearchSort {...searchSortProps} />
-        <Gallery {...galleryProps} />
+        <Gallery {...galleryPropsValues} />
         <FileInput fileInput={fileInput} acceptedFiles={Object.values(acceptedFiles).join()} />
       </Stack>
     </BaseModal>
@@ -124,6 +131,9 @@ SelectionModal.propTypes = {
     fetchError: MessageDescriptor,
     uploadError: MessageDescriptor,
   }).isRequired,
+  isLoaded: PropTypes.bool.isRequired,
+  isFetchError: PropTypes.bool.isRequired,
+  isUploadError: PropTypes.bool.isRequired,
   // injected
   intl: intlShape.isRequired,
 };