better handling of grid refresh
This commit is contained in:
parent
886786d428
commit
94edda1856
3 changed files with 24 additions and 7 deletions
|
@ -71,6 +71,7 @@ export const VirtualInfiniteGrid = forwardRef(
|
||||||
) => {
|
) => {
|
||||||
const listRef = useRef<any>(null);
|
const listRef = useRef<any>(null);
|
||||||
const loader = useRef<InfiniteLoader>(null);
|
const loader = useRef<InfiniteLoader>(null);
|
||||||
|
const minItemCount = useRef(0);
|
||||||
|
|
||||||
// itemData can be a sparse array. Treat the intermediate elements as being undefined
|
// itemData can be a sparse array. Treat the intermediate elements as being undefined
|
||||||
const [itemData, setItemData] = useState<Array<LibraryItemOrGenre | undefined>>(
|
const [itemData, setItemData] = useState<Array<LibraryItemOrGenre | undefined>>(
|
||||||
|
@ -100,8 +101,17 @@ export const VirtualInfiniteGrid = forwardRef(
|
||||||
|
|
||||||
const loadMoreItems = useCallback(
|
const loadMoreItems = useCallback(
|
||||||
async (startIndex: number, stopIndex: number) => {
|
async (startIndex: number, stopIndex: number) => {
|
||||||
|
if (
|
||||||
// Fixes a caching bug(?) when switching between filters and the itemCount increases
|
// Fixes a caching bug(?) when switching between filters and the itemCount increases
|
||||||
if (startIndex === 1) return;
|
startIndex === 1 ||
|
||||||
|
// Fixes a caching bug when refreshing items. Prevents a second
|
||||||
|
// refetch from happening if:
|
||||||
|
// 1: we are already in a refresh (-1)
|
||||||
|
// 2: we just had a refresh, and we are index 0
|
||||||
|
minItemCount.current === -1 ||
|
||||||
|
(minItemCount.current > 0 && startIndex === 0)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
|
||||||
// Need to multiply by columnCount due to the grid layout
|
// Need to multiply by columnCount due to the grid layout
|
||||||
const start = startIndex * columnCount;
|
const start = startIndex * columnCount;
|
||||||
|
@ -134,6 +144,7 @@ export const VirtualInfiniteGrid = forwardRef(
|
||||||
resetLoadMoreItemsCache: () => {
|
resetLoadMoreItemsCache: () => {
|
||||||
if (loader.current) {
|
if (loader.current) {
|
||||||
loader.current.resetloadMoreItemsCache(false);
|
loader.current.resetloadMoreItemsCache(false);
|
||||||
|
minItemCount.current = -1;
|
||||||
setItemData([]);
|
setItemData([]);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -142,6 +153,7 @@ export const VirtualInfiniteGrid = forwardRef(
|
||||||
},
|
},
|
||||||
setItemData: (data: LibraryItemOrGenre[]) => {
|
setItemData: (data: LibraryItemOrGenre[]) => {
|
||||||
setItemData(data);
|
setItemData(data);
|
||||||
|
minItemCount.current = data.length;
|
||||||
},
|
},
|
||||||
updateItemData: (rule) => {
|
updateItemData: (rule) => {
|
||||||
setItemData((data) => data.map((item) => item && rule(item)));
|
setItemData((data) => data.map((item) => item && rule(item)));
|
||||||
|
|
|
@ -176,12 +176,18 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
|
||||||
const onFilterChange = useCallback(
|
const onFilterChange = useCallback(
|
||||||
(filter: AlbumListFilter) => {
|
(filter: AlbumListFilter) => {
|
||||||
if (isGrid) {
|
if (isGrid) {
|
||||||
handleRefreshGrid(gridRef, filter);
|
handleRefreshGrid(gridRef, {
|
||||||
|
...filter,
|
||||||
|
...customFilters,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
handleRefreshTable(tableRef, {
|
||||||
|
...filter,
|
||||||
|
...customFilters,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRefreshTable(tableRef, filter);
|
|
||||||
},
|
},
|
||||||
[gridRef, handleRefreshGrid, handleRefreshTable, isGrid, tableRef],
|
[customFilters, gridRef, handleRefreshGrid, handleRefreshTable, isGrid, tableRef],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleOpenFiltersModal = () => {
|
const handleOpenFiltersModal = () => {
|
||||||
|
|
|
@ -123,7 +123,6 @@ export const useListFilterRefresh = ({
|
||||||
|
|
||||||
gridRef.current?.scrollTo(0);
|
gridRef.current?.scrollTo(0);
|
||||||
gridRef.current?.resetLoadMoreItemsCache();
|
gridRef.current?.resetLoadMoreItemsCache();
|
||||||
gridRef.current?.setItemData([]);
|
|
||||||
|
|
||||||
const query = { ...filter, limit: 200, startIndex: 0 };
|
const query = { ...filter, limit: 200, startIndex: 0 };
|
||||||
|
|
||||||
|
|
Reference in a new issue