Save tabs number in Url to persist tab when go to other paths (#78)

* added an optional  url parameter to the library path to get to a particular tab

* Added Error checking when taking the parameter from the Url

* Now Tabs persist with library options

* FIxed a bug which made the backbutton appear in the Library route when tabs number was presents in the url

Author: ff2400t

src/App.tsx

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

src/components/navbar/DefaultNavBar.tsx

@@ -105,6 +105,7 @@ 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,6 +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';
 
 interface IMangaCategory {
     category: ICategory
@@ -34,14 +35,20 @@ export default function Library() {
         );
     }, []);
 
+    const { tabParamNumber } = useParams<{ tabParamNumber: string }>();
     const [tabs, setTabs] = useState<IMangaCategory[]>();
     const [tabNum, setTabNum] = useState<number>(0);
+    const history = useHistory();
 
     // 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);
     };
 
@@ -54,10 +61,17 @@ export default function Library() {
                     mangas: [] as IManga[],
                     isFetched: false,
                 }));
-
                 setTabs(categoryTabs);
                 if (categoryTabs.length > 0) {
-                    setTabNum(categoryTabs[0].category.order);
+                    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;
+                    });
                 }
             });
     }, []);