refactor(frontend): replace legacy action files with TypeScript equivalents

frontend/src/static/js/utils/actions/MediaPageActions.js

@@ -1,90 +0,0 @@
-import Dispatcher from '../dispatcher.js';
-
-export function loadMediaData() {
-  Dispatcher.dispatch({
-    type: 'LOAD_MEDIA_DATA',
-  });
-}
-
-export function likeMedia() {
-  Dispatcher.dispatch({
-    type: 'LIKE_MEDIA',
-  });
-}
-
-export function dislikeMedia() {
-  Dispatcher.dispatch({
-    type: 'DISLIKE_MEDIA',
-  });
-}
-
-export function reportMedia(reportDescription) {
-  Dispatcher.dispatch({
-    type: 'REPORT_MEDIA',
-    reportDescription: !!reportDescription ? reportDescription.replace(/\s/g, '') : '',
-  });
-}
-
-export function copyShareLink(inputElem) {
-  Dispatcher.dispatch({
-    type: 'COPY_SHARE_LINK',
-    inputElement: inputElem,
-  });
-}
-
-export function copyEmbedMediaCode(inputElem) {
-  Dispatcher.dispatch({
-    type: 'COPY_EMBED_MEDIA_CODE',
-    inputElement: inputElem,
-  });
-}
-
-export function removeMedia() {
-  Dispatcher.dispatch({
-    type: 'REMOVE_MEDIA',
-  });
-}
-
-export function submitComment(commentText) {
-  Dispatcher.dispatch({
-    type: 'SUBMIT_COMMENT',
-    commentText,
-  });
-}
-
-export function deleteComment(commentId) {
-  Dispatcher.dispatch({
-    type: 'DELETE_COMMENT',
-    commentId,
-  });
-}
-
-export function createPlaylist(playlist_data) {
-  Dispatcher.dispatch({
-    type: 'CREATE_PLAYLIST',
-    playlist_data,
-  });
-}
-
-export function addMediaToPlaylist(playlist_id, media_id) {
-  Dispatcher.dispatch({
-    type: 'ADD_MEDIA_TO_PLAYLIST',
-    playlist_id,
-    media_id,
-  });
-}
-
-export function removeMediaFromPlaylist(playlist_id, media_id) {
-  Dispatcher.dispatch({
-    type: 'REMOVE_MEDIA_FROM_PLAYLIST',
-    playlist_id,
-    media_id,
-  });
-}
-
-export function addNewPlaylist(playlist_data) {
-  Dispatcher.dispatch({
-    type: 'APPEND_NEW_PLAYLIST',
-    playlist_data,
-  });
-}

frontend/src/static/js/utils/actions/MediaPageActions.ts

@@ -0,0 +1,63 @@
+import { dispatcher } from '../dispatcher';
+
+export function loadMediaData() {
+    dispatcher.dispatch({ type: 'LOAD_MEDIA_DATA' });
+}
+
+export function likeMedia() {
+    dispatcher.dispatch({ type: 'LIKE_MEDIA' });
+}
+
+export function dislikeMedia() {
+    dispatcher.dispatch({ type: 'DISLIKE_MEDIA' });
+}
+
+// @todo: Revisit this
+export function reportMedia(reportDescription?: string | null) {
+    dispatcher.dispatch({
+        type: 'REPORT_MEDIA',
+        reportDescription: typeof reportDescription === 'string' ? reportDescription.replace(/\s/g, '') : '',
+    });
+}
+
+export function copyShareLink(inputElem: HTMLInputElement) {
+    dispatcher.dispatch({ type: 'COPY_SHARE_LINK', inputElement: inputElem });
+}
+
+export function copyEmbedMediaCode(inputElem: HTMLTextAreaElement) {
+    dispatcher.dispatch({ type: 'COPY_EMBED_MEDIA_CODE', inputElement: inputElem });
+}
+
+export function removeMedia() {
+    dispatcher.dispatch({ type: 'REMOVE_MEDIA' });
+}
+
+export function submitComment(commentText: string) {
+    dispatcher.dispatch({ type: 'SUBMIT_COMMENT', commentText });
+}
+
+export function deleteComment(commentId: string | number) {
+    dispatcher.dispatch({ type: 'DELETE_COMMENT', commentId });
+}
+
+export function createPlaylist(playlist_data: { title: string; description: string }) {
+    dispatcher.dispatch({ type: 'CREATE_PLAYLIST', playlist_data });
+}
+
+export function addMediaToPlaylist(playlist_id: string, media_id: string) {
+    dispatcher.dispatch({ type: 'ADD_MEDIA_TO_PLAYLIST', playlist_id, media_id });
+}
+
+export function removeMediaFromPlaylist(playlist_id: string, media_id: string) {
+    dispatcher.dispatch({ type: 'REMOVE_MEDIA_FROM_PLAYLIST', playlist_id, media_id });
+}
+
+export function addNewPlaylist(playlist_data: {
+    playlist_id: string;
+    add_date: Date; // @todo: Revisit this
+    description: string;
+    title: string;
+    media_list: string[]; // @todo: Revisit this
+}) {
+    dispatcher.dispatch({ type: 'APPEND_NEW_PLAYLIST', playlist_data });
+}

