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

Feature/update dependency react to v18.x (#346)

Browse Source 
* Update dependency "react" to v18.x

Update to v18.2.0

* Update dependency "react" to v18.x - Fix some dependency version issue

Something caused weird tsc issues, most likely a version mismatch since it got fixed by doing a clean install (deleting node_modules folder, yarn.lock and clearing the cache) of the dependencies

* Update dependency "react" to v18.x - Fix "i18n" tsc issues

* Update dependency "react" to v18.x - Fix tsc issue

Typography can only have a single child

* Update dependency "react" to v18.x - Prevent build warning

TODO: migrate to Vite

Gets used without being declared as a dependency.
Since CRA is unmaintained this will not get fixed.

* Update dependency "react" to v18.x - Use "createRoot"

* Update dependency "react" to v18.x - Fix dnd in strict mode
This commit is contained in:
schroda
2023-06-04 21:40:04 +02:00
committed by GitHub
parent 62bf6d66dc
commit 61975b5c49
14 changed files with 1637 additions and 2879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ExtensionCard.tsx
View File

@@ -159,7 +159,7 @@ export default function ExtensionCard(props: IProps) {
sx={{ color: installedState === InstalledState.OBSOLETE ? 'red' : 'inherit' }}
onClick={() => handleButtonClick()}
>
{t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState])}
{t(INSTALLED_STATE_TO_TRANSLATION_KEY_MAP[installedState]) as string}
</Button>
</CardContent>
</Card>

2
src/components/library/LibraryOptionsPanel.tsx
View File

@@ -48,7 +48,7 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
open={open}
onClose={onClose}
tabs={['filter', 'sort', 'display']}
tabTitle={(key) => t(TITLES[key])}
tabTitle={(key) => t(TITLES[key]) as string}
tabContent={(key) => {
if (key === 'filter') {
return (

2
src/components/manga/ChapterOptions.tsx
View File

@@ -38,7 +38,7 @@ const ChapterOptions: React.FC<IProps> = ({ open, onClose, options, optionsDispa
onClose={onClose}
minHeight={150}
tabs={['filter', 'sort', 'display']}
tabTitle={(key) => t(TITLES[key])}
tabTitle={(key) => t(TITLES[key]) as string}
tabContent={(key) => {
if (key === 'filter') {
return (

6
src/components/molecules/DownloadStateIndicator.tsx
View File

@@ -49,8 +49,10 @@ const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ downloa
}}
>
<Typography variant="caption" component="div" color="text.secondary">
{download.progress !== 0 && `${Math.round(download.progress * 100)}%`}
{download.progress === 0 && t(DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP[download.state])}
<>
{download.progress !== 0 && `${Math.round(download.progress * 100)}%`}
{download.progress === 0 && t(DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP[download.state])}
</>
</Typography>
</Box>
</Box>

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

@@ -48,7 +48,7 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
<Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
<ListItemButton disableRipple key={title}>
<ListItemIcon sx={{ minWidth: '0' }}>
<Tooltip placement="right" title={t(title)}>
<Tooltip placement="right" title={t(title) as string}>
{iconFor(path, IconComponent, SelectedIconComponent)}
</Tooltip>
</ListItemIcon>

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

@@ -70,7 +70,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
: 'grey.600',
}}
>
{t(title)}
{t(title) as string}
</Box>
</Box>
</ListItemButton>

11
src/components/reader/pager/DoublePagedPager.tsx
View File

@@ -7,11 +7,11 @@
*/
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Box } from '@mui/material';
import Page from 'components/reader/Page';
import DoublePage from 'components/reader/DoublePage';
import { IReaderProps } from 'typings';
import { createRoot } from 'react-dom/client';
const isSpreadPage = (image: HTMLImageElement): boolean => {
const aspectRatio = image.height / image.width;
@@ -58,8 +58,11 @@ export default function DoublePagedPager(props: IReaderProps) {
}
function displayPages() {
const container = document.getElementById('display');
const root = createRoot(container!);
if (pagesDisplayed.current === 2) {
ReactDOM.render(
root.render(
<DoublePage
key={curPage}
index={curPage}
@@ -67,10 +70,9 @@ export default function DoublePagedPager(props: IReaderProps) {
image2src={pages[curPage + 1].src}
settings={settings}
/>,
document.getElementById('display'),
);
} else {
ReactDOM.render(
root.render(
<Page
key={curPage}
index={curPage}
@@ -78,7 +80,6 @@ export default function DoublePagedPager(props: IReaderProps) {
onImageLoad={() => {}}
settings={settings}
/>,
document.getElementById('display'),
);
}
}

13
src/components/util/Toast.tsx
View File

@@ -6,16 +6,14 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import ReactDOM from 'react-dom';
import React from 'react';
import Slide, { SlideProps } from '@mui/material/Slide';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertColor as Severity } from '@mui/material/Alert';
import { createRoot, Root } from 'react-dom/client';
function removeToast(id: string) {
const container = document.querySelector(`#${id}`)!!;
ReactDOM.unmountComponentAtNode(container);
document.body.removeChild(container);
function removeToast(root: Root) {
root.unmount();
}
function Transition(props: SlideProps) {
@@ -57,9 +55,10 @@ export default function makeToast(message: string, severity: Severity) {
document.body.appendChild(container);
ReactDOM.render(<Toast message={message} severity={severity} />, container);
const root = createRoot(container!);
root.render(<Toast message={message} severity={severity} />);
setTimeout(() => removeToast(container.id), 3500);
setTimeout(() => removeToast(root), 3500);
}
export function makeToaster([toasts, setToasts]: [React.ReactElement[], (arg0: React.ReactElement[]) => void]): [