Feature/update dependency mui to v5.x (#332)

* Update dependency "mui" to v5.x Update to v5.13.3 Fixes issue of "SxProps" not being exported by "@mui/material" * Update dependency "mui" to v5.x - Fix grid item size Update to v5.13.3 Fixes issue of "SxProps" not being exported by "@mui/material" * Update dependency "mui" to v5.x - Replace "ListItem" with "ListItemButton" * Update dependency "mui" to v5.x - Fix tsc issue * Update dependency "mui" to v5.x - Prevent reader white screen Due to "initialChapter" being a function returning an object, it causes a re-render everytime due to it (the object) being used as a dependency. This caused a white screen when skipping to the previous or next chapter
Suwayomi · Jun 4, 2023 · 1ce27ea · 1ce27ea
1 parent 6911f60
commit 1ce27ea
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "@emotion/styled": "^11.3.0",
     "@fontsource/roboto": "^4.3.0",
     "@mui/icons-material": "^5.0.5",
-    "@mui/material": "^5.0.6",
+    "@mui/material": "^5.13.3",
     "axios": "^1.4.0",
     "file-selector": "^0.2.4",
     "i18next": "^22.4.9",

diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
@@ -11,7 +11,7 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import { Avatar, CardContent, Grid, Box, styled } from '@mui/material';
+import { Avatar, Box, CardContent, Grid, styled } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
 import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
@@ -92,9 +92,10 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
     const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } };
 
     if (gridLayout !== GridLayout.List) {
-        const cols = Math.ceil(dimensions / ItemWidth);
+        const columns = Math.ceil(dimensions / ItemWidth);
+        const columnsPerItem = 12 / columns;
         return (
-            <Grid item columns={cols} xs={1}>
+            <Grid item xs={columnsPerItem}>
                 <Link to={mangaLinkTo} style={gridLayout === GridLayout.Comfortable ? { textDecoration: 'none' } : {}}>
                     <Box
                         sx={{

diff --git a/src/components/navbar/navigation/DesktopSideBar.tsx b/src/components/navbar/navigation/DesktopSideBar.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { ListItem, ListItemIcon, Tooltip, styled } from '@mui/material';
+import { ListItemIcon, Tooltip, styled, ListItemButton } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
@@ -46,13 +46,13 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
         <SideNavBarContainer>
             {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
                 <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
-                    <ListItem disableRipple button key={title}>
+                    <ListItemButton disableRipple key={title}>
                         <ListItemIcon sx={{ minWidth: '0' }}>
                             <Tooltip placement="right" title={t(title)}>
                                 {iconFor(path, IconComponent, SelectedIconComponent)}
                             </Tooltip>
                         </ListItemIcon>
-                    </ListItem>
+                    </ListItemButton>
                 </Link>
             ))}
         </SideNavBarContainer>

diff --git a/src/components/navbar/navigation/MobileBottomBar.tsx b/src/components/navbar/navigation/MobileBottomBar.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { ListItem, styled, Box } from '@mui/material';
+import { styled, Box, ListItemButton } from '@mui/material';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import { NavbarItem } from 'typings';
@@ -55,7 +55,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
         <BottomNavContainer>
             {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
                 <Link to={path} key={path}>
-                    <ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
+                    <ListItemButton disableRipple sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
                         <Box display="flex" flexDirection="column" alignItems="center">
                             {iconFor(path, IconComponent, SelectedIconComponent)}
                             <Box
@@ -73,7 +73,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
                                 {t(title)}
                             </Box>
                         </Box>
-                    </ListItem>
+                    </ListItemButton>
                 </Link>
             ))}
         </BottomNavContainer>

