category done!

webUI/react/src/components/MangaDetails.tsx

@@ -2,18 +2,31 @@
  * 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 { Button } from '@material-ui/core';
+import { Button, createStyles, makeStyles } from '@material-ui/core';
 import React, { useState } from 'react';
+import CategorySelect from './CategorySelect';
+
+const useStyles = makeStyles(() => createStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row-reverse',
+        '& button': {
+            marginLeft: 10,
+        },
+    },
+}));
 
 interface IProps{
     manga: IManga
 }
 
 export default function MangaDetails(props: IProps) {
+    const classes = useStyles();
     const { manga } = props;
     const [inLibrary, setInLibrary] = useState<string>(
         manga.inLibrary ? 'In Library' : 'Not In Library',
     );
+    const [categoryDialogOpen, setCategoryDialogOpen] = useState<boolean>(true);
 
     function addToLibrary() {
         setInLibrary('adding');
@@ -38,13 +51,21 @@ export default function MangaDetails(props: IProps) {
     }
 
     return (
-        <>
+        <div>
             <h1>
                 {manga && manga.title}
             </h1>
-            <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+            <div className={classes.root}>
                 <Button variant="outlined" onClick={() => handleButtonClick()}>{inLibrary}</Button>
+                {inLibrary === 'In Library'
+                && <Button variant="outlined" onClick={() => setCategoryDialogOpen(true)}>Edit Categories</Button>}
+
             </div>
-        </>
+            <CategorySelect
+                open={categoryDialogOpen}
+                setOpen={setCategoryDialogOpen}
+                mangaId={manga.id}
+            />
+        </div>
     );
 }