From 7a5fca6fd8ea630c731bc525ead404aa5d4e543e Mon Sep 17 00:00:00 2001
From: Yiannis <1515939+styiannis@users.noreply.github.com>
Date: Wed, 11 Mar 2026 02:06:59 +0200
Subject: [PATCH] refactor(frontend): replace legacy action files with
 TypeScript equivalents

---
 .../js/utils/actions/MediaPageActions.js      | 90 -------------------
 .../js/utils/actions/MediaPageActions.ts      | 63 +++++++++++++
 .../static/js/utils/actions/PageActions.js    | 22 -----
 .../static/js/utils/actions/PageActions.ts    | 13 +++
 .../js/utils/actions/PlaylistPageActions.js   | 41 ---------
 .../js/utils/actions/PlaylistPageActions.ts   | 26 ++++++
 .../js/utils/actions/PlaylistViewActions.js   | 19 ----
 .../js/utils/actions/PlaylistViewActions.ts   | 13 +++
 .../js/utils/actions/ProfilePageActions.js    | 13 ---
 .../js/utils/actions/ProfilePageActions.ts    |  9 ++
 .../js/utils/actions/SearchFieldActions.js    |  8 --
 .../js/utils/actions/SearchFieldActions.ts    |  5 ++
 .../js/utils/actions/VideoViewerActions.js    | 36 --------
 .../js/utils/actions/VideoViewerActions.ts    | 23 +++++
 .../utils/actions/MediaPageActions.test.ts    | 10 ++-
 .../tests/utils/actions/PageActions.test.ts   |  4 +-
 .../utils/actions/PlaylistPageActions.test.ts |  4 +-
 .../utils/actions/PlaylistViewActions.test.ts |  4 +-
 .../utils/actions/ProfilePageActions.test.ts  |  4 +-
 .../utils/actions/SearchFieldActions.test.ts  |  5 +-
 .../utils/actions/VideoViewerActions.test.ts  |  4 +-
 21 files changed, 173 insertions(+), 243 deletions(-)
 delete mode 100755 frontend/src/static/js/utils/actions/MediaPageActions.js
 create mode 100755 frontend/src/static/js/utils/actions/MediaPageActions.ts
 delete mode 100755 frontend/src/static/js/utils/actions/PageActions.js
 create mode 100755 frontend/src/static/js/utils/actions/PageActions.ts
 delete mode 100755 frontend/src/static/js/utils/actions/PlaylistPageActions.js
 create mode 100755 frontend/src/static/js/utils/actions/PlaylistPageActions.ts
 delete mode 100755 frontend/src/static/js/utils/actions/PlaylistViewActions.js
 create mode 100755 frontend/src/static/js/utils/actions/PlaylistViewActions.ts
 delete mode 100755 frontend/src/static/js/utils/actions/ProfilePageActions.js
 create mode 100755 frontend/src/static/js/utils/actions/ProfilePageActions.ts
 delete mode 100755 frontend/src/static/js/utils/actions/SearchFieldActions.js
 create mode 100755 frontend/src/static/js/utils/actions/SearchFieldActions.ts
 delete mode 100755 frontend/src/static/js/utils/actions/VideoViewerActions.js
 create mode 100755 frontend/src/static/js/utils/actions/VideoViewerActions.ts

