416 lines
18 KiB
TypeScript
416 lines
18 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, withStyles, Menu, MenuItem, ClickAwayListener, Badge, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, ListItem, Tooltip } from '@material-ui/core';
|
|
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 CreateIcon from '@material-ui/icons/Create';
|
|
//import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
|
|
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
|
|
import {styles} from './AppLayout.styles';
|
|
import { UAccount } from '../../types/Account';
|
|
import {LinkableListItem, LinkableIconButton, LinkableFab} from '../../interfaces/overrides';
|
|
import Mastodon from 'megalodon';
|
|
import { Notification } from '../../types/Notification';
|
|
import {sendNotificationRequest} from '../../utilities/notifications';
|
|
import {withSnackbar} from 'notistack';
|
|
import { getConfig, getUserDefaultBool } from '../../utilities/settings';
|
|
import { isDesktopApp, isDarwinApp } from '../../utilities/desktop';
|
|
import { Config } from '../../types/Config';
|
|
|
|
interface IAppLayoutState {
|
|
acctMenuOpen: boolean;
|
|
drawerOpenOnMobile: boolean;
|
|
currentUser?: UAccount;
|
|
notificationCount: number;
|
|
logOutOpen: boolean;
|
|
enableFederation?: boolean;
|
|
brandName?: string;
|
|
developerMode?: boolean;
|
|
}
|
|
|
|
export class AppLayout extends Component<any, IAppLayoutState> {
|
|
|
|
client: Mastodon;
|
|
streamListener: any;
|
|
|
|
constructor(props: any) {
|
|
super(props);
|
|
|
|
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1");
|
|
|
|
this.state = {
|
|
drawerOpenOnMobile: false,
|
|
acctMenuOpen: false,
|
|
notificationCount: 0,
|
|
logOutOpen: false
|
|
}
|
|
|
|
this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this);
|
|
this.toggleAcctMenu = this.toggleAcctMenu.bind(this);
|
|
this.clearBadge = this.clearBadge.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
let acct = localStorage.getItem('account');
|
|
if (acct) {
|
|
this.setState({ currentUser: JSON.parse(acct) });
|
|
} else {
|
|
this.client.get('/accounts/verify_credentials').then((resp: any) => {
|
|
let data: UAccount = resp.data;
|
|
this.setState({ currentUser: data });
|
|
}).catch((err: Error) => {
|
|
this.props.enqueueSnackbar("Couldn't find profile info: " + err.name);
|
|
console.error(err.message);
|
|
})
|
|
}
|
|
|
|
getConfig().then((result: any) => {
|
|
if (result !== undefined) {
|
|
let config: Config = result;
|
|
this.setState({
|
|
enableFederation: config.federation.enablePublicTimeline,
|
|
brandName: config.branding? config.branding.name: "Hyperspace",
|
|
developerMode: config.developer
|
|
});
|
|
}
|
|
})
|
|
|
|
this.streamNotifications()
|
|
|
|
}
|
|
|
|
streamNotifications() {
|
|
this.streamListener = this.client.stream('/streaming/user');
|
|
|
|
if (getUserDefaultBool('displayAllOnNotificationBadge')) {
|
|
this.client.get('/notifications').then((resp: any) => {
|
|
let notifArray = resp.data;
|
|
this.setState({ notificationCount: notifArray.length });
|
|
})
|
|
}
|
|
|
|
this.streamListener.on('notification', (notif: Notification) => {
|
|
const notificationCount = this.state.notificationCount + 1;
|
|
this.setState({ notificationCount });
|
|
if (!document.hasFocus()) {
|
|
let primaryMessage = "";
|
|
let secondaryMessage = "";
|
|
|
|
switch(notif.type) {
|
|
case "favourite":
|
|
primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " favorited your post.";
|
|
if (notif.status) {
|
|
const div = document.createElement('div');
|
|
div.innerHTML = notif.status.content;
|
|
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
|
}
|
|
break;
|
|
case "follow":
|
|
primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " is now following you.";
|
|
break;
|
|
case "mention":
|
|
primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " mentioned you in a post.";
|
|
if (notif.status) {
|
|
const div = document.createElement('div');
|
|
div.innerHTML = notif.status.content;
|
|
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
|
}
|
|
break;
|
|
case "reblog":
|
|
primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " reblogged your post.";
|
|
if (notif.status) {
|
|
const div = document.createElement('div');
|
|
div.innerHTML = notif.status.content;
|
|
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
|
}
|
|
break;
|
|
}
|
|
|
|
sendNotificationRequest(primaryMessage, secondaryMessage);
|
|
}
|
|
});
|
|
}
|
|
|
|
toggleAcctMenu() {
|
|
this.setState({ acctMenuOpen: !this.state.acctMenuOpen });
|
|
}
|
|
|
|
toggleDrawerOnMobile() {
|
|
this.setState({
|
|
drawerOpenOnMobile: !this.state.drawerOpenOnMobile
|
|
})
|
|
}
|
|
|
|
toggleLogOutDialog() {
|
|
this.setState({ logOutOpen: !this.state.logOutOpen });
|
|
}
|
|
|
|
searchForQuery(what: string) {
|
|
window.location.href = isDesktopApp()? "hyperspace://hyperspace/app/index.html#/search?query=" + what: "/#/search?query=" + what;
|
|
window.location.reload;
|
|
}
|
|
|
|
logOutAndRestart() {
|
|
let loginData = localStorage.getItem("login");
|
|
if (loginData) {
|
|
let items = ["login", "account", "baseurl", "access_token"];
|
|
items.forEach((entry) => {
|
|
localStorage.removeItem(entry);
|
|
})
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
clearBadge() {
|
|
if (!getUserDefaultBool('displayAllOnNotificationBadge')) {
|
|
this.setState({ notificationCount: 0 });
|
|
}
|
|
}
|
|
|
|
titlebar() {
|
|
const { classes } = this.props;
|
|
if (isDarwinApp()) {
|
|
return (
|
|
<div className={classes.titleBarRoot}>
|
|
<Typography className={classes.titleBarText}>{this.state.brandName? this.state.brandName: "Hyperspace"} {this.state.developerMode? "(beta)": null}</Typography>
|
|
</div>
|
|
);
|
|
} else if (this.state.developerMode || process.env.NODE_ENV === "development") {
|
|
return (
|
|
<div className={classes.titleBarRoot}>
|
|
<Typography className={classes.titleBarText}>Careful: you're running in developer mode.</Typography>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
appDrawer() {
|
|
const { classes } = this.props;
|
|
return (
|
|
<div>
|
|
<List>
|
|
<div className={classes.drawerDisplayMobile}>
|
|
<LinkableListItem button key="profile-mobile" to={`/profile/${this.state.currentUser? this.state.currentUser.id: "1"}`}>
|
|
<ListItemAvatar>
|
|
<Avatar alt="You" src={this.state.currentUser? this.state.currentUser.avatar_static: ""}/>
|
|
</ListItemAvatar>
|
|
<ListItemText primary={this.state.currentUser? (this.state.currentUser.display_name || this.state.currentUser.acct): "Loading..."} secondary={this.state.currentUser? this.state.currentUser.acct: "Loading..."}/>
|
|
</LinkableListItem>
|
|
{/* <LinkableListItem button key="acctSwitch-module" to="/switchacct">
|
|
<ListItemIcon><SupervisedUserCircleIcon/></ListItemIcon>
|
|
<ListItemText primary="Switch account"/>
|
|
</LinkableListItem> */}
|
|
<ListItem button key="acctLogout-mobile" onClick={() => this.toggleLogOutDialog()}>
|
|
<ListItemIcon><ExitToAppIcon/></ListItemIcon>
|
|
<ListItemText primary="Log out"/>
|
|
</ListItem>
|
|
<Divider/>
|
|
</div>
|
|
<ListSubheader>Timelines</ListSubheader>
|
|
<LinkableListItem button key="home" to="/home">
|
|
<ListItemIcon><HomeIcon/></ListItemIcon>
|
|
<ListItemText primary="Home"/>
|
|
</LinkableListItem>
|
|
<LinkableListItem button key="local" to="/local">
|
|
<ListItemIcon><DomainIcon/></ListItemIcon>
|
|
<ListItemText primary="Local"/>
|
|
</LinkableListItem>
|
|
{
|
|
this.state.enableFederation?
|
|
<LinkableListItem button key="public" to="/public">
|
|
<ListItemIcon><PublicIcon/></ListItemIcon>
|
|
<ListItemText primary="Public"/>
|
|
</LinkableListItem>:
|
|
<ListItem disabled>
|
|
<ListItemIcon><PublicIcon/></ListItemIcon>
|
|
<ListItemText primary="Public" secondary="Disabled by admin"/>
|
|
</ListItem>
|
|
}
|
|
<Divider/>
|
|
<div className={classes.drawerDisplayMobile}>
|
|
<ListSubheader>Account</ListSubheader>
|
|
<LinkableListItem button key="notifications-mobile" to="/notifications">
|
|
<ListItemIcon>
|
|
<Badge badgeContent={this.state.notificationCount > 0? this.state.notificationCount: ""} color="secondary">
|
|
<NotificationsIcon />
|
|
</Badge>
|
|
</ListItemIcon>
|
|
<ListItemText primary="Notifications"/>
|
|
</LinkableListItem>
|
|
<LinkableListItem button key="messages-mobile" to="/messages">
|
|
<ListItemIcon><MailIcon/></ListItemIcon>
|
|
<ListItemText primary="Messages"/>
|
|
</LinkableListItem>
|
|
<Divider/>
|
|
</div>
|
|
<ListSubheader>More</ListSubheader>
|
|
<LinkableListItem button key="recommended" to="/recommended">
|
|
<ListItemIcon><GroupIcon/></ListItemIcon>
|
|
<ListItemText primary="Who to follow"/>
|
|
</LinkableListItem>
|
|
<LinkableListItem button key="settings" to="/settings">
|
|
<ListItemIcon><SettingsIcon/></ListItemIcon>
|
|
<ListItemText primary="Settings"/>
|
|
</LinkableListItem>
|
|
<LinkableListItem button key="info" to="/about">
|
|
<ListItemIcon><InfoIcon/></ListItemIcon>
|
|
<ListItemText primary="About"/>
|
|
</LinkableListItem>
|
|
</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>
|
|
{this.state.brandName? this.state.brandName: "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
|
|
}}
|
|
onKeyUp={(event) => {
|
|
if (event.keyCode === 13) {
|
|
this.searchForQuery(event.currentTarget.value);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={classes.appBarFlexGrow}/>
|
|
<div className={classes.appBarActionButtons}>
|
|
<Tooltip title="Notifications">
|
|
<LinkableIconButton color="inherit" to="/notifications" onClick={this.clearBadge}>
|
|
<Badge badgeContent={this.state.notificationCount > 0? this.state.notificationCount: ""} color="secondary">
|
|
<NotificationsIcon />
|
|
</Badge>
|
|
</LinkableIconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Direct messages">
|
|
<LinkableIconButton color="inherit" to="/messages">
|
|
<MailIcon/>
|
|
</LinkableIconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Your account">
|
|
<IconButton id="acctMenuBtn" onClick={this.toggleAcctMenu}>
|
|
<Avatar className={classes.appBarAcctMenuIcon} alt="You" src={this.state.currentUser? this.state.currentUser.avatar_static: ""}/>
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
<Menu
|
|
id="acct-menu"
|
|
anchorEl={document.getElementById("acctMenuBtn")}
|
|
open={this.state.acctMenuOpen}
|
|
className={classes.acctMenu}
|
|
>
|
|
<ClickAwayListener onClickAway={this.toggleAcctMenu}>
|
|
<div>
|
|
<LinkableListItem to={`/profile/${this.state.currentUser? this.state.currentUser.id: "1"}`}>
|
|
<ListItemAvatar>
|
|
<Avatar alt="You" src={this.state.currentUser? this.state.currentUser.avatar_static: ""}/>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
primary={this.state.currentUser? (this.state.currentUser.display_name || this.state.currentUser.acct): "Loading..."}
|
|
secondary={'@' + (this.state.currentUser? this.state.currentUser.acct: "Loading...")}
|
|
/>
|
|
</LinkableListItem>
|
|
<Divider/>
|
|
<LinkableListItem to={"/you"}>
|
|
<ListItemText>Edit profile</ListItemText>
|
|
</LinkableListItem>
|
|
{/* <MenuItem>Switch account</MenuItem> */}
|
|
<MenuItem onClick={() => this.toggleLogOutDialog()}>Log out</MenuItem>
|
|
</div>
|
|
</ClickAwayListener>
|
|
</Menu>
|
|
</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>
|
|
<Dialog
|
|
open={this.state.logOutOpen}
|
|
onClose={() => this.toggleLogOutDialog()}
|
|
>
|
|
<DialogTitle id="alert-dialog-title">Log out of {this.state.brandName? this.state.brandName: "Hyperspace"}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText id="alert-dialog-description">
|
|
You'll need to remove {this.state.brandName? this.state.brandName: "Hyperspace"} from your list of authorized apps and log in again if you want to use {this.state.brandName? this.state.brandName: "Hyperspace"}.
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => this.toggleLogOutDialog()} color="primary" autoFocus>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={() => {
|
|
this.logOutAndRestart();
|
|
}} color="primary">
|
|
Log out
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
<Tooltip title="Create a new post">
|
|
<LinkableFab to="/compose" className={classes.composeButton} color="secondary" aria-label="Compose">
|
|
<CreateIcon/>
|
|
</LinkableFab>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(withSnackbar(AppLayout));
|