frontend/src/static/js/utils/actions/PageActions.js

@@ -1,22 +0,0 @@
-import Dispatcher from '../dispatcher.js';
-
-export function initPage(page) {
-  Dispatcher.dispatch({
-    type: 'INIT_PAGE',
-    page,
-  });
-}
-
-export function toggleMediaAutoPlay() {
-  Dispatcher.dispatch({
-    type: 'TOGGLE_AUTO_PLAY',
-  });
-}
-
-export function addNotification(notification, notificationId) {
-  Dispatcher.dispatch({
-    type: 'ADD_NOTIFICATION',
-    notification,
-    notificationId,
-  });
-}

frontend/src/static/js/utils/actions/PageActions.ts

@@ -0,0 +1,13 @@
+import { dispatcher } from '../dispatcher';
+
+export function initPage(page: string) {
+    dispatcher.dispatch({ type: 'INIT_PAGE', page });
+}
+
+export function toggleMediaAutoPlay() {
+    dispatcher.dispatch({ type: 'TOGGLE_AUTO_PLAY' });
+}
+
+export function addNotification(notification: string, notificationId: string) {
+    dispatcher.dispatch({ type: 'ADD_NOTIFICATION', notification, notificationId });
+}

frontend/src/static/js/utils/actions/PlaylistPageActions.js

@@ -1,41 +0,0 @@
-import Dispatcher from '../dispatcher.js';
-
-export function loadPlaylistData() {
-  Dispatcher.dispatch({
-    type: 'LOAD_PLAYLIST_DATA',
-  });
-}
-
-export function toggleSave() {
-  Dispatcher.dispatch({
-    type: 'TOGGLE_SAVE',
-  });
-}
-
-export function updatePlaylist(playlist_data) {
-  Dispatcher.dispatch({
-    type: 'UPDATE_PLAYLIST',
-    playlist_data,
-  });
-}
-
-export function removePlaylist() {
-  Dispatcher.dispatch({
-    type: 'REMOVE_PLAYLIST',
-  });
-}
-
-export function removedMediaFromPlaylist(media_id, playlist_id) {
-  Dispatcher.dispatch({
-    type: 'MEDIA_REMOVED_FROM_PLAYLIST',
-    media_id,
-    playlist_id,
-  });
-}
-
-export function reorderedMediaInPlaylist(newMediaData) {
-  Dispatcher.dispatch({
-    type: 'PLAYLIST_MEDIA_REORDERED',
-    playlist_media: newMediaData,
-  });
-}

frontend/src/static/js/utils/actions/PlaylistPageActions.ts

@@ -0,0 +1,26 @@
+import { dispatcher } from '../dispatcher';
+
+export function loadPlaylistData() {
+    dispatcher.dispatch({ type: 'LOAD_PLAYLIST_DATA' });
+}
+
+export function toggleSave() {
+    dispatcher.dispatch({ type: 'TOGGLE_SAVE' });
+}
+
+export function updatePlaylist(playlist_data: { title: string; description: string }) {
+    dispatcher.dispatch({ type: 'UPDATE_PLAYLIST', playlist_data });
+}
+
+export function removePlaylist() {
+    dispatcher.dispatch({ type: 'REMOVE_PLAYLIST' });
+}
+
+export function removedMediaFromPlaylist(media_id: string, playlist_id: string) {
+    dispatcher.dispatch({ type: 'MEDIA_REMOVED_FROM_PLAYLIST', media_id, playlist_id });
+}
+
+// @todo: Revisit this
+export function reorderedMediaInPlaylist(newMediaData: { [k: string]: any; thumbnail_url: string; url: string }[]) {
+    dispatcher.dispatch({ type: 'PLAYLIST_MEDIA_REORDERED', playlist_media: newMediaData });
+}

frontend/src/static/js/utils/actions/PlaylistViewActions.js

@@ -1,19 +0,0 @@
-import Dispatcher from '../dispatcher.js';
-
-export function toggleLoop() {
-  Dispatcher.dispatch({
-    type: 'TOGGLE_LOOP',
-  });
-}
-
-export function toggleShuffle() {
-  Dispatcher.dispatch({
-    type: 'TOGGLE_SHUFFLE',
-  });
-}
-
-export function toggleSave() {
-  Dispatcher.dispatch({
-    type: 'TOGGLE_SAVE',
-  });
-}

