From 1a934c79563e067d448248ee565f106e5eeda4da Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Mon, 25 Sep 2023 02:13:16 -0400 Subject: [PATCH] Refactor common navigation components --- src/apps/dashboard/AppLayout.tsx | 98 ++++++++++++++++++- .../dashboard/components/drawer/AppDrawer.tsx | 29 ++++++ .../sections}/AdvancedDrawerSection.tsx | 0 .../drawer/sections}/DevicesDrawerSection.tsx | 0 .../drawer/sections}/LiveTvDrawerSection.tsx | 0 .../drawer/sections}/PluginDrawerSection.tsx | 0 .../drawer/sections}/ServerDrawerSection.tsx | 0 .../components/drawers/AppDrawer.tsx | 86 +++------------- 8 files changed, 138 insertions(+), 75 deletions(-) create mode 100644 src/apps/dashboard/components/drawer/AppDrawer.tsx rename src/apps/{experimental/components/drawers/dashboard => dashboard/components/drawer/sections}/AdvancedDrawerSection.tsx (100%) rename src/apps/{experimental/components/drawers/dashboard => dashboard/components/drawer/sections}/DevicesDrawerSection.tsx (100%) rename src/apps/{experimental/components/drawers/dashboard => dashboard/components/drawer/sections}/LiveTvDrawerSection.tsx (100%) rename src/apps/{experimental/components/drawers/dashboard => dashboard/components/drawer/sections}/PluginDrawerSection.tsx (100%) rename src/apps/{experimental/components/drawers/dashboard => dashboard/components/drawer/sections}/ServerDrawerSection.tsx (100%) diff --git a/src/apps/dashboard/AppLayout.tsx b/src/apps/dashboard/AppLayout.tsx index 19fe09e1ba..7afe655a3d 100644 --- a/src/apps/dashboard/AppLayout.tsx +++ b/src/apps/dashboard/AppLayout.tsx @@ -1,15 +1,103 @@ -import React from 'react'; -import { Outlet } from 'react-router-dom'; +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; +import { useTheme } from '@mui/material/styles'; +import React, { useCallback, useEffect, useState } from 'react'; +import { Outlet, useLocation } from 'react-router-dom'; 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 AppDrawer from './components/drawer/AppDrawer'; + +// FIXME: Remove main app override styles import '../experimental/AppOverrides.scss'; +import AppToolbar from 'components/toolbar/AppToolbar'; + +interface DashboardAppSettings { + isDrawerPinned: boolean +} + +const DEFAULT_APP_SETTINGS: DashboardAppSettings = { + isDrawerPinned: false +}; const AppLayout = () => { + const [ appSettings, setAppSettings ] = useLocalStorage('DashboardAppSettings', DEFAULT_APP_SETTINGS); + const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned); + const location = useLocation(); + const theme = useTheme(); + const { user } = useApi(); + + // FIXME: Use const for metadata editor + const isDrawerAvailable = !location.pathname.startsWith('/metadata'); + const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user); + + useEffect(() => { + if (isDrawerActive !== appSettings.isDrawerPinned) { + setAppSettings({ + ...appSettings, + isDrawerPinned: isDrawerActive + }); + } + }, [ appSettings, isDrawerActive, setAppSettings ]); + + const onToggleDrawer = useCallback(() => { + setIsDrawerActive(!isDrawerActive); + }, [ isDrawerActive, setIsDrawerActive ]); + return ( - - - + + + muiTheme.zIndex.drawer + 1 }} + > + + + + + + + + + + + + ); }; diff --git a/src/apps/dashboard/components/drawer/AppDrawer.tsx b/src/apps/dashboard/components/drawer/AppDrawer.tsx new file mode 100644 index 0000000000..7b1e180123 --- /dev/null +++ b/src/apps/dashboard/components/drawer/AppDrawer.tsx @@ -0,0 +1,29 @@ +import React, { FC } from 'react'; + +import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer'; + +import ServerDrawerSection from './sections/ServerDrawerSection'; +import DevicesDrawerSection from './sections/DevicesDrawerSection'; +import LiveTvDrawerSection from './sections/LiveTvDrawerSection'; +import AdvancedDrawerSection from './sections/AdvancedDrawerSection'; +import PluginDrawerSection from './sections/PluginDrawerSection'; + +const AppDrawer: FC = ({ + open = false, + onClose, + onOpen +}) => ( + + + + + + + +); + +export default AppDrawer; diff --git a/src/apps/experimental/components/drawers/dashboard/AdvancedDrawerSection.tsx b/src/apps/dashboard/components/drawer/sections/AdvancedDrawerSection.tsx similarity index 100% rename from src/apps/experimental/components/drawers/dashboard/AdvancedDrawerSection.tsx rename to src/apps/dashboard/components/drawer/sections/AdvancedDrawerSection.tsx diff --git a/src/apps/experimental/components/drawers/dashboard/DevicesDrawerSection.tsx b/src/apps/dashboard/components/drawer/sections/DevicesDrawerSection.tsx similarity index 100% rename from src/apps/experimental/components/drawers/dashboard/DevicesDrawerSection.tsx rename to src/apps/dashboard/components/drawer/sections/DevicesDrawerSection.tsx diff --git a/src/apps/experimental/components/drawers/dashboard/LiveTvDrawerSection.tsx b/src/apps/dashboard/components/drawer/sections/LiveTvDrawerSection.tsx similarity index 100% rename from src/apps/experimental/components/drawers/dashboard/LiveTvDrawerSection.tsx rename to src/apps/dashboard/components/drawer/sections/LiveTvDrawerSection.tsx diff --git a/src/apps/experimental/components/drawers/dashboard/PluginDrawerSection.tsx b/src/apps/dashboard/components/drawer/sections/PluginDrawerSection.tsx similarity index 100% rename from src/apps/experimental/components/drawers/dashboard/PluginDrawerSection.tsx rename to src/apps/dashboard/components/drawer/sections/PluginDrawerSection.tsx diff --git a/src/apps/experimental/components/drawers/dashboard/ServerDrawerSection.tsx b/src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx similarity index 100% rename from src/apps/experimental/components/drawers/dashboard/ServerDrawerSection.tsx rename to src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx diff --git a/src/apps/experimental/components/drawers/AppDrawer.tsx b/src/apps/experimental/components/drawers/AppDrawer.tsx index dc48221b8c..f03a591675 100644 --- a/src/apps/experimental/components/drawers/AppDrawer.tsx +++ b/src/apps/experimental/components/drawers/AppDrawer.tsx @@ -1,23 +1,15 @@ import React, { FC } from 'react'; -import { Route, Routes, useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer'; import { ASYNC_USER_ROUTES } from '../../routes/asyncRoutes'; import { LEGACY_USER_ROUTES } from '../../routes/legacyRoutes'; -import AdvancedDrawerSection from './dashboard/AdvancedDrawerSection'; -import DevicesDrawerSection from './dashboard/DevicesDrawerSection'; -import LiveTvDrawerSection from './dashboard/LiveTvDrawerSection'; -import PluginDrawerSection from './dashboard/PluginDrawerSection'; -import ServerDrawerSection from './dashboard/ServerDrawerSection'; import MainDrawerContent from './MainDrawerContent'; import { isTabPath } from '../tabs/tabRoutes'; -export const DRAWER_WIDTH = 240; - const DRAWERLESS_ROUTES = [ - 'metadata', // metadata manager 'video' // video player ]; @@ -26,75 +18,29 @@ const MAIN_DRAWER_ROUTES = [ ...LEGACY_USER_ROUTES ].filter(route => !DRAWERLESS_ROUTES.includes(route.path)); -const ADMIN_DRAWER_ROUTES = [ - { path: '/configurationpage' } // Plugin configuration page -].filter(route => !DRAWERLESS_ROUTES.includes(route.path)); - /** Utility function to check if a path has a drawer. */ export const isDrawerPath = (path: string) => ( MAIN_DRAWER_ROUTES.some(route => route.path === path || `/${route.path}` === path) - || ADMIN_DRAWER_ROUTES.some(route => route.path === path || `/${route.path}` === path) ); -const Drawer: FC = ({ children, ...props }) => { - const location = useLocation(); - const hasSecondaryToolBar = isTabPath(location.pathname); - - return ( - - {children} - - ); -}; - const AppDrawer: FC = ({ open = false, onClose, onOpen -}) => ( - - { - MAIN_DRAWER_ROUTES.map(route => ( - - - - } - /> - )) - } - { - ADMIN_DRAWER_ROUTES.map(route => ( - - - - - - - - } - /> - )) - } - -); +}) => { + const location = useLocation(); + const hasSecondaryToolBar = isTabPath(location.pathname); + + return ( + + + + ); +}; export default AppDrawer;