Feature/swr for library screens (#186)

* Wrap data fetching in library and manga screen with swr for better dev and user experience. Refactor some API calls and data handling. Add manual refresh to manga detail.

* Fix manga card layout

* Fix refresh button position on small screens

* Revert "Fix manga card layout"

This reverts commit d85da3d8385e1ef64feed1789e4cd4591c8bd563.

* Fix manga not setting title

* Move chapters loading to Manga component, join data fetching, add auto online fetch if fetched data is old

* Revert some changes

src/components/MangaDetails.tsx

@@ -16,7 +16,9 @@ import React, { useContext, useEffect, useState } from 'react';
 import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
+import Refresh from '@mui/icons-material/Refresh';
 import CategorySelect from './navbar/action/CategorySelect';
+import LoadingIconButton from './atoms/LoadingIconButton';
 
 const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
     root: {
@@ -118,6 +120,8 @@ const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
 
 interface IProps{
     manga: IManga
+    onRefresh: () => Promise<any>
+    refreshing: boolean
 }
 
 function getSourceName(source: ISource) {
@@ -131,11 +135,9 @@ function getValueOrUnknown(val: string) {
     return val || 'UNKNOWN';
 }
 
-export default function MangaDetails(props: IProps) {
+export default function MangaDetails({ manga, onRefresh, refreshing }: IProps) {
     const { setAction } = useContext(NavbarContext);
 
-    const { manga } = props;
-
     const [inLibrary, setInLibrary] = useState<string>(
         manga.inLibrary ? 'In Library' : 'Add To Library',
     );
@@ -143,28 +145,32 @@ export default function MangaDetails(props: IProps) {
     const [categoryDialogOpen, setCategoryDialogOpen] = useState<boolean>(false);
 
     useEffect(() => {
-        if (inLibrary === 'In Library') {
-            setAction(
-                <>
-                    <IconButton
-                        onClick={() => setCategoryDialogOpen(true)}
-                        aria-label="display more actions"
-                        edge="end"
-                        color="inherit"
-                        size="large"
-                    >
-                        <FilterListIcon />
-                    </IconButton>
-                    <CategorySelect
-                        open={categoryDialogOpen}
-                        setOpen={setCategoryDialogOpen}
-                        mangaId={manga.id}
-                    />
-                </>,
-
-            );
-        } else { setAction(<></>); }
-    }, [inLibrary, categoryDialogOpen]);
+        setAction(
+            <>
+                <LoadingIconButton loading={refreshing} onClick={onRefresh}>
+                    <Refresh />
+                </LoadingIconButton>
+                {inLibrary === 'In Library' && (
+                    <>
+                        <IconButton
+                            onClick={() => setCategoryDialogOpen(true)}
+                            aria-label="display more actions"
+                            edge="end"
+                            color="inherit"
+                            size="large"
+                        >
+                            <FilterListIcon />
+                        </IconButton>
+                        <CategorySelect
+                            open={categoryDialogOpen}
+                            setOpen={setCategoryDialogOpen}
+                            mangaId={manga.id}
+                        />
+                    </>
+                )}
+            </>,
+        );
+    }, [inLibrary, categoryDialogOpen, refreshing, onRefresh]);
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);