frontend/src/static/js/utils/actions/PlaylistViewActions.ts

@@ -0,0 +1,13 @@
+import { dispatcher } from '../dispatcher';
+
+export function toggleLoop() {
+    dispatcher.dispatch({ type: 'TOGGLE_LOOP' });
+}
+
+export function toggleShuffle() {
+    dispatcher.dispatch({ type: 'TOGGLE_SHUFFLE' });
+}
+
+export function toggleSave() {
+    dispatcher.dispatch({ type: 'TOGGLE_SAVE' });
+}

frontend/src/static/js/utils/actions/ProfilePageActions.js

@@ -1,13 +0,0 @@
-import Dispatcher from '../dispatcher.js';
-
-export function load_author_data() {
-  Dispatcher.dispatch({
-    type: 'LOAD_AUTHOR_DATA',
-  });
-}
-
-export function remove_profile() {
-  Dispatcher.dispatch({
-    type: 'REMOVE_PROFILE',
-  });
-}

frontend/src/static/js/utils/actions/ProfilePageActions.ts

@@ -0,0 +1,9 @@
+import { dispatcher } from '../dispatcher';
+
+export function load_author_data() {
+    dispatcher.dispatch({ type: 'LOAD_AUTHOR_DATA' });
+}
+
+export function remove_profile() {
+    dispatcher.dispatch({ type: 'REMOVE_PROFILE' });
+}

frontend/src/static/js/utils/actions/SearchFieldActions.js

@@ -1,8 +0,0 @@
-import Dispatcher from '../dispatcher.js';
-
-export function requestPredictions(query) {
-  Dispatcher.dispatch({
-    type: 'REQUEST_PREDICTIONS',
-    query,
-  });
-}

frontend/src/static/js/utils/actions/SearchFieldActions.ts

@@ -0,0 +1,5 @@
+import { dispatcher } from '../dispatcher';
+
+export function requestPredictions(query: string) {
+    dispatcher.dispatch({ type: 'REQUEST_PREDICTIONS', query });
+}

frontend/src/static/js/utils/actions/VideoViewerActions.js

@@ -1,36 +0,0 @@
-import Dispatcher from '../dispatcher.js';
-
-export function set_viewer_mode(inTheaterMode) {
-  Dispatcher.dispatch({
-    type: 'SET_VIEWER_MODE',
-    inTheaterMode,
-  });
-}
-
-export function set_player_volume(playerVolume) {
-  Dispatcher.dispatch({
-    type: 'SET_PLAYER_VOLUME',
-    playerVolume,
-  });
-}
-
-export function set_player_sound_muted(playerSoundMuted) {
-  Dispatcher.dispatch({
-    type: 'SET_PLAYER_SOUND_MUTED',
-    playerSoundMuted,
-  });
-}
-
-export function set_video_quality(quality) {
-  Dispatcher.dispatch({
-    type: 'SET_VIDEO_QUALITY',
-    quality,
-  });
-}
-
-export function set_video_playback_speed(playbackSpeed) {
-  Dispatcher.dispatch({
-    type: 'SET_VIDEO_PLAYBACK_SPEED',
-    playbackSpeed,
-  });
-}

frontend/src/static/js/utils/actions/VideoViewerActions.ts

@@ -0,0 +1,23 @@
+import { dispatcher } from '../dispatcher';
+
+export function set_viewer_mode(inTheaterMode: boolean) {
+    dispatcher.dispatch({ type: 'SET_VIEWER_MODE', inTheaterMode });
+}
+
+export function set_player_volume(playerVolume: number) {
+    dispatcher.dispatch({ type: 'SET_PLAYER_VOLUME', playerVolume });
+}
+
+export function set_player_sound_muted(playerSoundMuted: boolean) {
+    dispatcher.dispatch({ type: 'SET_PLAYER_SOUND_MUTED', playerSoundMuted });
+}
+
+export function set_video_quality(
+    quality: 'auto' | number // @todo: Check this again
+) {
+    dispatcher.dispatch({ type: 'SET_VIDEO_QUALITY', quality });
+}
+
+export function set_video_playback_speed(playbackSpeed: number) {
+    dispatcher.dispatch({ type: 'SET_VIDEO_PLAYBACK_SPEED', playbackSpeed });
+}

frontend/tests/utils/actions/MediaPageActions.test.ts

@@ -1,8 +1,8 @@
 import * as MediaPageActions from '../../../src/static/js/utils/actions/MediaPageActions';
