add support for useCache

src/components/manga/ExtensionCard.tsx

@@ -65,6 +65,7 @@ export default function ExtensionCard(props: IProps) {
     );
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
+    const [useCache] = useLocalStorage<boolean>('useCache', true);
 
     const classes = useStyles();
     const langPress = lang === 'all' ? 'All' : lang.toUpperCase();
@@ -124,7 +125,7 @@ export default function ExtensionCard(props: IProps) {
                         variant="rounded"
                         className={classes.icon}
                         alt={name}
-                        src={serverAddress + iconUrl}
+                        src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
                     />
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <Typography variant="h5" component="h2">

src/components/manga/MangaCard.tsx

@@ -74,6 +74,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
     } = props;
     const classes = useStyles();
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
+    const [useCache] = useLocalStorage<boolean>('useCache', true);
 
     return (
         <Grid item xs={6} sm={4} md={3} lg={2}>
@@ -83,7 +84,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                         <div className={classes.wrapper}>
                             <SpinnerImage
                                 alt={title}
-                                src={serverAddress + thumbnailUrl}
+                                src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
                                 spinnerClassName={classes.spinner}
                                 imgClassName={classes.image}
                             />

src/components/manga/MangaDetails.tsx

@@ -167,6 +167,7 @@ export default function MangaDetails(props: IProps) {
     }, [inLibrary, categoryDialogOpen]);
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
+    const [useCache] = useLocalStorage<boolean>('useCache', true);
 
     const classes = useStyles(inLibrary)();
 
@@ -197,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}?useCache=${useCache}`} alt="Manga Thumbnail" />
                     </div>
                     <div className={classes.rightSide}>
                         <h1>

src/components/manga/SourceCard.tsx

@@ -82,6 +82,7 @@ export default function SourceCard(props: IProps) {
     const history = useHistory();
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
+    const [useCache] = useLocalStorage<boolean>('useCache', true);
 
     const classes = useStyles();
 
@@ -104,7 +105,7 @@ export default function SourceCard(props: IProps) {
                         variant="rounded"
                         className={classes.icon}
                         alt={name}
-                        src={serverAddress + iconUrl}
+                        src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
                     />
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <Typography variant="h5" component="h2">

src/components/manga/reader/Page.tsx

@@ -8,6 +8,7 @@
 import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import SpinnerImage from 'components/SpinnerImage';
+import useLocalStorage from 'util/useLocalStorage';
 
 function imageStyle(settings: IReaderSettings): any {
     if (settings.readerType === 'DoubleLTR'
@@ -65,6 +66,8 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
         src, index, onImageLoad, setCurPage, settings,
     } = props;
 
+    const [useCache] = useLocalStorage<boolean>('useCache', true);
+
     const classes = useStyles(settings)();
     const imgRef = useRef<HTMLImageElement>(null);
 
@@ -104,7 +107,7 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
     return (
         <div ref={ref} style={{ margin: '0 auto' }}>
             <SpinnerImage
-                src={src}
+                src={`${src}?useCache=${useCache}`}
                 onImageLoad={onImageLoad}
                 alt={`Page #${index}`}
                 imgRef={imgRef}

src/screens/Settings.tsx

@@ -13,6 +13,7 @@ import Brightness6Icon from '@mui/icons-material/Brightness6';
 import DnsIcon from '@mui/icons-material/Dns';
 import EditIcon from '@mui/icons-material/Edit';
 import InfoIcon from '@mui/icons-material/Info';
+import CachedIcon from '@mui/icons-material/Cached';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -38,6 +39,7 @@ export default function Settings() {
     const { darkTheme, setDarkTheme } = useContext(DarkTheme);
     const [serverAddress, setServerAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [showNsfw, setShowNsfw] = useLocalStorage<boolean>('showNsfw', true);
+    const [useCache, setUseCache] = useLocalStorage<boolean>('useCache', true);
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogValue, setDialogValue] = useState(serverAddress);
 
@@ -87,7 +89,10 @@ export default function Settings() {
                     <ListItemIcon>
                         <FavoriteIcon />
                     </ListItemIcon>
-                    <ListItemText primary="Show NSFW" />
+                    <ListItemText
+                        primary="Show NSFW"
+                        secondary="Hide NSFW extensions and sources"
+                    />
                     <ListItemSecondaryAction>
                         <Switch
                             edge="end"
@@ -96,6 +101,23 @@ export default function Settings() {
                         />
                     </ListItemSecondaryAction>
                 </ListItem>
+                <ListItem>
+                    <ListItemIcon>
+                        <CachedIcon />
+                    </ListItemIcon>
+                    <ListItemText
+                        primary="Use image cache"
+                        secondary="Disabling image cache makes images load faster if you have a slow disk,
+                         but uses it much more internet traffic in turn"
+                    />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={useCache}
+                            onChange={() => setUseCache(!useCache)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
                 <ListItem>
                     <ListItemIcon>
                         <DnsIcon />