refactor: use Grid instead of classical div (#1059)

* refactor: use Grid instead of classical div * refactor: remove useless div * refactor: remove useless div * refactor: remove useless divs * refactor: remove useless divs
jy95 · Dec 1, 2024 · ef97191 · ef97191
1 parent 0770437
commit ef97191
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 40 deletions.
diff --git a/src/app/[locale]/backlog/page.tsx b/src/app/[locale]/backlog/page.tsx
@@ -33,7 +33,7 @@ export default function BacklogViewer() {
             headerAlign: 'center',
             renderCell: ({ value }) => (
               <Tooltip title={value} aria-label={value}>
-                <div>{value}</div>
+                {value}
               </Tooltip>
             ),
             width: 270
@@ -49,7 +49,7 @@ export default function BacklogViewer() {
             headerAlign: 'center',
             renderCell: ({ value }) => (
               <Tooltip title={value || ""} aria-label={value || ""}>
-                <div>{value || ""}</div>
+                {value || ""}
               </Tooltip>
             ),
             width: 270

diff --git a/src/app/[locale]/games/dlcs/page.tsx b/src/app/[locale]/games/dlcs/page.tsx
@@ -44,7 +44,7 @@ function GamesGalleryList() {
     }
 
     return (
-        <div>
+        <>
             {
                 data.map(game => 
                     <Accordion key={game.name}>
@@ -82,7 +82,7 @@ function GamesGalleryList() {
                     </Accordion>
                 )
             }
-        </div>
+        </>
     )
 }
 

diff --git a/src/app/[locale]/games/page.tsx b/src/app/[locale]/games/page.tsx
@@ -19,10 +19,10 @@ import type { CardGame } from "@/redux/sharedDefintion";
 
 export default function GamesGalleryGrid() {
     return (
-        <div>
+        <>
             <GamesFilters />
             <GamesGalleryGridInner />
-        </div>
+        </>
     );
 }
 
@@ -69,19 +69,18 @@ function GamesGalleryGridInner() {
             >
                 {allGames.map(renderRow)}
             </Grid>
-            <div style={{
-                justifyContent: "center",
-                display: "flex",
-                marginTop: "15px"
-            }}>
+            <Grid 
+                container 
+                justifyContent="center"
+            >
                 <LoadingButton
                     loading={isFetching}
                     disabled={ page >= (data?.total_pages || 1) }
                     onClick={() => dispatch(nextPage())}
                 >
                     <span>{t('loadMore')}</span>
                 </LoadingButton>
-            </div> 
+            </Grid>
         </>
     );
 }
diff --git a/src/app/[locale]/games/series/page.tsx b/src/app/[locale]/games/series/page.tsx
@@ -44,7 +44,7 @@ function GamesGalleryList() {
     }
 
     return (
-        <div>
+        <>
             {
                 data.map(serie => 
                     <Accordion key={serie.name}>
@@ -82,7 +82,7 @@ function GamesGalleryList() {
                     </Accordion>
                 )
             }
-        </div>
+        </>
     )
 }
 

diff --git a/src/app/[locale]/tests/page.tsx b/src/app/[locale]/tests/page.tsx
@@ -25,31 +25,29 @@ export default function TestsPage() {
     }
 
     return (
-        <div>    
-            <Grid
-                container
-                spacing={1}
-                rowSpacing={1}
-            >
-                {
-                    data
-                        .items
-                        .map(game => 
-                                <Grid 
-                                    key={game.id}
-                                    size={{
-                                        xs: 12,
-                                        sm: 6,
-                                        md: 3,
-                                        // 5 items for this screen size
-                                        lg: 2.4
-                                    }}
-                                >
-                                    <CardEntry game={game}/>
-                                </Grid>
-                        )
-                }
-            </Grid>
-        </div>
+        <Grid
+            container
+            spacing={1}
+            rowSpacing={1}
+        >
+            {
+                data
+                    .items
+                    .map(game => 
+                            <Grid 
+                                key={game.id}
+                                size={{
+                                    xs: 12,
+                                    sm: 6,
+                                    md: 3,
+                                    // 5 items for this screen size
+                                    lg: 2.4
+                                }}
+                            >
+                                <CardEntry game={game}/>
+                            </Grid>
+                    )
+            }
+        </Grid>
     )
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,7 @@ function GamesGalleryList() { @@
         }
         return (
-            <div>
+            <>
                 {
                     data.map(game =>
                         <Accordion key={game.name}>
@@ Expand Down Expand Up / @@ -82,7 +82,7 @@ function GamesGalleryList() { @@
                         </Accordion>
                     )
                 }
-            </div>
+            </>
         )
     }
@@ Expand Down @@