items per row setting (#165)

* items per row setting

self explanatory

* make it better for user

src/components/MangaCard.tsx

@@ -71,6 +71,7 @@ const truncateText = (str: string, maxLength: number) => {
 interface IProps {
     manga: IMangaCard
     gridLayout: number | undefined
+    dimensions: number
 }
 const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref) => {
     const {
@@ -79,15 +80,19 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
             id, title, thumbnailUrl, downloadCount, unreadCount: unread, inLibrary,
         },
         gridLayout,
+        dimensions,
     } = props;
     const { options: { showUnreadBadge, showDownloadBadge } } = useLibraryOptionsContext();
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
     const [useCache] = useLocalStorage<boolean>('useCache', true);
+    const [ItemWidth] = useLocalStorage<number>('ItemWidth', 300);
 
     if (gridLayout !== 2) {
+        const colomns = Math.round(dimensions / ItemWidth);
         return (
-            <Grid item xs={6} sm={4} md={3} lg={2}>
+            // @ts-ignore gridsize type isnt allowed to be a decimal but it works fine
+            <Grid item lg={12 / colomns}>
                 <Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
                     <Box
                         sx={{

src/components/MangaGrid.tsx

@@ -5,7 +5,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import React, { useEffect, useRef } from 'react';
+import React, {
+    useEffect, useLayoutEffect, useRef, useState,
+} from 'react';
 import Grid from '@mui/material/Grid';
 import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
@@ -49,6 +51,23 @@ export default function MangaGrid(props: IMangaGridProps) {
         };
     }, [hasNextPage, mangas]);
 
+    const [dimensions, setDimensions] = useState(1);
+
+    const gridRef = useRef<HTMLDivElement>(null);
+
+    const TestDimensions = () => {
+        setDimensions(gridRef.current ? gridRef.current.offsetWidth : 0);
+    };
+
+    useLayoutEffect(TestDimensions, []);
+
+    let movementTimer: NodeJS.Timeout;
+
+    window.addEventListener('resize', () => {
+        clearInterval(movementTimer);
+        movementTimer = setTimeout(TestDimensions, 100);
+    });
+
     if (mangas.length === 0) {
         if (isLoading) {
             mapped = (
@@ -79,6 +98,7 @@ export default function MangaGrid(props: IMangaGridProps) {
                         manga={it}
                         ref={lastManga}
                         gridLayout={gridLayout}
+                        dimensions={dimensions}
                     />
                 );
             }
@@ -87,30 +107,33 @@ export default function MangaGrid(props: IMangaGridProps) {
                     key={it.id}
                     manga={it}
                     gridLayout={gridLayout}
+                    dimensions={dimensions}
                 />
             );
         });
     }
 
     return (
-        <Grid
-            container
-            spacing={1}
-            style={horisontal ? {
-                margin: 0,
-                width: '100%',
-                padding: '5px',
-                overflowX: 'scroll',
-                display: '-webkit-inline-box',
-                flexWrap: 'nowrap',
-            } : {
-                margin: 0,
-                width: '100%',
-                padding: '5px',
-            }}
-        >
-            {mapped}
-        </Grid>
+        <div ref={gridRef}>
+            <Grid
+                container
+                spacing={1}
+                style={horisontal ? {
+                    margin: 0,
+                    width: '100%',
+                    padding: '5px',
+                    overflowX: 'scroll',
+                    display: '-webkit-inline-box',
+                    flexWrap: 'nowrap',
+                } : {
+                    margin: 0,
+                    width: '100%',
+                    padding: '5px',
+                }}
+            >
+                {mapped}
+            </Grid>
+        </div>
     );
 }