From da4aab923340fcd90ab694dd528bd1e0ab36b8a7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 28 Sep 2023 23:09:29 +1000
Subject: [PATCH] fix(ui): restore dynamic middleware

---
 .../frontend/web/src/app/components/InvokeAIUI.tsx | 14 ++++++++++++++
 invokeai/frontend/web/src/app/store/store.ts       |  2 ++
 2 files changed, 16 insertions(+)

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index fcb8c59bc7..6e752d1999 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -22,6 +22,7 @@ import Loading from '../../common/components/Loading/Loading';
 import AppDndContext from '../../features/dnd/components/AppDndContext';
 import '../../i18n';
 import { $socketOptions } from '../hooks/useSocketIO';
+import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
 
 const App = lazy(() => import('./App'));
 const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
@@ -77,6 +78,19 @@ const InvokeAIUI = ({
       $queueId.set(queueId);
     }
 
+    // reset dynamically added middlewares
+    resetMiddlewares();
+
+    // TODO: at this point, after resetting the middleware, we really ought to clean up the socket
+    // stuff by calling `dispatch(socketReset())`. but we cannot dispatch from here as we are
+    // outside the provider. it's not needed until there is the possibility that we will change
+    // the `apiUrl`/`token` dynamically.
+
+    // rebuild socket middleware with token and apiUrl
+    if (middleware && middleware.length > 0) {
+      addMiddleware(...middleware);
+    }
+
     return () => {
       // Reset the API client token and base url on unmount
       $baseUrl.set(undefined);
diff --git a/invokeai/frontend/web/src/app/store/store.ts b/invokeai/frontend/web/src/app/store/store.ts
index bb32dc158a..d9bc7b085d 100644
--- a/invokeai/frontend/web/src/app/store/store.ts
+++ b/invokeai/frontend/web/src/app/store/store.ts
@@ -22,6 +22,7 @@ import configReducer from 'features/system/store/configSlice';
 import systemReducer from 'features/system/store/systemSlice';
 import hotkeysReducer from 'features/ui/store/hotkeysSlice';
 import uiReducer from 'features/ui/store/uiSlice';
+import dynamicMiddlewares from 'redux-dynamic-middlewares';
 import { rememberEnhancer, rememberReducer } from 'redux-remember';
 import { api } from 'services/api';
 import { LOCALSTORAGE_PREFIX } from './constants';
@@ -93,6 +94,7 @@ export const store = configureStore({
       immutableCheck: false,
     })
       .concat(api.middleware)
+      .concat(dynamicMiddlewares)
       .prepend(listenerMiddleware.middleware),
   devTools: {
     actionSanitizer,