From 89dede7bad8defcaf58b13ec3df37c3d9538bfa3 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sun, 26 May 2024 13:32:02 +1000 Subject: [PATCH] feat(ui): simplify client sio redux actions - Add a simple helper to create socket actions in a less error-prone way - Organize and tidy sio files --- .../frontend/web/src/app/hooks/useSocketIO.ts | 2 +- .../web/src/services/events/actions.ts | 121 +++++------------- .../events/{util => }/setEventListeners.ts | 29 +---- 3 files changed, 34 insertions(+), 118 deletions(-) rename invokeai/frontend/web/src/services/events/{util => }/setEventListeners.ts (96%) diff --git a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts index aaa3b8f6f2..d3baf5f452 100644 --- a/invokeai/frontend/web/src/app/hooks/useSocketIO.ts +++ b/invokeai/frontend/web/src/app/hooks/useSocketIO.ts @@ -6,8 +6,8 @@ import { useAppDispatch } from 'app/store/storeHooks'; import type { MapStore } from 'nanostores'; import { atom, map } from 'nanostores'; import { useEffect, useMemo } from 'react'; +import { setEventListeners } from 'services/events/setEventListeners'; import type { ClientToServerEvents, ServerToClientEvents } from 'services/events/types'; -import { setEventListeners } from 'services/events/util/setEventListeners'; import type { ManagerOptions, Socket, SocketOptions } from 'socket.io-client'; import { io } from 'socket.io-client'; diff --git a/invokeai/frontend/web/src/services/events/actions.ts b/invokeai/frontend/web/src/services/events/actions.ts index 158bf055dc..257819b4c8 100644 --- a/invokeai/frontend/web/src/services/events/actions.ts +++ b/invokeai/frontend/web/src/services/events/actions.ts @@ -23,93 +23,36 @@ import type { QueueItemStatusChangedEvent, } from 'services/events/types'; -// Create actions for each socket -// Middleware and redux can then respond to them as needed +const createSocketAction = (name: string) => + createAction(`socket/${name}`); -export const socketConnected = createAction('socket/socketConnected'); - -export const socketDisconnected = createAction('socket/socketDisconnected'); - -export const socketInvocationStarted = createAction<{ - data: InvocationStartedEvent; -}>('socket/socketInvocationStarted'); - -export const socketInvocationComplete = createAction<{ - data: InvocationCompleteEvent; -}>('socket/socketInvocationComplete'); - -export const socketInvocationError = createAction<{ - data: InvocationErrorEvent; -}>('socket/socketInvocationError'); - -export const socketGeneratorProgress = createAction<{ - data: InvocationDenoiseProgressEvent; -}>('socket/socketGeneratorProgress'); - -export const socketModelLoadStarted = createAction<{ - data: ModelLoadStartedEvent; -}>('socket/socketModelLoadStarted'); - -export const socketModelLoadComplete = createAction<{ - data: ModelLoadCompleteEvent; -}>('socket/socketModelLoadComplete'); - -export const socketDownloadStarted = createAction<{ - data: DownloadStartedEvent; -}>('socket/socketDownloadStarted'); - -export const socketDownloadProgress = createAction<{ - data: DownloadProgressEvent; -}>('socket/socketDownloadProgress'); - -export const socketDownloadComplete = createAction<{ - data: DownloadCompleteEvent; -}>('socket/socketDownloadComplete'); - -export const socketDownloadCancelled = createAction<{ - data: DownloadCancelledEvent; -}>('socket/socketDownloadCancelled'); - -export const socketDownloadError = createAction<{ - data: DownloadErrorEvent; -}>('socket/socketDownloadError'); - -export const socketModelInstallStarted = createAction<{ - data: ModelInstallStartedEvent; -}>('socket/socketModelInstallStarted'); - -export const socketModelInstallDownloadProgress = createAction<{ - data: ModelInstallDownloadProgressEvent; -}>('socket/socketModelInstallDownloadProgress'); - -export const socketModelInstallDownloadsComplete = createAction<{ - data: ModelInstallDownloadsCompleteEvent; -}>('socket/socketModelInstallDownloadsComplete'); - -export const socketModelInstallComplete = createAction<{ - data: ModelInstallCompleteEvent; -}>('socket/socketModelInstallComplete'); - -export const socketModelInstallError = createAction<{ - data: ModelInstallErrorEvent; -}>('socket/socketModelInstallError'); - -export const socketModelInstallCancelled = createAction<{ - data: ModelInstallCancelledEvent; -}>('socket/socketModelInstallCancelled'); - -export const socketQueueItemStatusChanged = createAction<{ - data: QueueItemStatusChangedEvent; -}>('socket/socketQueueItemStatusChanged'); - -export const socketBulkDownloadStarted = createAction<{ - data: BulkDownloadStartedEvent; -}>('socket/socketBulkDownloadStarted'); - -export const socketBulkDownloadComplete = createAction<{ - data: BulkDownloadCompleteEvent; -}>('socket/socketBulkDownloadComplete'); - -export const socketBulkDownloadError = createAction<{ - data: BulkDownloadFailedEvent; -}>('socket/socketBulkDownloadError'); +export const socketConnected = createSocketAction('Connected'); +export const socketDisconnected = createSocketAction('Disconnected'); +export const socketInvocationStarted = createSocketAction('InvocationStartedEvent'); +export const socketInvocationComplete = createSocketAction('InvocationCompleteEvent'); +export const socketInvocationError = createSocketAction('InvocationErrorEvent'); +export const socketGeneratorProgress = createSocketAction( + 'InvocationDenoiseProgressEvent' +); +export const socketModelLoadStarted = createSocketAction('ModelLoadStartedEvent'); +export const socketModelLoadComplete = createSocketAction('ModelLoadCompleteEvent'); +export const socketDownloadStarted = createSocketAction('DownloadStartedEvent'); +export const socketDownloadProgress = createSocketAction('DownloadProgressEvent'); +export const socketDownloadComplete = createSocketAction('DownloadCompleteEvent'); +export const socketDownloadCancelled = createSocketAction('DownloadCancelledEvent'); +export const socketDownloadError = createSocketAction('DownloadErrorEvent'); +export const socketModelInstallStarted = createSocketAction('ModelInstallStartedEvent'); +export const socketModelInstallDownloadProgress = createSocketAction( + 'ModelInstallDownloadProgressEvent' +); +export const socketModelInstallDownloadsComplete = createSocketAction( + 'ModelInstallDownloadsCompleteEvent' +); +export const socketModelInstallComplete = createSocketAction('ModelInstallCompleteEvent'); +export const socketModelInstallError = createSocketAction('ModelInstallErrorEvent'); +export const socketModelInstallCancelled = createSocketAction('ModelInstallCancelledEvent'); +export const socketQueueItemStatusChanged = + createSocketAction('QueueItemStatusChangedEvent'); +export const socketBulkDownloadStarted = createSocketAction('BulkDownloadStartedEvent'); +export const socketBulkDownloadComplete = createSocketAction('BulkDownloadCompleteEvent'); +export const socketBulkDownloadError = createSocketAction('BulkDownloadFailedEvent'); diff --git a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts b/invokeai/frontend/web/src/services/events/setEventListeners.ts similarity index 96% rename from invokeai/frontend/web/src/services/events/util/setEventListeners.ts rename to invokeai/frontend/web/src/services/events/setEventListeners.ts index 40dafe9e9d..6bc0154ef0 100644 --- a/invokeai/frontend/web/src/services/events/util/setEventListeners.ts +++ b/invokeai/frontend/web/src/services/events/setEventListeners.ts @@ -36,12 +36,7 @@ type SetEventListenersArg = { dispatch: AppDispatch; }; -export const setEventListeners = (arg: SetEventListenersArg) => { - const { socket, dispatch } = arg; - - /** - * Connect - */ +export const setEventListeners = ({ socket, dispatch }: SetEventListenersArg) => { socket.on('connect', () => { dispatch(socketConnected()); const queue_id = $queueId.get(); @@ -51,7 +46,6 @@ export const setEventListeners = (arg: SetEventListenersArg) => { socket.emit('subscribe_bulk_download', { bulk_download_id }); } }); - socket.on('connect_error', (error) => { if (error && error.message) { const data: string | undefined = (error as unknown as { data: string | undefined }).data; @@ -65,90 +59,69 @@ export const setEventListeners = (arg: SetEventListenersArg) => { } } }); - socket.on('disconnect', () => { dispatch(socketDisconnected()); }); socket.on('invocation_started', (data) => { dispatch(socketInvocationStarted({ data })); }); - socket.on('invocation_denoise_progress', (data) => { dispatch(socketGeneratorProgress({ data })); }); - socket.on('invocation_error', (data) => { dispatch(socketInvocationError({ data })); }); - socket.on('invocation_complete', (data) => { dispatch(socketInvocationComplete({ data })); }); - socket.on('model_load_started', (data) => { dispatch(socketModelLoadStarted({ data })); }); - socket.on('model_load_complete', (data) => { dispatch(socketModelLoadComplete({ data })); }); - socket.on('download_started', (data) => { dispatch(socketDownloadStarted({ data })); }); - socket.on('download_progress', (data) => { dispatch(socketDownloadProgress({ data })); }); - socket.on('download_complete', (data) => { dispatch(socketDownloadComplete({ data })); }); - socket.on('download_cancelled', (data) => { dispatch(socketDownloadCancelled({ data })); }); - socket.on('download_error', (data) => { dispatch(socketDownloadError({ data })); }); - socket.on('model_install_started', (data) => { dispatch(socketModelInstallStarted({ data })); }); - socket.on('model_install_download_progress', (data) => { dispatch(socketModelInstallDownloadProgress({ data })); }); - socket.on('model_install_downloads_complete', (data) => { dispatch(socketModelInstallDownloadsComplete({ data })); }); - socket.on('model_install_complete', (data) => { dispatch(socketModelInstallComplete({ data })); }); - socket.on('model_install_error', (data) => { dispatch(socketModelInstallError({ data })); }); - socket.on('model_install_cancelled', (data) => { dispatch(socketModelInstallCancelled({ data })); }); - socket.on('queue_item_status_changed', (data) => { dispatch(socketQueueItemStatusChanged({ data })); }); - socket.on('bulk_download_started', (data) => { dispatch(socketBulkDownloadStarted({ data })); }); - socket.on('bulk_download_complete', (data) => { dispatch(socketBulkDownloadComplete({ data })); }); - socket.on('bulk_download_error', (data) => { dispatch(socketBulkDownloadError({ data })); });