migrated from redux to recoil
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
import { ThemeProvider } from '@emotion/react'
|
||||
import ChevronLeft from '@mui/icons-material/ChevronLeft'
|
||||
import Dashboard from '@mui/icons-material/Dashboard'
|
||||
import DownloadIcon from '@mui/icons-material/Download'
|
||||
import Menu from '@mui/icons-material/Menu'
|
||||
import SettingsIcon from '@mui/icons-material/Settings'
|
||||
import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
|
||||
import Storage from '@mui/icons-material/Storage'
|
||||
import { Box, createTheme } from '@mui/material'
|
||||
import DownloadIcon from '@mui/icons-material/Download'
|
||||
import CssBaseline from '@mui/material/CssBaseline'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import IconButton from '@mui/material/IconButton'
|
||||
@@ -18,23 +18,23 @@ import Toolbar from '@mui/material/Toolbar'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import { grey } from '@mui/material/colors'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { Link, Outlet } from 'react-router-dom'
|
||||
import { RootState } from './stores/store'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { settingsState } from './atoms/settings'
|
||||
import { statusState } from './atoms/status'
|
||||
import AppBar from './components/AppBar'
|
||||
import Drawer from './components/Drawer'
|
||||
import Logout from './components/Logout'
|
||||
import ThemeToggler from './components/ThemeToggler'
|
||||
import Toaster from './providers/ToasterProvider'
|
||||
import I18nProvider from './providers/i18nProvider'
|
||||
import RPCClientProvider from './providers/rpcClientProvider'
|
||||
import { formatGiB } from './utils'
|
||||
import SocketSubscriber from './components/SocketSubscriber'
|
||||
|
||||
export default function Layout() {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const settings = useSelector((state: RootState) => state.settings)
|
||||
const status = useSelector((state: RootState) => state.status)
|
||||
const settings = useRecoilValue(settingsState)
|
||||
const status = useRecoilValue(statusState)
|
||||
|
||||
const mode = settings.theme
|
||||
const theme = useMemo(() =>
|
||||
@@ -54,132 +54,130 @@ export default function Layout() {
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<I18nProvider>
|
||||
<RPCClientProvider>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<CssBaseline />
|
||||
<AppBar position="absolute" open={open}>
|
||||
<Toolbar sx={{ pr: '24px' }}>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={toggleDrawer}
|
||||
sx={{
|
||||
marginRight: '36px',
|
||||
...(open && { display: 'none' }),
|
||||
}}
|
||||
>
|
||||
<Menu />
|
||||
</IconButton>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h6"
|
||||
color="inherit"
|
||||
noWrap
|
||||
sx={{ flexGrow: 1 }}
|
||||
>
|
||||
yt-dlp WebUI
|
||||
</Typography>
|
||||
{
|
||||
status.freeSpace ?
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
}}>
|
||||
<Storage />
|
||||
<span>
|
||||
{formatGiB(status.freeSpace)}
|
||||
</span>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
}}>
|
||||
<SettingsEthernet />
|
||||
<span>
|
||||
{status.connected ? settings.serverAddr : 'not connected'}
|
||||
</span>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer variant="permanent" open={open}>
|
||||
<Toolbar
|
||||
<SocketSubscriber>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<CssBaseline />
|
||||
<AppBar position="absolute" open={open}>
|
||||
<Toolbar sx={{ pr: '24px' }}>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={toggleDrawer}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
px: [1],
|
||||
marginRight: '36px',
|
||||
...(open && { display: 'none' }),
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={toggleDrawer}>
|
||||
<ChevronLeft />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
<Divider />
|
||||
<List component="nav">
|
||||
<Link to={'/'} style={
|
||||
{
|
||||
textDecoration: 'none',
|
||||
color: mode === 'dark' ? '#ffffff' : '#000000DE'
|
||||
}
|
||||
}>
|
||||
<ListItemButton disabled={status.downloading}>
|
||||
<ListItemIcon>
|
||||
<Dashboard />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Home" />
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
<Link to={'/archive'} style={
|
||||
{
|
||||
textDecoration: 'none',
|
||||
color: mode === 'dark' ? '#ffffff' : '#000000DE'
|
||||
}
|
||||
}>
|
||||
<ListItemButton disabled={status.downloading}>
|
||||
<ListItemIcon>
|
||||
<DownloadIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Archive" />
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
<Link to={'/settings'} style={
|
||||
{
|
||||
textDecoration: 'none',
|
||||
color: mode === 'dark' ? '#ffffff' : '#000000DE'
|
||||
}
|
||||
}>
|
||||
<ListItemButton disabled={status.downloading}>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Settings" />
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
<ThemeToggler />
|
||||
<Logout />
|
||||
</List>
|
||||
</Drawer>
|
||||
<Box
|
||||
component="main"
|
||||
<Menu />
|
||||
</IconButton>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h6"
|
||||
color="inherit"
|
||||
noWrap
|
||||
sx={{ flexGrow: 1 }}
|
||||
>
|
||||
yt-dlp WebUI
|
||||
</Typography>
|
||||
{
|
||||
status.freeSpace ?
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
}}>
|
||||
<Storage />
|
||||
<span>
|
||||
{formatGiB(status.freeSpace)}
|
||||
</span>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
}}>
|
||||
<SettingsEthernet />
|
||||
<span>
|
||||
{status.connected ? settings.serverAddr : 'not connected'}
|
||||
</span>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer variant="permanent" open={open}>
|
||||
<Toolbar
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
height: '100vh',
|
||||
overflow: 'auto',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
px: [1],
|
||||
}}
|
||||
>
|
||||
<Toolbar />
|
||||
<Outlet />
|
||||
</Box>
|
||||
<IconButton onClick={toggleDrawer}>
|
||||
<ChevronLeft />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
<Divider />
|
||||
<List component="nav">
|
||||
<Link to={'/'} style={
|
||||
{
|
||||
textDecoration: 'none',
|
||||
color: mode === 'dark' ? '#ffffff' : '#000000DE'
|
||||
}
|
||||
}>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<Dashboard />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Home" />
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
<Link to={'/archive'} style={
|
||||
{
|
||||
textDecoration: 'none',
|
||||
color: mode === 'dark' ? '#ffffff' : '#000000DE'
|
||||
}
|
||||
}>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<DownloadIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Archive" />
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
<Link to={'/settings'} style={
|
||||
{
|
||||
textDecoration: 'none',
|
||||
color: mode === 'dark' ? '#ffffff' : '#000000DE'
|
||||
}
|
||||
}>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Settings" />
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
<ThemeToggler />
|
||||
<Logout />
|
||||
</List>
|
||||
</Drawer>
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
height: '100vh',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
>
|
||||
<Toolbar />
|
||||
<Outlet />
|
||||
</Box>
|
||||
<Toaster />
|
||||
</RPCClientProvider>
|
||||
</I18nProvider>
|
||||
</Box>
|
||||
<Toaster />
|
||||
</SocketSubscriber>
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user