From 48d559ec190fc9496c40139187431b7d754dcb4f Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 17 Jun 2023 20:53:08 +0200
Subject: [PATCH] Fix/manga grid infinite item width (#376)

* Calculate GridItem width once

Was unnecessarily calculated on every item render

* Update grid dimensions everytime the height or width changes

Hook only run once, which could lead to an issue where the grid item width was calculated to be infinite.
Could be that this is only an issue in dev mode due to react-strict mode.
---
 src/components/MangaGrid.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/MangaGrid.tsx b/src/components/MangaGrid.tsx
index 3ba4cab2..13917448 100644
--- a/src/components/MangaGrid.tsx
+++ b/src/components/MangaGrid.tsx
@@ -24,18 +24,21 @@ const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({
     </Grid>
 ));
 
-const GridItemContainerWithDimension =
-    (dimensions: number, itemWidth: number, gridLayout?: GridLayout, maxColumns: number = 12) =>
-    ({ children, ...itemProps }: GridTypeMap['props'] & Partial<GridItemProps>) => {
-        const itemsPerRow = Math.ceil(dimensions / itemWidth);
-        const columnsPerItem = gridLayout === GridLayout.List ? maxColumns : maxColumns / itemsPerRow;
+const GridItemContainerWithDimension = (
+    dimensions: number,
+    itemWidth: number,
+    gridLayout?: GridLayout,
+    maxColumns: number = 12,
+) => {
+    const itemsPerRow = Math.ceil(dimensions / itemWidth);
+    const columnsPerItem = gridLayout === GridLayout.List ? maxColumns : maxColumns / itemsPerRow;
 
-        return (
-            <Grid {...itemProps} item xs={columnsPerItem} sx={{ paddingTop: '8px', paddingLeft: '8px' }}>
-                {children}
-            </Grid>
-        );
-    };
+    return ({ children, ...itemProps }: GridTypeMap['props'] & Partial<GridItemProps>) => (
+        <Grid {...itemProps} item xs={columnsPerItem} sx={{ paddingTop: '8px', paddingLeft: '8px' }}>
+            {children}
+        </Grid>
+    );
+};
 
 const createMangaCard = (manga: IMangaCard, gridLayout?: GridLayout, inLibraryIndicator?: boolean) => (
     <MangaCard key={manga.id} manga={manga} gridLayout={gridLayout} inLibraryIndicator={inLibraryIndicator} />
@@ -188,7 +191,7 @@ const MangaGrid: React.FC<IMangaGridProps> = (props) => {
         });
     };
 
-    useLayoutEffect(updateGridWidth, []);
+    useLayoutEffect(() => updateGridWidth, [gridRef.current?.offsetWidth, gridRef.current?.offsetHeight]);
 
     useEffect(() => {
         let movementTimer: NodeJS.Timeout;