diff --git a/src/editors/containers/VideoGallery/hooks.js b/src/editors/containers/VideoGallery/hooks.js index 3c8c3ec24..4912a8aac 100644 --- a/src/editors/containers/VideoGallery/hooks.js +++ b/src/editors/containers/VideoGallery/hooks.js @@ -145,10 +145,14 @@ export const useVideoListProps = ({ }; }; -export const useVideoUploadHandler = () => { +export const useVideoUploadHandler = ({ replace }) => { const learningContextId = useSelector(selectors.app.learningContextId); const blockId = useSelector(selectors.app.blockId); - return () => navigateTo(`/course/${learningContextId}/editor/video_upload/${blockId}`); + const path = `/course/${learningContextId}/editor/video_upload/${blockId}`; + if (replace) { + return () => window.location.replace(path); + } + return () => navigateTo(path); }; export const useCancelHandler = () => ( @@ -203,7 +207,7 @@ export const useVideoProps = ({ videos }) => { inputError, selectBtnProps, } = videoList; - const fileInput = { click: useVideoUploadHandler() }; + const fileInput = { click: useVideoUploadHandler({ replace: false }) }; return { galleryError, diff --git a/src/editors/containers/VideoGallery/index.jsx b/src/editors/containers/VideoGallery/index.jsx index 0600c1334..164f174ae 100644 --- a/src/editors/containers/VideoGallery/index.jsx +++ b/src/editors/containers/VideoGallery/index.jsx @@ -19,7 +19,7 @@ export const VideoGallery = () => { (state) => selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadVideo }), ); const videos = hooks.buildVideos({ rawVideos }); - const handleVideoUpload = hooks.useVideoUploadHandler(); + const handleVideoUpload = hooks.useVideoUploadHandler({ replace: true }); useEffect(() => { // If no videos exists redirects to the video upload screen diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx index 1ac21014d..9ae86f403 100644 --- a/src/editors/containers/VideoGallery/index.test.jsx +++ b/src/editors/containers/VideoGallery/index.test.jsx @@ -80,7 +80,7 @@ describe('VideoGallery', () => { beforeAll(() => { oldLocation = window.location; delete window.location; - window.location = { assign: jest.fn() }; + window.location = { replace: jest.fn() }; }); afterAll(() => { window.location = oldLocation; @@ -118,10 +118,10 @@ describe('VideoGallery', () => { )); }); it('navigates to video upload page when there are no videos', async () => { - expect(window.location.assign).not.toHaveBeenCalled(); + expect(window.location.replace).not.toHaveBeenCalled(); updateState({ videos: [] }); await renderComponent(); - expect(window.location.assign).toHaveBeenCalled(); + expect(window.location.replace).toHaveBeenCalled(); }); it.each([ [/by date added \(newest\)/i, [2, 1, 3]], diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx index 08103c195..2b6c98efa 100644 --- a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx +++ b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx @@ -8,7 +8,6 @@ import { ArrowForward, FileUpload, Close } from '@edx/paragon/icons'; import { useDispatch } from 'react-redux'; import { thunkActions } from '../../data/redux'; import * as hooks from './hooks'; -import * as editorHooks from '../EditorContainer/hooks'; import messages from './messages'; const URLUploader = () => { @@ -58,10 +57,10 @@ const URLUploader = () => { ); }; -export const VideoUploader = ({ setLoading, onClose }) => { +export const VideoUploader = ({ setLoading }) => { const dispatch = useDispatch(); const intl = useIntl(); - const handleCancel = editorHooks.handleCancel({ onClose }); + const goBack = hooks.useHistoryGoBack(); const handleProcessUpload = ({ fileData }) => { dispatch(thunkActions.video.uploadVideo({ @@ -79,7 +78,7 @@ export const VideoUploader = ({ setLoading, onClose }) => { alt={intl.formatMessage(messages.closeButtonAltText)} src={Close} iconAs={Icon} - onClick={handleCancel} + onClick={goBack} /> { VideoUploader.propTypes = { setLoading: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, }; export default VideoUploader; diff --git a/src/editors/containers/VideoUploadEditor/hooks.js b/src/editors/containers/VideoUploadEditor/hooks.js index 7771f2d48..d96996d81 100644 --- a/src/editors/containers/VideoUploadEditor/hooks.js +++ b/src/editors/containers/VideoUploadEditor/hooks.js @@ -31,8 +31,11 @@ export const useUploadVideo = async ({ })); }; +export const useHistoryGoBack = () => (() => window.history.back()); + export default { postUploadRedirect, onVideoUpload, useUploadVideo, + useHistoryGoBack, }; diff --git a/src/editors/containers/VideoUploadEditor/index.jsx b/src/editors/containers/VideoUploadEditor/index.jsx index ba4bf12d6..9dc31ab35 100644 --- a/src/editors/containers/VideoUploadEditor/index.jsx +++ b/src/editors/containers/VideoUploadEditor/index.jsx @@ -1,16 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { useIntl } from '@edx/frontend-platform/i18n'; import { Spinner } from '@edx/paragon'; import './index.scss'; import messages from './messages'; import { VideoUploader } from './VideoUploader'; -export const VideoUploadEditor = ( - { - onClose, - }, -) => { +export const VideoUploadEditor = () => { const [loading, setLoading] = React.useState(false); const intl = useIntl(); @@ -18,7 +13,7 @@ export const VideoUploadEditor = (
{(!loading) ? (
- +
) : (
@@ -33,8 +28,4 @@ export const VideoUploadEditor = ( ); }; -VideoUploadEditor.propTypes = { - onClose: PropTypes.func.isRequired, -}; - export default VideoUploadEditor; diff --git a/src/editors/containers/VideoUploadEditor/index.test.jsx b/src/editors/containers/VideoUploadEditor/index.test.jsx index bf032cd70..e200e9f3a 100644 --- a/src/editors/containers/VideoUploadEditor/index.test.jsx +++ b/src/editors/containers/VideoUploadEditor/index.test.jsx @@ -13,13 +13,12 @@ jest.unmock('@edx/paragon'); jest.unmock('@edx/paragon/icons'); describe('VideoUploadEditor', () => { - const onCloseMock = jest.fn(); let store; - const renderComponent = async (storeParam, onCloseMockParam) => render( + const renderComponent = async (storeParam) => render( - + , , ); @@ -45,14 +44,20 @@ describe('VideoUploadEditor', () => { }); it('renders as expected with default behavior', async () => { - expect(await renderComponent(store, onCloseMock)).toMatchSnapshot(); + expect(await renderComponent(store)).toMatchSnapshot(); }); - it('calls onClose when close button is clicked', async () => { - const container = await renderComponent(store, onCloseMock); + it('calls window.history.back when close button is clicked', async () => { + const container = await renderComponent(store); const closeButton = container.getAllByRole('button', { name: /close/i }); + const oldHistoryBack = window.history.back; + window.history.back = jest.fn(); + expect(closeButton).toHaveLength(1); + expect(window.history.back).not.toHaveBeenCalled(); closeButton.forEach((button) => fireEvent.click(button)); - expect(onCloseMock).toHaveBeenCalled(); + expect(window.history.back).toHaveBeenCalled(); + + window.history.back = oldHistoryBack; }); });