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

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';
 

invokeai/frontend/web/src/services/events/actions.ts

@@ -23,93 +23,36 @@ import type {
   QueueItemStatusChangedEvent,
 } from 'services/events/types';
 
-// Create actions for each socket
+const createSocketAction = <T = undefined>(name: string) =>
-// Middleware and redux can then respond to them as needed
+  createAction<T extends undefined ? void : { data: T }>(`socket/${name}`);
 
-export const socketConnected = createAction('socket/socketConnected');
+export const socketConnected = createSocketAction('Connected');
-
+export const socketDisconnected = createSocketAction('Disconnected');
-export const socketDisconnected = createAction('socket/socketDisconnected');
+export const socketInvocationStarted = createSocketAction<InvocationStartedEvent>('InvocationStartedEvent');
-
+export const socketInvocationComplete = createSocketAction<InvocationCompleteEvent>('InvocationCompleteEvent');
-export const socketInvocationStarted = createAction<{
+export const socketInvocationError = createSocketAction<InvocationErrorEvent>('InvocationErrorEvent');
-  data: InvocationStartedEvent;
+export const socketGeneratorProgress = createSocketAction<InvocationDenoiseProgressEvent>(
-}>('socket/socketInvocationStarted');
+  'InvocationDenoiseProgressEvent'
-
+);
-export const socketInvocationComplete = createAction<{
+export const socketModelLoadStarted = createSocketAction<ModelLoadStartedEvent>('ModelLoadStartedEvent');
-  data: InvocationCompleteEvent;
+export const socketModelLoadComplete = createSocketAction<ModelLoadCompleteEvent>('ModelLoadCompleteEvent');
-}>('socket/socketInvocationComplete');
+export const socketDownloadStarted = createSocketAction<DownloadStartedEvent>('DownloadStartedEvent');
-
+export const socketDownloadProgress = createSocketAction<DownloadProgressEvent>('DownloadProgressEvent');
-export const socketInvocationError = createAction<{
+export const socketDownloadComplete = createSocketAction<DownloadCompleteEvent>('DownloadCompleteEvent');
-  data: InvocationErrorEvent;
+export const socketDownloadCancelled = createSocketAction<DownloadCancelledEvent>('DownloadCancelledEvent');
-}>('socket/socketInvocationError');
+export const socketDownloadError = createSocketAction<DownloadErrorEvent>('DownloadErrorEvent');
-
+export const socketModelInstallStarted = createSocketAction<ModelInstallStartedEvent>('ModelInstallStartedEvent');
-export const socketGeneratorProgress = createAction<{
+export const socketModelInstallDownloadProgress = createSocketAction<ModelInstallDownloadProgressEvent>(
-  data: InvocationDenoiseProgressEvent;
+  'ModelInstallDownloadProgressEvent'
-}>('socket/socketGeneratorProgress');
+);
-
+export const socketModelInstallDownloadsComplete = createSocketAction<ModelInstallDownloadsCompleteEvent>(
-export const socketModelLoadStarted = createAction<{
+  'ModelInstallDownloadsCompleteEvent'
-  data: ModelLoadStartedEvent;
+);
-}>('socket/socketModelLoadStarted');
+export const socketModelInstallComplete = createSocketAction<ModelInstallCompleteEvent>('ModelInstallCompleteEvent');
-
+export const socketModelInstallError = createSocketAction<ModelInstallErrorEvent>('ModelInstallErrorEvent');
-export const socketModelLoadComplete = createAction<{
+export const socketModelInstallCancelled = createSocketAction<ModelInstallCancelledEvent>('ModelInstallCancelledEvent');
-  data: ModelLoadCompleteEvent;
+export const socketQueueItemStatusChanged =
-}>('socket/socketModelLoadComplete');
+  createSocketAction<QueueItemStatusChangedEvent>('QueueItemStatusChangedEvent');
-
+export const socketBulkDownloadStarted = createSocketAction<BulkDownloadStartedEvent>('BulkDownloadStartedEvent');
-export const socketDownloadStarted = createAction<{
+export const socketBulkDownloadComplete = createSocketAction<BulkDownloadCompleteEvent>('BulkDownloadCompleteEvent');
-  data: DownloadStartedEvent;
+export const socketBulkDownloadError = createSocketAction<BulkDownloadFailedEvent>('BulkDownloadFailedEvent');
-}>('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');

invokeai/frontend/web/src/services/events/setEventListeners.ts

@@ -36,12 +36,7 @@ type SetEventListenersArg = {
   dispatch: AppDispatch;
 };
 
-export const setEventListeners = (arg: SetEventListenersArg) => {
+export const setEventListeners = ({ socket, dispatch }: SetEventListenersArg) => {
-  const { socket, dispatch } = arg;
-
-  /**
-   * Connect
-   */
   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 }));
   });