-import dispatcher from '../../../src/static/js/utils/dispatcher';
+import { dispatcher } from '../../../src/static/js/utils/dispatcher';
 
 // Mock the dispatcher module used by MediaPageActions
-jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatch: jest.fn() }));
+jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatcher: { dispatch: jest.fn() } }));
 
 describe('utils/actions', () => {
     describe('MediaPageActions', () => {
@@ -41,6 +41,12 @@ describe('utils/actions', () => {
                 expect(dispatch).toHaveBeenCalledWith({ type: 'REPORT_MEDIA', reportDescription: '' });
             });
 
+            it('Should dispatch REPORT_MEDIA with empty string when description is null', () => {
+                MediaPageActions.reportMedia(null);
+                expect(dispatch).toHaveBeenCalledTimes(1);
+                expect(dispatch).toHaveBeenCalledWith({ type: 'REPORT_MEDIA', reportDescription: '' });
+            });
+
             // @todo: Revisit this behavior
             it('Should dispatch REPORT_MEDIA with stripped description when provided', () => {
                 MediaPageActions.reportMedia('  some   text  ');

frontend/tests/utils/actions/PageActions.test.ts

@@ -1,8 +1,8 @@
 import * as PageActions from '../../../src/static/js/utils/actions/PageActions';
-import dispatcher from '../../../src/static/js/utils/dispatcher';
+import { dispatcher } from '../../../src/static/js/utils/dispatcher';
 
 // Mock the dispatcher module used by PageActions
-jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatch: jest.fn() }));
+jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatcher: { dispatch: jest.fn() } }));
 
 describe('utils/actions', () => {
     describe('PageActions', () => {

frontend/tests/utils/actions/PlaylistPageActions.test.ts

@@ -1,8 +1,8 @@
 import { PlaylistPageActions } from '../../../src/static/js/utils/actions';
-import dispatcher from '../../../src/static/js/utils/dispatcher';
+import { dispatcher } from '../../../src/static/js/utils/dispatcher';
 
 // Mock the dispatcher module used by PlaylistPageActions
-jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatch: jest.fn() }));
+jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatcher: { dispatch: jest.fn() } }));
 
 describe('utils/actions', () => {
     describe('PlaylistPageActions', () => {

frontend/tests/utils/actions/PlaylistViewActions.test.ts

@@ -1,8 +1,8 @@
 import { PlaylistViewActions } from '../../../src/static/js/utils/actions';
-import dispatcher from '../../../src/static/js/utils/dispatcher';
+import { dispatcher } from '../../../src/static/js/utils/dispatcher';
 
 // Mock the dispatcher module used by PlaylistViewActions
-jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatch: jest.fn() }));
+jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatcher: { dispatch: jest.fn() } }));
 
 describe('utils/actions', () => {
     describe('PlaylistViewActions', () => {

frontend/tests/utils/actions/ProfilePageActions.test.ts

@@ -1,8 +1,8 @@
 import { ProfilePageActions } from '../../../src/static/js/utils/actions';
-import dispatcher from '../../../src/static/js/utils/dispatcher';
+import { dispatcher } from '../../../src/static/js/utils/dispatcher';
 
 // Mock the dispatcher module used by ProfilePageActions
-jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatch: jest.fn() }));
+jest.mock('../../../src/static/js/utils/actions/../dispatcher', () => ({ dispatcher: { dispatch: jest.fn() } }));
 
 describe('utils/actions', () => {
     describe('ProfilePageActions', () => {

frontend/tests/utils/actions/SearchFieldActions.test.ts

@@ -1,8 +1,9 @@
 import { SearchFieldActions } from '../../../src/static/js/utils/actions';
-import dispatcher from '../../../src/static/js/utils/dispatcher';
 
 // Mock the dispatcher module used by SearchFieldActions
-jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatch: jest.fn() }));
+jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatcher: { dispatch: jest.fn() } }));
+
+import { dispatcher } from '../../../src/static/js/utils/dispatcher';
 
 describe('utils/actions', () => {
     describe('SearchFieldActions', () => {

frontend/tests/utils/actions/VideoViewerActions.test.ts

@@ -1,8 +1,8 @@
 import { VideoViewerActions } from '../../../src/static/js/utils/actions';
-import dispatcher from '../../../src/static/js/utils/dispatcher';
+import { dispatcher } from '../../../src/static/js/utils/dispatcher';
 
 // Mock the dispatcher module used by VideoViewerActions
-jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatch: jest.fn() }));
+jest.mock('../../../src/static/js/utils/dispatcher', () => ({ dispatcher: { dispatch: jest.fn() } }));
 
 describe('utils/actions', () => {
     describe('VideoViewerActions', () => {