Do not use strict mode for view manager pages

jellyfin · Oct 19, 2024 · 7abe027 · 7abe027
1 parent d330f93
commit 7abe027
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 68 deletions.
diff --git a/src/apps/dashboard/AppLayout.tsx b/src/apps/dashboard/AppLayout.tsx
@@ -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'

diff --git a/src/apps/experimental/AppLayout.tsx b/src/apps/experimental/AppLayout.tsx
@@ -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'

diff --git a/src/components/router/AsyncRoute.tsx b/src/components/router/AsyncRoute.tsx
@@ -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>
+                )
             };
         }
     };

diff --git a/src/index.jsx b/src/index.jsx
@@ -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} />
     );
 }