diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b0987a6 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "bracketSpacing": true, + "tabWidth": 4 +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2676737..bd7af84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 72ea036..0397a79 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 5d2c452..0d00cd9 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -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,380 +68,606 @@ interface IAppLayoutState { } export class AppLayout extends Component { - 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 - } - + 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'); + componentDidMount() { + let acct = localStorage.getItem("account"); if (acct) { - this.setState({ currentUser: JSON.parse(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); - }) + 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 + 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.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 = ""; + 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) + "..." + 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; } - 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); } - - sendNotificationRequest(primaryMessage, secondaryMessage); - } }); - } + } - toggleAcctMenu() { + toggleAcctMenu() { this.setState({ acctMenuOpen: !this.state.acctMenuOpen }); - } + } - toggleDrawerOnMobile() { + toggleDrawerOnMobile() { this.setState({ - drawerOpenOnMobile: !this.state.drawerOpenOnMobile - }) - } + drawerOpenOnMobile: !this.state.drawerOpenOnMobile + }); + } - toggleLogOutDialog() { + 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; + searchForQuery(what: string) { + window.location.href = isDesktopApp() + ? "hyperspace://hyperspace/app/index.html#/search?query=" + what + : "/#/search?query=" + what; window.location.reload; - } + } - logOutAndRestart() { + logOutAndRestart() { let loginData = localStorage.getItem("login"); if (loginData) { - let items = ["login", "account", "baseurl", "access_token"]; - items.forEach((entry) => { - localStorage.removeItem(entry); - }) - window.location.reload(); + let items = ["login", "account", "baseurl", "access_token"]; + items.forEach(entry => { + localStorage.removeItem(entry); + }); + window.location.reload(); } - } + } - clearBadge() { - if (!getUserDefaultBool('displayAllOnNotificationBadge')) { - this.setState({ notificationCount: 0 }); + clearBadge() { + if (!getUserDefaultBool("displayAllOnNotificationBadge")) { + this.setState({ notificationCount: 0 }); } - } + } - titlebar() { + titlebar() { const { classes } = this.props; if (isDarwinApp()) { - return ( -
- {this.state.brandName? this.state.brandName: "Hyperspace"} {this.state.developerMode? "(beta)": null} -
- ); - } else if (this.state.developerMode || process.env.NODE_ENV === "development") { - return ( -
- Careful: you're running in developer mode. -
- ); - } - } + return ( +
+ + {this.state.brandName + ? this.state.brandName + : "Hyperspace"}{" "} + {this.state.developerMode ? "(beta)" : null} + +
+ ); + } else if ( + this.state.developerMode || + process.env.NODE_ENV === "development" + ) { + return ( +
+ + Careful: you're running in developer mode. + +
+ ); + } + } - appDrawer() { + appDrawer() { const { classes } = this.props; return ( -
- -
- - - - - - - {/* +
+ +
+ + + + + + + {/* */} - this.toggleLogOutDialog()}> - - - - -
- Timelines - - - - - - - - - { - this.state.enableFederation? - - - - : - - - - - } - -
- Account - - - 0? this.state.notificationCount: ""} color="secondary"> - - - - - - - - - - -
- More - - - - - - - - - - - - - -
- ); + this.toggleLogOutDialog()} + > + + + + + + +
+ Timelines + + + + + + + + + + + + + {this.state.enableFederation ? ( + + + + + + + ) : ( + + + + + + + )} + +
+ Account + + + 0 + ? this.state.notificationCount + : "" + } + color="secondary" + > + + + + + + + + + + + + +
+ More + + + + + + + + + + + + + + + + + + + +
+ ); } - render() { - const { classes } = this.props; - return ( -
-
- {this.titlebar()} - - - - - - - {this.state.brandName? this.state.brandName: "Hyperspace"} - -
-
-
- -
- { - if (event.keyCode === 13) { - this.searchForQuery(event.currentTarget.value); - } - }} - /> -
-
-
- - - 0? this.state.notificationCount: ""} color="secondary"> - - - - - - - - - - - - - - + render() { + const { classes } = this.props; + return ( +
+
+ {this.titlebar()} + + + + + + + {this.state.brandName + ? this.state.brandName + : "Hyperspace"} + +
+
+
+ +
+ { + if (event.keyCode === 13) { + this.searchForQuery( + event.currentTarget.value + ); + } + }} + /> +
+
+
+ + + 0 + ? this.state + .notificationCount + : "" + } + color="secondary" + > + + + + + + + + + + + + + + - - -
- - - - - - - - - Edit profile - - {/* Switch account */} - this.toggleLogOutDialog()}>Log out -
- - -
- - -
+ + + +
+ this.toggleLogOutDialog()} > - {this.appDrawer()} - - - - - {this.appDrawer()} - - - -
- this.toggleLogOutDialog()} - > - Log out of {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"}. - - - - - - - - - - - - -
- ); - } + + Log out of{" "} + {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"} + . + + + + + + + + + + + + +
+ ); + } } export default withStyles(styles)(withSnackbar(AppLayout));