diff --git a/src/components/sourceConfiguration/EditTextPreference.tsx b/src/components/sourceConfiguration/EditTextPreference.tsx
@@ -7,7 +7,6 @@
  */
 
 import React, { useState } from 'react';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -18,6 +17,7 @@ import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { EditTextPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { ListItemButton } from '@mui/material';
 
 export default function EditTextPreference(props: EditTextPreferenceProps) {
     const { t } = useTranslation();
@@ -42,9 +42,9 @@ export default function EditTextPreference(props: EditTextPreferenceProps) {
 
     return (
         <>
-            <ListItem button onClick={() => setDialogOpen(true)}>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
                 <ListItemText primary={title} secondary={summary} />
-            </ListItem>
+            </ListItemButton>
             <Dialog open={dialogOpen} onClose={handleDialogCancel}>
                 <DialogTitle>{dialogTitle}</DialogTitle>
                 <DialogContent>

diff --git a/src/components/sourceConfiguration/ListPreference.tsx b/src/components/sourceConfiguration/ListPreference.tsx
@@ -7,7 +7,6 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -19,6 +18,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 import { ListPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { ListItemButton } from '@mui/material';
 
 interface IListDialogProps {
     value: string;
@@ -123,9 +123,9 @@ export default function ListPreference(props: ListPreferenceProps) {
 
     return (
         <>
-            <ListItem button onClick={() => setDialogOpen(true)}>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
                 <ListItemText primary={title} secondary={getSummary()} />
-            </ListItem>
+            </ListItemButton>
             <ListDialog
                 title={title}
                 open={dialogOpen}

diff --git a/src/components/sourceConfiguration/MultiSelectListPreference.tsx b/src/components/sourceConfiguration/MultiSelectListPreference.tsx
@@ -7,7 +7,6 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -20,6 +19,7 @@ import Button from '@mui/material/Button';
 import cloneObject from 'util/cloneObject';
 import { MultiSelectListPreferenceProps } from 'typings';
 import { useTranslation } from 'react-i18next';
+import { ListItemButton } from '@mui/material';
 
 interface IListDialogProps {
     selectedValues: string[];
@@ -135,9 +135,9 @@ export default function MultiSelectListPreference(props: MultiSelectListPreferen
 
     return (
         <>
-            <ListItem button onClick={() => setDialogOpen(true)}>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
                 <ListItemText primary={title} secondary={getSummary()} />
-            </ListItem>
+            </ListItemButton>
             <ListDialog
                 title={title}
                 open={dialogOpen}

diff --git a/src/components/util/ListItemLink.tsx b/src/components/util/ListItemLink.tsx
@@ -7,14 +7,18 @@
  */
 
 import React from 'react';
-import ListItem, { ListItemProps } from '@mui/material/ListItem';
 import { Link } from 'react-router-dom';
+import { ListItemButton, ListItemButtonProps } from '@mui/material';
 
-export default function ListItemLink(props: ListItemProps<Link, { directLink?: boolean }>) {
+export default function ListItemLink(props: ListItemButtonProps<typeof Link, { directLink?: boolean }>) {
     const { directLink, to } = props;
     if (directLink) {
-        return <ListItem button component="a" href={to} {...props} />;
+        if (typeof to !== 'string') {
+            throw new Error('ListItemLink: "to" has to be a string in case it is a directLink');
+        }
+
+        return <ListItemButton component="a" href={to} {...props} />;
     }
 
-    return <ListItem button component={Link} {...props} />;
+    return <ListItemButton component={Link} {...props} />;
 }
diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx
@@ -79,13 +79,13 @@ const getReaderComponent = (readerType: ReaderType) => {
 };
 
 const range = (n: number) => Array.from({ length: n }, (value, key) => key);
-const initialChapter = () => ({
+const initialChapter = {
     pageCount: -1,
     index: -1,
     chapterCount: 0,
     lastPageRead: 0,
     name: 'Loading...',
-});
+};
 
 export default function Reader() {
     const { t } = useTranslation();
@@ -103,7 +103,7 @@ export default function Reader() {
         } as IMangaCard | IManga,
         isLoading: isMangaLoading,
     } = requestManager.useGetManga(mangaId);
-    const { data: chapter = initialChapter(), isLoading: isChapterLoading } = requestManager.useGetChapter(
+    const { data: chapter = initialChapter, isLoading: isChapterLoading } = requestManager.useGetChapter(
         mangaId,
         chapterIndex,
     );

diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx
@@ -8,14 +8,14 @@
 
 import React, { useContext, useEffect } from 'react';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import { fromEvent } from 'file-selector';
 import makeToast from 'components/util/Toast';
 import ListItemLink from 'components/util/ListItemLink';
 import NavbarContext from 'components/context/NavbarContext';
 import { useTranslation } from 'react-i18next';
 import requestManager from 'lib/RequestManager';
+import { ListItemButton } from '@mui/material';
 
 export default function Backup() {
     const { t } = useTranslation();
@@ -75,12 +75,12 @@ export default function Backup() {
                         secondary={t('settings.backup.label.create_backup_info')}
                     />
                 </ListItemLink>
-                <ListItem button onClick={() => document.getElementById('backup-file')?.click()}>
+                <ListItemButton onClick={() => document.getElementById('backup-file')?.click()}>
                     <ListItemText
                         primary={t('settings.backup.label.restore_backup')}
                         secondary={t('settings.backup.label.restore_backup_info')}
                     />
-                </ListItem>
+                </ListItemButton>
             </List>
             <input type="file" id="backup-file" style={{ display: 'none' }} />
         </>