chapter updates when pressing UI buttons

webUI/react/src/components/ChapterCard.tsx

@@ -50,13 +50,14 @@ const useStyles = makeStyles((theme) => ({
 
 interface IProps{
     chapter: IChapter
+    triggerChaptersUpdate: () => void
 }
 
 export default function ChapterCard(props: IProps) {
     const classes = useStyles();
     const history = useHistory();
     const theme = useTheme();
-    const { chapter } = props;
+    const { chapter, triggerChaptersUpdate } = props;
 
     const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toISOString().slice(0, 10);
 
@@ -71,12 +72,12 @@ export default function ChapterCard(props: IProps) {
     };
 
     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);
+        client.patch(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`, formData)
+            .then(() => triggerChaptersUpdate());
     };
 
     return (

webUI/react/src/components/MangaDetails.tsx

@@ -198,7 +198,7 @@ export default function MangaDetails(props: IProps) {
             <div className={classes.top}>
                 <div className={classes.leftRight}>
                     <div className={classes.leftSide}>
-                        <img src={serverAddress + manga.thumbnailUrl} alt="Manga Thumbnail" />
+                        <img src={`${serverAddress}${manga.thumbnailUrl}?x=${Math.random()}`} alt="Manga Thumbnail" />
                     </div>
                     <div className={classes.rightSide}>
                         <h1>

webUI/react/src/screens/Manga.tsx

@@ -43,9 +43,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
 }));
 
-const InnerItem = React.memo(({ chapters, index }: any) => (
-    <ChapterCard chapter={chapters[index]} />
-));
+// const InnerItem = React.memo(({ chapters, index }: any) => (
+//     <ChapterCard chapter={chapters[index]} />
+// ));
 
 export default function Manga() {
     const classes = useStyles();
@@ -58,23 +58,37 @@ export default function Manga() {
 
     const [manga, setManga] = useState<IManga>();
     const [chapters, setChapters] = useState<IChapter[]>([]);
+    const [chapterUpdateTriggerer, setChapterUpdateTriggerer] = useState(0);
+
+    function triggerChaptersUpdate() {
+        setChapterUpdateTriggerer(chapterUpdateTriggerer + 1);
+    }
 
     useEffect(() => {
-        client.get(`/api/v1/manga/${id}/`)
-            .then((response) => response.data)
-            .then((data: IManga) => {
-                setManga(data);
-                setTitle(data.title);
-            });
-    }, []);
+        if (manga === undefined || !manga.freshData) {
+            client.get(`/api/v1/manga/${id}/?onlineFetch=${manga !== undefined}`)
+                .then((response) => response.data)
+                .then((data: IManga) => {
+                    setManga(data);
+                    setTitle(data.title);
+                });
+        }
+    }, [manga]);
 
     useEffect(() => {
-        client.get(`/api/v1/manga/${id}/chapters`)
+        const shouldFetchOnline = chapters.length > 0 && chapterUpdateTriggerer === 0;
+        client.get(`/api/v1/manga/${id}/chapters?onlineFetch=${shouldFetchOnline}`)
             .then((response) => response.data)
             .then((data) => setChapters(data));
-    }, []);
+    }, [chapters.length, chapterUpdateTriggerer]);
 
-    const itemContent = (index:any) => <InnerItem chapters={chapters} index={index} />;
+    // const itemContent = (index:any) => <InnerItem chapters={chapters} index={index} />;
+    const itemContent = (index:any) => (
+        <ChapterCard
+            chapter={chapters[index]}
+            triggerChaptersUpdate={triggerChaptersUpdate}
+        />
+    );
 
     return (
         <div className={classes.root}>

webUI/react/src/typings.d.ts

@@ -50,6 +50,8 @@ interface IManga {
 
     inLibrary: boolean
     source: ISource
+
+    freshData: boolean
 }
 
 interface IChapter {