add prettier for auto formatting (#231)

* [Prettier] Add "prettier" Makes the formatting of the code consistent. By using the eslint-plugin-prettier formatting issues will be highlighted as a lint error. These errors will be auto fixed by running "lint --fix" (which can be done automatically on file save) * [Prettier] Add "prettier" - Fix formatting
2023-02-06 10:06:33 +01:00
parent 2eeea41a45
commit 4e0a860dfd
101 changed files with 2065 additions and 1886 deletions
--- a/src/components/reader/DoublePage.tsx
+++ b/src/components/reader/DoublePage.tsx
@@ -18,16 +18,14 @@ const Image = styled('img')({
 });

 interface IProps {
-    index: number
-    image1src: string
-    image2src: string
-    settings: IReaderSettings
+    index: number;
+    image1src: string;
+    image2src: string;
+    settings: IReaderSettings;
 }

 const DoublePage = React.forwardRef((props: IProps, ref: any) => {
-    const {
-        image1src, image2src, index, settings,
-    } = props;
+    const { image1src, image2src, index, settings } = props;

    return (
        <Box
@@ -42,14 +40,8 @@ const DoublePage = React.forwardRef((props: IProps, ref: any) => {
                overflowX: 'scroll',
            }}
        >
-            <Image
-                src={image1src}
-                alt={`Page #${index}`}
-            />
-            <Image
-                src={image2src}
-                alt={`Page #${index + 1}`}
-            />
+            <Image src={image1src} alt={`Page #${index}`} />
+            <Image src={image2src} alt={`Page #${index + 1}`} />
        </Box>
    );
 });
--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -22,15 +22,18 @@ function imageStyle(settings: IReaderSettings): any {
                width: window.innerWidth,
            });
        }
