ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
schroda
2023-06-04 21:13:07 +02:00
committed by GitHub
parent 6911f60eb4
commit 1ce27ea939
11 changed files with 192 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/MangaCard.tsx
View File

@@ -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={{

6
src/components/navbar/navigation/DesktopSideBar.tsx
View File

@@ -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>

6
src/components/navbar/navigation/MobileBottomBar.tsx
View File

@@ -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>

6
src/components/sourceConfiguration/EditTextPreference.tsx
View File

@@ -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>

6
src/components/sourceConfiguration/ListPreference.tsx
View File

@@ -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}

6
src/components/sourceConfiguration/MultiSelectListPreference.tsx
View File

@@ -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}

12
src/components/util/ListItemLink.tsx
View File

@@ -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} />;
}

6
src/screens/Reader.tsx
View File

@@ -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,
);

6
src/screens/settings/Backup.tsx
View File

@@ -8,7 +8,6 @@
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';
@@ -16,6 +15,7 @@ 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' }} />
</>