exposed error

webUI/react/src/components/ChapterCard.tsx

@@ -16,6 +16,7 @@ import Typography from '@material-ui/core/Typography';
 import { Link, useHistory } from 'react-router-dom';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import client from '../util/client';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -65,13 +66,24 @@ export default function ChapterCard(props: IProps) {
         setAnchorEl(null);
     };
 
+    const sendChange = (key: string, value: any) => {
+        console.log(`${key} -> ${value}`);
+        handleClose();
+
+        const formData = new FormData();
+        formData.append(key, value);
+        client.patch(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`, formData);
+        // .finally(() => triggerUpdate()
+        // );
+    };
+
     return (
         <>
             <li>
                 <Card>
                     <CardContent className={classes.root}>
                         <Link
-                            to={`/manga/${chapter.mangaId}/chapter/${chapter.chapterIndex}`}
+                            to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
                             style={{
                                 textDecoration: 'none',
                                 color: theme.palette.text.primary,
@@ -103,9 +115,19 @@ export default function ChapterCard(props: IProps) {
                             onClose={handleClose}
                         >
                             {/* <MenuItem onClick={handleClose}>Download</MenuItem> */}
-                            <MenuItem onClick={handleClose}>Bookmark</MenuItem>
-                            <MenuItem onClick={handleClose}>Mark as Read</MenuItem>
-                            <MenuItem onClick={handleClose}>Mark previous as Read</MenuItem>
+                            <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
+                                {chapter.bookmarked && 'Remove bookmark'}
+                                {!chapter.bookmarked && 'Bookmark'}
+                            </MenuItem>
+                            <MenuItem onClick={() => sendChange('read', !chapter.read)}>
+                                Mark as
+                                {' '}
+                                {chapter.read && 'unread'}
+                                {!chapter.read && 'read'}
+                            </MenuItem>
+                            <MenuItem onClick={() => sendChange('markPrevRead', true)}>
+                                Mark previous as Read
+                            </MenuItem>
                         </Menu>
                     </CardContent>
                 </Card>

webUI/react/src/components/ReaderNavBar.tsx

@@ -305,11 +305,11 @@ export default function ReaderNavBar(props: IProps) {
                                 {chapter.pageCount}
                             </span>
                             <div className={classes.navigationChapters}>
-                                {chapter.chapterIndex > 1
+                                {chapter.index > 1
                             && (
                                 <Link
                                     style={{ gridArea: 'prev' }}
-                                    to={`/manga/${manga.id}/chapter/${chapter.chapterIndex - 1}`}
+                                    to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
                                 >
                                     <Button
                                         variant="outlined"
@@ -317,15 +317,15 @@ export default function ReaderNavBar(props: IProps) {
                                     >
                                         Chapter
                                         {' '}
-                                        {chapter.chapterIndex - 1}
+                                        {chapter.index - 1}
                                     </Button>
                                 </Link>
                             )}
-                                {chapter.chapterIndex < chapter.chapterCount
+                                {chapter.index < chapter.chapterCount
                             && (
                                 <Link
                                     style={{ gridArea: 'next' }}
-                                    to={`/manga/${manga.id}/chapter/${chapter.chapterIndex + 1}`}
+                                    to={`/manga/${manga.id}/chapter/${chapter.index + 1}`}
                                 >
                                     <Button
                                         variant="outlined"
@@ -333,7 +333,7 @@ export default function ReaderNavBar(props: IProps) {
                                     >
                                         Chapter
                                         {' '}
-                                        {chapter.chapterIndex + 1}
+                                        {chapter.index + 1}
                                     </Button>
                                 </Link>
                             )}

webUI/react/src/screens/Reader.tsx

@@ -41,7 +41,7 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
 });
 
 const range = (n:number) => Array.from({ length: n }, (value, key) => key);
-const initialChapter = () => ({ pageCount: -1, chapterIndex: -1, chapterCount: 0 });
+const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 });
 
 export default function Reader() {
     const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);

webUI/react/src/typings.d.ts

@@ -63,14 +63,14 @@ interface IChapter {
     read: boolean
     bookmarked: boolean
     lastPageRead: number
-    chapterIndex: number
+    index: number
     chapterCount: number
     pageCount: number
 }
 
 interface IPartialChpter {
     pageCount: number
-    chapterIndex: number
+    index: number
     chapterCount: number
 }