Refactor app layouts and common components

src/RootApp.tsx

@@ -1,37 +1,53 @@
 import loadable from '@loadable/component';
+import { ThemeProvider } from '@mui/material/styles';
 import { History } from '@remix-run/router';
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-import StableApp from './apps/stable/App';
-import { HistoryRouter } from './components/router/HistoryRouter';
-import { ApiProvider } from './hooks/useApi';
-import { WebConfigProvider } from './hooks/useWebConfig';
+import AppHeader from 'components/AppHeader';
+import Backdrop from 'components/Backdrop';
+import { HistoryRouter } from 'components/router/HistoryRouter';
+import { ApiProvider } from 'hooks/useApi';
+import { WebConfigProvider } from 'hooks/useWebConfig';
+import theme from 'themes/theme';
 
 const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
+const StableApp = loadable(() => import('./apps/stable/App'));
 
 const queryClient = new QueryClient();
 
-const RootApp = ({ history }: { history: History }) => {
+const RootAppLayout = () => {
     const layoutMode = localStorage.getItem('layout');
+    const isExperimentalLayout = layoutMode === 'experimental';
 
     return (
-        <QueryClientProvider client={queryClient}>
-            <ApiProvider>
-                <WebConfigProvider>
-                    <HistoryRouter history={history}>
-                        {
-                            layoutMode === 'experimental' ?
-                                <ExperimentalApp /> :
-                                <StableApp />
-                        }
-                    </HistoryRouter>
-                </WebConfigProvider>
-            </ApiProvider>
-            <ReactQueryDevtools initialIsOpen={false} />
-        </QueryClientProvider>
+        <>
+            <Backdrop />
+            <AppHeader isHidden={isExperimentalLayout} />
+
+            {
+                isExperimentalLayout ?
+                    <ExperimentalApp /> :
+                    <StableApp />
+            }
+        </>
     );
 };
 
+const RootApp = ({ history }: { history: History }) => (
+    <QueryClientProvider client={queryClient}>
+        <ApiProvider>
+            <WebConfigProvider>
+                <ThemeProvider theme={theme}>
+                    <HistoryRouter history={history}>
+                        <RootAppLayout />
+                    </HistoryRouter>
+                </ThemeProvider>
+            </WebConfigProvider>
+        </ApiProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+);
+
 export default RootApp;

src/apps/experimental/App.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { REDIRECTS } from 'apps/stable/routes/_redirects';
 import ConnectionRequired from 'components/ConnectionRequired';
 import ServerContentPage from 'components/ServerContentPage';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
+import { toRedirectRoute } from 'components/router/Redirect';
 
 import AppLayout from './AppLayout';
 import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes';
 import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
-import { REDIRECTS } from 'apps/stable/routes/_redirects';
-import { toRedirectRoute } from 'components/router/Redirect';
 
 const ExperimentalApp = () => {
     return (
@@ -38,10 +38,10 @@ const ExperimentalApp = () => {
 
                     {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
                 </Route>
-
-                {/* Redirects for old paths */}
-                {REDIRECTS.map(toRedirectRoute)}
             </Route>
+
+            {/* Redirects for old paths */}
+            {REDIRECTS.map(toRedirectRoute)}
         </Routes>
     );
 };

src/apps/experimental/AppLayout.tsx

@@ -1,18 +1,17 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
-import { ThemeProvider } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { Outlet, useLocation } from 'react-router-dom';
 
-import AppHeader from 'components/AppHeader';
-import Backdrop from 'components/Backdrop';
+import AppBody from 'components/AppBody';
+import ElevationScroll from 'components/ElevationScroll';
+import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
 import { useApi } from 'hooks/useApi';
 import { useLocalStorage } from 'hooks/useLocalStorage';
 
 import AppToolbar from './components/AppToolbar';
-import AppDrawer, { DRAWER_WIDTH, isDrawerPath } from './components/drawers/AppDrawer';
-import ElevationScroll from './components/ElevationScroll';
-import theme from './theme';
+import AppDrawer, { isDrawerPath } from './components/drawers/AppDrawer';
 
 import './AppOverrides.scss';
 
@@ -29,6 +28,7 @@ const AppLayout = () => {
     const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned);
     const { user } = useApi();
     const location = useLocation();
+    const theme = useTheme();
 
     const isDrawerAvailable = isDrawerPath(location.pathname);
     const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
@@ -47,67 +47,54 @@ const AppLayout = () => {
     }, [ isDrawerActive, setIsDrawerActive ]);
 
     return (
-        <ThemeProvider theme={theme}>
-            <Backdrop />
-
-            <div style={{ display: 'none' }}>
-                {/*
-                  * TODO: These components are not used, but views interact with them directly so the need to be
-                  * present in the dom. We add them in a hidden element to prevent errors.
-                  */}
-                <AppHeader />
-            </div>
-
-            <Box sx={{ display: 'flex' }}>
-                <ElevationScroll elevate={isDrawerOpen}>
-                    <AppBar
-                        position='fixed'
-                        sx={{ zIndex: (muiTheme) => muiTheme.zIndex.drawer + 1 }}
-                    >
-                        <AppToolbar
-                            isDrawerOpen={isDrawerOpen}
-                            onDrawerButtonClick={onToggleDrawer}
-                        />
-                    </AppBar>
-                </ElevationScroll>
+        <Box sx={{ display: 'flex' }}>
+            <ElevationScroll elevate={isDrawerOpen}>
+                <AppBar
+                    position='fixed'
+                    sx={{ zIndex: (muiTheme) => muiTheme.zIndex.drawer + 1 }}
+                >
+                    <AppToolbar
+                        isDrawerOpen={isDrawerOpen}
+                        onDrawerButtonClick={onToggleDrawer}
+                    />
+                </AppBar>
+            </ElevationScroll>
 
-                <AppDrawer
-                    open={isDrawerOpen}
-                    onClose={onToggleDrawer}
-                    onOpen={onToggleDrawer}
-                />
+            <AppDrawer
+                open={isDrawerOpen}
+                onClose={onToggleDrawer}
+                onOpen={onToggleDrawer}
+            />
 
-                <Box
-                    component='main'
-                    sx={{
-                        width: '100%',
-                        flexGrow: 1,
+            <Box
+                component='main'
+                sx={{
+                    width: '100%',
+                    flexGrow: 1,
+                    transition: theme.transitions.create('margin', {
+                        easing: theme.transitions.easing.sharp,
+                        duration: theme.transitions.duration.leavingScreen
+                    }),
+                    marginLeft: 0,
+                    ...(isDrawerAvailable && {
+                        marginLeft: {
+                            sm: `-${DRAWER_WIDTH}px`
+                        }
+                    }),
+                    ...(isDrawerActive && {
                         transition: theme.transitions.create('margin', {
-                            easing: theme.transitions.easing.sharp,
-                            duration: theme.transitions.duration.leavingScreen
+                            easing: theme.transitions.easing.easeOut,
+                            duration: theme.transitions.duration.enteringScreen
                         }),
-                        marginLeft: 0,
-                        ...(isDrawerAvailable && {
-                            marginLeft: {
-                                sm: `-${DRAWER_WIDTH}px`
-                            }
-                        }),
-                        ...(isDrawerActive && {
-                            transition: theme.transitions.create('margin', {
-                                easing: theme.transitions.easing.easeOut,
-                                duration: theme.transitions.duration.enteringScreen
-                            }),
-                            marginLeft: 0
-                        })
-                    }}
-                >
-                    <div className='mainAnimatedPages skinBody' />
-                    <div className='skinBody'>
-                        <Outlet />
-                    </div>
-                </Box>
+                        marginLeft: 0
+                    })
+                }}
+            >
+                <AppBody>
+                    <Outlet />
+                </AppBody>
             </Box>
-        </ThemeProvider>
+        </Box>
     );
 };