add library

webUI/react/src/App.tsx

@@ -20,6 +20,7 @@ import Reader from './screens/Reader';
 import Search from './screens/SearchSingle';
 import NavBarTitle from './context/NavbarTitle';
 import DarkTheme from './context/DarkTheme';
+import Library from './screens/Library';
 
 export default function App() {
     const [title, setTitle] = useState<string>('Tachidesk');
@@ -53,7 +54,6 @@ export default function App() {
 
     return (
         <Router>
-
             <ThemeProvider theme={theme}>
                 <NavBarTitle.Provider value={navTitleContext}>
                     <CssBaseline />
@@ -83,6 +83,9 @@ export default function App() {
                             <Route path="/manga/:id">
                                 <Manga />
                             </Route>
+                            <Route path="/library">
+                                <Library />
+                            </Route>
                             <Route path="/">
                                 <Home />
                             </Route>

webUI/react/src/components/MangaDetails.tsx

@@ -2,20 +2,49 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import React from 'react';
+import { Button } from '@material-ui/core';
+import React, { useState } from 'react';
 
 interface IProps{
-    manga: IManga | undefined
+    manga: IManga
 }
 
 export default function MangaDetails(props: IProps) {
     const { manga } = props;
+    const [inLibrary, setInLibrary] = useState<string>(
+        manga.inLibrary ? 'In Library' : 'Not In Library',
+    );
+
+    function addToLibrary() {
+        setInLibrary('adding');
+        fetch(`http://127.0.0.1:4567/api/v1/manga/${manga.id}/library/`).then(() => {
+            setInLibrary('In Library');
+        });
+    }
+
+    function removeFromLibrary() {
+        setInLibrary('removing');
+        fetch(`http://127.0.0.1:4567/api/v1/manga/${manga.id}/library/`, { method: 'DELETE', mode: 'cors' }).then(() => {
+            setInLibrary('Not In Library');
+        });
+    }
+
+    function handleButtonClick() {
+        if (inLibrary === 'Not In Library') {
+            addToLibrary();
+        } else {
+            removeFromLibrary();
+        }
+    }
 
     return (
         <>
             <h1>
                 {manga && manga.title}
             </h1>
+            <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+                <Button variant="outlined" onClick={() => handleButtonClick()}>{inLibrary}</Button>
+            </div>
         </>
     );
 }

webUI/react/src/components/TemporaryDrawer.tsx

@@ -36,6 +36,14 @@ export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {
             onKeyDown={() => setDrawerOpen(false)}
         >
             <List>
+                <Link to="/library" style={{ color: 'inherit', textDecoration: 'none' }}>
+                    <ListItem button key="Library">
+                        <ListItemIcon>
+                            <InboxIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Library" />
+                    </ListItem>
+                </Link>
                 <Link to="/extensions" style={{ color: 'inherit', textDecoration: 'none' }}>
                     <ListItem button key="Extensions">
                         <ListItemIcon>

webUI/react/src/screens/Library.tsx

@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import React, { useContext, useEffect, useState } from 'react';
+import MangaGrid from '../components/MangaGrid';
+import NavBarTitle from '../context/NavbarTitle';
+
+export default function MangaList() {
+    const { setTitle } = useContext(NavBarTitle);
+    const [mangas, setMangas] = useState<IManga[]>([]);
+    const [lastPageNum, setLastPageNum] = useState<number>(1);
+
+    useEffect(() => {
+        setTitle('Library');
+    }, []);
+
+    useEffect(() => {
+        fetch('http://127.0.0.1:4567/api/v1/library')
+            .then((response) => response.json())
+            .then((data: IManga[]) => {
+                setMangas(data);
+            });
+    }, [lastPageNum]);
+
+    return (
+        <MangaGrid
+            mangas={mangas}
+            hasNextPage={false}
+            lastPageNum={lastPageNum}
+            setLastPageNum={setLastPageNum}
+        />
+    );
+}

webUI/react/src/screens/Manga.tsx

@@ -38,7 +38,7 @@ export default function Manga() {
 
     return (
         <>
-            <MangaDetails manga={manga} />
+            {manga && <MangaDetails manga={manga} />}
             {chapterCards}
         </>
     );

webUI/react/src/typings.d.ts

@@ -25,6 +25,7 @@ interface IManga {
     id: number
     title: string
     thumbnailUrl: string
+    inLibrary?: boolean
 }
 
 interface IChapter {