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 ImageGridItemContainer from './ImageGridItemContainer';
import ImageGridListContainer from './ImageGridListContainer'; import ImageGridListContainer from './ImageGridListContainer';
import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors'; import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
const overlayScrollbarsConfig: UseOverlayScrollbarsParams = { const overlayScrollbarsConfig: UseOverlayScrollbarsParams = {
defer: true, defer: true,
@ -40,7 +41,10 @@ const GalleryImageGrid = () => {
const [initialize, osInstance] = useOverlayScrollbars( const [initialize, osInstance] = useOverlayScrollbars(
overlayScrollbarsConfig overlayScrollbarsConfig
); );
const selectedBoardId = useAppSelector(
(state) => state.gallery.selectedBoardId
);
const { currentViewTotal } = useBoardTotal(selectedBoardId);
const queryArgs = useAppSelector(selectListImagesBaseQueryArgs); const queryArgs = useAppSelector(selectListImagesBaseQueryArgs);
const { currentData, isFetching, isSuccess, isError } = const { currentData, isFetching, isSuccess, isError } =
@ -49,19 +53,23 @@ const GalleryImageGrid = () => {
const [listImages] = useLazyListImagesQuery(); const [listImages] = useLazyListImagesQuery();
const areMoreAvailable = useMemo(() => { const areMoreAvailable = useMemo(() => {
if (!currentData) { if (!currentData || !currentViewTotal) {
return false; return false;
} }
return currentData.ids.length < currentData.total; return currentData.ids.length < currentViewTotal;
}, [currentData]); }, [currentData, currentViewTotal]);
const handleLoadMoreImages = useCallback(() => { const handleLoadMoreImages = useCallback(() => {
if (!areMoreAvailable) {
return;
}
listImages({ listImages({
...queryArgs, ...queryArgs,
offset: currentData?.ids.length ?? 0, offset: currentData?.ids.length ?? 0,
limit: IMAGE_LIMIT, limit: IMAGE_LIMIT,
}); });
}, [listImages, queryArgs, currentData?.ids.length]); }, [areMoreAvailable, listImages, queryArgs, currentData?.ids.length]);
useEffect(() => { useEffect(() => {
// Initialize the gallery's custom scrollbar // 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, isOnFirstImage: currentImageIndex === 0,
isOnLastImage: isOnLastImage:
!isNaN(currentImageIndex) && currentImageIndex === imagesLength - 1, !isNaN(currentImageIndex) && currentImageIndex === imagesLength - 1,
areMoreImagesAvailable: data?.total ?? 0 > imagesLength, areMoreImagesAvailable: (data?.total ?? 0) > imagesLength,
isFetching: status === 'pending', isFetching: status === 'pending',
nextImage, nextImage,
prevImage, 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 { import {
BoardId,
INITIAL_IMAGE_LIMIT,
} from 'features/gallery/store/gallerySlice';
import {
ListImagesArgs,
useGetBoardAssetsTotalQuery, useGetBoardAssetsTotalQuery,
useGetBoardImagesTotalQuery, useGetBoardImagesTotalQuery,
} from '../endpoints/images'; } from '../endpoints/images';
const baseQueryArgs: ListImagesArgs = {
offset: 0,
limit: INITIAL_IMAGE_LIMIT,
is_intermediate: false,
};
export const useBoardTotal = (board_id: BoardId) => { export const useBoardTotal = (board_id: BoardId) => {
const galleryView = useAppSelector((state) => state.gallery.galleryView);
const { data: totalImages } = useGetBoardImagesTotalQuery(board_id); const { data: totalImages } = useGetBoardImagesTotalQuery(board_id);
const { data: totalAssets } = useGetBoardAssetsTotalQuery(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 currentViewTotal = useMemo(
// const categories = ASSETS_CATEGORIES; () => (galleryView === 'images' ? totalImages : totalAssets),
// return { board_id, categories, ...baseQueryArgs }; [galleryView, totalAssets, totalImages]
// }, [board_id]); );
// const { total: totalImages } = useListImagesQuery( return { totalImages, totalAssets, currentViewTotal };
// imagesQueryArg ?? skipToken,
// {
// selectFromResult: ({ currentData }) => ({ total: currentData?.total }),
// }
// );
// const { total: totalAssets } = useListImagesQuery(
// assetsQueryArg ?? skipToken,
// {
// selectFromResult: ({ currentData }) => ({ total: currentData?.total }),
// }
// );
return { totalImages, totalAssets };
}; };