+
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
-    if (settings.readerType === 'DoubleLTR'
-    || settings.readerType === 'DoubleRTL'
-    || settings.readerType === 'ContinuesHorizontalLTR'
-    || settings.readerType === 'ContinuesHorizontalRTL') {
+    if (
+        settings.readerType === 'DoubleLTR' ||
+        settings.readerType === 'DoubleRTL' ||
+        settings.readerType === 'ContinuesHorizontalLTR' ||
+        settings.readerType === 'ContinuesHorizontalRTL'
+    ) {
        return {
            display: 'block',
            marginLeft: '7px',
@@ -54,16 +57,14 @@ function imageStyle(settings: IReaderSettings): any {
 }

 interface IProps {
-    src: string
-    index: number
-    onImageLoad: () => void
-    settings: IReaderSettings
+    src: string;
+    index: number;
+    onImageLoad: () => void;
+    settings: IReaderSettings;
 }

 const Page = React.forwardRef((props: IProps, ref: any) => {
-    const {
-        src, index, onImageLoad, settings,
-    } = props;
+    const { src, index, onImageLoad, settings } = props;

    const [useCache] = useLocalStorage<boolean>('useCache', true);

--- a/src/components/reader/PageNumber.tsx
+++ b/src/components/reader/PageNumber.tsx
@@ -9,27 +9,28 @@ import React from 'react';
 import { Box } from '@mui/system';

 interface IProps {
-    settings: IReaderSettings
-    curPage: number
-    pageCount: number
+    settings: IReaderSettings;
+    curPage: number;
+    pageCount: number;
 }

 export default function PageNumber(props: IProps) {
    const { settings, curPage, pageCount } = props;

    return (
-        <Box sx={{
-            display: settings.showPageNumber ? 'block' : 'none',
-            position: 'fixed',
-            bottom: '50px',
-            right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-            padding: '2px',
-            paddingLeft: '4px',
-            paddingRight: '4px',
-            textAlign: 'center',
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            borderRadius: '10px',
-        }}
+        <Box
+            sx={{
+                display: settings.showPageNumber ? 'block' : 'none',
+                position: 'fixed',
+                bottom: '50px',
+                right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+                padding: '2px',
+                paddingLeft: '4px',
+                paddingRight: '4px',
+                textAlign: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                borderRadius: '10px',
+            }}
        >
            {`${curPage + 1} / ${pageCount}`}
        </Box>
--- a/src/components/reader/ReaderSettingsOptions.tsx
+++ b/src/components/reader/ReaderSettingsOptions.tsx
@@ -6,20 +6,22 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import {
-    List, ListItem, ListItemText, Switch,
-} from '@mui/material';
+import { List, ListItem, ListItemText, Switch } from '@mui/material';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import React from 'react';

 interface IProps extends IReaderSettings {
-    setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void
+    setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;
 }

 export default function ReaderSettingsOptions({
-    staticNav, loadNextOnEnding, readerType, showPageNumber, setSettingValue,
+    staticNav,
+    loadNextOnEnding,
+    readerType,
+    showPageNumber,
+    setSettingValue,
 }: IProps) {
    return (
        <>
@@ -62,33 +64,17 @@ export default function ReaderSettingsOptions({
                        onChange={(e) => setSettingValue('readerType', e.target.value)}
                        sx={{ p: 0 }}
                    >
-                        <MenuItem value="SingleLTR">
-                            Single Page (LTR)
-                        </MenuItem>
-                        <MenuItem value="SingleRTL">
-                            Single Page (RTL)
-                        </MenuItem>
+                        <MenuItem value="SingleLTR">Single Page (LTR)</MenuItem>
+                        <MenuItem value="SingleRTL">Single Page (RTL)</MenuItem>
                        {/* <MenuItem value="SingleVertical">
                                       Vertical(WIP)
                                    </MenuItem> */}
-                        <MenuItem value="DoubleLTR">
-                            Double Page (LTR)
-                        </MenuItem>
-                        <MenuItem value="DoubleRTL">
-                            Double Page (RTL)
-                        </MenuItem>
-                        <MenuItem value="Webtoon">
-                            Webtoon
-                        </MenuItem>
-                        <MenuItem value="ContinuesVertical">
-                            Continues Vertical
-                        </MenuItem>
-                        <MenuItem value="ContinuesHorizontalLTR">
-                            Horizontal (LTR)
-                        </MenuItem>
-                        <MenuItem value="ContinuesHorizontalRTL">
-                            Horizontal (RTL)
-                        </MenuItem>
+                        <MenuItem value="DoubleLTR">Double Page (LTR)</MenuItem>
+                        <MenuItem value="DoubleRTL">Double Page (RTL)</MenuItem>
+                        <MenuItem value="Webtoon">Webtoon</MenuItem>
+                        <MenuItem value="ContinuesVertical">Continues Vertical</MenuItem>
+                        <MenuItem value="ContinuesHorizontalLTR">Horizontal (LTR)</MenuItem>
+                        <MenuItem value="ContinuesHorizontalRTL">Horizontal (RTL)</MenuItem>
                    </Select>
                </ListItem>
            </List>
--- a/src/components/reader/pager/DoublePagedPager.tsx
+++ b/src/components/reader/pager/DoublePagedPager.tsx
@@ -30,9 +30,7 @@ const isSinglePage = (index: number, spreadPages: boolean[]): boolean => {
 };

 export default function DoublePagedPager(props: IReaderProps) {
-    const {
-        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
-    } = props;
+    const { pages, settings, setCurPage, curPage, nextChapter, prevChapter } = props;

    const selfRef = useRef<HTMLDivElement>(null);
    const pagesRef = useRef<HTMLImageElement[]>([]);
@@ -74,7 +72,7 @@ export default function DoublePagedPager(props: IReaderProps) {
                <Page
                    key={curPage}
                    index={curPage}
-                    src={(pagesDisplayed.current === 1) ? pages[curPage].src : ''}
+                    src={pagesDisplayed.current === 1 ? pages[curPage].src : ''}
                    onImageLoad={() => {}}
                    settings={settings}
                />,
@@ -101,7 +99,7 @@ export default function DoublePagedPager(props: IReaderProps) {
    function nextPage() {
        if (curPage < pages.length - 1) {
            const nextCurPage = curPage + pagesDisplayed.current;
-            setCurPage((nextCurPage >= pages.length) ? pages.length - 1 : nextCurPage);
+            setCurPage(nextCurPage >= pages.length ? pages.length - 1 : nextCurPage);
        } else if (settings.loadNextOnEnding) {
            nextChapter();
        }
@@ -110,7 +108,7 @@ export default function DoublePagedPager(props: IReaderProps) {
    function prevPage() {
        if (curPage > 0) {
            const nextCurPage = curPage - pagesToGoBack();
-            setCurPage((nextCurPage < 0) ? 0 : nextCurPage);
+            setCurPage(nextCurPage < 0 ? 0 : nextCurPage);
        } else {
            prevChapter();
        }
@@ -132,7 +130,7 @@ export default function DoublePagedPager(props: IReaderProps) {
        }
    }

-    function keyboardControl(e:KeyboardEvent) {
+    function keyboardControl(e: KeyboardEvent) {
        switch (e.code) {
            case 'Space':
                e.preventDefault();
@@ -149,7 +147,7 @@ export default function DoublePagedPager(props: IReaderProps) {
        }
    }

-    function clickControl(e:MouseEvent) {
+    function clickControl(e: MouseEvent) {
        if (e.clientX > window.innerWidth / 2) {
            goRight();
        } else {
@@ -167,9 +165,11 @@ export default function DoublePagedPager(props: IReaderProps) {

    useEffect(() => {
        const retryDisplay = setInterval(() => {
-            const isLastPage = (curPage === pages.length - 1);
-            if ((!isLastPage && pageLoaded.current[curPage] && pageLoaded.current[curPage + 1])
-                || pageLoaded.current[curPage]) {
+            const isLastPage = curPage === pages.length - 1;
+            if (
+                (!isLastPage && pageLoaded.current[curPage] && pageLoaded.current[curPage + 1]) ||
+                pageLoaded.current[curPage]
+            ) {
                setPagesToDisplay();
                displayPages();
                clearInterval(retryDisplay);
@@ -189,23 +189,23 @@ export default function DoublePagedPager(props: IReaderProps) {
    return (
        <Box ref={selfRef}>
            <Box id="preload" sx={{ display: 'none' }}>
-                {
-                    pages.map((page) => (
-                        <img
-                            ref={(e:HTMLImageElement) => { pagesRef.current[page.index] = e; }}
-                            key={`${page.index}`}
-                            src={page.src}
-                            onLoad={handleImageLoad(page.index)}
-                            alt={`${page.index}`}
-                        />
-                    ))
-                }
+                {pages.map((page) => (
+                    <img
+                        ref={(e: HTMLImageElement) => {
+                            pagesRef.current[page.index] = e;
+                        }}
+                        key={`${page.index}`}
+                        src={page.src}
+                        onLoad={handleImageLoad(page.index)}
+                        alt={`${page.index}`}
+                    />
+                ))}
            </Box>
            <Box
                id="display"
                sx={{
                    display: 'flex',
-                    flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
+                    flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
                    justifyContent: 'center',
                    margin: '0 auto',
                    width: 'auto',
--- a/src/components/reader/pager/HorizontalPager.tsx
+++ b/src/components/reader/pager/HorizontalPager.tsx
@@ -30,9 +30,7 @@ const isAtEnd = () => {
 const isAtStart = () => window.scrollX <= 0;

 export default function HorizontalPager(props: IReaderProps) {
-    const {
-        pages, curPage, initialPage, settings, setCurPage, prevChapter, nextChapter,
-    } = props;
+    const { pages, curPage, initialPage, settings, setCurPage, prevChapter, nextChapter } = props;

    const currentPageRef = useRef(initialPage);
    const selfRef = useRef<HTMLDivElement>(null);
@@ -78,7 +76,7 @@ export default function HorizontalPager(props: IReaderProps) {
        window.scrollBy(mouseXPos.current - e.pageX, 0);
    }

-    function dragControl(e:MouseEvent) {
+    function dragControl(e: MouseEvent) {
        mouseXPos.current = e.pageX;
        selfRef.current?.addEventListener('mousemove', dragScreen);
    }
@@ -87,7 +85,7 @@ export default function HorizontalPager(props: IReaderProps) {
        selfRef.current?.removeEventListener('mousemove', dragScreen);
    }

-    function clickControl(e:MouseEvent) {
+    function clickControl(e: MouseEvent) {
        if (e.clientX >= window.innerWidth * 0.85) {
            goRight();
        } else if (e.clientX <= window.innerWidth * 0.15) {
@@ -166,8 +164,10 @@ export default function HorizontalPager(props: IReaderProps) {
            ref={selfRef}
            sx={{
                display: 'flex',
-                flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
-                justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
+                flexDirection:
+                    settings.readerType === 'ContinuesHorizontalLTR' ? 'row' : 'row-reverse',
+                justifyContent:
+                    settings.readerType === 'ContinuesHorizontalLTR' ? 'flex-start' : 'flex-end',
                margin: '0 auto',
                width: 'auto',
                height: 'auto',
@@ -175,18 +175,18 @@ export default function HorizontalPager(props: IReaderProps) {
                userSelect: 'none',
            }}
        >
-            {
-                pages.map((page) => (
-                    <Page
-                        key={page.index}
-                        index={page.index}
-                        src={page.src}
-                        onImageLoad={() => {}}
-                        settings={settings}
-                        ref={(e:HTMLDivElement) => { pagesRef.current[page.index] = e; }}
-                    />
-                ))
-            }
+            {pages.map((page) => (
+                <Page
+                    key={page.index}
+                    index={page.index}
+                    src={page.src}
+                    onImageLoad={() => {}}
+                    settings={settings}
+                    ref={(e: HTMLDivElement) => {
+                        pagesRef.current[page.index] = e;
+                    }}
+                />
+            ))}
        </Box>
    );
 }
--- a/src/components/reader/pager/PagedPager.tsx
+++ b/src/components/reader/pager/PagedPager.tsx
@@ -10,9 +10,7 @@ import { Box } from '@mui/system';
 import Page from 'components/reader/Page';

 export default function PagedReader(props: IReaderProps) {
-    const {
-        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
-    } = props;
+    const { pages, settings, setCurPage, curPage, nextChapter, prevChapter } = props;

    const selfRef = useRef<HTMLDivElement>(null);

@@ -53,7 +51,7 @@ export default function PagedReader(props: IReaderProps) {
        }
    }

-    function keyboardControl(e:KeyboardEvent) {
+    function keyboardControl(e: KeyboardEvent) {
        switch (e.code) {
            case 'Space':
                e.preventDefault();
@@ -70,7 +68,7 @@ export default function PagedReader(props: IReaderProps) {
        }
    }

-    function clickControl(e:MouseEvent) {
+    function clickControl(e: MouseEvent) {
        if (e.clientX > window.innerWidth / 2) {
            goRight();
        } else {
--- a/src/components/reader/pager/VerticalPager.tsx
+++ b/src/components/reader/pager/VerticalPager.tsx
@@ -34,9 +34,7 @@ const isAtBottom = () => {
 const isAtTop = () => window.scrollY <= 0;

 export default function VerticalPager(props: IReaderProps) {
-    const {
-        pages, settings, setCurPage, initialPage, nextChapter, prevChapter,
-    } = props;
+    const { pages, settings, setCurPage, initialPage, nextChapter, prevChapter } = props;

    const currentPageRef = useRef(initialPage);
    const selfRef = useRef<HTMLDivElement>(null);
@@ -74,25 +72,30 @@ export default function VerticalPager(props: IReaderProps) {
        };
    }, [settings.loadNextOnEnding]);

-    const go = useCallback((direction: 'up' | 'down') => {
-        if (direction === 'down' && isAtBottom()) {
-            nextChapter();
-            return;
-        }
+    const go = useCallback(
+        (direction: 'up' | 'down') => {
+            if (direction === 'down' && isAtBottom()) {
+                nextChapter();
+                return;
+            }

-        if (direction === 'up' && isAtTop()) {
-            prevChapter();
-            return;
-        }
+            if (direction === 'up' && isAtTop()) {
+                prevChapter();
+                return;
+            }

-        window.scroll({
-            top: window.scrollY + (window.innerHeight * SCROLL_OFFSET) * (direction === 'up' ? -1 : 1),
-            behavior: SCROLL_BEHAVIOR,
-        });
-    }, [nextChapter, prevChapter]);
+            window.scroll({
+                top:
+                    window.scrollY +
+                    window.innerHeight * SCROLL_OFFSET * (direction === 'up' ? -1 : 1),
+                behavior: SCROLL_BEHAVIOR,
+            });
+        },
+        [nextChapter, prevChapter],
+    );

    useEffect(() => {
-        const handleKeyboard = (e:KeyboardEvent) => {
+        const handleKeyboard = (e: KeyboardEvent) => {
            switch (e.code) {
                case 'Space':
                case 'ArrowRight':
@@ -134,18 +137,18 @@ export default function VerticalPager(props: IReaderProps) {
            }}
            onClick={(e) => go(e.clientX > window.innerWidth / 2 ? 'down' : 'up')}
        >
-            {
-                pages.map((page) => (
-                    <Page
-                        key={page.index}
-                        index={page.index}
-                        src={page.src}
-                        onImageLoad={() => {}}
-                        settings={settings}
-                        ref={(e:HTMLDivElement) => { pagesRef.current[page.index] = e; }}
-                    />
-                ))
-            }
+            {pages.map((page) => (
+                <Page
+                    key={page.index}
+                    index={page.index}
+                    src={page.src}
+                    onImageLoad={() => {}}
+                    settings={settings}
+                    ref={(e: HTMLDivElement) => {
+                        pagesRef.current[page.index] = e;
+                    }}
+                />
+            ))}
        </Box>
    );
 }