diff --git a/frontend/src/static/js/utils/actions/MediaPageActions.js b/frontend/src/static/js/utils/actions/MediaPageActions.js
deleted file mode 100755
index 93ca0c00..00000000
--- a/frontend/src/static/js/utils/actions/MediaPageActions.js
+++ /dev/null
@@ -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,
-  });
-}
diff --git a/frontend/src/static/js/utils/actions/MediaPageActions.ts b/frontend/src/static/js/utils/actions/MediaPageActions.ts
new file mode 100755
index 00000000..2af4213b
--- /dev/null
+++ b/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 });
+}
diff --git a/frontend/src/static/js/utils/actions/PageActions.js b/frontend/src/static/js/utils/actions/PageActions.js
deleted file mode 100755
index 0363ce2f..00000000
--- a/frontend/src/static/js/utils/actions/PageActions.js
+++ /dev/null
@@ -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,
-  });
-}
diff --git a/frontend/src/static/js/utils/actions/PageActions.ts b/frontend/src/static/js/utils/actions/PageActions.ts
new file mode 100755
index 00000000..093a3a52
--- /dev/null
+++ b/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 });
+}
diff --git a/frontend/src/static/js/utils/actions/PlaylistPageActions.js b/frontend/src/static/js/utils/actions/PlaylistPageActions.js
deleted file mode 100755
index b5d58b87..00000000
--- a/frontend/src/static/js/utils/actions/PlaylistPageActions.js
+++ /dev/null
@@ -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,
-  });
-}
diff --git a/frontend/src/static/js/utils/actions/PlaylistPageActions.ts b/frontend/src/static/js/utils/actions/PlaylistPageActions.ts
new file mode 100755
index 00000000..c8aedbe5
--- /dev/null
+++ b/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 });
+}
diff --git a/frontend/src/static/js/utils/actions/PlaylistViewActions.js b/frontend/src/static/js/utils/actions/PlaylistViewActions.js
deleted file mode 100755
index 6248ee10..00000000
--- a/frontend/src/static/js/utils/actions/PlaylistViewActions.js
+++ /dev/null
@@ -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',
-  });
-}
diff --git a/frontend/src/static/js/utils/actions/PlaylistViewActions.ts b/frontend/src/static/js/utils/actions/PlaylistViewActions.ts
new file mode 100755
index 00000000..731022bf
--- /dev/null
+++ b/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' });
+}
diff --git a/frontend/src/static/js/utils/actions/ProfilePageActions.js b/frontend/src/static/js/utils/actions/ProfilePageActions.js
deleted file mode 100755
index f1ffb095..00000000
--- a/frontend/src/static/js/utils/actions/ProfilePageActions.js
+++ /dev/null
@@ -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',
-  });
-}
diff --git a/frontend/src/static/js/utils/actions/ProfilePageActions.ts b/frontend/src/static/js/utils/actions/ProfilePageActions.ts
new file mode 100755
index 00000000..94fde91c
--- /dev/null
+++ b/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' });
+}
diff --git a/frontend/src/static/js/utils/actions/SearchFieldActions.js b/frontend/src/static/js/utils/actions/SearchFieldActions.js
deleted file mode 100755
index d56ca704..00000000
--- a/frontend/src/static/js/utils/actions/SearchFieldActions.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Dispatcher from '../dispatcher.js';
-
-export function requestPredictions(query) {
-  Dispatcher.dispatch({
-    type: 'REQUEST_PREDICTIONS',
-    query,
-  });
-}
diff --git a/frontend/src/static/js/utils/actions/SearchFieldActions.ts b/frontend/src/static/js/utils/actions/SearchFieldActions.ts
new file mode 100755
index 00000000..97eabe10
--- /dev/null
+++ b/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 });
+}
diff --git a/frontend/src/static/js/utils/actions/VideoViewerActions.js b/frontend/src/static/js/utils/actions/VideoViewerActions.js
deleted file mode 100755
index 6a0dea5d..00000000
--- a/frontend/src/static/js/utils/actions/VideoViewerActions.js
+++ /dev/null
@@ -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,
-  });
-}
diff --git a/frontend/src/static/js/utils/actions/VideoViewerActions.ts b/frontend/src/static/js/utils/actions/VideoViewerActions.ts
new file mode 100755
index 00000000..54346d74
--- /dev/null
+++ b/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 });
+}
diff --git a/frontend/tests/utils/actions/MediaPageActions.test.ts b/frontend/tests/utils/actions/MediaPageActions.test.ts
index b0d89363..9bde719a 100644
--- a/frontend/tests/utils/actions/MediaPageActions.test.ts
+++ b/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  ');
diff --git a/frontend/tests/utils/actions/PageActions.test.ts b/frontend/tests/utils/actions/PageActions.test.ts
index e9e1aff8..f5f0c559 100644
--- a/frontend/tests/utils/actions/PageActions.test.ts
+++ b/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', () => {
diff --git a/frontend/tests/utils/actions/PlaylistPageActions.test.ts b/frontend/tests/utils/actions/PlaylistPageActions.test.ts
index 7c891220..20fb50de 100644
--- a/frontend/tests/utils/actions/PlaylistPageActions.test.ts
+++ b/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', () => {
diff --git a/frontend/tests/utils/actions/PlaylistViewActions.test.ts b/frontend/tests/utils/actions/PlaylistViewActions.test.ts
index 5ad86439..d7758474 100644
--- a/frontend/tests/utils/actions/PlaylistViewActions.test.ts
+++ b/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', () => {
diff --git a/frontend/tests/utils/actions/ProfilePageActions.test.ts b/frontend/tests/utils/actions/ProfilePageActions.test.ts
index 26c33936..42f7dbe9 100644
--- a/frontend/tests/utils/actions/ProfilePageActions.test.ts
+++ b/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', () => {
diff --git a/frontend/tests/utils/actions/SearchFieldActions.test.ts b/frontend/tests/utils/actions/SearchFieldActions.test.ts
index 77168d91..68e7d1f0 100644
--- a/frontend/tests/utils/actions/SearchFieldActions.test.ts
+++ b/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', () => {
diff --git a/frontend/tests/utils/actions/VideoViewerActions.test.ts b/frontend/tests/utils/actions/VideoViewerActions.test.ts
index f59e00c7..d0c2e09d 100644
--- a/frontend/tests/utils/actions/VideoViewerActions.test.ts
+++ b/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', () => {