Add Prettier to fix code styles
Signed-off-by: Marquis Kurt <software@marquiskurt.net>
This commit is contained in:
parent
340156876d
commit
d92ed116f3
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"tabWidth": 4
|
||||||
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "hyperspace",
|
"name": "hyperspace",
|
||||||
"version": "1.0.0-beta6",
|
"version": "1.0.0-beta7",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -17778,6 +17778,12 @@
|
||||||
"integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
|
"integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
|
||||||
"dev": true
|
"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": {
|
"pretty-bytes": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
"megalodon": "^0.6.4",
|
"megalodon": "^0.6.4",
|
||||||
"moment": "^2.24.0",
|
"moment": "^2.24.0",
|
||||||
"notistack": "^0.5.1",
|
"notistack": "^0.5.1",
|
||||||
|
"prettier": "1.18.2",
|
||||||
"query-string": "^6.8.2",
|
"query-string": "^6.8.2",
|
||||||
"react": "^16.8.6",
|
"react": "^16.8.6",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "^16.8.6",
|
||||||
|
|
|
@ -1,28 +1,60 @@
|
||||||
import React, { Component } from 'react';
|
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 {
|
||||||
import MenuIcon from '@material-ui/icons/Menu';
|
Typography,
|
||||||
import SearchIcon from '@material-ui/icons/Search';
|
AppBar,
|
||||||
import NotificationsIcon from '@material-ui/icons/Notifications';
|
Toolbar,
|
||||||
import MailIcon from '@material-ui/icons/Mail';
|
IconButton,
|
||||||
import HomeIcon from '@material-ui/icons/Home';
|
InputBase,
|
||||||
import DomainIcon from '@material-ui/icons/Domain';
|
Avatar,
|
||||||
import PublicIcon from '@material-ui/icons/Public';
|
ListItemText,
|
||||||
import GroupIcon from '@material-ui/icons/Group';
|
Divider,
|
||||||
import SettingsIcon from '@material-ui/icons/Settings';
|
List,
|
||||||
import InfoIcon from '@material-ui/icons/Info';
|
ListItemIcon,
|
||||||
import CreateIcon from '@material-ui/icons/Create';
|
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 SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
|
||||||
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
|
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
|
||||||
import {styles} from './AppLayout.styles';
|
import { styles } from "./AppLayout.styles";
|
||||||
import { UAccount } from '../../types/Account';
|
import { UAccount } from "../../types/Account";
|
||||||
import {LinkableListItem, LinkableIconButton, LinkableFab} from '../../interfaces/overrides';
|
import {
|
||||||
import Mastodon from 'megalodon';
|
LinkableListItem,
|
||||||
import { Notification } from '../../types/Notification';
|
LinkableIconButton,
|
||||||
import {sendNotificationRequest} from '../../utilities/notifications';
|
LinkableFab
|
||||||
import {withSnackbar} from 'notistack';
|
} from "../../interfaces/overrides";
|
||||||
import { getConfig, getUserDefaultBool } from '../../utilities/settings';
|
import Mastodon from "megalodon";
|
||||||
import { isDesktopApp, isDarwinApp } from '../../utilities/desktop';
|
import { Notification } from "../../types/Notification";
|
||||||
import { Config } from '../../types/Config';
|
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 {
|
interface IAppLayoutState {
|
||||||
acctMenuOpen: boolean;
|
acctMenuOpen: boolean;
|
||||||
|
@ -36,21 +68,23 @@ interface IAppLayoutState {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class AppLayout extends Component<any, IAppLayoutState> {
|
export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
|
|
||||||
client: Mastodon;
|
client: Mastodon;
|
||||||
streamListener: any;
|
streamListener: any;
|
||||||
|
|
||||||
constructor(props: any) {
|
constructor(props: any) {
|
||||||
super(props);
|
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 = {
|
this.state = {
|
||||||
drawerOpenOnMobile: false,
|
drawerOpenOnMobile: false,
|
||||||
acctMenuOpen: false,
|
acctMenuOpen: false,
|
||||||
notificationCount: 0,
|
notificationCount: 0,
|
||||||
logOutOpen: false
|
logOutOpen: false
|
||||||
}
|
};
|
||||||
|
|
||||||
this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this);
|
this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this);
|
||||||
this.toggleAcctMenu = this.toggleAcctMenu.bind(this);
|
this.toggleAcctMenu = this.toggleAcctMenu.bind(this);
|
||||||
|
@ -58,18 +92,22 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
let acct = localStorage.getItem("account");
|
||||||
let acct = localStorage.getItem('account');
|
|
||||||
if (acct) {
|
if (acct) {
|
||||||
this.setState({ currentUser: JSON.parse(acct) });
|
this.setState({ currentUser: JSON.parse(acct) });
|
||||||
} else {
|
} else {
|
||||||
this.client.get('/accounts/verify_credentials').then((resp: any) => {
|
this.client
|
||||||
|
.get("/accounts/verify_credentials")
|
||||||
|
.then((resp: any) => {
|
||||||
let data: UAccount = resp.data;
|
let data: UAccount = resp.data;
|
||||||
this.setState({ currentUser: 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) => {
|
getConfig().then((result: any) => {
|
||||||
|
@ -77,59 +115,84 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
let config: Config = result;
|
let config: Config = result;
|
||||||
this.setState({
|
this.setState({
|
||||||
enableFederation: config.federation.enablePublicTimeline,
|
enableFederation: config.federation.enablePublicTimeline,
|
||||||
brandName: config.branding? config.branding.name: "Hyperspace",
|
brandName: config.branding
|
||||||
|
? config.branding.name
|
||||||
|
: "Hyperspace",
|
||||||
developerMode: config.developer
|
developerMode: config.developer
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
this.streamNotifications()
|
|
||||||
|
|
||||||
|
this.streamNotifications();
|
||||||
}
|
}
|
||||||
|
|
||||||
streamNotifications() {
|
streamNotifications() {
|
||||||
this.streamListener = this.client.stream('/streaming/user');
|
this.streamListener = this.client.stream("/streaming/user");
|
||||||
|
|
||||||
if (getUserDefaultBool('displayAllOnNotificationBadge')) {
|
if (getUserDefaultBool("displayAllOnNotificationBadge")) {
|
||||||
this.client.get('/notifications').then((resp: any) => {
|
this.client.get("/notifications").then((resp: any) => {
|
||||||
let notifArray = resp.data;
|
let notifArray = resp.data;
|
||||||
this.setState({ notificationCount: notifArray.length });
|
this.setState({ notificationCount: notifArray.length });
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.streamListener.on('notification', (notif: Notification) => {
|
this.streamListener.on("notification", (notif: Notification) => {
|
||||||
const notificationCount = this.state.notificationCount + 1;
|
const notificationCount = this.state.notificationCount + 1;
|
||||||
this.setState({ notificationCount });
|
this.setState({ notificationCount });
|
||||||
if (!document.hasFocus()) {
|
if (!document.hasFocus()) {
|
||||||
let primaryMessage = "";
|
let primaryMessage = "";
|
||||||
let secondaryMessage = "";
|
let secondaryMessage = "";
|
||||||
|
|
||||||
switch(notif.type) {
|
switch (notif.type) {
|
||||||
case "favourite":
|
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) {
|
if (notif.status) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement("div");
|
||||||
div.innerHTML = notif.status.content;
|
div.innerHTML = notif.status.content;
|
||||||
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
secondaryMessage =
|
||||||
|
(div.textContent || div.innerText || "").slice(
|
||||||
|
0,
|
||||||
|
100
|
||||||
|
) + "...";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "follow":
|
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;
|
break;
|
||||||
case "mention":
|
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) {
|
if (notif.status) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement("div");
|
||||||
div.innerHTML = notif.status.content;
|
div.innerHTML = notif.status.content;
|
||||||
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
secondaryMessage =
|
||||||
|
(div.textContent || div.innerText || "").slice(
|
||||||
|
0,
|
||||||
|
100
|
||||||
|
) + "...";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "reblog":
|
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) {
|
if (notif.status) {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement("div");
|
||||||
div.innerHTML = notif.status.content;
|
div.innerHTML = notif.status.content;
|
||||||
secondaryMessage = (div.textContent || div.innerText || "").slice(0, 100) + "..."
|
secondaryMessage =
|
||||||
|
(div.textContent || div.innerText || "").slice(
|
||||||
|
0,
|
||||||
|
100
|
||||||
|
) + "...";
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -146,7 +209,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
toggleDrawerOnMobile() {
|
toggleDrawerOnMobile() {
|
||||||
this.setState({
|
this.setState({
|
||||||
drawerOpenOnMobile: !this.state.drawerOpenOnMobile
|
drawerOpenOnMobile: !this.state.drawerOpenOnMobile
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleLogOutDialog() {
|
toggleLogOutDialog() {
|
||||||
|
@ -154,7 +217,9 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
searchForQuery(what: string) {
|
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;
|
window.location.reload;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -162,15 +227,15 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
let loginData = localStorage.getItem("login");
|
let loginData = localStorage.getItem("login");
|
||||||
if (loginData) {
|
if (loginData) {
|
||||||
let items = ["login", "account", "baseurl", "access_token"];
|
let items = ["login", "account", "baseurl", "access_token"];
|
||||||
items.forEach((entry) => {
|
items.forEach(entry => {
|
||||||
localStorage.removeItem(entry);
|
localStorage.removeItem(entry);
|
||||||
})
|
});
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
clearBadge() {
|
clearBadge() {
|
||||||
if (!getUserDefaultBool('displayAllOnNotificationBadge')) {
|
if (!getUserDefaultBool("displayAllOnNotificationBadge")) {
|
||||||
this.setState({ notificationCount: 0 });
|
this.setState({ notificationCount: 0 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -180,13 +245,23 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
if (isDarwinApp()) {
|
if (isDarwinApp()) {
|
||||||
return (
|
return (
|
||||||
<div className={classes.titleBarRoot}>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
} else if (this.state.developerMode || process.env.NODE_ENV === "development") {
|
} else if (
|
||||||
|
this.state.developerMode ||
|
||||||
|
process.env.NODE_ENV === "development"
|
||||||
|
) {
|
||||||
return (
|
return (
|
||||||
<div className={classes.titleBarRoot}>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -198,71 +273,143 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
<div>
|
<div>
|
||||||
<List>
|
<List>
|
||||||
<div className={classes.drawerDisplayMobile}>
|
<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>
|
<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>
|
</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>
|
||||||
{/* <LinkableListItem button key="acctSwitch-module" to="/switchacct">
|
{/* <LinkableListItem button key="acctSwitch-module" to="/switchacct">
|
||||||
<ListItemIcon><SupervisedUserCircleIcon/></ListItemIcon>
|
<ListItemIcon><SupervisedUserCircleIcon/></ListItemIcon>
|
||||||
<ListItemText primary="Switch account"/>
|
<ListItemText primary="Switch account"/>
|
||||||
</LinkableListItem> */}
|
</LinkableListItem> */}
|
||||||
<ListItem button key="acctLogout-mobile" onClick={() => this.toggleLogOutDialog()}>
|
<ListItem
|
||||||
<ListItemIcon><ExitToAppIcon/></ListItemIcon>
|
button
|
||||||
<ListItemText primary="Log out"/>
|
key="acctLogout-mobile"
|
||||||
|
onClick={() => this.toggleLogOutDialog()}
|
||||||
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<ExitToAppIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Log out" />
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<Divider/>
|
<Divider />
|
||||||
</div>
|
</div>
|
||||||
<ListSubheader>Timelines</ListSubheader>
|
<ListSubheader>Timelines</ListSubheader>
|
||||||
<LinkableListItem button key="home" to="/home">
|
<LinkableListItem button key="home" to="/home">
|
||||||
<ListItemIcon><HomeIcon/></ListItemIcon>
|
<ListItemIcon>
|
||||||
<ListItemText primary="Home"/>
|
<HomeIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Home" />
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
<LinkableListItem button key="local" to="/local">
|
<LinkableListItem button key="local" to="/local">
|
||||||
<ListItemIcon><DomainIcon/></ListItemIcon>
|
<ListItemIcon>
|
||||||
<ListItemText primary="Local"/>
|
<DomainIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Local" />
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
{
|
{this.state.enableFederation ? (
|
||||||
this.state.enableFederation?
|
|
||||||
<LinkableListItem button key="public" to="/public">
|
<LinkableListItem button key="public" to="/public">
|
||||||
<ListItemIcon><PublicIcon/></ListItemIcon>
|
<ListItemIcon>
|
||||||
<ListItemText primary="Public"/>
|
<PublicIcon />
|
||||||
</LinkableListItem>:
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Public" />
|
||||||
|
</LinkableListItem>
|
||||||
|
) : (
|
||||||
<ListItem disabled>
|
<ListItem disabled>
|
||||||
<ListItemIcon><PublicIcon/></ListItemIcon>
|
<ListItemIcon>
|
||||||
<ListItemText primary="Public" secondary="Disabled by admin"/>
|
<PublicIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText
|
||||||
|
primary="Public"
|
||||||
|
secondary="Disabled by admin"
|
||||||
|
/>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
}
|
)}
|
||||||
<Divider/>
|
<Divider />
|
||||||
<div className={classes.drawerDisplayMobile}>
|
<div className={classes.drawerDisplayMobile}>
|
||||||
<ListSubheader>Account</ListSubheader>
|
<ListSubheader>Account</ListSubheader>
|
||||||
<LinkableListItem button key="notifications-mobile" to="/notifications">
|
<LinkableListItem
|
||||||
|
button
|
||||||
|
key="notifications-mobile"
|
||||||
|
to="/notifications"
|
||||||
|
>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<Badge badgeContent={this.state.notificationCount > 0? this.state.notificationCount: ""} color="secondary">
|
<Badge
|
||||||
|
badgeContent={
|
||||||
|
this.state.notificationCount > 0
|
||||||
|
? this.state.notificationCount
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
<NotificationsIcon />
|
<NotificationsIcon />
|
||||||
</Badge>
|
</Badge>
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
<ListItemText primary="Notifications"/>
|
<ListItemText primary="Notifications" />
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
<LinkableListItem button key="messages-mobile" to="/messages">
|
<LinkableListItem
|
||||||
<ListItemIcon><MailIcon/></ListItemIcon>
|
button
|
||||||
<ListItemText primary="Messages"/>
|
key="messages-mobile"
|
||||||
|
to="/messages"
|
||||||
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<MailIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Messages" />
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
<Divider/>
|
<Divider />
|
||||||
</div>
|
</div>
|
||||||
<ListSubheader>More</ListSubheader>
|
<ListSubheader>More</ListSubheader>
|
||||||
<LinkableListItem button key="recommended" to="/recommended">
|
<LinkableListItem
|
||||||
<ListItemIcon><GroupIcon/></ListItemIcon>
|
button
|
||||||
<ListItemText primary="Who to follow"/>
|
key="recommended"
|
||||||
|
to="/recommended"
|
||||||
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<GroupIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Who to follow" />
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
<LinkableListItem button key="settings" to="/settings">
|
<LinkableListItem button key="settings" to="/settings">
|
||||||
<ListItemIcon><SettingsIcon/></ListItemIcon>
|
<ListItemIcon>
|
||||||
<ListItemText primary="Settings"/>
|
<SettingsIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Settings" />
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
<LinkableListItem button key="info" to="/about">
|
<LinkableListItem button key="info" to="/about">
|
||||||
<ListItemIcon><InfoIcon/></ListItemIcon>
|
<ListItemIcon>
|
||||||
<ListItemText primary="About"/>
|
<InfoIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="About" />
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
</List>
|
</List>
|
||||||
</div>
|
</div>
|
||||||
|
@ -283,15 +430,22 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
aria-label="Open drawer"
|
aria-label="Open drawer"
|
||||||
onClick={this.toggleDrawerOnMobile}
|
onClick={this.toggleDrawerOnMobile}
|
||||||
>
|
>
|
||||||
<MenuIcon/>
|
<MenuIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<Typography className={classes.appBarTitle} variant="h6" color="inherit" noWrap>
|
<Typography
|
||||||
{this.state.brandName? this.state.brandName: "Hyperspace"}
|
className={classes.appBarTitle}
|
||||||
|
variant="h6"
|
||||||
|
color="inherit"
|
||||||
|
noWrap
|
||||||
|
>
|
||||||
|
{this.state.brandName
|
||||||
|
? this.state.brandName
|
||||||
|
: "Hyperspace"}
|
||||||
</Typography>
|
</Typography>
|
||||||
<div className={classes.appBarFlexGrow}/>
|
<div className={classes.appBarFlexGrow} />
|
||||||
<div className={classes.appBarSearch}>
|
<div className={classes.appBarSearch}>
|
||||||
<div className={classes.appBarSearchIcon}>
|
<div className={classes.appBarSearchIcon}>
|
||||||
<SearchIcon/>
|
<SearchIcon />
|
||||||
</div>
|
</div>
|
||||||
<InputBase
|
<InputBase
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
|
@ -299,56 +453,132 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
root: classes.appBarSearchInputRoot,
|
root: classes.appBarSearchInputRoot,
|
||||||
input: classes.appBarSearchInputInput
|
input: classes.appBarSearchInputInput
|
||||||
}}
|
}}
|
||||||
onKeyUp={(event) => {
|
onKeyUp={event => {
|
||||||
if (event.keyCode === 13) {
|
if (event.keyCode === 13) {
|
||||||
this.searchForQuery(event.currentTarget.value);
|
this.searchForQuery(
|
||||||
|
event.currentTarget.value
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.appBarFlexGrow}/>
|
<div className={classes.appBarFlexGrow} />
|
||||||
<div className={classes.appBarActionButtons}>
|
<div className={classes.appBarActionButtons}>
|
||||||
<Tooltip title="Notifications">
|
<Tooltip title="Notifications">
|
||||||
<LinkableIconButton color="inherit" to="/notifications" onClick={this.clearBadge}>
|
<LinkableIconButton
|
||||||
<Badge badgeContent={this.state.notificationCount > 0? this.state.notificationCount: ""} color="secondary">
|
color="inherit"
|
||||||
|
to="/notifications"
|
||||||
|
onClick={this.clearBadge}
|
||||||
|
>
|
||||||
|
<Badge
|
||||||
|
badgeContent={
|
||||||
|
this.state.notificationCount > 0
|
||||||
|
? this.state
|
||||||
|
.notificationCount
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
<NotificationsIcon />
|
<NotificationsIcon />
|
||||||
</Badge>
|
</Badge>
|
||||||
</LinkableIconButton>
|
</LinkableIconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="Direct messages">
|
<Tooltip title="Direct messages">
|
||||||
<LinkableIconButton color="inherit" to="/messages">
|
<LinkableIconButton
|
||||||
<MailIcon/>
|
color="inherit"
|
||||||
|
to="/messages"
|
||||||
|
>
|
||||||
|
<MailIcon />
|
||||||
</LinkableIconButton>
|
</LinkableIconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="Your account">
|
<Tooltip title="Your account">
|
||||||
<IconButton id="acctMenuBtn" onClick={this.toggleAcctMenu}>
|
<IconButton
|
||||||
<Avatar className={classes.appBarAcctMenuIcon} alt="You" src={this.state.currentUser? this.state.currentUser.avatar_static: ""}/>
|
id="acctMenuBtn"
|
||||||
|
onClick={this.toggleAcctMenu}
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
className={
|
||||||
|
classes.appBarAcctMenuIcon
|
||||||
|
}
|
||||||
|
alt="You"
|
||||||
|
src={
|
||||||
|
this.state.currentUser
|
||||||
|
? this.state.currentUser
|
||||||
|
.avatar_static
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
/>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
||||||
<Menu
|
<Menu
|
||||||
id="acct-menu"
|
id="acct-menu"
|
||||||
anchorEl={document.getElementById("acctMenuBtn")}
|
anchorEl={document.getElementById(
|
||||||
|
"acctMenuBtn"
|
||||||
|
)}
|
||||||
open={this.state.acctMenuOpen}
|
open={this.state.acctMenuOpen}
|
||||||
className={classes.acctMenu}
|
className={classes.acctMenu}
|
||||||
>
|
>
|
||||||
<ClickAwayListener onClickAway={this.toggleAcctMenu}>
|
<ClickAwayListener
|
||||||
|
onClickAway={this.toggleAcctMenu}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<LinkableListItem to={`/profile/${this.state.currentUser? this.state.currentUser.id: "1"}`}>
|
<LinkableListItem
|
||||||
|
to={`/profile/${
|
||||||
|
this.state.currentUser
|
||||||
|
? this.state.currentUser
|
||||||
|
.id
|
||||||
|
: "1"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<ListItemAvatar>
|
<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>
|
</ListItemAvatar>
|
||||||
<ListItemText
|
<ListItemText
|
||||||
primary={this.state.currentUser? (this.state.currentUser.display_name || this.state.currentUser.acct): "Loading..."}
|
primary={
|
||||||
secondary={'@' + (this.state.currentUser? this.state.currentUser.acct: "Loading...")}
|
this.state.currentUser
|
||||||
|
? this.state
|
||||||
|
.currentUser
|
||||||
|
.display_name ||
|
||||||
|
this.state
|
||||||
|
.currentUser
|
||||||
|
.acct
|
||||||
|
: "Loading..."
|
||||||
|
}
|
||||||
|
secondary={
|
||||||
|
"@" +
|
||||||
|
(this.state.currentUser
|
||||||
|
? this.state
|
||||||
|
.currentUser
|
||||||
|
.acct
|
||||||
|
: "Loading...")
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
<Divider/>
|
<Divider />
|
||||||
<LinkableListItem to={"/you"}>
|
<LinkableListItem to={"/you"}>
|
||||||
<ListItemText>Edit profile</ListItemText>
|
<ListItemText>
|
||||||
|
Edit profile
|
||||||
|
</ListItemText>
|
||||||
</LinkableListItem>
|
</LinkableListItem>
|
||||||
{/* <MenuItem>Switch account</MenuItem> */}
|
{/* <MenuItem>Switch account</MenuItem> */}
|
||||||
<MenuItem onClick={() => this.toggleLogOutDialog()}>Log out</MenuItem>
|
<MenuItem
|
||||||
|
onClick={() =>
|
||||||
|
this.toggleLogOutDialog()
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Log out
|
||||||
|
</MenuItem>
|
||||||
</div>
|
</div>
|
||||||
</ClickAwayListener>
|
</ClickAwayListener>
|
||||||
</Menu>
|
</Menu>
|
||||||
|
@ -360,7 +590,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
<Drawer
|
<Drawer
|
||||||
container={this.props.container}
|
container={this.props.container}
|
||||||
variant="temporary"
|
variant="temporary"
|
||||||
anchor={'left'}
|
anchor={"left"}
|
||||||
open={this.state.drawerOpenOnMobile}
|
open={this.state.drawerOpenOnMobile}
|
||||||
onClose={this.toggleDrawerOnMobile}
|
onClose={this.toggleDrawerOnMobile}
|
||||||
classes={{ paper: classes.drawerPaper }}
|
classes={{ paper: classes.drawerPaper }}
|
||||||
|
@ -371,7 +601,9 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
<Hidden smDown implementation="css">
|
<Hidden smDown implementation="css">
|
||||||
<Drawer
|
<Drawer
|
||||||
classes={{
|
classes={{
|
||||||
paper: this.titlebar()? classes.drawerPaperWithTitleAndAppBar: classes.drawerPaperWithAppBar
|
paper: this.titlebar()
|
||||||
|
? classes.drawerPaperWithTitleAndAppBar
|
||||||
|
: classes.drawerPaperWithAppBar
|
||||||
}}
|
}}
|
||||||
variant="permanent"
|
variant="permanent"
|
||||||
open
|
open
|
||||||
|
@ -385,26 +617,52 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||||
open={this.state.logOutOpen}
|
open={this.state.logOutOpen}
|
||||||
onClose={() => this.toggleLogOutDialog()}
|
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>
|
<DialogContent>
|
||||||
<DialogContentText id="alert-dialog-description">
|
<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>
|
</DialogContentText>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
<Button onClick={() => this.toggleLogOutDialog()} color="primary" autoFocus>
|
<Button
|
||||||
|
onClick={() => this.toggleLogOutDialog()}
|
||||||
|
color="primary"
|
||||||
|
autoFocus
|
||||||
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={() => {
|
<Button
|
||||||
|
onClick={() => {
|
||||||
this.logOutAndRestart();
|
this.logOutAndRestart();
|
||||||
}} color="primary">
|
}}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
Log out
|
Log out
|
||||||
</Button>
|
</Button>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
<Tooltip title="Create a new post">
|
<Tooltip title="Create a new post">
|
||||||
<LinkableFab to="/compose" className={classes.composeButton} color="secondary" aria-label="Compose">
|
<LinkableFab
|
||||||
<CreateIcon/>
|
to="/compose"
|
||||||
|
className={classes.composeButton}
|
||||||
|
color="secondary"
|
||||||
|
aria-label="Compose"
|
||||||
|
>
|
||||||
|
<CreateIcon />
|
||||||
</LinkableFab>
|
</LinkableFab>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue