import React from 'react'; import { makeStyles, withStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import IconButton from '@material-ui/core/IconButton'; import Divider from '@material-ui/core/Divider'; import InboxIcon from '@material-ui/icons/Inbox'; import DeleteIcon from '@material-ui/icons/Delete'; import MuiAccordion from '@material-ui/core/Accordion'; import MuiAccordionSummary from '@material-ui/core/AccordionSummary'; import MuiAccordionDetails from '@material-ui/core/AccordionDetails'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import Frame from './Frame'; import Alerts from './Alerts'; import { Close, RemoveGuest } from '../methods'; const Accordion = withStyles({ root: { '&:before': { display: 'none', }, '&$expanded': { margin: 'auto', }, }, expanded: {}, })(MuiAccordion); const AccordionSummary = withStyles(theme => ({ root: { padding: theme.spacing(2.5, 2.5, 0), '&$expanded': { minHeight: 0, }, }, content: { '&$expanded': { margin: '12px 0', }, }, expanded: {}, }))(MuiAccordionSummary); const AccordionDetails = withStyles({ root: { padding: 0, }, })(MuiAccordionDetails); const useStyles = makeStyles(theme => ({ title: { ...theme.typography.subtitle2, padding: theme.spacing(4, 2.5, 1.5), fontSize: theme.typography.pxToRem(13), }, expandTitle: { ...theme.typography.subtitle2, fontSize: theme.typography.pxToRem(13), }, pre: { margin: 0, padding: theme.spacing(0, 2, 2), }, })); function Host({ appState }) { const classes = useStyles(); return ( <Frame onClick={() => ipcRenderer.send(Close)} primary="Host"> <Alerts appState={appState} /> <Typography className={classes.title}>Connected Users</Typography> <List> {appState.connections.map((conn, i) => ( <React.Fragment key={conn.key}> {!!i && <Divider />} <ListItem> <ListItemIcon> <InboxIcon /> </ListItemIcon> <ListItemText primary={conn.remoteAddress} /> <ListItemSecondaryAction> <IconButton edge="end" aria-label="delete" onClick={() => ipcRenderer.send(RemoveGuest, conn.key)} > <DeleteIcon /> </IconButton> </ListItemSecondaryAction> </ListItem> </React.Fragment> ))} </List> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />}> <Typography className={classes.expandTitle}>Log</Typography> </AccordionSummary> <AccordionDetails> <pre className={classes.pre}> <code>{appState.state.join('\n')}</code> </pre> </AccordionDetails> </Accordion> </Frame> ); } export default Host;