cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-15 09:58:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6223 from thornbill/strict-mode-strikes-again

Browse Source
This commit is contained in:
Bill Thornton 2024-10-19 07:35:25 -04:00 committed by GitHub
commit a8715d0181
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 77 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/apps/dashboard/AppLayout.tsx
View File

@ -4,7 +4,7 @@ import { type Theme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import React, { FC, useCallback, useEffect, useState } from 'react';
import React, { FC, StrictMode, useCallback, useEffect, useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import AppBody from 'components/AppBody';
@ -49,39 +49,41 @@ export const Component: FC = () => {
return (
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={dateFnsLocale}>
<Box sx={{ display: 'flex' }}>
<ElevationScroll elevate={false}>
<AppBar
position='fixed'
sx={{
width: {
xs: '100%',
md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
},
ml: {
xs: 0,
md: isDrawerAvailable ? DRAWER_WIDTH : 0
}
}}
>
<AppToolbar
isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer}
<StrictMode>
<ElevationScroll elevate={false}>
<AppBar
position='fixed'
sx={{
width: {
xs: '100%',
md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
},
ml: {
xs: 0,
md: isDrawerAvailable ? DRAWER_WIDTH : 0
}
}}
>
<AppTabs isDrawerOpen={isDrawerOpen} />
</AppToolbar>
</AppBar>
</ElevationScroll>
<AppToolbar
isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer}
>
<AppTabs isDrawerOpen={isDrawerOpen} />
</AppToolbar>
</AppBar>
</ElevationScroll>
{
isDrawerAvailable && (
<AppDrawer
open={isDrawerOpen}
onClose={onToggleDrawer}
onOpen={onToggleDrawer}
/>
)
}
{
isDrawerAvailable && (
<AppDrawer
open={isDrawerOpen}
onClose={onToggleDrawer}
onOpen={onToggleDrawer}
/>
)
}
</StrictMode>
<Box
component='main'

64
src/apps/experimental/AppLayout.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import React, { StrictMode, useCallback, useState } from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import { type Theme } from '@mui/material/styles';
@ -30,37 +30,39 @@ export const Component = () => {
return (
<Box sx={{ position: 'relative', display: 'flex', height: '100%' }}>
<ElevationScroll elevate={false}>
<AppBar
position='fixed'
sx={{
width: {
xs: '100%',
md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
},
ml: {
xs: 0,
md: isDrawerAvailable ? DRAWER_WIDTH : 0
}
}}
>
<AppToolbar
isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer}
/>
</AppBar>
</ElevationScroll>
<StrictMode>
<ElevationScroll elevate={false}>
<AppBar
position='fixed'
sx={{
width: {
xs: '100%',
md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
},
ml: {
xs: 0,
md: isDrawerAvailable ? DRAWER_WIDTH : 0
}
}}
>
<AppToolbar
isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer}
/>
</AppBar>
</ElevationScroll>
{
isDrawerAvailable && (
<AppDrawer
open={isDrawerOpen}
onClose={onToggleDrawer}
onOpen={onToggleDrawer}
/>
)
}
{
isDrawerAvailable && (
<AppDrawer
open={isDrawerOpen}
onClose={onToggleDrawer}
onOpen={onToggleDrawer}
/>
)
}
</StrictMode>
<Box
component='main'

7
src/components/router/AsyncRoute.tsx
View File

@ -1,3 +1,4 @@
import React, { StrictMode } from 'react';
import type { RouteObject } from 'react-router-dom';
export enum AsyncRouteType {
@ -39,7 +40,11 @@ export const toAsyncPageRoute = ({
lazy: async () => {
const { default: Page } = await importPage(page ?? path, type);
return {
Component: Page
element: (
<StrictMode>
<Page />
</StrictMode>
)
};
}
};

15
src/components/viewManager/ViewManagerPage.tsx
View File

@ -1,5 +1,5 @@
import { Action } from 'history';
import { FunctionComponent, useEffect, useRef } from 'react';
import { FunctionComponent, useEffect } from 'react';
import { useLocation, useNavigationType } from 'react-router-dom';
import globalize from 'lib/globalize';
@ -58,13 +58,6 @@ const ViewManagerPage: FunctionComponent<ViewManagerPageProps> = ({
isThemeMediaSupported = false,
transition
}) => {
/**
* HACK: This is a hack to workaround intentional behavior in React strict mode when running in development.
* Legacy views will break if loaded twice so we need to avoid that. This will likely stop working in React 19.
* refs: https://stackoverflow.com/a/72238236
*/
const isLoaded = useRef(false);
const location = useLocation();
const navigationType = useNavigationType();
@ -98,11 +91,7 @@ const ViewManagerPage: FunctionComponent<ViewManagerPageProps> = ({
});
};
if (!isLoaded.current) loadPage();
return () => {
isLoaded.current = true;
};
loadPage();
},
// location.state and navigationType are NOT included as dependencies here since dialogs will update state while the current view stays the same
// eslint-disable-next-line react-hooks/exhaustive-deps

6
src/index.jsx
View File

@ -1,7 +1,7 @@
// Import legacy browser polyfills
import 'lib/legacy';
import React, { StrictMode } from 'react';
import React from 'react';
import { createRoot } from 'react-dom/client';
// NOTE: We need to import this first to initialize the connection
@ -268,9 +268,7 @@ async function renderApp() {
const root = createRoot(container);
root.render(
<StrictMode>
<RootApp history={history} />
</StrictMode>
<RootApp history={history} />
);
}