github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-16 07:35:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): use redux-provided hooks for accessing store

Browse Source
This commit is contained in:
psychedelicious
2025-06-30 14:53:45 +10:00
parent 7636007349
commit b113c57fc4
35 changed files with 46 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
View File

@@ -1,5 +1,5 @@
import { ConfirmationAlertDialog, Divider, Flex, FormControl, FormLabel, Switch, Text } from '@invoke-ai/ui-library';
import { useAppStore } from 'app/store/nanostores/store';
import { useAppStore } from 'app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import ImageUsageMessage from 'features/deleteImageModal/components/ImageUsageMessage';
import { useDeleteImageModalApi, useDeleteImageModalState } from 'features/deleteImageModal/store/state';

25
invokeai/frontend/web/src/features/deleteImageModal/store/state.ts
View File

@@ -1,6 +1,6 @@
import { useStore } from '@nanostores/react';
import { getStore, useAppStore } from 'app/store/nanostores/store';
import type { AppDispatch, AppGetState, RootState } from 'app/store/store';
import type { AppDispatch, AppStore, RootState } from 'app/store/store';
import { useAppStore } from 'app/store/storeHooks';
import { forEach, intersection, some } from 'es-toolkit/compat';
import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
import {
@@ -52,14 +52,14 @@ const getInitialState = (): DeleteImagesModalState => ({
const $deleteModalState = atom<DeleteImagesModalState>(getInitialState());
const deleteImagesWithDialog = async (image_names: string[]): Promise<void> => {
const { getState, dispatch } = getStore();
const deleteImagesWithDialog = async (image_names: string[], store: AppStore): Promise<void> => {
const { getState } = store;
const imageUsage = getImageUsageFromImageNames(image_names, getState());
const shouldConfirmOnDelete = selectSystemShouldConfirmOnDelete(getState());
if (!shouldConfirmOnDelete && !isAnyImageInUse(imageUsage)) {
// If we don't need to confirm and the images are not in use, delete them directly
await handleDeletions(image_names, dispatch, getState);
await handleDeletions(image_names, store);
}
return new Promise<void>((resolve, reject) => {
@@ -74,8 +74,9 @@ const deleteImagesWithDialog = async (image_names: string[]): Promise<void> => {
});
};
const handleDeletions = async (image_names: string[], dispatch: AppDispatch, getState: AppGetState) => {
const handleDeletions = async (image_names: string[], store: AppStore) => {
try {
const { dispatch, getState } = store;
const state = getState();
await dispatch(imagesApi.endpoints.deleteImages.initiate({ image_names }, { track: false })).unwrap();
@@ -96,9 +97,9 @@ const handleDeletions = async (image_names: string[], dispatch: AppDispatch, get
}
};
const confirmDeletion = async (dispatch: AppDispatch, getState: AppGetState) => {
const confirmDeletion = async (store: AppStore) => {
const state = $deleteModalState.get();
await handleDeletions(state.image_names, dispatch, getState);
await handleDeletions(state.image_names, store);
state.resolve?.();
closeSilently();
};
@@ -119,16 +120,16 @@ export const useDeleteImageModalState = () => {
};
export const useDeleteImageModalApi = () => {
const { dispatch, getState } = useAppStore();
const store = useAppStore();
const api = useMemo(
() => ({
delete: deleteImagesWithDialog,
confirm: () => confirmDeletion(dispatch, getState),
delete: (image_names: string[]) => deleteImagesWithDialog(image_names, store),
confirm: () => confirmDeletion(store),
cancel: cancelDeletion,
close: closeSilently,
getUsageSummary: getImageUsageSummary,
}),
[dispatch, getState]
[store]
);
return api;