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): fix next prev buttons

Browse Source
This commit is contained in:
psychedelicious 2023-07-21 15:37:20 +10:00
parent ddeba190bc
commit dd0b4dc744
3 changed files with 24 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
View File

@ -19,6 +19,7 @@ import GalleryImage from './GalleryImage';
import ImageGridItemContainer from './ImageGridItemContainer';
import ImageGridListContainer from './ImageGridListContainer';
import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
const overlayScrollbarsConfig: UseOverlayScrollbarsParams = {
defer: true,
@ -40,7 +41,10 @@ const GalleryImageGrid = () => {
const [initialize, osInstance] = useOverlayScrollbars(
overlayScrollbarsConfig
);
const selectedBoardId = useAppSelector(
(state) => state.gallery.selectedBoardId
);
const { currentViewTotal } = useBoardTotal(selectedBoardId);
const queryArgs = useAppSelector(selectListImagesBaseQueryArgs);
const { currentData, isFetching, isSuccess, isError } =
@ -49,19 +53,23 @@ const GalleryImageGrid = () => {
const [listImages] = useLazyListImagesQuery();
const areMoreAvailable = useMemo(() => {
if (!currentData) {
if (!currentData || !currentViewTotal) {
return false;
}
return currentData.ids.length < currentData.total;
}, [currentData]);
return currentData.ids.length < currentViewTotal;
}, [currentData, currentViewTotal]);
const handleLoadMoreImages = useCallback(() => {
if (!areMoreAvailable) {
return;
}
listImages({
...queryArgs,
offset: currentData?.ids.length ?? 0,
limit: IMAGE_LIMIT,
});
}, [listImages, queryArgs, currentData?.ids.length]);
}, [areMoreAvailable, listImages, queryArgs, currentData?.ids.length]);
useEffect(() => {
// Initialize the gallery's custom scrollbar

2
invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts
View File

@ -64,7 +64,7 @@ export const nextPrevImageButtonsSelector = createSelector(
isOnFirstImage: currentImageIndex === 0,
isOnLastImage:
!isNaN(currentImageIndex) && currentImageIndex === imagesLength - 1,
areMoreImagesAvailable: data?.total ?? 0 > imagesLength,
areMoreImagesAvailable: (data?.total ?? 0) > imagesLength,
isFetching: status === 'pending',
nextImage,
prevImage,

44
invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts
View File

@ -1,45 +1,21 @@
import { useAppSelector } from 'app/store/storeHooks';
import { BoardId } from 'features/gallery/store/gallerySlice';
import { useMemo } from 'react';
import {
BoardId,
INITIAL_IMAGE_LIMIT,
} from 'features/gallery/store/gallerySlice';
import {
ListImagesArgs,
useGetBoardAssetsTotalQuery,
useGetBoardImagesTotalQuery,
} from '../endpoints/images';
const baseQueryArgs: ListImagesArgs = {
offset: 0,
limit: INITIAL_IMAGE_LIMIT,
is_intermediate: false,
};
export const useBoardTotal = (board_id: BoardId) => {
const galleryView = useAppSelector((state) => state.gallery.galleryView);
const { data: totalImages } = useGetBoardImagesTotalQuery(board_id);
const { data: totalAssets } = useGetBoardAssetsTotalQuery(board_id);
// const imagesQueryArg = useMemo(() => {
// const categories = IMAGE_CATEGORIES;
// return { board_id, categories, ...baseQueryArgs };
// }, [board_id]);
// const assetsQueryArg = useMemo(() => {
// const categories = ASSETS_CATEGORIES;
// return { board_id, categories, ...baseQueryArgs };
// }, [board_id]);
const currentViewTotal = useMemo(
() => (galleryView === 'images' ? totalImages : totalAssets),
[galleryView, totalAssets, totalImages]
);
// const { total: totalImages } = useListImagesQuery(
// imagesQueryArg ?? skipToken,
// {
// selectFromResult: ({ currentData }) => ({ total: currentData?.total }),
// }
// );
// const { total: totalAssets } = useListImagesQuery(
// assetsQueryArg ?? skipToken,
// {
// selectFromResult: ({ currentData }) => ({ total: currentData?.total }),
// }
// );
return { totalImages, totalAssets };
return { totalImages, totalAssets, currentViewTotal };
};