128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { useShallowEqualSelector } from '../utils';
|
|
import { actions as appActions } from '../redux/app-feature';
|
|
|
|
import CssBaseline from '@material-ui/core/CssBaseline';
|
|
import Backdrop from '@material-ui/core/Backdrop';
|
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
|
import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
|
|
|
|
import { Welcome } from './welcome';
|
|
import { Main } from './main';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import Link from '@material-ui/core/Link';
|
|
import Box from '@material-ui/core/Box';
|
|
import Brightness2Icon from '@material-ui/icons/Brightness2';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
layout: {
|
|
width: 'auto',
|
|
height: '100%',
|
|
[theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
|
|
width: 600,
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
},
|
|
},
|
|
|
|
paper: {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: theme.spacing(2),
|
|
height: '100%',
|
|
[theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
|
|
marginTop: theme.spacing(6),
|
|
marginBottom: theme.spacing(6),
|
|
padding: theme.spacing(3),
|
|
height: 600,
|
|
},
|
|
},
|
|
copyright: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
},
|
|
backdrop: {
|
|
zIndex: theme.zIndex.drawer + 1,
|
|
color: '#fff',
|
|
},
|
|
minidiscLogo: {
|
|
width: 48,
|
|
},
|
|
}));
|
|
|
|
const darkTheme = createMuiTheme({
|
|
palette: {
|
|
type: 'dark',
|
|
primary: {
|
|
light: '#6ec6ff',
|
|
main: '#2196f3',
|
|
dark: '#0069c0',
|
|
contrastText: '#fff',
|
|
},
|
|
},
|
|
});
|
|
|
|
const lightTheme = createMuiTheme({
|
|
palette: {
|
|
type: 'light',
|
|
},
|
|
});
|
|
|
|
const App = () => {
|
|
const classes = useStyles();
|
|
|
|
const dispatch = useDispatch();
|
|
let { mainView, loading, darkMode } = useShallowEqualSelector(state => state.appState);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
|
|
<CssBaseline />
|
|
|
|
<main className={classes.layout}>
|
|
<Paper className={classes.paper}>
|
|
{mainView === 'WELCOME' ? <Welcome /> : null}
|
|
{mainView === 'MAIN' ? <Main /> : null}
|
|
|
|
<Box className={classes.copyright}>
|
|
<IconButton onClick={() => dispatch(appActions.setDarkMode(!darkMode))}>
|
|
<Brightness2Icon color={darkMode ? 'secondary' : undefined} />
|
|
</IconButton>
|
|
<Typography variant="body2" color="textSecondary" style={{ marginRight: `8px` }}>
|
|
{'© '}
|
|
<Link rel="noopener noreferrer" color="inherit" target="_blank" href="https://stefano.brilli.me/">
|
|
Stefano Brilli
|
|
</Link>{' '}
|
|
{new Date().getFullYear()}
|
|
{'.'}
|
|
</Typography>
|
|
<Link
|
|
rel="noopener noreferrer"
|
|
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
|
|
className="twitter-share-button"
|
|
data-via="thecybercase"
|
|
data-hashtags="MiniDisc"
|
|
data-dnt="true"
|
|
data-show-count="false"
|
|
>
|
|
Tweet
|
|
</Link>
|
|
<Box style={{ flex: '1 1 auto' }}></Box>
|
|
</Box>
|
|
</Paper>
|
|
</main>
|
|
|
|
<Backdrop className={classes.backdrop} open={loading}>
|
|
<CircularProgress color="inherit" />
|
|
</Backdrop>
|
|
</ThemeProvider>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
export default App;
|