Add Prettier to fix code styles
Signed-off-by: Marquis Kurt <software@marquiskurt.net>
This commit is contained in:
Marquis Kurt
parent
340156876d
commit
d92ed116f3
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"bracketSpacing": true,
|
||||
"tabWidth": 4
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "hyperspace",
|
||||
"version": "1.0.0-beta6",
|
||||
"version": "1.0.0-beta7",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
@ -17778,6 +17778,12 @@
|
|||
"integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
|
||||
"dev": true
|
||||
},
|
||||
"prettier": {
|
||||
"version": "1.18.2",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
|
||||
"integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
|
||||
"dev": true
|
||||
},
|
||||
"pretty-bytes": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
"megalodon": "^0.6.4",
|
||||
"moment": "^2.24.0",
|
||||
"notistack": "^0.5.1",
|
||||
"prettier": "1.18.2",
|
||||
"query-string": "^6.8.2",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
|
|
|
|||
|
|
@ -1,28 +1,60 @@
|
|||
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 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';
|
||||
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;
|
||||
|
|
@ -36,21 +68,23 @@ interface IAppLayoutState {
|
|||
}
|
||||
|
||||
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.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);
|
||||
|
|
@ -58,18 +92,22 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
let acct = localStorage.getItem('account');
|
||||
let acct = localStorage.getItem("account");
|
||||
if (acct) {
|
||||
this.setState({ currentUser: JSON.parse(acct) });
|
||||
} else {
|
||||
this.client.get('/accounts/verify_credentials').then((resp: any) => {
|
||||
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);
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
this.props.enqueueSnackbar(
|
||||
"Couldn't find profile info: " + err.name
|
||||
);
|
||||
console.error(err.message);
|
||||
});
|
||||
}
|
||||
|
||||
getConfig().then((result: any) => {
|
||||
|
|
@ -77,27 +115,28 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
let config: Config = result;
|
||||
this.setState({
|
||||
enableFederation: config.federation.enablePublicTimeline,
|
||||
brandName: config.branding? config.branding.name: "Hyperspace",
|
||||
brandName: config.branding
|
||||
? config.branding.name
|
||||
: "Hyperspace",
|
||||
developerMode: config.developer
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
this.streamNotifications()
|
||||
});
|
||||
|
||||
this.streamNotifications();
|
||||
}
|
||||
|
||||
streamNotifications() {
|
||||
this.streamListener = this.client.stream('/streaming/user');
|
||||
this.streamListener = this.client.stream("/streaming/user");
|
||||
|
||||
if (getUserDefaultBool('displayAllOnNotificationBadge')) {
|
||||
this.client.get('/notifications').then((resp: any) => {
|
||||
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) => {
|
||||
this.streamListener.on("notification", (notif: Notification) => {
|
||||
const notificationCount = this.state.notificationCount + 1;
|
||||
this.setState({ notificationCount });
|
||||
if (!document.hasFocus()) {
|
||||
|
|
@ -106,30 +145,54 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
|
||||
switch (notif.type) {
|
||||
case "favourite":
|
||||
primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " favorited your post.";
|
||||
primaryMessage =
|
||||
(notif.account.display_name ||
|
||||
"@" + notif.account.username) +
|
||||
" favorited your post.";
|
||||
if (notif.status) {
|
||||
const div = document.createElement('div');
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = notif.status.content;
|
||||
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
||||
secondaryMessage =
|
||||
(div.textContent || div.innerText || "").slice(
|
||||
0,
|
||||
100
|
||||
) + "...";
|
||||
}
|
||||
break;
|
||||
case "follow":
|
||||
primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " is now following you.";
|
||||
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.";
|
||||
primaryMessage =
|
||||
(notif.account.display_name ||
|
||||
"@" + notif.account.username) +
|
||||
" mentioned you in a post.";
|
||||
if (notif.status) {
|
||||
const div = document.createElement('div');
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = notif.status.content;
|
||||
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
||||
secondaryMessage =
|
||||
(div.textContent || div.innerText || "").slice(
|
||||
0,
|
||||
100
|
||||
) + "...";
|
||||
}
|
||||
break;
|
||||
case "reblog":
|
||||
primaryMessage = (notif.account.display_name || "@" + notif.account.username) + " reblogged your post.";
|
||||
primaryMessage =
|
||||
(notif.account.display_name ||
|
||||
"@" + notif.account.username) +
|
||||
" reblogged your post.";
|
||||
if (notif.status) {
|
||||
const div = document.createElement('div');
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = notif.status.content;
|
||||
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
||||
secondaryMessage =
|
||||
(div.textContent || div.innerText || "").slice(
|
||||
0,
|
||||
100
|
||||
) + "...";
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
@ -146,7 +209,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
toggleDrawerOnMobile() {
|
||||
this.setState({
|
||||
drawerOpenOnMobile: !this.state.drawerOpenOnMobile
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
toggleLogOutDialog() {
|
||||
|
|
@ -154,7 +217,9 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
}
|
||||
|
||||
searchForQuery(what: string) {
|
||||
window.location.href = isDesktopApp()? "hyperspace://hyperspace/app/index.html#/search?query=" + what: "/#/search?query=" + what;
|
||||
window.location.href = isDesktopApp()
|
||||
? "hyperspace://hyperspace/app/index.html#/search?query=" + what
|
||||
: "/#/search?query=" + what;
|
||||
window.location.reload;
|
||||
}
|
||||
|
||||
|
|
@ -162,15 +227,15 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
let loginData = localStorage.getItem("login");
|
||||
if (loginData) {
|
||||
let items = ["login", "account", "baseurl", "access_token"];
|
||||
items.forEach((entry) => {
|
||||
items.forEach(entry => {
|
||||
localStorage.removeItem(entry);
|
||||
})
|
||||
});
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
clearBadge() {
|
||||
if (!getUserDefaultBool('displayAllOnNotificationBadge')) {
|
||||
if (!getUserDefaultBool("displayAllOnNotificationBadge")) {
|
||||
this.setState({ notificationCount: 0 });
|
||||
}
|
||||
}
|
||||
|
|
@ -180,13 +245,23 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
if (isDarwinApp()) {
|
||||
return (
|
||||
<div className={classes.titleBarRoot}>
|
||||
<Typography className={classes.titleBarText}>{this.state.brandName? this.state.brandName: "Hyperspace"} {this.state.developerMode? "(beta)": null}</Typography>
|
||||
<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") {
|
||||
} 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>
|
||||
<Typography className={classes.titleBarText}>
|
||||
Careful: you're running in developer mode.
|
||||
</Typography>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -198,70 +273,142 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
<div>
|
||||
<List>
|
||||
<div className={classes.drawerDisplayMobile}>
|
||||
<LinkableListItem button key="profile-mobile" to={`/profile/${this.state.currentUser? this.state.currentUser.id: "1"}`}>
|
||||
<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: ""}/>
|
||||
<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..."}/>
|
||||
<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>
|
||||
<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>
|
||||
<ListItemIcon>
|
||||
<HomeIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Home" />
|
||||
</LinkableListItem>
|
||||
<LinkableListItem button key="local" to="/local">
|
||||
<ListItemIcon><DomainIcon/></ListItemIcon>
|
||||
<ListItemIcon>
|
||||
<DomainIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Local" />
|
||||
</LinkableListItem>
|
||||
{
|
||||
this.state.enableFederation?
|
||||
{this.state.enableFederation ? (
|
||||
<LinkableListItem button key="public" to="/public">
|
||||
<ListItemIcon><PublicIcon/></ListItemIcon>
|
||||
<ListItemIcon>
|
||||
<PublicIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Public" />
|
||||
</LinkableListItem>:
|
||||
</LinkableListItem>
|
||||
) : (
|
||||
<ListItem disabled>
|
||||
<ListItemIcon><PublicIcon/></ListItemIcon>
|
||||
<ListItemText primary="Public" secondary="Disabled by admin"/>
|
||||
<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">
|
||||
<LinkableListItem
|
||||
button
|
||||
key="notifications-mobile"
|
||||
to="/notifications"
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Badge badgeContent={this.state.notificationCount > 0? this.state.notificationCount: ""} color="secondary">
|
||||
<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>
|
||||
<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>
|
||||
<LinkableListItem
|
||||
button
|
||||
key="recommended"
|
||||
to="/recommended"
|
||||
>
|
||||
<ListItemIcon>
|
||||
<GroupIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Who to follow" />
|
||||
</LinkableListItem>
|
||||
<LinkableListItem button key="settings" to="/settings">
|
||||
<ListItemIcon><SettingsIcon/></ListItemIcon>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Settings" />
|
||||
</LinkableListItem>
|
||||
<LinkableListItem button key="info" to="/about">
|
||||
<ListItemIcon><InfoIcon/></ListItemIcon>
|
||||
<ListItemIcon>
|
||||
<InfoIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="About" />
|
||||
</LinkableListItem>
|
||||
</List>
|
||||
|
|
@ -285,8 +432,15 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography className={classes.appBarTitle} variant="h6" color="inherit" noWrap>
|
||||
{this.state.brandName? this.state.brandName: "Hyperspace"}
|
||||
<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}>
|
||||
|
|
@ -299,9 +453,11 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
root: classes.appBarSearchInputRoot,
|
||||
input: classes.appBarSearchInputInput
|
||||
}}
|
||||
onKeyUp={(event) => {
|
||||
onKeyUp={event => {
|
||||
if (event.keyCode === 13) {
|
||||
this.searchForQuery(event.currentTarget.value);
|
||||
this.searchForQuery(
|
||||
event.currentTarget.value
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
@ -309,46 +465,120 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
<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">
|
||||
<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">
|
||||
<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
|
||||
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")}
|
||||
anchorEl={document.getElementById(
|
||||
"acctMenuBtn"
|
||||
)}
|
||||
open={this.state.acctMenuOpen}
|
||||
className={classes.acctMenu}
|
||||
>
|
||||
<ClickAwayListener onClickAway={this.toggleAcctMenu}>
|
||||
<ClickAwayListener
|
||||
onClickAway={this.toggleAcctMenu}
|
||||
>
|
||||
<div>
|
||||
<LinkableListItem to={`/profile/${this.state.currentUser? this.state.currentUser.id: "1"}`}>
|
||||
<LinkableListItem
|
||||
to={`/profile/${
|
||||
this.state.currentUser
|
||||
? this.state.currentUser
|
||||
.id
|
||||
: "1"
|
||||
}`}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar alt="You" src={this.state.currentUser? this.state.currentUser.avatar_static: ""}/>
|
||||
<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...")}
|
||||
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>
|
||||
<ListItemText>
|
||||
Edit profile
|
||||
</ListItemText>
|
||||
</LinkableListItem>
|
||||
{/* <MenuItem>Switch account</MenuItem> */}
|
||||
<MenuItem onClick={() => this.toggleLogOutDialog()}>Log out</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() =>
|
||||
this.toggleLogOutDialog()
|
||||
}
|
||||
>
|
||||
Log out
|
||||
</MenuItem>
|
||||
</div>
|
||||
</ClickAwayListener>
|
||||
</Menu>
|
||||
|
|
@ -360,7 +590,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
<Drawer
|
||||
container={this.props.container}
|
||||
variant="temporary"
|
||||
anchor={'left'}
|
||||
anchor={"left"}
|
||||
open={this.state.drawerOpenOnMobile}
|
||||
onClose={this.toggleDrawerOnMobile}
|
||||
classes={{ paper: classes.drawerPaper }}
|
||||
|
|
@ -371,7 +601,9 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
<Hidden smDown implementation="css">
|
||||
<Drawer
|
||||
classes={{
|
||||
paper: this.titlebar()? classes.drawerPaperWithTitleAndAppBar: classes.drawerPaperWithAppBar
|
||||
paper: this.titlebar()
|
||||
? classes.drawerPaperWithTitleAndAppBar
|
||||
: classes.drawerPaperWithAppBar
|
||||
}}
|
||||
variant="permanent"
|
||||
open
|
||||
|
|
@ -385,25 +617,51 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
|||
open={this.state.logOutOpen}
|
||||
onClose={() => this.toggleLogOutDialog()}
|
||||
>
|
||||
<DialogTitle id="alert-dialog-title">Log out of {this.state.brandName? this.state.brandName: "Hyperspace"}</DialogTitle>
|
||||
<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"}.
|
||||
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>
|
||||
<Button
|
||||
onClick={() => this.toggleLogOutDialog()}
|
||||
color="primary"
|
||||
autoFocus
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => {
|
||||
<Button
|
||||
onClick={() => {
|
||||
this.logOutAndRestart();
|
||||
}} color="primary">
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Log out
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Tooltip title="Create a new post">
|
||||
<LinkableFab to="/compose" className={classes.composeButton} color="secondary" aria-label="Compose">
|
||||
<LinkableFab
|
||||
to="/compose"
|
||||
className={classes.composeButton}
|
||||
color="secondary"
|
||||
aria-label="Compose"
|
||||
>
|
||||
<CreateIcon />
|
||||
</LinkableFab>
|
||||
</Tooltip>
|
||||
|
|
|
|||
Loading…
Reference in New Issue