cleanup library (#107)

* refactor library

* handle invalid tab numbers

src/App.tsx

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

src/components/navbar/DefaultNavBar.tsx

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

src/screens/Library.tsx

@@ -16,7 +16,7 @@ import TabPanel from 'components/util/TabPanel';
 import LibraryOptions from 'components/library/LibraryOptions';
 import LibraryMangaGrid from 'components/library/LibraryMangaGrid';
 import LibrarySearch from 'components/library/LibrarySearch';
-import { useHistory, useParams } from 'react-router-dom';
+import { useQueryParam, NumberParam } from 'use-query-params';
 
 interface IMangaCategory {
     category: ICategory
@@ -35,21 +35,18 @@ export default function Library() {
         );
     }, []);
 
-    const { tabParamNumber } = useParams<{ tabParamNumber: string }>();
     const [tabs, setTabs] = useState<IMangaCategory[]>();
+
     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
     // if I do manga pagination for library..
     const [lastPageNum, setLastPageNum] = useState<number>(1);
 
     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);
+        setTabSearchParam(newTab);
     };
 
     useEffect(() => {
@@ -63,15 +60,14 @@ export default function Library() {
                 }));
                 setTabs(categoryTabs);
                 if (categoryTabs.length > 0) {
-                    setTabNum(() => {
-                        if (tabParamNumber !== undefined
-                            && !Number.isNaN(tabParamNumber)
-                            && !!categories.find((cat) => cat.order === Number(tabParamNumber))) {
-                            return Number(tabParamNumber);
-                        }
-                        history.replace('/library');
-                        return categoryTabs[0].category.order;
-                    });
+                    if (
+                        tabSearchParam !== undefined
+                         && tabSearchParam !== null
+                         && !Number.isNaN(tabSearchParam)
+                         && categories.some((category) => category.order === Number(tabSearchParam))
+                    ) {
+                        handleTabChange(Number(tabSearchParam!));
+                    } else { handleTabChange(categoryTabs[0].category.order); }
                 }
             });
     }, []);

src/util/useLibraryOptions.ts

@@ -6,7 +6,7 @@
  * 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;
 
@@ -21,24 +21,13 @@ interface IUseLibraryOptions {
 }
 
 export default function useLibraryOptions(): IUseLibraryOptions {
-    const [searchQuery, setSearchQuery] = useQueryParams({
-        downloaded: BooleanParam,
-        unread: BooleanParam,
-        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');
-    };
+    const [downloaded, setDownloaded] = useQueryParam('downloaded', BooleanParam);
+    const [unread, setUnread] = useQueryParam('unread', BooleanParam);
+    const [query, setQuery] = useQueryParam('query', StringParam);
+
     // eslint-disable-next-line eqeqeq
     const active = !(unread == undefined) || !(downloaded == undefined);
     return {
-        downloaded, setDownloaded, unread, setUnread, active, query, setQuery,
+        downloaded, setDownloaded, unread, setUnread, query, setQuery, active,
     };
 }