diff --git a/src/helpers/socket.helpers.ts b/src/helpers/socket.helpers.ts index b5134905..ceb26abe 100644 --- a/src/helpers/socket.helpers.ts +++ b/src/helpers/socket.helpers.ts @@ -70,6 +70,20 @@ export function getSpeechEventType(data: ISocketMessage): string { return typeof data.data?.type === "string" ? data.data.type : ""; } +export const ASSET_SOCKET_TOAST_TYPES = [ + NOTIFICATION_SOCKET_TYPES.ASSET_COMPRESSING, + NOTIFICATION_SOCKET_TYPES.ASSET_COMPRESSED, + NOTIFICATION_SOCKET_TYPES.ASSET_COMPRESSION_FAILED, + NOTIFICATION_SOCKET_TYPES.ASSET_THUMBNAIL_GENERATED, + NOTIFICATION_SOCKET_TYPES.ASSET_THUMBNAIL_FAILED, +] as const; + +export function isAssetSocketToast(data: ISocketMessage): boolean { + return (ASSET_SOCKET_TOAST_TYPES as readonly string[]).includes( + getSpeechEventType(data), + ); +} + export function isSpeechLiveMessage(data: ISocketMessage): boolean { if (data.channel === SOCKET_CHANNELS.SPEECH_LIVE) { return true; diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts index de84ae97..e1afb39c 100644 --- a/src/hooks/useSocket.ts +++ b/src/hooks/useSocket.ts @@ -1,7 +1,13 @@ import { useEffect, useState, useCallback } from "react"; +import { useLocation } from "react-router-dom"; +import AppRoutes from "../AppRoutes"; import { useAuth } from "../contexts/AuthContext"; import { useToast } from "../contexts/ToastContext"; -import { getSocketToast, SOCKET_MESSAGE_TYPES } from "../helpers/socket.helpers"; +import { + getSocketToast, + isAssetSocketToast, + SOCKET_MESSAGE_TYPES, +} from "../helpers/socket.helpers"; import SocketService, { ISocketMessage } from "../services/socket.service"; import { ToastTypes } from "../constants"; @@ -15,6 +21,7 @@ export interface INotification { export const useSocket = () => { const { token, isAuthenticated } = useAuth(); const { success, error, info } = useToast(); + const location = useLocation(); const [notifications, setNotifications] = useState([]); useEffect(() => { @@ -25,6 +32,14 @@ export const useSocket = () => { } const handleNotification = (data: ISocketMessage) => { + const isAdminAssetPage = location.pathname.startsWith( + AppRoutes.client.protected.admin.ASSETS, + ); + + if (isAssetSocketToast(data) && !isAdminAssetPage) { + return; + } + const toast = getSocketToast(data); if (!toast) { return; @@ -63,7 +78,7 @@ export const useSocket = () => { SocketService.removeListener(handleNotification); // Don't disconnect here - let the effect handle it }; - }, [token, isAuthenticated, success, error, info]); + }, [token, isAuthenticated, success, error, info, location.pathname]); const sendMessage = useCallback( (channel: string, message: string, data: Record = {}) => { diff --git a/src/routes/AdminHomeRoute.tsx b/src/routes/AdminHomeRoute.tsx index 26e84038..b0e7a946 100644 --- a/src/routes/AdminHomeRoute.tsx +++ b/src/routes/AdminHomeRoute.tsx @@ -5,6 +5,7 @@ import { NotFoundPage } from "../design/pages"; import { usePermissions } from "../hooks"; import type { AdminResource } from "../modules/admin/role"; import { ADMIN_ACTIONS, ADMIN_RESOURCES } from "../modules/admin"; +import { AdminLayout } from "../modules/admin/components/AdminLayout"; const adminEntryRoutes: Array<{ action?: typeof ADMIN_ACTIONS.READ | typeof ADMIN_ACTIONS.CREATE; @@ -63,5 +64,13 @@ export const AdminHomeRoute: React.FC = () => { ) : null; - return entry ? : ; + return entry ? ( + + ) : ( + +
+ +
+
+ ); }; diff --git a/src/routes/AdminRootRoute.tsx b/src/routes/AdminRootRoute.tsx index 6cd24cc5..8e162986 100644 --- a/src/routes/AdminRootRoute.tsx +++ b/src/routes/AdminRootRoute.tsx @@ -30,11 +30,15 @@ export const AdminRootRoute: React.FC = ({ ? isSuperAdmin : isAdmin && can(action, resource); - return isAllowed ? ( + return ( - + {isAllowed ? ( + + ) : ( +
+ +
+ )}
- ) : ( - ); };