Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): DeleteBoardModal must be a singleton

Browse Source
This commit is contained in:
psychedelicious 2024-07-24 13:00:21 +10:00
parent ff1972fbb3
commit c385e76356
2 changed files with 59 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
View File

@ -1,9 +1,8 @@
import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library'; import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants'; import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors'; import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
import { useMemo, useState } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiCaretDownBold } from 'react-icons/pi'; import { PiCaretDownBold } from 'react-icons/pi';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards'; import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
@ -15,15 +14,15 @@ import NoBoardBoard from './NoBoardBoard';
type Props = { type Props = {
isPrivate: boolean; isPrivate: boolean;
setBoardToDelete: (board?: BoardDTO) => void;
}; };
export const BoardsList = ({ isPrivate }: Props) => { export const BoardsList = ({ isPrivate, setBoardToDelete }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId); const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText); const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
const queryArgs = useAppSelector(selectListBoardsQueryArgs); const queryArgs = useAppSelector(selectListBoardsQueryArgs);
const { data: boards } = useListAllBoardsQuery(queryArgs); const { data: boards } = useListAllBoardsQuery(queryArgs);
const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards); const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true }); const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
@ -63,7 +62,7 @@ export const BoardsList = ({ isPrivate }: Props) => {
}); });
return elements; return elements;
}, [filteredBoards, isPrivate, allowPrivateBoards, boardSearchText, selectedBoardId]); }, [allowPrivateBoards, isPrivate, boardSearchText.length, filteredBoards, selectedBoardId, setBoardToDelete]);
const boardListTitle = useMemo(() => { const boardListTitle = useMemo(() => {
if (allowPrivateBoards) { if (allowPrivateBoards) {
@ -74,7 +73,6 @@ export const BoardsList = ({ isPrivate }: Props) => {
}, [isPrivate, allowPrivateBoards, t]); }, [isPrivate, allowPrivateBoards, t]);
return ( return (
<>
<Flex direction="column"> <Flex direction="column">
<Flex <Flex
position="sticky" position="sticky"
@ -120,7 +118,5 @@ export const BoardsList = ({ isPrivate }: Props) => {
</Flex> </Flex>
</Collapse> </Collapse>
</Flex> </Flex>
<DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
</>
); );
}; };

12
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsListWrapper.tsx
View File

@ -1,9 +1,11 @@
import { Box } from '@invoke-ai/ui-library'; import { Box } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants'; import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import { memo } from 'react'; import { memo, useState } from 'react';
import type { BoardDTO } from 'services/api/types';
import { BoardsList } from './BoardsList'; import { BoardsList } from './BoardsList';
@ -14,16 +16,20 @@ const overlayScrollbarsStyles: CSSProperties = {
const BoardsListWrapper = () => { const BoardsListWrapper = () => {
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards); const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
return ( return (
<>
<Box position="relative" w="full" h="full"> <Box position="relative" w="full" h="full">
<Box position="absolute" top={0} right={0} bottom={0} left={0}> <Box position="absolute" top={0} right={0} bottom={0} left={0}>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}> <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
{allowPrivateBoards && <BoardsList isPrivate={true} />} {allowPrivateBoards && <BoardsList isPrivate={true} setBoardToDelete={setBoardToDelete} />}
<BoardsList isPrivate={false} /> <BoardsList isPrivate={false} setBoardToDelete={setBoardToDelete} />
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</Box> </Box>
</Box> </Box>
<DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
</>
); );
}; };
export default memo(BoardsListWrapper); export default memo(BoardsListWrapper);