ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent showing "empty library" message on first load (#302)

Browse Source 
Due to using "useEffect" the grid always rendered once with stale data, causing the error message to be shown.
With "useMemo" the latest data is always getting rendered immediately.
This commit is contained in:
schroda
2023-05-18 13:24:34 +02:00
committed by GitHub
parent 58eb2fead3
commit f86c7ea08a
1 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/library/LibraryMangaGrid.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. * file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/ */
import React, { useEffect, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import MangaGrid from 'components/MangaGrid'; import MangaGrid from 'components/MangaGrid';
import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext'; import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
import { StringParam, useQueryParam } from 'use-query-params'; import { StringParam, useQueryParam } from 'use-query-params';
@@ -120,9 +120,6 @@ const LibraryMangaGrid: React.FC<LibraryMangaGridProps & { lastLibraryUpdate: nu
const [query] = useQueryParam('query', StringParam); const [query] = useQueryParam('query', StringParam);
const { options } = useLibraryOptionsContext(); const { options } = useLibraryOptionsContext();
const { unread, downloaded } = options; const { unread, downloaded } = options;
const [filteredPaginatedMangas, setFilteredPaginatedMangas] = useState<IMangaCard[]>([]);
const [sortedManga, setSortedManga] = useState<IMangaCard[]>([]);
const [filteredManga, setFilteredManga] = useState<IMangaCard[]>([]);
const totalPages = (mangas ?? []).length / 10; const totalPages = (mangas ?? []).length / 10;
const theme = useTheme(); const theme = useTheme();
const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true }); const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
@@ -130,22 +127,23 @@ const LibraryMangaGrid: React.FC<LibraryMangaGridProps & { lastLibraryUpdate: nu
const [lastPageNum, setLastPageNum] = useState<number>(defaultPageNumber); const [lastPageNum, setLastPageNum] = useState<number>(defaultPageNumber);
const { settings } = useSearchSettings(); const { settings } = useSearchSettings();
useEffect(() => { const filteredMangas = useMemo(
setFilteredManga(filterManga(mangas, query, unread, downloaded, settings.ignoreFilters)); () => filterManga(mangas, query, unread, downloaded, settings.ignoreFilters),
setLastPageNum(defaultPageNumber); [mangas, query, unread, downloaded, settings.ignoreFilters],
window.scrollTo(0, 0); );
}, [mangas, query, unread, downloaded, settings.ignoreFilters]); const sortedMangas = useMemo(
() => sortManga(filteredMangas, options.sorts, options.sortDesc),
useEffect(() => { [filteredMangas, lastLibraryUpdate, options.sorts, options.sortDesc],
setSortedManga(sortManga(filteredManga, options.sorts, options.sortDesc)); );
}, [filteredManga, lastLibraryUpdate, options.sorts, options.sortDesc]); const filteredPaginatedMangas = useMemo(() => sortedMangas.slice(0, lastPageNum * 10), [sortedMangas, lastPageNum]);
useEffect(() => {
setFilteredPaginatedMangas((sortedManga ?? []).slice(0, lastPageNum * 10));
}, [lastPageNum, sortedManga]);
const showFilteredOutMessage = const showFilteredOutMessage =
(unread != null || downloaded != null || query) && filteredManga.length === 0 && mangas.length > 0; (unread != null || downloaded != null || query) && filteredMangas.length === 0 && mangas.length > 0;
useEffect(() => {
setLastPageNum(defaultPageNumber);
window.scrollTo(0, 0);
}, [filteredMangas]);
return ( return (
<MangaGrid <MangaGrid