refactor: Moved the function to hooks in order to keep the components

dumb

It is done to make sure the business logic is not in a component and can
be individually tested.

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>

src/editors/containers/VideoUploadEditor/hooks.js

@@ -4,6 +4,11 @@ import { selectors } from '../../data/redux';
 import store from '../../data/store';
 import * as appHooks from '../../hooks';
 
+const extToMime = {
+  mp4: 'video/mp4',
+  mov: 'video/quicktime',
+};
+
 export const {
   navigateTo,
 } = appHooks;
@@ -44,9 +49,30 @@ export const onVideoUpload = () => {
   return module.postUploadRedirect(storeState);
 };
 
+const getFileExtension = (filename) => filename.slice(Math.abs(filename.lastIndexOf('.') - 1) + 2);
+
+export const fileValidator = (setLoading, setErrorMessage, uploadVideo) => (file) => {
+  const supportedFormats = Object.keys(extToMime);
+  const ext = getFileExtension(file.name);
+  const type = extToMime[ext] || '';
+  const newFile = new File([file], file.name, { type });
+
+  if (supportedFormats.includes(ext)) {
+    uploadVideo({
+      supportedFiles: [newFile],
+      setLoadSpinner: setLoading,
+      postUploadRedirect: onVideoUpload(),
+    });
+  } else {
+    const errorMsg = 'Video must be an MP4 or MOV file';
+    setErrorMessage(errorMsg);
+  }
+};
+
 export default {
   postUploadRedirect,
   uploadEditor,
   uploader,
   onVideoUpload,
+  fileValidator,
 };

src/editors/containers/VideoUploadEditor/hooks.test.js

@@ -2,6 +2,9 @@ import * as hooks from './hooks';
 import { MockUseState } from '../../../testUtils';
 
 const state = new MockUseState(hooks);
+const setLoading = jest.fn();
+const setErrorMessage = jest.fn();
+const uploadVideo = jest.fn();
 
 describe('Video Upload Editor hooks', () => {
   beforeEach(() => {
@@ -28,4 +31,20 @@ describe('Video Upload Editor hooks', () => {
       });
     });
   });
+  describe('File Validation', () => {
+    it('Checks with valid MIME type', () => {
+      const file = new File(['(⌐□_□)'], 'video.mp4', { type: 'video/mp4' });
+      const validator = hooks.fileValidator(setLoading, setErrorMessage, uploadVideo);
+      validator(file);
+      expect(uploadVideo).toHaveBeenCalled();
+      expect(setErrorMessage).not.toHaveBeenCalled();
+    });
+    it('Checks with invalid MIME type', () => {
+      const file = new File(['(⌐□_□)'], 'video.gif', { type: 'video/mp4' });
+      const validator = hooks.fileValidator(setLoading, setErrorMessage, uploadVideo);
+      validator(file);
+      expect(uploadVideo).not.toHaveBeenCalled();
+      expect(setErrorMessage).toHaveBeenCalled();
+    });
+  });
 });

src/editors/containers/VideoUploadEditor/index.jsx

@@ -105,31 +105,8 @@ const VideoUploadEditor = (
       console.log('No file selected.');
       return;
     }
-
-    const extToMime = {
-      mp4: 'video/mp4',
-      mov: 'video/quicktime',
-    };
-    const supportedFormats = Object.keys(extToMime);
-
-    function getFileExtension(filename) {
-      return filename.slice(Math.abs(filename.lastIndexOf('.') - 1) + 2);
-    }
-
-    const ext = getFileExtension(file.name);
-    const type = extToMime[ext] || '';
-    const newFile = new File([file], file.name, { type });
-
-    if (supportedFormats.includes(ext)) {
-      uploadVideo({
-        supportedFiles: [newFile],
-        setLoadSpinner: setLoading,
-        postUploadRedirect: hooks.onVideoUpload(),
-      });
-    } else {
-      const errorMsg = 'Video must be an MP4 or MOV file';
-      setErrorMessage(errorMsg);
-    }
+    const validator = hooks.fileValidator(setLoading, setErrorMessage, uploadVideo);
+    validator(file);
   };
 
   return (