add library

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>