2019-03-26 02:37:02 +01:00
|
|
|
import React, { Component } from 'react';
|
2019-03-27 01:35:30 +01:00
|
|
|
import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItem, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, withStyles } from '@material-ui/core';
|
2019-03-26 02:37:02 +01:00
|
|
|
import MenuIcon from '@material-ui/icons/Menu';
|
|
|
|
import SearchIcon from '@material-ui/icons/Search';
|
|
|
|
import NotificationsIcon from '@material-ui/icons/Notifications';
|
|
|
|
import MailIcon from '@material-ui/icons/Mail';
|
|
|
|
import HomeIcon from '@material-ui/icons/Home';
|
|
|
|
import DomainIcon from '@material-ui/icons/Domain';
|
|
|
|
import PublicIcon from '@material-ui/icons/Public';
|
|
|
|
import GroupIcon from '@material-ui/icons/Group';
|
|
|
|
import SettingsIcon from '@material-ui/icons/Settings';
|
|
|
|
import InfoIcon from '@material-ui/icons/Info';
|
|
|
|
import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
|
|
|
|
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
|
|
|
|
import {styles} from './AppLayout.styles';
|
2019-03-27 01:35:30 +01:00
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { ListItemProps } from '@material-ui/core/ListItem';
|
2019-03-28 00:24:52 +01:00
|
|
|
import { getCurrentUserData } from '../../utilities/accounts';
|
|
|
|
import { UAccount } from '../../types/Account';
|
2019-03-26 02:37:02 +01:00
|
|
|
|
|
|
|
interface IAppLayoutState {
|
|
|
|
drawerOpenOnMobile: boolean;
|
2019-03-28 00:24:52 +01:00
|
|
|
currentUser: UAccount;
|
2019-03-26 02:37:02 +01:00
|
|
|
}
|
|
|
|
|
2019-03-27 01:35:30 +01:00
|
|
|
interface ILinkableListItemProps extends ListItemProps {
|
|
|
|
to: string;
|
|
|
|
replace?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
const LinkableListItem = (props: ILinkableListItemProps) => (
|
|
|
|
<ListItem {...props} component={Link as any}/>
|
|
|
|
)
|
|
|
|
|
2019-03-26 02:37:02 +01:00
|
|
|
export class AppLayout extends Component<any, IAppLayoutState> {
|
|
|
|
constructor(props: any) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
2019-03-28 00:24:52 +01:00
|
|
|
drawerOpenOnMobile: false,
|
|
|
|
currentUser: getCurrentUserData()
|
2019-03-26 02:37:02 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleDrawerOnMobile() {
|
|
|
|
this.setState({
|
|
|
|
drawerOpenOnMobile: !this.state.drawerOpenOnMobile
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
titlebar() {
|
|
|
|
const { classes } = this.props;
|
|
|
|
if (process.env.NODE_ENV === "development") {
|
|
|
|
return (
|
|
|
|
<div className={classes.titleBarRoot}>
|
|
|
|
<Typography className={classes.titleBarText}>Careful: you're running Hyperspace in developer mode.</Typography>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else if ((navigator.userAgent.includes("Hyperspace") || navigator.userAgent.includes("Electron")) && navigator.userAgent.includes("Macintosh")) {
|
|
|
|
return (
|
|
|
|
<div className={classes.titleBarRoot}>
|
|
|
|
<Typography className={classes.titleBarText}>Hyperspace</Typography>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
appDrawer() {
|
|
|
|
const { classes } = this.props;
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<List>
|
|
|
|
<div className={classes.drawerDisplayMobile}>
|
2019-03-27 01:35:30 +01:00
|
|
|
<LinkableListItem button key="profile-mobile" to="/profile">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemAvatar>
|
2019-03-28 00:24:52 +01:00
|
|
|
<Avatar alt="You" src={this.state.currentUser.avatar_static}/>
|
2019-03-26 02:37:02 +01:00
|
|
|
</ListItemAvatar>
|
2019-03-28 00:24:52 +01:00
|
|
|
<ListItemText primary={this.state.currentUser.display_name} secondary={this.state.currentUser.acct}/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
|
|
|
<LinkableListItem button key="notifications-mobile" to="/notifications">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><NotificationsIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Notifications"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
|
|
|
<LinkableListItem button key="messages-mobile" to="/messages">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><MailIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Messages"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
|
|
|
<LinkableListItem button key="acctSwitch-module" to="/switchacct">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><SupervisedUserCircleIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Switch account"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
|
|
|
<LinkableListItem button key="acctLogout-mobile" to="/logout">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><ExitToAppIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Log out"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
2019-03-26 02:37:02 +01:00
|
|
|
<Divider/>
|
|
|
|
</div>
|
|
|
|
<ListSubheader>Timelines</ListSubheader>
|
2019-03-27 01:35:30 +01:00
|
|
|
<LinkableListItem button key="home" to="/home">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><HomeIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Home"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
|
|
|
<LinkableListItem button key="local" to="/local">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><DomainIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Local"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
|
|
|
<LinkableListItem button key="public" to="/public">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><PublicIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Public"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
2019-03-26 02:37:02 +01:00
|
|
|
<Divider/>
|
|
|
|
<ListSubheader>More</ListSubheader>
|
2019-03-27 01:35:30 +01:00
|
|
|
<LinkableListItem button key="recommended" to="/recommended">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><GroupIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Who to follow"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
|
|
|
<LinkableListItem button key="settings" to="/settings">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><SettingsIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="Settings"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
|
|
|
<LinkableListItem button key="info" to="/about">
|
2019-03-26 02:37:02 +01:00
|
|
|
<ListItemIcon><InfoIcon/></ListItemIcon>
|
|
|
|
<ListItemText primary="About"/>
|
2019-03-27 01:35:30 +01:00
|
|
|
</LinkableListItem>
|
2019-03-26 02:37:02 +01:00
|
|
|
</List>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { classes } = this.props;
|
|
|
|
return (
|
|
|
|
<div className={classes.root}>
|
|
|
|
<div className={classes.stickyArea}>
|
|
|
|
{this.titlebar()}
|
|
|
|
<AppBar className={classes.appBar} position="static">
|
|
|
|
<Toolbar>
|
|
|
|
<IconButton
|
|
|
|
className={classes.appBarMenuButton}
|
|
|
|
color="inherit"
|
|
|
|
aria-label="Open drawer"
|
|
|
|
onClick={this.toggleDrawerOnMobile}
|
|
|
|
>
|
|
|
|
<MenuIcon/>
|
|
|
|
</IconButton>
|
|
|
|
<Typography className={classes.appBarTitle} variant="h6" color="inherit" noWrap>
|
|
|
|
Hyperspace
|
|
|
|
</Typography>
|
|
|
|
<div className={classes.appBarFlexGrow}/>
|
|
|
|
<div className={classes.appBarSearch}>
|
|
|
|
<div className={classes.appBarSearchIcon}>
|
|
|
|
<SearchIcon/>
|
|
|
|
</div>
|
|
|
|
<InputBase
|
|
|
|
placeholder="Search..."
|
|
|
|
classes={{
|
|
|
|
root: classes.appBarSearchInputRoot,
|
|
|
|
input: classes.appBarSearchInputInput
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className={classes.appBarFlexGrow}/>
|
|
|
|
<div className={classes.appBarActionButtons}>
|
|
|
|
<IconButton color="inherit">
|
|
|
|
<NotificationsIcon/>
|
|
|
|
</IconButton>
|
|
|
|
<IconButton color="inherit">
|
|
|
|
<MailIcon/>
|
|
|
|
</IconButton>
|
|
|
|
<IconButton>
|
2019-03-28 00:24:52 +01:00
|
|
|
<Avatar className={classes.appBarAcctMenuIcon} alt="You" src={this.state.currentUser.avatar_static}/>
|
2019-03-26 02:37:02 +01:00
|
|
|
</IconButton>
|
|
|
|
</div>
|
|
|
|
</Toolbar>
|
|
|
|
</AppBar>
|
|
|
|
<nav className={classes.drawer}>
|
|
|
|
<Hidden mdUp implementation="css">
|
|
|
|
<Drawer
|
|
|
|
container={this.props.container}
|
|
|
|
variant="temporary"
|
|
|
|
anchor={'left'}
|
|
|
|
open={this.state.drawerOpenOnMobile}
|
|
|
|
onClose={this.toggleDrawerOnMobile}
|
|
|
|
classes={{ paper: classes.drawerPaper }}
|
|
|
|
>
|
|
|
|
{this.appDrawer()}
|
|
|
|
</Drawer>
|
|
|
|
</Hidden>
|
|
|
|
<Hidden smDown implementation="css">
|
|
|
|
<Drawer
|
|
|
|
classes={{
|
|
|
|
paper: this.titlebar()? classes.drawerPaperWithTitleAndAppBar: classes.drawerPaperWithAppBar
|
|
|
|
}}
|
|
|
|
variant="permanent"
|
|
|
|
open
|
|
|
|
>
|
|
|
|
{this.appDrawer()}
|
|
|
|
</Drawer>
|
|
|
|
</Hidden>
|
|
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default withStyles(styles)(AppLayout);
|