feat(ui): wip canvas migration, createListenerMiddleware

This commit is contained in:
psychedelicious
2023-05-03 19:27:29 +10:00
parent a75148cb16
commit 6ab5d28cf3
29 changed files with 352 additions and 175 deletions

View File

@ -1,4 +1,4 @@
import { createAction } from '@reduxjs/toolkit';
import { AnyAction, createAction } from '@reduxjs/toolkit';
import {
GeneratorProgressEvent,
GraphExecutionStateCompleteEvent,

View File

@ -5,20 +5,14 @@ import {
ClientToServerEvents,
ServerToClientEvents,
} from 'services/events/types';
import {
invocationComplete,
socketSubscribed,
socketUnsubscribed,
} from './actions';
import { AppDispatch, RootState } from 'app/store/store';
import { socketSubscribed, socketUnsubscribed } from './actions';
import { AppThunkDispatch, RootState } from 'app/store/store';
import { getTimestamp } from 'common/util/getTimestamp';
import {
sessionInvoked,
isFulfilledSessionCreatedAction,
} from 'services/thunks/session';
import { OpenAPI } from 'services/api';
import { isImageOutput } from 'services/types/guards';
import { imageReceived, thumbnailReceived } from 'services/thunks/image';
import { setEventListeners } from 'services/events/util/setEventListeners';
import { log } from 'app/logging/useLogger';
@ -56,13 +50,15 @@ export const socketMiddleware = () => {
);
const middleware: Middleware =
(store: MiddlewareAPI<AppDispatch, RootState>) => (next) => (action) => {
const { dispatch, getState } = store;
(storeApi: MiddlewareAPI<AppThunkDispatch, RootState>) =>
(next) =>
(action) => {
const { dispatch, getState } = storeApi;
// Set listeners for `connect` and `disconnect` events once
// Must happen in middleware to get access to `dispatch`
if (!areListenersSet) {
setEventListeners({ store, socket, log: socketioLog });
setEventListeners({ storeApi, socket, log: socketioLog });
areListenersSet = true;
@ -107,26 +103,6 @@ export const socketMiddleware = () => {
dispatch(sessionInvoked({ sessionId }));
}
if (invocationComplete.match(action)) {
const { config } = getState();
if (config.shouldFetchImages) {
const { result } = action.payload.data;
if (isImageOutput(result)) {
const imageName = result.image.image_name;
const imageType = result.image.image_type;
dispatch(imageReceived({ imageName, imageType }));
dispatch(
thumbnailReceived({
thumbnailName: imageName,
thumbnailType: imageType,
})
);
}
}
}
next(action);
};

View File

@ -27,13 +27,13 @@ import { addToast } from '../../../features/system/store/systemSlice';
type SetEventListenersArg = {
socket: Socket<ServerToClientEvents, ClientToServerEvents>;
store: MiddlewareAPI<AppDispatch, RootState>;
storeApi: MiddlewareAPI<AppDispatch, RootState>;
log: Logger<JsonObject>;
};
export const setEventListeners = (arg: SetEventListenersArg) => {
const { socket, store, log } = arg;
const { dispatch, getState } = store;
const { socket, storeApi, log } = arg;
const { dispatch, getState } = storeApi;
/**
* Connect