show a Delete button for downloaded chapters

src/components/manga/ChapterCard.tsx

@@ -59,13 +59,13 @@ const useStyles = makeStyles((theme) => ({
 interface IProps{
     chapter: IChapter
     triggerChaptersUpdate: () => void
-    downloadingString: string
+    downloadStatusString: string
 }
 
 export default function ChapterCard(props: IProps) {
     const classes = useStyles();
     const theme = useTheme();
-    const { chapter, triggerChaptersUpdate, downloadingString } = props;
+    const { chapter, triggerChaptersUpdate, downloadStatusString } = props;
 
     const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toISOString().slice(0, 10);
 
@@ -93,6 +93,13 @@ export default function ChapterCard(props: IProps) {
         handleClose();
     };
 
+    const deleteChapter = () => {
+        client.delete(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`)
+            .then(() => triggerChaptersUpdate());
+
+        handleClose();
+    };
+
     const readChapterColor = theme.palette.mode === 'dark' ? '#acacac' : '#b0b0b0';
     return (
         <>
@@ -119,7 +126,7 @@ export default function ChapterCard(props: IProps) {
                                         {chapter.scanlator}
                                         {chapter.scanlator && ' '}
                                         {dateStr}
-                                        {downloadingString}
+                                        {downloadStatusString}
                                     </Typography>
                                 </div>
                             </div>
@@ -134,7 +141,9 @@ export default function ChapterCard(props: IProps) {
                             open={Boolean(anchorEl)}
                             onClose={handleClose}
                         >
-                            {downloadingString.length === 0
+                            {downloadStatusString.endsWith('Downloaded')
+                            && <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
+                            {downloadStatusString.length === 0
                         && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
                             <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
                                 {chapter.bookmarked && 'Remove bookmark'}

src/screens/manga/Manga.tsx

@@ -74,24 +74,18 @@ export default function Manga() {
         wsc.onmessage = (e) => {
             const data = JSON.parse(e.data) as IQueue;
             setQueueState(data);
-
-            let shouldUpdate = false;
-            data.queue.forEach((q) => {
-                if (q.mangaId === manga?.id && q.state === 'Finished') {
-                    shouldUpdate = true;
-                }
-            });
-            if (shouldUpdate) {
-                triggerChaptersUpdate();
-            }
         };
 
         setWsClient(wsc);
 
         return () => wsc.close();
+    }, []);
+
+    useEffect(() => {
+        triggerChaptersUpdate();
     }, [queue.length]);
 
-    const downloadingStringFor = (chapter: IChapter) => {
+    const downloadStatusStringFor = (chapter: IChapter) => {
         let rtn = '';
         if (chapter.downloaded) {
             rtn = ' • Downloaded';
@@ -150,7 +144,7 @@ export default function Manga() {
                     itemContent={(index:number) => (
                         <ChapterCard
                             chapter={chapters[index]}
-                            downloadingString={downloadingStringFor(chapters[index])}
+                            downloadStatusString={downloadStatusStringFor(chapters[index])}
                             triggerChaptersUpdate={triggerChaptersUpdate}
                         />
                     )}