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

cleanup library (#107)

Browse Source 
* refactor library

* handle invalid tab numbers
This commit is contained in:
Aria Moradi
2021-11-19 16:36:02 +03:30
committed by GitHub
parent 057d284a01
commit 03d09b2e92
4 changed files with 19 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -158,7 +158,7 @@ export default function App() {
<Route path="/manga/:id"> <Route path="/manga/:id">
<Manga /> <Manga />
</Route> </Route>
<Route path="/library/:tabParamNumber?"> <Route path="/library">
<Library /> <Library />
</Route> </Route>
<Route path="/updates"> <Route path="/updates">

1
src/components/navbar/DefaultNavBar.tsx
View File

@@ -105,7 +105,6 @@ export default function DefaultNavBar() {
<Toolbar> <Toolbar>
{ {
!navbarItems.some(({ path }) => path === history.location.pathname) !navbarItems.some(({ path }) => path === history.location.pathname)
&& !history.location.pathname.startsWith('/library')
&& ( && (
<IconButton <IconButton
edge="start" edge="start"

28
src/screens/Library.tsx
View File

@@ -16,7 +16,7 @@ import TabPanel from 'components/util/TabPanel';
import LibraryOptions from 'components/library/LibraryOptions'; import LibraryOptions from 'components/library/LibraryOptions';
import LibraryMangaGrid from 'components/library/LibraryMangaGrid'; import LibraryMangaGrid from 'components/library/LibraryMangaGrid';
import LibrarySearch from 'components/library/LibrarySearch'; import LibrarySearch from 'components/library/LibrarySearch';
import { useHistory, useParams } from 'react-router-dom'; import { useQueryParam, NumberParam } from 'use-query-params';
interface IMangaCategory { interface IMangaCategory {
category: ICategory category: ICategory
@@ -35,21 +35,18 @@ export default function Library() {
); );
}, []); }, []);
const { tabParamNumber } = useParams<{ tabParamNumber: string }>();
const [tabs, setTabs] = useState<IMangaCategory[]>(); const [tabs, setTabs] = useState<IMangaCategory[]>();
const [tabNum, setTabNum] = useState<number>(0); const [tabNum, setTabNum] = useState<number>(0);
const history = useHistory(); const [tabSearchParam, setTabSearchParam] = useQueryParam('tab', NumberParam);
// a hack so MangaGrid doesn't stop working. I won't change it in case // a hack so MangaGrid doesn't stop working. I won't change it in case
// if I do manga pagination for library.. // if I do manga pagination for library..
const [lastPageNum, setLastPageNum] = useState<number>(1); const [lastPageNum, setLastPageNum] = useState<number>(1);
const handleTabChange = (newTab: number) => { const handleTabChange = (newTab: number) => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
history.location.search === ''
? history.replace(`/library/${newTab}`)
: history.replace(`/library/${newTab}/${history.location.search}`);
setTabNum(newTab); setTabNum(newTab);
setTabSearchParam(newTab);
}; };
useEffect(() => { useEffect(() => {
@@ -63,15 +60,14 @@ export default function Library() {
})); }));
setTabs(categoryTabs); setTabs(categoryTabs);
if (categoryTabs.length > 0) { if (categoryTabs.length > 0) {
setTabNum(() => { if (
if (tabParamNumber !== undefined tabSearchParam !== undefined
&& !Number.isNaN(tabParamNumber) && tabSearchParam !== null
&& !!categories.find((cat) => cat.order === Number(tabParamNumber))) { && !Number.isNaN(tabSearchParam)
return Number(tabParamNumber); && categories.some((category) => category.order === Number(tabSearchParam))
} ) {
history.replace('/library'); handleTabChange(Number(tabSearchParam!));
return categoryTabs[0].category.order; } else { handleTabChange(categoryTabs[0].category.order); }
});
} }
}); });
}, []); }, []);

23
src/util/useLibraryOptions.ts
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 { BooleanParam, useQueryParams, StringParam } from 'use-query-params'; import { BooleanParam, useQueryParam, StringParam } from 'use-query-params';
export type NullAndUndefined<T> = T | null | undefined; export type NullAndUndefined<T> = T | null | undefined;
@@ -21,24 +21,13 @@ interface IUseLibraryOptions {
} }
export default function useLibraryOptions(): IUseLibraryOptions { export default function useLibraryOptions(): IUseLibraryOptions {
const [searchQuery, setSearchQuery] = useQueryParams({ const [downloaded, setDownloaded] = useQueryParam('downloaded', BooleanParam);
downloaded: BooleanParam, const [unread, setUnread] = useQueryParam('unread', BooleanParam);
unread: BooleanParam, const [query, setQuery] = useQueryParam('query', StringParam);
query: StringParam,
});
const { downloaded, unread, query } = searchQuery;
const setDownloaded = (newDownloaded: NullAndUndefined<boolean>) => {
setSearchQuery(Object.assign(searchQuery, { downloaded: newDownloaded }), 'replace');
};
const setUnread = (newUnread: NullAndUndefined<boolean>) => {
setSearchQuery(Object.assign(searchQuery, { unread: newUnread }), 'replace');
};
const setQuery = (newQuery: NullAndUndefined<string>) => {
setSearchQuery(Object.assign(searchQuery, { query: newQuery }), 'replace');
};
// eslint-disable-next-line eqeqeq // eslint-disable-next-line eqeqeq
const active = !(unread == undefined) || !(downloaded == undefined); const active = !(unread == undefined) || !(downloaded == undefined);
return { return {
downloaded, setDownloaded, unread, setUnread, active, query, setQuery, downloaded, setDownloaded, unread, setUnread, query, setQuery, active,
}; };
} }