mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-02-17 05:01:27 -05:00
e386b5dc53
*migrate from `openapi-typescript-codegen` to `openapi-typescript` and `openapi-fetch`* `openapi-typescript-codegen` is not very actively maintained - it's been over a year since the last update. `openapi-typescript` and `openapi-fetch` are part of the actively maintained repo. key differences: - provides a `fetch` client instead of `axios`, which means we need to be a bit more verbose with typing thunks - fetch client is created at runtime and has a very nice typescript DX - generates a single file with all types in it, from which we then extract individual types. i don't like how verbose this is, but i do like how it is more explicit. - removed npm api generation scripts - now we have a single `typegen` script overall i have more confidence in this new library. *use nanostores for api base and token* very simple reactive store for api base url and token. this was suggested in the `openapi-fetch` docs and i quite like the strategy. *organise rtk-query api* split out each endpoint (models, images, boards, boardImages) into their own api extensions. tidy!
90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
import { useDisclosure } from '@chakra-ui/react';
|
|
import { PropsWithChildren, createContext, useCallback, useState } from 'react';
|
|
import { ImageDTO } from 'services/api/types';
|
|
import { useAddImageToBoardMutation } from 'services/api/endpoints/boardImages';
|
|
|
|
export type ImageUsage = {
|
|
isInitialImage: boolean;
|
|
isCanvasImage: boolean;
|
|
isNodesImage: boolean;
|
|
isControlNetImage: boolean;
|
|
};
|
|
|
|
type AddImageToBoardContextValue = {
|
|
/**
|
|
* Whether the move image dialog is open.
|
|
*/
|
|
isOpen: boolean;
|
|
/**
|
|
* Closes the move image dialog.
|
|
*/
|
|
onClose: () => void;
|
|
/**
|
|
* The image pending movement
|
|
*/
|
|
image?: ImageDTO;
|
|
onClickAddToBoard: (image: ImageDTO) => void;
|
|
handleAddToBoard: (boardId: string) => void;
|
|
};
|
|
|
|
export const AddImageToBoardContext =
|
|
createContext<AddImageToBoardContextValue>({
|
|
isOpen: false,
|
|
onClose: () => undefined,
|
|
onClickAddToBoard: () => undefined,
|
|
handleAddToBoard: () => undefined,
|
|
});
|
|
|
|
type Props = PropsWithChildren;
|
|
|
|
export const AddImageToBoardContextProvider = (props: Props) => {
|
|
const [imageToMove, setImageToMove] = useState<ImageDTO>();
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
|
|
const [addImageToBoard, result] = useAddImageToBoardMutation();
|
|
|
|
// Clean up after deleting or dismissing the modal
|
|
const closeAndClearImageToDelete = useCallback(() => {
|
|
setImageToMove(undefined);
|
|
onClose();
|
|
}, [onClose]);
|
|
|
|
const onClickAddToBoard = useCallback(
|
|
(image?: ImageDTO) => {
|
|
if (!image) {
|
|
return;
|
|
}
|
|
setImageToMove(image);
|
|
onOpen();
|
|
},
|
|
[setImageToMove, onOpen]
|
|
);
|
|
|
|
const handleAddToBoard = useCallback(
|
|
(boardId: string) => {
|
|
if (imageToMove) {
|
|
addImageToBoard({
|
|
board_id: boardId,
|
|
image_name: imageToMove.image_name,
|
|
});
|
|
closeAndClearImageToDelete();
|
|
}
|
|
},
|
|
[addImageToBoard, closeAndClearImageToDelete, imageToMove]
|
|
);
|
|
|
|
return (
|
|
<AddImageToBoardContext.Provider
|
|
value={{
|
|
isOpen,
|
|
image: imageToMove,
|
|
onClose: closeAndClearImageToDelete,
|
|
onClickAddToBoard,
|
|
handleAddToBoard,
|
|
}}
|
|
>
|
|
{props.children}
|
|
</AddImageToBoardContext.Provider>
|
|
);
|
|
};
|