Mastodon
/
hyperspace-desktop-client-windows-linux-macos
mirror of https://github.com/hyperspacedev/hyperspace
1
0
Fork 0
Code Issues Releases Wiki Activity

Set up basic UI for server blocking 

Signed-off-by: Marquis Kurt <software@marquiskurt.net>
This commit is contained in:
Marquis Kurt 2019-09-21 22:13:25 -04:00
parent ee2843eff4
commit 32f9940ea2
No known key found for this signature in database
GPG Key ID: 725636D259F5402D
68 changed files with 7334 additions and 5434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"bracketSpacing": true,
"tabWidth": 4
}

8
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

27
src/App.styles.tsx
View File

@ -1,21 +1,24 @@
import { Theme, createStyles } from "@material-ui/core";
import { isDarwinApp } from './utilities/desktop';
import { isDarwinApp } from "./utilities/desktop";
export const styles = (theme: Theme) => createStyles({
export const styles = (theme: Theme) =>
createStyles({
root: {
width: '100%',
display: 'flex',
height: '100%',
minHeight: '100vh',
backgroundColor: isDarwinApp()? "transparent": theme.palette.background.default,
width: "100%",
display: "flex",
height: "100%",
minHeight: "100vh",
backgroundColor: isDarwinApp()
? "transparent"
: theme.palette.background.default
},
content: {
marginTop: 72,
flexGrow: 1,
padding: theme.spacing.unit * 3,
[theme.breakpoints.up('md')]: {
[theme.breakpoints.up("md")]: {
marginLeft: 250,
marginTop: 88,
},
},
});
marginTop: 88
}
}
});

176
src/App.tsx
View File

@ -1,94 +1,110 @@
import React, { Component } from 'react';
import {MuiThemeProvider, CssBaseline, withStyles } from '@material-ui/core';
import { setHyperspaceTheme, darkMode } from './utilities/themes';
import AppLayout from './components/AppLayout';
import {styles} from './App.styles';
import {Route} from 'react-router-dom';
import AboutPage from './pages/About';
import Settings from './pages/Settings';
import { getUserDefaultBool, getUserDefaultTheme } from './utilities/settings';
import ProfilePage from './pages/ProfilePage';
import HomePage from './pages/Home';
import LocalPage from './pages/Local';
import PublicPage from './pages/Public';
import Conversation from './pages/Conversation';
import NotificationsPage from './pages/Notifications';
import SearchPage from './pages/Search';
import Composer from './pages/Compose';
import WelcomePage from './pages/Welcome';
import MessagesPage from './pages/Messages';
import RecommendationsPage from './pages/Recommendations';
import Missingno from './pages/Missingno';
import You from './pages/You';
import {withSnackbar} from 'notistack';
import {PrivateRoute} from './interfaces/overrides';
import { userLoggedIn } from './utilities/accounts';
import { isDarwinApp } from './utilities/desktop';
import React, { Component } from "react";
import { MuiThemeProvider, CssBaseline, withStyles } from "@material-ui/core";
import { setHyperspaceTheme, darkMode } from "./utilities/themes";
import AppLayout from "./components/AppLayout";
import { styles } from "./App.styles";
import { Route } from "react-router-dom";
import AboutPage from "./pages/About";
import Settings from "./pages/Settings";
import { getUserDefaultBool, getUserDefaultTheme } from "./utilities/settings";
import ProfilePage from "./pages/ProfilePage";
import HomePage from "./pages/Home";
import LocalPage from "./pages/Local";
import PublicPage from "./pages/Public";
import Conversation from "./pages/Conversation";
import NotificationsPage from "./pages/Notifications";
import SearchPage from "./pages/Search";
import Composer from "./pages/Compose";
import WelcomePage from "./pages/Welcome";
import MessagesPage from "./pages/Messages";
import RecommendationsPage from "./pages/Recommendations";
import Missingno from "./pages/Missingno";
import You from "./pages/You";
import Blocked from "./pages/Blocked";
import { withSnackbar } from "notistack";
import { PrivateRoute } from "./interfaces/overrides";
import { userLoggedIn } from "./utilities/accounts";
import { isDarwinApp } from "./utilities/desktop";
let theme = setHyperspaceTheme(getUserDefaultTheme());
class App extends Component<any, any> {
offline: any;
offline: any;
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.state = {
theme: theme
this.state = {
theme: theme
};
}
}
componentWillMount() {
let newTheme = darkMode(this.state.theme, getUserDefaultBool('darkModeEnabled'));
this.setState({ theme: newTheme });
}
componentDidMount() {
this.removeBodyBackground()
}
componentDidUpdate() {
this.removeBodyBackground()
}
removeBodyBackground() {
if (isDarwinApp()) {
document.body.style.backgroundColor = "transparent";
console.log("Changed!")
console.log(`New color: ${document.body.style.backgroundColor}`)
componentWillMount() {
let newTheme = darkMode(
this.state.theme,
getUserDefaultBool("darkModeEnabled")
);
this.setState({ theme: newTheme });
}
}
render() {
const { classes } = this.props;
componentDidMount() {
this.removeBodyBackground();
}
this.removeBodyBackground()
return (
<MuiThemeProvider theme={this.state.theme}>
<CssBaseline/>
<Route path="/welcome" component={WelcomePage}/>
<div>
{ userLoggedIn()? <AppLayout/>: null}
<PrivateRoute exact path="/" component={HomePage}/>
<PrivateRoute path="/home" component={HomePage}/>
<PrivateRoute path="/local" component={LocalPage}/>
<PrivateRoute path="/public" component={PublicPage}/>
<PrivateRoute path="/messages" component={MessagesPage}/>
<PrivateRoute path="/notifications" component={NotificationsPage}/>
<PrivateRoute path="/profile/:profileId" component={ProfilePage}/>
<PrivateRoute path="/conversation/:conversationId" component={Conversation}/>
<PrivateRoute path="/search" component={SearchPage}/>
<PrivateRoute path="/settings" component={Settings}/>
<PrivateRoute path="/you" component={You}/>
<PrivateRoute path="/about" component={AboutPage}/>
<PrivateRoute path="/compose" component={Composer}/>
<PrivateRoute path="/recommended" component={RecommendationsPage}/>
</div>
componentDidUpdate() {
this.removeBodyBackground();
}
</MuiThemeProvider>
);
}
removeBodyBackground() {
if (isDarwinApp()) {
document.body.style.backgroundColor = "transparent";
console.log("Changed!");
console.log(`New color: ${document.body.style.backgroundColor}`);
}
}
render() {
const { classes } = this.props;
this.removeBodyBackground();
return (
<MuiThemeProvider theme={this.state.theme}>
<CssBaseline />
<Route path="/welcome" component={WelcomePage} />
<div>
{userLoggedIn() ? <AppLayout /> : null}
<PrivateRoute exact path="/" component={HomePage} />
<PrivateRoute path="/home" component={HomePage} />
<PrivateRoute path="/local" component={LocalPage} />
<PrivateRoute path="/public" component={PublicPage} />
<PrivateRoute path="/messages" component={MessagesPage} />
<PrivateRoute
path="/notifications"
component={NotificationsPage}
/>
<PrivateRoute
path="/profile/:profileId"
component={ProfilePage}
/>
<PrivateRoute
path="/conversation/:conversationId"
component={Conversation}
/>
<PrivateRoute path="/search" component={SearchPage} />
<PrivateRoute path="/blocked" component={Blocked} />
<PrivateRoute path="/settings" component={Settings} />
<PrivateRoute path="/you" component={You} />
<PrivateRoute path="/about" component={AboutPage} />
<PrivateRoute path="/compose" component={Composer} />
<PrivateRoute
path="/recommended"
component={RecommendationsPage}
/>
</div>
</MuiThemeProvider>
);
}
}
export default withStyles(styles)(withSnackbar(App));

129
src/components/AppLayout/AppLayout.styles.tsx
View File

@ -1,32 +1,35 @@
import { Theme, createStyles } from "@material-ui/core";
import { darken } from "@material-ui/core/styles/colorManipulator";
import { isDarwinApp } from '../../utilities/desktop';
import { isDarwinApp } from "../../utilities/desktop";
import { fade } from "@material-ui/core/styles/colorManipulator";
export const styles = (theme: Theme) => createStyles({
export const styles = (theme: Theme) =>
createStyles({
root: {
width: '100%',
display: 'flex',
width: "100%",
display: "flex"
},
stickyArea: {
position: 'fixed',
width: '100%',
position: "fixed",
width: "100%",
top: 0,
left: 0,
zIndex: 1000,
zIndex: 1000
},
titleBarRoot: {
top: 0,
left: 0,
height: 24,
width: '100%',
backgroundColor: isDarwinApp()? theme.palette.primary.main: theme.palette.primary.dark,
textAlign: 'center',
width: "100%",
backgroundColor: isDarwinApp()
? theme.palette.primary.main
: theme.palette.primary.dark,
textAlign: "center",
zIndex: 1000,
verticalAlign: 'middle',
WebkitUserSelect: 'none',
WebkitAppRegion: "drag",
verticalAlign: "middle",
WebkitUserSelect: "none",
WebkitAppRegion: "drag"
},
titleBarText: {
color: theme.palette.common.white,
@ -36,83 +39,83 @@ export const styles = (theme: Theme) => createStyles({
},
appBar: {
zIndex: 1000,
backgroundImage: isDarwinApp()? `linear-gradient(${theme.palette.primary.main}, ${theme.palette.primary.dark})`: undefined,
backgroundImage: isDarwinApp()
? `linear-gradient(${theme.palette.primary.main}, ${theme.palette.primary.dark})`
: undefined,
backgroundColor: theme.palette.primary.main,
borderBottomColor: darken(theme.palette.primary.dark, 0.2),
borderBottomWidth: 1,
borderBottomStyle: isDarwinApp()? "solid": "none",
boxShadow: isDarwinApp()? "none": "inherit"
borderBottomStyle: isDarwinApp() ? "solid" : "none",
boxShadow: isDarwinApp() ? "none" : "inherit"
},
appBarMenuButton: {
marginLeft: -12,
marginRight: 20,
[theme.breakpoints.up('md')]: {
display: 'none'
[theme.breakpoints.up("md")]: {
display: "none"
}
},
appBarTitle: {
display: 'none',
[theme.breakpoints.up('md')]: {
display: 'block',
display: "none",
[theme.breakpoints.up("md")]: {
display: "block"
}
},
appBarSearch: {
position: 'relative',
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25)
},
width: '100%',
width: "100%",
marginLeft: 0,
marginRight: theme.spacing.unit,
[theme.breakpoints.up('md')]: {
[theme.breakpoints.up("md")]: {
marginLeft: theme.spacing.unit * 6,
width: '50%'
width: "50%"
}
},
appBarSearchIcon: {
width: theme.spacing.unit * 9,
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
appBarSearchInputRoot: {
color: 'inherit',
width: '100%'
color: "inherit",
width: "100%"
},
appBarSearchInputInput: {
paddingTop: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
paddingRight: theme.spacing.unit,
transition: theme.transitions.create('width'),
width: '100%',
transition: theme.transitions.create("width"),
width: "100%"
},
appBarFlexGrow: {
flexGrow: 1
},
appBarActionButtons: {
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'flex',
},
display: "none",
[theme.breakpoints.up("sm")]: {
display: "flex"
}
},
appBarAcctMenuIcon: {
backgroundColor: theme.palette.primary.dark
},
acctMenu: {
},
acctMenu: {},
drawer: {
[theme.breakpoints.up('sm')]: {
[theme.breakpoints.up("sm")]: {
width: 250,
flexShrink: 0
},
zIndex: 1,
zIndex: 1
},
drawerPaper: {
width: 250,
@ -122,43 +125,47 @@ export const styles = (theme: Theme) => createStyles({
width: 250,
zIndex: -1,
marginTop: 64,
backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
backgroundColor: isDarwinApp()
? "transparent"
: theme.palette.background.paper
},
drawerPaperWithTitleAndAppBar: {
width: 250,
zIndex: -1,
marginTop: 88,
backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
backgroundColor: isDarwinApp()
? "transparent"
: theme.palette.background.paper
},
drawerDisplayMobile: {
[theme.breakpoints.up('md')]: {
display: 'none'
[theme.breakpoints.up("md")]: {
display: "none"
}
},
toolbar: theme.mixins.toolbar,
sectionDesktop: {
display: 'none',
[theme.breakpoints.up('md')]: {
display: 'flex',
},
display: "none",
[theme.breakpoints.up("md")]: {
display: "flex"
}
},
sectionMobile: {
display: 'flex',
[theme.breakpoints.up('md')]: {
display: 'none',
},
display: "flex",
[theme.breakpoints.up("md")]: {
display: "none"
}
},
content: {
padding: theme.spacing.unit * 3,
[theme.breakpoints.up('md')]: {
[theme.breakpoints.up("md")]: {
marginLeft: 250
},
overflowY: 'auto',
overflowY: "auto"
},
composeButton: {
position: "fixed",
bottom: theme.spacing.unit * 2,
right: theme.spacing.unit * 2,
zIndex: 50
},
});
}
});

833
src/components/AppLayout/AppLayout.tsx
View File

@ -1,297 +1,416 @@
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;
drawerOpenOnMobile: boolean;
currentUser?: UAccount;
notificationCount: number;
logOutOpen: boolean;
enableFederation?: boolean;
brandName?: string;
developerMode?: boolean;
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;
client: Mastodon;
streamListener: any;
constructor(props: any) {
super(props);
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);
}
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
(localStorage.getItem("baseurl") as string) + "/api/v1"
);
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);
})
}
this.state = {
drawerOpenOnMobile: false,
acctMenuOpen: false,
notificationCount: 0,
logOutOpen: false
};
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.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);
});
}
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);
}
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
});
}
});
toggleAcctMenu() {
this.setState({ acctMenuOpen: !this.state.acctMenuOpen });
}
this.streamNotifications();
}
toggleDrawerOnMobile() {
this.setState({
drawerOpenOnMobile: !this.state.drawerOpenOnMobile
})
}
streamNotifications() {
this.streamListener = this.client.stream("/streaming/user");
toggleLogOutDialog() {
this.setState({ logOutOpen: !this.state.logOutOpen });
}
if (getUserDefaultBool("displayAllOnNotificationBadge")) {
this.client.get("/notifications").then((resp: any) => {
let notifArray = resp.data;
this.setState({ notificationCount: notifArray.length });
});
}
searchForQuery(what: string) {
window.location.href = isDesktopApp()? "hyperspace://hyperspace/app/index.html#/search?query=" + what: "/#/search?query=" + what;
window.location.reload;
}
this.streamListener.on("notification", (notif: Notification) => {
const notificationCount = this.state.notificationCount + 1;
this.setState({ notificationCount });
if (!document.hasFocus()) {
let primaryMessage = "";
let secondaryMessage = "";
logOutAndRestart() {
let loginData = localStorage.getItem("login");
if (loginData) {
let items = ["login", "account", "baseurl", "access_token"];
items.forEach((entry) => {
localStorage.removeItem(entry);
})
window.location.reload();
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;
}
}
clearBadge() {
if (!getUserDefaultBool('displayAllOnNotificationBadge')) {
this.setState({ notificationCount: 0 });
}
sendNotificationRequest(primaryMessage, secondaryMessage);
}
});
}
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>
);
}
}
toggleAcctMenu() {
this.setState({ acctMenuOpen: !this.state.acctMenuOpen });
}
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">
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>
<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.root}>
<div className={classes.stickyArea}>
{this.titlebar()}
<AppBar className={classes.appBar} position="static">
<Toolbar>
<IconButton
className={classes.appBarMenuButton}
color="inherit"
className={classes.appBarMenuButton}
color="inherit"
aria-label="Open drawer"
onClick={this.toggleDrawerOnMobile}
>
<MenuIcon/>
<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.appBarFlexGrow} />
<div className={classes.appBarSearch}>
<div className={classes.appBarSearchIcon}>
<SearchIcon/>
<SearchIcon />
</div>
<InputBase
placeholder="Search..."
@ -299,112 +418,176 @@ 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);
}
}}
/>
</div>
<div className={classes.appBarFlexGrow}/>
<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}
<Tooltip title="Notifications">
<LinkableIconButton
color="inherit"
to="/notifications"
onClick={this.clearBadge}
>
<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/>
{/* <MenuItem>Switch account</MenuItem> */}
<MenuItem onClick={() => this.toggleLogOutDialog()}>Log out</MenuItem>
</div>
</ClickAwayListener>
</Menu>
<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 />
{/* <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>
<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>
<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>
>
<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>
<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>
<Button
onClick={() => this.toggleLogOutDialog()}
color="primary"
autoFocus
>
Cancel
</Button>
<Button onClick={() => {
this.logOutAndRestart();
}} color="primary">
</Button>
<Button
onClick={() => {
this.logOutAndRestart();
}}
color="primary"
>
Log out
</Button>
</Button>
</DialogActions>
</Dialog>
<Tooltip title="Create a new post">
<LinkableFab to="/compose" className={classes.composeButton} color="secondary" aria-label="Compose">
<CreateIcon/>
<LinkableFab
to="/compose"
className={classes.composeButton}
color="secondary"
aria-label="Compose"
>
<CreateIcon />
</LinkableFab>
</Tooltip>
</div>
</div>
);
}
}

10
src/components/AppLayout/index.tsx
View File

@ -1,6 +1,6 @@
import { AppLayout } from './AppLayout';
import { withStyles } from '@material-ui/core';
import { styles } from './AppLayout.styles';
import {withSnackbar} from 'notistack';
import { AppLayout } from "./AppLayout";
import { withStyles } from "@material-ui/core";
import { styles } from "./AppLayout.styles";
import { withSnackbar } from "notistack";
export default withStyles(styles)(withSnackbar(AppLayout));
export default withStyles(styles)(withSnackbar(AppLayout));

19
src/components/Attachment/Attachment.styles.tsx
View File

@ -1,16 +1,17 @@
import { Theme, createStyles } from '@material-ui/core';
import { Theme, createStyles } from "@material-ui/core";
export const styles = (theme: Theme) => createStyles({
export const styles = (theme: Theme) =>
createStyles({
mediaContainer: {
padding: theme.spacing.unit * 2,
padding: theme.spacing.unit * 2
},
mediaObject: {
width: '100%',
height: '100%'
width: "100%",
height: "100%"
},
mediaSlide: {
backgroundColor: theme.palette.primary.light,
width: '100%',
height: 'auto'
backgroundColor: theme.palette.primary.light,
width: "100%",
height: "auto"
}
});
});

212
src/components/Attachment/Attachment.tsx
View File

@ -1,105 +1,141 @@
import React, { Component } from 'react';
import {withStyles, Typography, MobileStepper, Button} from '@material-ui/core';
import { styles } from './Attachment.styles';
import { Attachment } from '../../types/Attachment';
import SwipeableViews from 'react-swipeable-views';
import React, { Component } from "react";
import {
withStyles,
Typography,
MobileStepper,
Button
} from "@material-ui/core";
import { styles } from "./Attachment.styles";
import { Attachment } from "../../types/Attachment";
import SwipeableViews from "react-swipeable-views";
interface IAttachmentProps {
media: [Attachment];
classes?: any;
media: [Attachment];
classes?: any;
}
interface IAttachmentState {
totalSteps: number;
currentStep: number;
attachments: [Attachment];
totalSteps: number;
currentStep: number;
attachments: [Attachment];
}
class AttachmentComponent extends Component<IAttachmentProps, IAttachmentState> {
constructor(props: IAttachmentProps) {
super(props);
class AttachmentComponent extends Component<
IAttachmentProps,
IAttachmentState
> {
constructor(props: IAttachmentProps) {
super(props);
this.state = {
attachments: this.props.media,
totalSteps: this.props.media.length,
currentStep: 0
}
this.state = {
attachments: this.props.media,
totalSteps: this.props.media.length,
currentStep: 0
};
}
moveBack() {
let nextStep = this.state.currentStep - 1;
if (nextStep < 0) {
nextStep = 0;
}
this.setState({ currentStep: nextStep });
}
moveBack() {
let nextStep = this.state.currentStep - 1;
if (nextStep < 0) {
nextStep = 0;
}
this.setState({ currentStep: nextStep });
moveForward() {
let nextStep = this.state.currentStep + 1;
if (nextStep > this.state.totalSteps) {
nextStep = this.state.totalSteps;
}
this.setState({ currentStep: nextStep });
}
moveForward() {
let nextStep = this.state.currentStep + 1;
if (nextStep > this.state.totalSteps) {
nextStep = this.state.totalSteps;
}
this.setState({ currentStep: nextStep });
handleStepChange(currentStep: number) {
this.setState({
currentStep
});
}
}
handleStepChange(currentStep: number) {
this.setState({
currentStep
})
}
getSlide(slide: Attachment) {
const {classes} = this.props;
switch (slide.type) {
case 'image':
return <img src={slide.url} alt={slide.description? slide.description: ''} className={classes.mediaObject}/>
case 'video':
return <video controls autoPlay={false} src={slide.url} className={classes.mediaObject}/>
case 'gifv':
return <img src={slide.url} alt={slide.description? slide.description: ''} className={classes.mediaObject}/>
case 'unknown':
return <object data={slide.url} className={classes.mediaObject}/>
}
}
render() {
const {classes} = this.props;
const step = this.state.currentStep;
const mediaItem = this.state.attachments[step];
getSlide(slide: Attachment) {
const { classes } = this.props;
switch (slide.type) {
case "image":
return (
<div className={classes.mediaContainer}>
<SwipeableViews
index={this.state.currentStep}
>
{
this.state.attachments.map((slide: Attachment) => {
return (<div key={slide.id} className={classes.mediaSlide}>
{this.getSlide(slide)}
</div>);
})
}
</SwipeableViews>
<MobileStepper
steps={this.state.totalSteps}
position="static"
activeStep={this.state.currentStep}
className={classes.mobileStepper}
nextButton={
<Button size="small" onClick={() => this.moveForward()} disabled={this.state.currentStep === this.state.totalSteps - 1}>
Next
</Button>
}
backButton={
<Button size="small" onClick={() => this.moveBack()} disabled={this.state.currentStep === 0}>
Back
</Button>
}
/>
<Typography variant="caption">{mediaItem.description? mediaItem.description: "No description provided."}</Typography>
</div>
)
<img
src={slide.url}
alt={slide.description ? slide.description : ""}
className={classes.mediaObject}
/>
);
case "video":
return (
<video
controls
autoPlay={false}
src={slide.url}
className={classes.mediaObject}
/>
);
case "gifv":
return (
<img
src={slide.url}
alt={slide.description ? slide.description : ""}
className={classes.mediaObject}
/>
);
case "unknown":
return <object data={slide.url} className={classes.mediaObject} />;
}
}
render() {
const { classes } = this.props;
const step = this.state.currentStep;
const mediaItem = this.state.attachments[step];
return (
<div className={classes.mediaContainer}>
<SwipeableViews index={this.state.currentStep}>
{this.state.attachments.map((slide: Attachment) => {
return (
<div key={slide.id} className={classes.mediaSlide}>
{this.getSlide(slide)}
</div>
);
})}
</SwipeableViews>
<MobileStepper
steps={this.state.totalSteps}
position="static"
activeStep={this.state.currentStep}
className={classes.mobileStepper}
nextButton={
<Button
size="small"
onClick={() => this.moveForward()}
disabled={this.state.currentStep === this.state.totalSteps - 1}
>
Next
</Button>
}
backButton={
<Button
size="small"
onClick={() => this.moveBack()}
disabled={this.state.currentStep === 0}
>
Back
</Button>
}
/>
<Typography variant="caption">
{mediaItem.description
? mediaItem.description
: "No description provided."}
</Typography>
</div>
);
}
}
export default withStyles(styles)(AttachmentComponent);
export default withStyles(styles)(AttachmentComponent);

8
src/components/Attachment/index.tsx
View File

@ -1,5 +1,5 @@
import {withStyles} from '@material-ui/core';
import AttachmentComponent from './Attachment';
import {styles} from './Attachment.styles';
import { withStyles } from "@material-ui/core";
import AttachmentComponent from "./Attachment";
import { styles } from "./Attachment.styles";
export default withStyles(styles)(AttachmentComponent);
export default withStyles(styles)(AttachmentComponent);

21
src/components/ComposeMediaAttachment/ComposeMediaAttachment.styles.tsx
View File

@ -1,17 +1,18 @@
import {Theme, createStyles} from '@material-ui/core';
import { Theme, createStyles } from "@material-ui/core";
export const styles = (theme: Theme) => createStyles({
export const styles = (theme: Theme) =>
createStyles({
attachmentArea: {
height: 175,
width: 268,
backgroundColor: theme.palette.primary.light,
color: theme.palette.common.white
height: 175,
width: 268,
backgroundColor: theme.palette.primary.light,
color: theme.palette.common.white
},
attachmentBar: {
marginLeft: 0
marginLeft: 0
},
attachmentText: {
backgroundColor: theme.palette.background.paper,
opacity: 0.5
backgroundColor: theme.palette.background.paper,
opacity: 0.5
}
});
});

147
src/components/ComposeMediaAttachment/ComposeMediaAttachment.tsx
View File

@ -1,81 +1,94 @@
import React, { Component } from 'react';
import {GridListTile, GridListTileBar, TextField, withStyles, IconButton} from '@material-ui/core';
import {styles} from './ComposeMediaAttachment.styles';
import {withSnackbar, withSnackbarProps} from 'notistack';
import Mastodon from 'megalodon';
import { Attachment } from '../../types/Attachment';
import DeleteIcon from '@material-ui/icons/Delete';
import React, { Component } from "react";
import {
GridListTile,
GridListTileBar,
TextField,
withStyles,
IconButton
} from "@material-ui/core";
import { styles } from "./ComposeMediaAttachment.styles";
import { withSnackbar, withSnackbarProps } from "notistack";
import Mastodon from "megalodon";
import { Attachment } from "../../types/Attachment";
import DeleteIcon from "@material-ui/icons/Delete";
interface IComposeMediaAttachmentProps extends withSnackbarProps {
classes: any;
client: Mastodon;
attachment: Attachment;
onDeleteCallback: any;
onAttachmentUpdate: any;
classes: any;
client: Mastodon;
attachment: Attachment;
onDeleteCallback: any;
onAttachmentUpdate: any;
}
interface IComposeMediaAttachmentState {
attachment: Attachment;
attachment: Attachment;
}
class ComposeMediaAttachment extends Component<IComposeMediaAttachmentProps, IComposeMediaAttachmentState> {
class ComposeMediaAttachment extends Component<
IComposeMediaAttachmentProps,
IComposeMediaAttachmentState
> {
client: Mastodon;
client: Mastodon;
constructor(props: IComposeMediaAttachmentProps) {
super(props);
constructor(props: IComposeMediaAttachmentProps) {
super(props);
this.client = this.props.client;
this.client = this.props.client;
this.state = {
attachment: this.props.attachment
};
}
this.state = {
attachment: this.props.attachment
}
}
updateAttachmentText(text: string) {
this.client
.put(`/media/${this.state.attachment.id}`, { description: text })
.then((resp: any) => {
this.props.onAttachmentUpdate(resp.data);
this.props.enqueueSnackbar("Description updated.");
})
.catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't update description: " + err.name);
});
}
updateAttachmentText(text: string) {
this.client.put(`/media/${this.state.attachment.id}`, { description: text }).then((resp: any) => {
this.props.onAttachmentUpdate(resp.data);
this.props.enqueueSnackbar("Description updated.")
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't update description: " + err.name);
})
}
render() {
const { classes, attachment } = this.props;
return (
<GridListTile className={classes.attachmentArea}>
{
attachment.type === "image" || attachment.type === "gifv"?
<img src={attachment.url} alt={attachment.description? attachment.description: ""}/>:
attachment.type === "video"?
<video autoPlay={false} src={attachment.url}/>:
<object data={attachment.url}/>
}
<GridListTileBar
classes={{ title: classes.attachmentBar }}
title={
<TextField
variant="filled"
label="Description"
margin="dense"
className={classes.attachmentText}
onBlur={(event) => this.updateAttachmentText(event.target.value)}
></TextField>
}
actionIcon={
<IconButton color="inherit"
onClick={
() => this.props.onDeleteCallback(this.state.attachment)
}
>
<DeleteIcon/>
</IconButton>
}
/>
</GridListTile>
)
}
render() {
const { classes, attachment } = this.props;
return (
<GridListTile className={classes.attachmentArea}>
{attachment.type === "image" || attachment.type === "gifv" ? (
<img
src={attachment.url}
alt={attachment.description ? attachment.description : ""}
/>
) : attachment.type === "video" ? (
<video autoPlay={false} src={attachment.url} />
) : (
<object data={attachment.url} />
)}
<GridListTileBar
classes={{ title: classes.attachmentBar }}
title={
<TextField
variant="filled"
label="Description"
margin="dense"
className={classes.attachmentText}
onBlur={event => this.updateAttachmentText(event.target.value)}
></TextField>
}
actionIcon={
<IconButton
color="inherit"
onClick={() => this.props.onDeleteCallback(this.state.attachment)}
>
<DeleteIcon />
</IconButton>
}
/>
</GridListTile>
);
}
}
export default withStyles(styles)(withSnackbar(ComposeMediaAttachment));
export default withStyles(styles)(withSnackbar(ComposeMediaAttachment));

8
src/components/ComposeMediaAttachment/index.tsx
View File

@ -1,5 +1,5 @@
import {styles} from './ComposeMediaAttachment.styles';
import ComposeMediaAttachment from './ComposeMediaAttachment';
import {withStyles} from '@material-ui/core';
import { styles } from "./ComposeMediaAttachment.styles";
import ComposeMediaAttachment from "./ComposeMediaAttachment";
import { withStyles } from "@material-ui/core";
export default withStyles(styles)(ComposeMediaAttachment);
export default withStyles(styles)(ComposeMediaAttachment);

50
src/components/EmojiPicker/index.tsx
View File

@ -1,34 +1,32 @@
import React, { Component } from 'react';
import {Picker, PickerProps, CustomEmoji} from 'emoji-mart';
import 'emoji-mart/css/emoji-mart.css';
import React, { Component } from "react";
import { Picker, PickerProps, CustomEmoji } from "emoji-mart";
import "emoji-mart/css/emoji-mart.css";
interface IEmojiPickerProps extends PickerProps {
onGetEmoji: any;
onGetEmoji: any;
}
export class EmojiPicker extends Component<IEmojiPickerProps, any> {
retrieveFromLocal() {
return JSON.parse(localStorage.getItem("emojis") as string);
}
render() {
return (
<Picker
custom={this.retrieveFromLocal()}
emoji=""
title=""
onClick={this.props.onGetEmoji}
style={{
borderColor: 'transparent'
}}
perLine={10}
emojiSize={20}
set={"google"}
/>
)
}
retrieveFromLocal() {
return JSON.parse(localStorage.getItem("emojis") as string);
}
render() {
return (
<Picker
custom={this.retrieveFromLocal()}
emoji=""
title=""
onClick={this.props.onGetEmoji}
style={{
borderColor: "transparent"
}}
perLine={10}
emojiSize={20}
set={"google"}
/>
);
}
}
export default EmojiPicker;
export default EmojiPicker;

47
src/components/Post/Post.styles.tsx
View File

@ -1,13 +1,14 @@
import { Theme, createStyles } from "@material-ui/core";
export const styles = (theme: Theme) => createStyles({
export const styles = (theme: Theme) =>
createStyles({
post: {
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit
},
postReblogChip: {
color: theme.palette.common.white,
'&:hover': {
"&:hover": {
backgroundColor: theme.palette.secondary.light
},
backgroundColor: theme.palette.secondary.main,
@ -16,27 +17,27 @@ export const styles = (theme: Theme) => createStyles({
postContent: {
paddingTop: 0,
paddingBottom: 0,
'& a': {
textDecoration: 'none',
"& a": {
textDecoration: "none",
color: theme.palette.secondary.light,
'&:hover': {
textDecoration: 'underline'
"&:hover": {
textDecoration: "underline"
},
'&.u-url.mention': {
textDecoration: 'none',
color: 'inherit',
fontWeight: 'bold'
"&.u-url.mention": {
textDecoration: "none",
color: "inherit",
fontWeight: "bold"
},
'&.mention.hashtag': {
textDecoration: 'none',
color: 'inherit',
fontWeight: 'bold'
"&.mention.hashtag": {
textDecoration: "none",
color: "inherit",
fontWeight: "bold"
}
}
},
postCard: {
'& a:hover': {
textDecoration: 'none'
"& a:hover": {
textDecoration: "none"
}
},
postEmoji: {
@ -44,7 +45,7 @@ export const styles = (theme: Theme) => createStyles({
},
postMedia: {
height: 0,
paddingTop: '56.25%', // 16:9
paddingTop: "56.25%" // 16:9
},
postActionsReply: {
marginLeft: theme.spacing.unit,
@ -85,14 +86,14 @@ export const styles = (theme: Theme) => createStyles({
color: "inherit"
},
mobileOnly: {
[theme.breakpoints.up('sm')]: {
display: 'none'
[theme.breakpoints.up("sm")]: {
display: "none"
}
},
desktopOnly: {
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block'
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block"
}
}
});
});

1273
src/components/Post/Post.tsx
View File

File diff suppressed because it is too large Load Diff

21
src/components/Post/PostShareMenu.tsx
View File

@ -1,15 +1,20 @@
import * as React from 'react';
import webShare, { WebShareInterface } from 'react-web-share-api';
import {MenuItem} from '@material-ui/core';
import * as React from "react";
import webShare, { WebShareInterface } from "react-web-share-api";
import { MenuItem } from "@material-ui/core";
export interface OwnProps {
style: object;
}
const ShareMenu: React.FunctionComponent<WebShareInterface & OwnProps> = ({
share, isSupported, style,
}) => isSupported
? <MenuItem onClick={share} style={style}>Share</MenuItem>
: null
share,
isSupported,
style
}) =>
isSupported ? (
<MenuItem onClick={share} style={style}>
Share
</MenuItem>
) : null;
export default webShare<OwnProps>()(ShareMenu);
export default webShare<OwnProps>()(ShareMenu);

10
src/components/Post/index.tsx
View File

@ -1,6 +1,6 @@
import { Post } from './Post';
import { withStyles } from '@material-ui/core';
import { styles } from './Post.styles';
import { withSnackbar } from 'notistack'
import { Post } from "./Post";
import { withStyles } from "@material-ui/core";
import { styles } from "./Post.styles";
import { withSnackbar } from "notistack";
export default withStyles(styles)(withSnackbar(Post));
export default withStyles(styles)(withSnackbar(Post));

119
src/components/ThemePreview/ThemePreview.tsx
View File

@ -1,57 +1,88 @@
import React, {Component} from 'react';
import {MuiThemeProvider, Theme, AppBar, Typography, CssBaseline, Toolbar, Fab, Paper} from '@material-ui/core';
import EditIcon from '@material-ui/icons/Edit';
import MenuIcon from '@material-ui/icons/Menu';
import React, { Component } from "react";
import {
MuiThemeProvider,
Theme,
AppBar,
Typography,
CssBaseline,
Toolbar,
Fab,
Paper
} from "@material-ui/core";
import EditIcon from "@material-ui/icons/Edit";
import MenuIcon from "@material-ui/icons/Menu";
interface IThemePreviewProps {
theme: Theme;
theme: Theme;
}
interface IThemePreviewState {
theme: Theme;
theme: Theme;
}
class ThemePreview extends Component<IThemePreviewProps, IThemePreviewState> {
constructor(props: IThemePreviewProps) {
super(props);
constructor(props: IThemePreviewProps) {
super(props);
this.state = {
theme: this.props.theme
}
}
this.state = {
theme: this.props.theme
};
}
render() {
return (
<div style={{ position: 'relative' }}>
<MuiThemeProvider theme={this.props.theme}>
<CssBaseline/>
<Paper>
<AppBar color="primary" position="static">
<Toolbar>
<MenuIcon style={{ marginRight: 20, marginLeft: -4 }}/>
<Typography variant="h6" color="inherit">Hyperspace</Typography>
</Toolbar>
</AppBar>
<div style={{ paddingLeft: 16, paddingTop: 16, paddingRight: 16, paddingBottom: 16, flexGrow: 1 }}>
<Typography variant="h4" component="p">
This is your theme.
</Typography>
<br/>
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum congue sem ac ornare. In nec imperdiet neque. In eleifend laoreet efficitur. Vestibulum vel odio mattis, scelerisque nibh a, ornare lectus. Phasellus sollicitudin erat et turpis pellentesque consequat. In maximus luctus purus, eu molestie elit euismod eu. Pellentesque quam lectus, sagittis eget accumsan in, consequat ut sapien. Morbi aliquet ligula erat, id dapibus nunc laoreet at. Integer sodales lacinia finibus. Aliquam augue nibh, eleifend quis consectetur et, rhoncus ut odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Typography>
</div>
<div style={{ textAlign: 'right' }}>
<Fab color="secondary" style={{ marginRight: 8, marginBottom: 8 }}>
<EditIcon/>
</Fab>
</div>
</Paper>
</MuiThemeProvider>
render() {
return (
<div style={{ position: "relative" }}>
<MuiThemeProvider theme={this.props.theme}>
<CssBaseline />
<Paper>
<AppBar color="primary" position="static">
<Toolbar>
<MenuIcon style={{ marginRight: 20, marginLeft: -4 }} />
<Typography variant="h6" color="inherit">
Hyperspace
</Typography>
</Toolbar>
</AppBar>
<div
style={{
paddingLeft: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 16,
flexGrow: 1
}}
>
<Typography variant="h4" component="p">
This is your theme.
</Typography>
<br />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
vestibulum congue sem ac ornare. In nec imperdiet neque. In
eleifend laoreet efficitur. Vestibulum vel odio mattis,
scelerisque nibh a, ornare lectus. Phasellus sollicitudin erat
et turpis pellentesque consequat. In maximus luctus purus, eu
molestie elit euismod eu. Pellentesque quam lectus, sagittis
eget accumsan in, consequat ut sapien. Morbi aliquet ligula
erat, id dapibus nunc laoreet at. Integer sodales lacinia
finibus. Aliquam augue nibh, eleifend quis consectetur et,
rhoncus ut odio. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</Typography>
</div>
)
}
<div style={{ textAlign: "right" }}>
<Fab
color="secondary"
style={{ marginRight: 8, marginBottom: 8 }}
>
<EditIcon />
</Fab>
</div>
</Paper>
</MuiThemeProvider>
</div>
);
}
}
export default ThemePreview;
export default ThemePreview;

4
src/components/ThemePreview/index.tsx
View File

@ -1,3 +1,3 @@
import ThemePreview from './ThemePreview';
import ThemePreview from "./ThemePreview";
export default ThemePreview;
export default ThemePreview;

54
src/index.tsx
View File

@ -1,38 +1,40 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
import {createUserDefaults, getConfig} from './utilities/settings';
import {collectEmojisFromServer} from './utilities/emojis';
import {SnackbarProvider} from 'notistack';
import { userLoggedIn, refreshUserAccountData } from './utilities/accounts';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HashRouter } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
import { createUserDefaults, getConfig } from "./utilities/settings";
import { collectEmojisFromServer } from "./utilities/emojis";
import { SnackbarProvider } from "notistack";
import { userLoggedIn, refreshUserAccountData } from "./utilities/accounts";
getConfig().then((config: any) => {
getConfig()
.then((config: any) => {
document.title = config.branding.name || "Hyperspace";
}).catch((err: Error) => {
})
.catch((err: Error) => {
console.error(err);
})
});
createUserDefaults();
if (userLoggedIn()) {
collectEmojisFromServer();
refreshUserAccountData();
collectEmojisFromServer();
refreshUserAccountData();
}
ReactDOM.render(
<HashRouter>
<SnackbarProvider
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>
<App />
</SnackbarProvider>
</HashRouter>,
document.getElementById('root'));
<HashRouter>
<SnackbarProvider
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
>
<App />
</SnackbarProvider>
</HashRouter>,
document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

106
src/interfaces/overrides.tsx
View File

@ -1,95 +1,97 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import ListItem, { ListItemProps } from "@material-ui/core/ListItem";
import IconButton, { IconButtonProps } from "@material-ui/core/IconButton";
import { Link, Route, Redirect, RouteProps } from "react-router-dom";
import Chip, { ChipProps } from '@material-ui/core/Chip';
import { MenuItemProps } from '@material-ui/core/MenuItem';
import { MenuItem } from '@material-ui/core';
import Button, { ButtonProps } from '@material-ui/core/Button';
import Fab, { FabProps } from '@material-ui/core/Fab';
import Avatar, { AvatarProps } from '@material-ui/core/Avatar';
import { userLoggedIn } from '../utilities/accounts';
import Chip, { ChipProps } from "@material-ui/core/Chip";
import { MenuItemProps } from "@material-ui/core/MenuItem";
import { MenuItem } from "@material-ui/core";
import Button, { ButtonProps } from "@material-ui/core/Button";
import Fab, { FabProps } from "@material-ui/core/Fab";
import Avatar, { AvatarProps } from "@material-ui/core/Avatar";
import { userLoggedIn } from "../utilities/accounts";
export interface ILinkableListItemProps extends ListItemProps {
to: string;
replace?: boolean;
to: string;
replace?: boolean;
}
export interface ILinkableIconButtonProps extends IconButtonProps {
to: string;
replace?: boolean;
to: string;
replace?: boolean;
}
export interface ILinkableChipProps extends ChipProps {
to: string;
replace?: boolean;
to: string;
replace?: boolean;
}
export interface ILinkableMenuItemProps extends MenuItemProps {
to: string;
replace?: boolean;
to: string;
replace?: boolean;
}
export interface ILinkableButtonProps extends ButtonProps {
to: string;
replace?: boolean;
to: string;
replace?: boolean;
}
export interface ILinkableFabProps extends FabProps {
to: string;
replace?: boolean;
to: string;
replace?: boolean;
}
export interface ILinkableAvatarProps extends AvatarProps {
to: string;
replace?: boolean;
to: string;
replace?: boolean;
}
export const LinkableListItem = (props: ILinkableListItemProps) => (
<ListItem {...props} component={Link as any}/>
)
<ListItem {...props} component={Link as any} />
);
export const LinkableIconButton = (props: ILinkableIconButtonProps) => (
<IconButton {...props} component={Link as any}/>
)
<IconButton {...props} component={Link as any} />
);
export const LinkableChip = (props: ILinkableChipProps) => (
<Chip {...props} component={Link as any}/>
)
<Chip {...props} component={Link as any} />
);
export const LinkableMenuItem = (props: ILinkableMenuItemProps) => (
<MenuItem {...props} component={Link as any}/>
)
<MenuItem {...props} component={Link as any} />
);
export const LinkableButton = (props: ILinkableButtonProps) => (
<Button {...props} component={Link as any}/>
)
<Button {...props} component={Link as any} />
);
export const LinkableFab = (props: ILinkableFabProps) => (
<Fab {...props} component={Link as any}/>
)
<Fab {...props} component={Link as any} />
);
export const LinkableAvatar = (props: ILinkableAvatarProps) => (
<Avatar {...props} component={Link as any}/>
)
<Avatar {...props} component={Link as any} />
);
export const ProfileRoute = (rest: any, component: Component) => (
<Route {...rest} render={props => (
<Component {...props}/>
)}/>
)
<Route {...rest} render={props => <Component {...props} />} />
);
export const PrivateRoute = (props: IPrivateRouteProps) => {
const { component, render, ...rest } = props;
return (<Route {...rest}
render={(compProps: any) => (
userLoggedIn()?
React.createElement(component, compProps):
<Redirect to="/welcome"/>
)}
const { component, render, ...rest } = props;
return (
<Route
{...rest}
render={(compProps: any) =>
userLoggedIn() ? (
React.createElement(component, compProps)
) : (
<Redirect to="/welcome" />
)
}
/>
)}
);
};
interface IPrivateRouteProps extends RouteProps {
component: any
component: any;
}

775
src/pages/About.tsx
View File

@ -1,316 +1,499 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import {
List,
ListItem,
ListItemText,
ListSubheader,
ListItemSecondaryAction,
ListItemAvatar,
Avatar,
Paper,
IconButton,
withStyles,
Typography,
Link,
Tooltip,
Button
} from '@material-ui/core';
List,
ListItem,
ListItemText,
ListSubheader,
ListItemSecondaryAction,
ListItemAvatar,
Avatar,
Paper,
IconButton,
withStyles,
Typography,
Link,
Tooltip,
Button
} from "@material-ui/core";
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import ChatIcon from '@material-ui/icons/Chat';
import PersonIcon from '@material-ui/icons/Person';
import AssignmentIcon from '@material-ui/icons/Assignment';
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
import NetworkCheckIcon from '@material-ui/icons/NetworkCheck';
import UpdateIcon from '@material-ui/icons/Update';
import InfoIcon from '@material-ui/icons/Info';
import NotesIcon from '@material-ui/icons/Notes';
import CodeIcon from '@material-ui/icons/Code';
import TicketAccountIcon from 'mdi-material-ui/TicketAccount';
import MastodonIcon from 'mdi-material-ui/Mastodon';
import EditIcon from '@material-ui/icons/Edit';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import OpenInNewIcon from "@material-ui/icons/OpenInNew";
import ChatIcon from "@material-ui/icons/Chat";
import PersonIcon from "@material-ui/icons/Person";
import AssignmentIcon from "@material-ui/icons/Assignment";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import NetworkCheckIcon from "@material-ui/icons/NetworkCheck";
import UpdateIcon from "@material-ui/icons/Update";
import InfoIcon from "@material-ui/icons/Info";
import NotesIcon from "@material-ui/icons/Notes";
import CodeIcon from "@material-ui/icons/Code";
import TicketAccountIcon from "mdi-material-ui/TicketAccount";
import MastodonIcon from "mdi-material-ui/Mastodon";
import EditIcon from "@material-ui/icons/Edit";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import {styles} from './PageLayout.styles';
import {Instance} from '../types/Instance';
import {LinkableIconButton, LinkableAvatar} from '../interfaces/overrides';
import Mastodon from 'megalodon';
import { UAccount } from '../types/Account';
import { getConfig } from '../utilities/settings';
import { License, Federation } from '../types/Config';
import { styles } from "./PageLayout.styles";
import { Instance } from "../types/Instance";
import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
import Mastodon from "megalodon";
import { UAccount } from "../types/Account";
import { getConfig } from "../utilities/settings";
import { License, Federation } from "../types/Config";
interface IAboutPageState {
instance?: Instance;
federated?: boolean;
federation?: Federation;
developer?: boolean;
hyperspaceAdmin?: UAccount;
hyperspaceAdminName?: string;
versionNumber?: string;
brandName?: string;
brandBg?: string;
license: License;
repository?: string;
interface IAboutPageState {
instance?: Instance;
federated?: boolean;
federation?: Federation;
developer?: boolean;
hyperspaceAdmin?: UAccount;
hyperspaceAdminName?: string;
versionNumber?: string;
brandName?: string;
brandBg?: string;
license: License;
repository?: string;
}
class AboutPage extends Component<any, IAboutPageState> {
client: Mastodon;
client: Mastodon;
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
localStorage.getItem("baseurl") + "/api/v1"
);
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
this.state = {
license: {
name: "Apache 2.0 License (inherited)",
url: "https://www.apache.org/licenses/LICENSE-2.0"
}
};
}
this.state = {
componentWillMount() {
this.client.get("/instance").then((resp: any) => {
this.setState({
instance: resp.data as Instance
});
});
getConfig().then((config: any) => {
this.client
.get("/accounts/" + (config.admin ? config.admin.account : "0"))
.then((resp: any) => {
let account = resp.data;
this.setState({
hyperspaceAdmin: account,
hyperspaceAdminName: config.admin.name,
federation: config.federation,
developer: config.developer ? config.developer === "true" : false,
versionNumber: config.version,
brandName: config.branding ? config.branding.name : "Hyperspace",
brandBg: config.branding.background,
license: {
name: "Apache 2.0 License (inherited)",
url: "https://www.apache.org/licenses/LICENSE-2.0"
}
}
}
componentWillMount() {
this.client.get('/instance').then((resp: any) => {
this.setState({
instance: resp.data as Instance
})
name: config.license.name,
url: config.license.url
},
repository: config.repository
});
})
.catch((err: Error) => {
console.error(err.message);
});
});
}
getConfig().then((config: any) => {
this.client.get('/accounts/' + (config.admin? config.admin.account: "0")).then((resp: any) => {
let account = resp.data;
this.setState({
hyperspaceAdmin: account,
hyperspaceAdminName: config.admin.name,
federation: config.federation,
developer: config.developer? config.developer === "true": false,
versionNumber: config.version,
brandName: config.branding? config.branding.name: "Hyperspace",
brandBg: config.branding.background,
license: {
name: config.license.name,
url: config.license.url
},
repository: config.repository
})
}).catch((err: Error) => {
console.error(err.message);
})
})
}
render() {
const { classes } = this.props;
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
<Paper>
<div
className={classes.instanceHeaderPaper}
style={{
backgroundImage: `url("${this.state.instance && this.state.instance.thumbnail? this.state.instance.thumbnail: ""}")`
}}
return (
<div className={classes.pageLayoutConstraints}>
<Paper>
<div
className={classes.instanceHeaderPaper}
style={{
backgroundImage: `url("${
this.state.instance && this.state.instance.thumbnail
? this.state.instance.thumbnail
: ""
}")`
}}
>
<IconButton
className={classes.instanceToolbar}
href={localStorage.getItem("baseurl") as string}
target="_blank"
rel="noreferrer"
color="inherit"
>
<OpenInNewIcon />
</IconButton>
<Typography
className={classes.instanceHeaderText}
variant="h4"
component="p"
>
{this.state.instance ? this.state.instance.uri : "Loading..."}
</Typography>
</div>
<List className={classes.pageListConstraints}>
{localStorage["isPleroma"] == "false" && (
<ListItem>
<ListItemAvatar>
<LinkableAvatar
to={`/profile/${
this.state.instance
? this.state.instance.contact_account.id
: 0
}`}
alt="Instance admin"
src={
this.state.instance
? this.state.instance.contact_account.avatar_static
: ""
}
/>
</ListItemAvatar>
<ListItemText
primary="Instance admin"
secondary={
this.state.instance
? `${this.state.instance.contact_account.display_name} (@${this.state.instance.contact_account.acct})`
: "Loading..."
}
/>
<ListItemSecondaryAction>
<Tooltip title="Send a post or message">
<LinkableIconButton
to={`/compose?visibility=public&acct=${
this.state.instance
? this.state.instance.contact_account.acct
: ""
}`}
>
<IconButton className={classes.instanceToolbar} href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer" color="inherit">
<OpenInNewIcon/>
</IconButton>
<Typography className={classes.instanceHeaderText} variant="h4" component="p">{this.state.instance ? this.state.instance.uri: "Loading..."}</Typography>
</div>
<List className={classes.pageListConstraints}>
{(localStorage['isPleroma'] == "false") && <ListItem>
<ListItemAvatar>
<LinkableAvatar to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`} alt="Instance admin" src={this.state.instance? this.state.instance.contact_account.avatar_static: ""}/>
</ListItemAvatar>
<ListItemText primary="Instance admin" secondary={
this.state.instance ? `${this.state.instance.contact_account.display_name} (@${this.state.instance.contact_account.acct})`:
"Loading..."
}/>
<ListItemSecondaryAction>
<Tooltip title="Send a post or message">
<LinkableIconButton to={`/compose?visibility=public&acct=${this.state.instance? this.state.instance.contact_account.acct: ""}`}>
<ChatIcon/>
</LinkableIconButton>
</Tooltip>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`}>
<AssignmentIndIcon/>
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>}
<ListItem>
<ListItemAvatar>
<Avatar>
<AssignmentIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Terms of service"
secondary="View the rules and privacy policies"
/>
<ListItemSecondaryAction>
<Tooltip title="Open in browser">
<IconButton href={localStorage.getItem("baseurl") as string + "/terms"} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<TicketAccountIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Invite a friend"
secondary="Invite a friend to this instance"
/>
<ListItemSecondaryAction>
<Tooltip title="Go to invite settings">
<Button href={localStorage.getItem("baseurl") as string + "/invites"} target="_blank" rel="noreferrer">
Invite
</Button>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<MastodonIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Mastodon version"
secondary={this.state.instance? this.state.instance.version: "x.x.x"}
/>
</ListItem>
</List>
</Paper>
<br/>
<Paper>
<div
className={classes.instanceHeaderPaper}
style={{
backgroundImage: `url("${this.state.brandBg? this.state.brandBg: ""}")`
}}
<ChatIcon />
</LinkableIconButton>
</Tooltip>
<Tooltip title="View profile">
<LinkableIconButton
to={`/profile/${
this.state.instance
? this.state.instance.contact_account.id
: 0
}`}
>
<div className={classes.instanceToolbar}>
{
this.state.repository?
<Tooltip title="View source code">
<IconButton href={this.state.repository} target="_blank" rel="noreferrer" color="inherit">
<CodeIcon/>
</IconButton>
</Tooltip>: null
}
</div>
<Typography className={classes.instanceHeaderText} variant="h4" component="p">
{this.state.brandName? this.state.brandName: "Hyperspace"}
</Typography>
</div>
<List className={classes.pageListConstraints}>
<ListItem>
<ListItemAvatar>
<LinkableAvatar to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`} src={this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.avatar_static: ""}>
<PersonIcon/>
</LinkableAvatar>
</ListItemAvatar>
<ListItemText primary="App provider" secondary={this.state.hyperspaceAdmin && this.state.hyperspaceAdminName? (this.state.hyperspaceAdminName || this.state.hyperspaceAdmin.display_name || "@" + this.state.hyperspaceAdmin.acct): "No provider set in config"}/>
<ListItemSecondaryAction>
<Tooltip title="Send a post or message">
<LinkableIconButton to={`/compose?visibility=${this.state.federated? "public": "private"}&acct=${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.acct: ""}`}>
<ChatIcon/>
</LinkableIconButton>
</Tooltip>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`}>
<AssignmentIndIcon/>
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<NotesIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="License" secondary={this.state.license.name}/>
<ListItemSecondaryAction>
<Tooltip title = "View license">
<IconButton href={this.state.license.url} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<UpdateIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="Release channel" secondary={
this.state?
this.state.developer?
"Developer":
"Release":
"Loading..."
}/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<InfoIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="App version" secondary={`${this.state? this.state.brandName: "Hyperspace"} v${this.state? this.state.versionNumber: "1.0.x"} ${this.state && this.state.brandName !== "Hyperspace"? "(Hyperspace-like)": ""}`}/>
</ListItem>
</List>
</Paper>
<br/>
<ListSubheader>Federation status</ListSubheader>
<Paper>
<List className={classes.pageListConstraints}>
<ListItem>
<ListItemAvatar>
<Avatar>
<NetworkCheckIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="General federation" secondary={this.state.federation && this.state.federation.enablePublicTimeline? "This instance is federated.": "This instance is not federated."}/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<VpnKeyIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="Universal login" secondary={this.state.federation && this.state.federation.universalLogin? "This instance supports universal login.": "This instance does not support universal login."}/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<EditIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="Public posting" secondary={this.state.federation && this.state.federation.allowPublicPosts? "This instance allows posting publicly.": "This instance does not allow posting publicly."}/>
</ListItem>
</List>
</Paper>
<br/>
<div className={classes.pageLayoutFooter}>
<Typography variant="caption">(C) {new Date().getFullYear()} {this.state? this.state.brandName: "Hyperspace"} developers. All rights reserved.</Typography>
<Typography variant="caption" paragraph>{this.state? this.state.brandName: "Hyperspace"} is made possible by the <Link href={"https://material-ui.com"} target="_blank" rel="noreferrer">Material UI</Link> project, <Link href={"https://www.npmjs.com/package/megalodon"} target="_blank" rel="noreferrer">Megalodon</Link> library, and other <Link href={"https://github.com/hyperspacedev/hyperspace/blob/master/package.json"} target="_blank" rel="noreferrer">open source software</Link>.</Typography>
</div>
<AssignmentIndIcon />
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
)}
<ListItem>
<ListItemAvatar>
<Avatar>
<AssignmentIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Terms of service"
secondary="View the rules and privacy policies"
/>
<ListItemSecondaryAction>
<Tooltip title="Open in browser">
<IconButton
href={
(localStorage.getItem("baseurl") as string) + "/terms"
}
target="_blank"
rel="noreferrer"
>
<OpenInNewIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<TicketAccountIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Invite a friend"
secondary="Invite a friend to this instance"
/>
<ListItemSecondaryAction>
<Tooltip title="Go to invite settings">
<Button
href={
(localStorage.getItem("baseurl") as string) + "/invites"
}
target="_blank"
rel="noreferrer"
>
Invite
</Button>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<MastodonIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Mastodon version"
secondary={
this.state.instance ? this.state.instance.version : "x.x.x"
}
/>
</ListItem>
</List>
</Paper>
<br />
<Paper>
<div
className={classes.instanceHeaderPaper}
style={{
backgroundImage: `url("${
this.state.brandBg ? this.state.brandBg : ""
}")`
}}
>
<div className={classes.instanceToolbar}>
{this.state.repository ? (
<Tooltip title="View source code">
<IconButton
href={this.state.repository}
target="_blank"
rel="noreferrer"
color="inherit"
>
<CodeIcon />
</IconButton>
</Tooltip>
) : null}
</div>
);
}
<Typography
className={classes.instanceHeaderText}
variant="h4"
component="p"
>
{this.state.brandName ? this.state.brandName : "Hyperspace"}
</Typography>
</div>
<List className={classes.pageListConstraints}>
<ListItem>
<ListItemAvatar>
<LinkableAvatar
to={`/profile/${
this.state.hyperspaceAdmin
? this.state.hyperspaceAdmin.id
: 0
}`}
src={
this.state.hyperspaceAdmin
? this.state.hyperspaceAdmin.avatar_static
: ""
}
>
<PersonIcon />
</LinkableAvatar>
</ListItemAvatar>
<ListItemText
primary="App provider"
secondary={
this.state.hyperspaceAdmin && this.state.hyperspaceAdminName
? this.state.hyperspaceAdminName ||
this.state.hyperspaceAdmin.display_name ||
"@" + this.state.hyperspaceAdmin.acct
: "No provider set in config"
}
/>
<ListItemSecondaryAction>
<Tooltip title="Send a post or message">
<LinkableIconButton
to={`/compose?visibility=${
this.state.federated ? "public" : "private"
}&acct=${
this.state.hyperspaceAdmin
? this.state.hyperspaceAdmin.acct
: ""
}`}
>
<ChatIcon />
</LinkableIconButton>
</Tooltip>
<Tooltip title="View profile">
<LinkableIconButton
to={`/profile/${
this.state.hyperspaceAdmin
? this.state.hyperspaceAdmin.id
: 0
}`}
>
<AssignmentIndIcon />
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<NotesIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="License"
secondary={this.state.license.name}
/>
<ListItemSecondaryAction>
<Tooltip title="View license">
<IconButton
href={this.state.license.url}
target="_blank"
rel="noreferrer"
>
<OpenInNewIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<UpdateIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Release channel"
secondary={
this.state
? this.state.developer
? "Developer"
: "Release"
: "Loading..."
}
/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<InfoIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="App version"
secondary={`${
this.state ? this.state.brandName : "Hyperspace"
} v${this.state ? this.state.versionNumber : "1.0.x"} ${
this.state && this.state.brandName !== "Hyperspace"
? "(Hyperspace-like)"
: ""
}`}
/>
</ListItem>
</List>
</Paper>
<br />
<ListSubheader>Federation status</ListSubheader>
<Paper>
<List className={classes.pageListConstraints}>
<ListItem>
<ListItemAvatar>
<Avatar>
<NetworkCheckIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="General federation"
secondary={
this.state.federation &&
this.state.federation.enablePublicTimeline
? "This instance is federated."
: "This instance is not federated."
}
/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<VpnKeyIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Universal login"
secondary={
this.state.federation && this.state.federation.universalLogin
? "This instance supports universal login."
: "This instance does not support universal login."
}
/>
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar>
<EditIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary="Public posting"
secondary={
this.state.federation &&
this.state.federation.allowPublicPosts
? "This instance allows posting publicly."
: "This instance does not allow posting publicly."
}
/>
</ListItem>
</List>
</Paper>
<br />
<div className={classes.pageLayoutFooter}>
<Typography variant="caption">
(C) {new Date().getFullYear()}{" "}
{this.state ? this.state.brandName : "Hyperspace"} developers. All
rights reserved.
</Typography>
<Typography variant="caption" paragraph>
{this.state ? this.state.brandName : "Hyperspace"} is made possible
by the{" "}
<Link
href={"https://material-ui.com"}
target="_blank"
rel="noreferrer"
>
Material UI
</Link>{" "}
project,{" "}
<Link
href={"https://www.npmjs.com/package/megalodon"}
target="_blank"
rel="noreferrer"
>
Megalodon
</Link>{" "}
library, and other{" "}
<Link
href={
"https://github.com/hyperspacedev/hyperspace/blob/master/package.json"
}
target="_blank"
rel="noreferrer"
>
open source software
</Link>
.
</Typography>
</div>
</div>
);
}
}
export default withStyles(styles)(AboutPage);
export default withStyles(styles)(AboutPage);

47
src/pages/Blocked.tsx Normal file
View File

@ -0,0 +1,47 @@
import React, { Component } from "react";
import { styles } from "./PageLayout.styles";
import {
Button,
IconButton,
List,
ListItem,
ListItemAvatar,
ListItemSecondaryAction,
ListItemText,
ListSubheader,
Paper,
Switch,
withStyles
} from "@material-ui/core";
import DevicesIcon from "@material-ui/core/SvgIcon/SvgIcon";
class Blocked extends Component<any, any> {
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
<ListSubheader>Blocked servers</ListSubheader>
<Button className={classes.clearAllButton} variant="text">
{" "}
Add
</Button>
<Paper className={classes.pageListConstraints}>
<List>
<ListItem>
<ListItemAvatar>
<DevicesIcon color="action" />
</ListItemAvatar>
<ListItemText
primary="Match system appearance"
secondary="Obey light/dark theme from your system"
/>
</ListItem>
</List>
</Paper>
</div>
);
}
}
export default withStyles(styles)(Blocked);

49
src/pages/Compose.styles.tsx
View File

@ -1,48 +1,49 @@
import { Theme, createStyles } from "@material-ui/core";
export const styles = (theme: Theme) => createStyles({
export const styles = (theme: Theme) =>
createStyles({
dialog: {
minHeight: 400
minHeight: 400
},
dialogContent: {
paddingBottom: 0
paddingBottom: 0
},
dialogActions: {
paddingLeft: theme.spacing.unit * 1.25
paddingLeft: theme.spacing.unit * 1.25
},
charsReachingLimit: {
color: theme.palette.error.main
color: theme.palette.error.main
},
warningCaption: {
height: 16,
verticalAlign: "text-bottom"
height: 16,
verticalAlign: "text-bottom"
},
composeAttachmentArea: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden'
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
overflow: "hidden"
},
composeAttachmentAreaGridList: {
height: 250,
width: '100%'
height: 250,
width: "100%"
},
composeEmoji: {
marginTop: theme.spacing.unit * 8
marginTop: theme.spacing.unit * 8
},
desktopOnly: {
display: "none",
[theme.breakpoints.up('sm')]: {
display: "block"
}
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block"
}
},
pollWizardOptionIcon: {
marginRight: theme.spacing.unit * 2,
marginTop: 4,
marginBottom: 4,
color: theme.palette.grey[700]
marginRight: theme.spacing.unit * 2,
marginTop: 4,
marginBottom: 4,
color: theme.palette.grey[700]
},
pollWizardFlexGrow: {
flexGrow: 1
flexGrow: 1
}
});
});

1079
src/pages/Compose.tsx
View File

File diff suppressed because it is too large Load Diff

233
src/pages/Conversation.tsx
View File

@ -1,120 +1,151 @@
import React, { Component } from 'react';
import { withStyles, CircularProgress, Typography, Paper} from '@material-ui/core';
import {styles} from './PageLayout.styles';
import Post from '../components/Post';
import { Status } from '../types/Status';
import { Context } from '../types/Context';
import Mastodon from 'megalodon';
import {withSnackbar} from 'notistack';
import React, { Component } from "react";
import {
withStyles,
CircularProgress,
Typography,
Paper
} from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import Post from "../components/Post";
import { Status } from "../types/Status";
import { Context } from "../types/Context";
import Mastodon from "megalodon";
import { withSnackbar } from "notistack";
interface IConversationPageState {
posts?: [Status];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
conversationId: string;
posts?: [Status];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
conversationId: string;
}
class Conversation extends Component<any, IConversationPageState> {
client: Mastodon;
streamListener: any;
client: Mastodon;
streamListener: any;
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.state = {
viewIsLoading: true,
conversationId: props.match.params.conversationId
};
this.state = {
viewIsLoading: true,
conversationId: props.match.params.conversationId
}
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");
}
getContext() {
this.client.get(`/statuses/${this.state.conversationId}`).then((resp: any) => {
let result: Status = resp.data;
this.setState({ posts: [result] });
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("Couldn't get conversation: " + err.name, { variant: 'error' });
})
this.client.get(`/statuses/${this.state.conversationId}/context`).then((resp: any) => {
let context: Context = resp.data;
let posts = this.state.posts;
let array: any[] = [];
if (posts) {
array = array.concat(context.ancestors).concat(posts).concat(context.descendants);
}
this.setState({
posts: array as [Status],
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
});
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("Couldn't get conversation: " + err.name, { variant: 'error' });
getContext() {
this.client
.get(`/statuses/${this.state.conversationId}`)
.then((resp: any) => {
let result: Status = resp.data;
this.setState({ posts: [result] });
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
}
componentWillReceiveProps(props: any) {
if (props.match.params.conversationId !== this.state.conversationId) {
this.getContext()
this.props.enqueueSnackbar("Couldn't get conversation: " + err.name, {
variant: "error"
});
});
this.client
.get(`/statuses/${this.state.conversationId}/context`)
.then((resp: any) => {
let context: Context = resp.data;
let posts = this.state.posts;
let array: any[] = [];
if (posts) {
array = array
.concat(context.ancestors)
.concat(posts)
.concat(context.descendants);
}
}
this.setState({
posts: array as [Status],
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
});
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar("Couldn't get conversation: " + err.name, {
variant: "error"
});
});
}
componentWillMount() {
this.getContext()
componentWillReceiveProps(props: any) {
if (props.match.params.conversationId !== this.state.conversationId) {
this.getContext();
}
}
componentDidUpdate() {
const where: HTMLElement | null = document.getElementById(`post_${this.state.conversationId}`);
if (where && this.state.posts && this.state.posts[0].id !== this.state.conversationId) {
window.scrollTo(0, where.getBoundingClientRect().top);
}
}
componentWillMount() {
this.getContext();
}
render() {
const {classes} = this.props;
return (
<div className={classes.pageLayoutMaxConstraints}>
{ this.state.posts?
<div>
{ this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client}/>
}) }
</div>:
<span/>
}
{
this.state.viewDidError?
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">Something went wrong when loading this conversation.</Typography>
<Typography>{this.state.viewDidErrorCode? this.state.viewDidErrorCode: ""}</Typography>
</Paper>:
<span/>
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
<span/>
}
</div>
);
componentDidUpdate() {
const where: HTMLElement | null = document.getElementById(
`post_${this.state.conversationId}`
);
if (
where &&
this.state.posts &&
this.state.posts[0].id !== this.state.conversationId
) {
window.scrollTo(0, where.getBoundingClientRect().top);
}
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutMaxConstraints}>
{this.state.posts ? (
<div>
{this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client} />;
})}
</div>
) : (
<span />
)}
{this.state.viewDidError ? (
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">
Something went wrong when loading this conversation.
</Typography>
<Typography>
{this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
</Typography>
</Paper>
) : (
<span />
)}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : (
<span />
)}
</div>
);
}
}
export default withStyles(styles)(withSnackbar(Conversation));

372
src/pages/Home.tsx
View File

@ -1,193 +1,225 @@
import React, { Component } from 'react';
import { withStyles, CircularProgress, Typography, Paper, Button, Chip, Avatar, Slide} from '@material-ui/core';
import {styles} from './PageLayout.styles';
import Post from '../components/Post';
import { Status } from '../types/Status';
import Mastodon, { StreamListener } from 'megalodon';
import {withSnackbar} from 'notistack';
import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
import React, { Component } from "react";
import {
withStyles,
CircularProgress,
Typography,
Paper,
Button,
Chip,
Avatar,
Slide
} from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import Post from "../components/Post";
import { Status } from "../types/Status";
import Mastodon, { StreamListener } from "megalodon";
import { withSnackbar } from "notistack";
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
interface IHomePageState {
posts?: [Status];
backlogPosts?: [Status] | null;
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
posts?: [Status];
backlogPosts?: [Status] | null;
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
}
class HomePage extends Component<any, IHomePageState> {
client: Mastodon;
streamListener: StreamListener;
client: Mastodon;
streamListener: StreamListener;
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.state = {
viewIsLoading: true,
backlogPosts: null
};
this.state = {
viewIsLoading: true,
backlogPosts: null
}
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
(localStorage.getItem("baseurl") as string) + "/api/v1"
);
this.streamListener = this.client.stream("/streaming/user");
}
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1");
this.streamListener = this.client.stream('/streaming/user');
}
componentWillMount() {
this.streamListener.on('connect', () => {
this.client.get('/timelines/home', {limit: 40}).then((resp: any) => {
let statuses: [Status] = resp.data;
this.setState({
posts: statuses,
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
})
}).catch((resp: any) => {
this.setState({
viewIsLoading: false,
viewDidLoad: true,
viewDidError: true,
viewDidErrorCode: String(resp)
})
this.props.enqueueSnackbar("Failed to get posts.", {
variant: 'error',
});
})
componentWillMount() {
this.streamListener.on("connect", () => {
this.client
.get("/timelines/home", { limit: 40 })
.then((resp: any) => {
let statuses: [Status] = resp.data;
this.setState({
posts: statuses,
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
});
})
.catch((resp: any) => {
this.setState({
viewIsLoading: false,
viewDidLoad: true,
viewDidError: true,
viewDidErrorCode: String(resp)
});
this.props.enqueueSnackbar("Failed to get posts.", {
variant: "error"
});
});
});
this.streamListener.on('update', (status: Status) => {
let queue = this.state.backlogPosts;
if (queue !== null && queue !== undefined) { queue.unshift(status); } else { queue = [status] }
this.setState({ backlogPosts: queue });
})
this.streamListener.on("update", (status: Status) => {
let queue = this.state.backlogPosts;
if (queue !== null && queue !== undefined) {
queue.unshift(status);
} else {
queue = [status];
}
this.setState({ backlogPosts: queue });
});
this.streamListener.on('delete', (id: number) => {
let posts = this.state.posts;
if (posts) {
posts.forEach((post: Status) => {
if (posts && parseInt(post.id) === id) {
posts.splice(posts.indexOf(post), 1);
}
})
this.setState({ posts });
}
})
this.streamListener.on("delete", (id: number) => {
let posts = this.state.posts;
if (posts) {
posts.forEach((post: Status) => {
if (posts && parseInt(post.id) === id) {
posts.splice(posts.indexOf(post), 1);
}
});
this.setState({ posts });
}
});
this.streamListener.on('error', (err: Error) => {
this.setState({
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("An error occured.", {
variant: 'error',
});
})
this.streamListener.on("error", (err: Error) => {
this.setState({
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar("An error occured.", {
variant: "error"
});
});
this.streamListener.on('heartbeat', () => {
})
this.streamListener.on("heartbeat", () => {});
}
componentWillUnmount() {
this.streamListener.stop();
}
insertBacklog() {
window.scrollTo(0, 0);
let posts = this.state.posts;
let backlog = this.state.backlogPosts;
if (posts && backlog && backlog.length > 0) {
let push = backlog.concat(posts);
this.setState({ posts: push as [Status], backlogPosts: null });
}
}
componentWillUnmount() {
this.streamListener.stop();
loadMoreTimelinePieces() {
this.setState({ viewDidLoad: false, viewIsLoading: true });
if (this.state.posts) {
this.client
.get("/timelines/home", {
max_id: this.state.posts[this.state.posts.length - 1].id,
limit: 20
})
.then((resp: any) => {
let newPosts: [Status] = resp.data;
let posts = this.state.posts as [Status];
newPosts.forEach((post: Status) => {
posts.push(post);
});
this.setState({
viewIsLoading: false,
viewDidLoad: true,
posts
});
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar("Failed to get posts", {
variant: "error"
});
});
}
}
insertBacklog() {
window.scrollTo(0, 0);
let posts = this.state.posts;
let backlog = this.state.backlogPosts;
if (posts && backlog && backlog.length > 0) {
let push = backlog.concat(posts);
this.setState({ posts: push as [Status], backlogPosts: null })
}
}
render() {
const { classes } = this.props;
loadMoreTimelinePieces() {
this.setState({ viewDidLoad: false, viewIsLoading: true})
if (this.state.posts) {
this.client.get('/timelines/home', { max_id: this.state.posts[this.state.posts.length - 1].id, limit: 20 }).then((resp: any) => {
let newPosts: [Status] = resp.data;
let posts = this.state.posts as [Status];
newPosts.forEach((post: Status) => {
posts.push(post);
});
this.setState({
viewIsLoading: false,
viewDidLoad: true,
posts
})
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("Failed to get posts", {
variant: 'error',
});
})
}
}
render() {
const {classes} = this.props;
return (
<div className={classes.pageLayoutMaxConstraints}>
{
this.state.backlogPosts?
<div className={classes.pageTopChipContainer}>
<div className={classes.pageTopChips}>
<Slide direction="down" in={true}>
<Chip
avatar={
<Avatar>
<ArrowUpwardIcon/>
</Avatar>
}
label={`View ${this.state.backlogPosts.length} new post${this.state.backlogPosts.length > 1? "s": ""}`}
color="primary"
className={classes.pageTopChip}
onClick={() => this.insertBacklog()}
clickable
/>
</Slide>
</div>
</div>: null
}
{ this.state.posts?
<div>
{ this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client}/>
}) }
<br/>
{
this.state.viewDidLoad && !this.state.viewDidError? <div style={{textAlign: "center"}} onClick={() => this.loadMoreTimelinePieces()}><Button variant="contained">Load more</Button></div>: null
}
</div>:
<span/>
}
{
this.state.viewDidError?
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">Something went wrong when loading this timeline.</Typography>
<Typography>{this.state.viewDidErrorCode? this.state.viewDidErrorCode: ""}</Typography>
</Paper>:
<span/>
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
<span/>
}
return (
<div className={classes.pageLayoutMaxConstraints}>
{this.state.backlogPosts ? (
<div className={classes.pageTopChipContainer}>
<div className={classes.pageTopChips}>
<Slide direction="down" in={true}>
<Chip
avatar={
<Avatar>
<ArrowUpwardIcon />
</Avatar>
}
label={`View ${this.state.backlogPosts.length} new post${
this.state.backlogPosts.length > 1 ? "s" : ""
}`}
color="primary"
className={classes.pageTopChip}
onClick={() => this.insertBacklog()}
clickable
/>
</Slide>
</div>
);
}
</div>
) : null}
{this.state.posts ? (
<div>
{this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client} />;
})}
<br />
{this.state.viewDidLoad && !this.state.viewDidError ? (
<div
style={{ textAlign: "center" }}
onClick={() => this.loadMoreTimelinePieces()}
>
<Button variant="contained">Load more</Button>
</div>
) : null}
</div>
) : (
<span />
)}
{this.state.viewDidError ? (
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">
Something went wrong when loading this timeline.
</Typography>
<Typography>
{this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
</Typography>
</Paper>
) : (
<span />
)}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : (
<span />
)}
</div>
);
}
}
export default withStyles(styles)(withSnackbar(HomePage));

373
src/pages/Local.tsx
View File

@ -1,193 +1,226 @@
import React, { Component } from 'react';
import { withStyles, CircularProgress, Typography, Paper, Button, Chip, Avatar, Slide} from '@material-ui/core';
import {styles} from './PageLayout.styles';
import Post from '../components/Post';
import { Status } from '../types/Status';
import Mastodon, { StreamListener } from 'megalodon';
import {withSnackbar} from 'notistack';
import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
import React, { Component } from "react";
import {
withStyles,
CircularProgress,
Typography,
Paper,
Button,
Chip,
Avatar,
Slide
} from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import Post from "../components/Post";
import { Status } from "../types/Status";
import Mastodon, { StreamListener } from "megalodon";
import { withSnackbar } from "notistack";
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
interface ILocalPageState {
posts?: [Status];
backlogPosts?: [Status] | null;
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
posts?: [Status];
backlogPosts?: [Status] | null;
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
}
class LocalPage extends Component<any, ILocalPageState> {
client: Mastodon;
streamListener: StreamListener;
client: Mastodon;
streamListener: StreamListener;
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.state = {
viewIsLoading: true,
backlogPosts: null
};
this.state = {
viewIsLoading: true,
backlogPosts: null
}
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
(localStorage.getItem("baseurl") as string) + "/api/v1"
);
this.streamListener = this.client.stream("/streaming/public/local");
}
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1");
this.streamListener = this.client.stream('/streaming/public/local');
}
componentWillMount() {
this.streamListener.on('connect', () => {
this.client.get('/timelines/public', {limit: 40, local: true}).then((resp: any) => {
let statuses: [Status] = resp.data;
this.setState({
posts: statuses,
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
})
}).catch((resp: any) => {
this.setState({
viewIsLoading: false,
viewDidLoad: true,
viewDidError: true,
viewDidErrorCode: String(resp)
})
this.props.enqueueSnackbar("Failed to get posts.", {
variant: 'error',
});
})
componentWillMount() {
this.streamListener.on("connect", () => {
this.client
.get("/timelines/public", { limit: 40, local: true })
.then((resp: any) => {
let statuses: [Status] = resp.data;
this.setState({
posts: statuses,
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
});
})
.catch((resp: any) => {
this.setState({
viewIsLoading: false,
viewDidLoad: true,
viewDidError: true,
viewDidErrorCode: String(resp)
});
this.props.enqueueSnackbar("Failed to get posts.", {
variant: "error"
});
});
});
this.streamListener.on('update', (status: Status) => {
let queue = this.state.backlogPosts;
if (queue !== null && queue !== undefined) { queue.unshift(status); } else { queue = [status] }
this.setState({ backlogPosts: queue });
})
this.streamListener.on("update", (status: Status) => {
let queue = this.state.backlogPosts;
if (queue !== null && queue !== undefined) {
queue.unshift(status);
} else {
queue = [status];
}
this.setState({ backlogPosts: queue });
});
this.streamListener.on('delete', (id: number) => {
let posts = this.state.posts;
if (posts) {
posts.forEach((post: Status) => {
if (posts && parseInt(post.id) === id) {
posts.splice(posts.indexOf(post), 1);
}
})
this.setState({ posts });
}
})
this.streamListener.on("delete", (id: number) => {
let posts = this.state.posts;
if (posts) {
posts.forEach((post: Status) => {
if (posts && parseInt(post.id) === id) {
posts.splice(posts.indexOf(post), 1);
}
});
this.setState({ posts });
}
});
this.streamListener.on('error', (err: Error) => {
this.setState({
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("An error occured.", {
variant: 'error',
});
})
this.streamListener.on("error", (err: Error) => {
this.setState({
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar("An error occured.", {
variant: "error"
});
});
this.streamListener.on('heartbeat', () => {
})
this.streamListener.on("heartbeat", () => {});
}
componentWillUnmount() {
this.streamListener.stop();
}
insertBacklog() {
window.scrollTo(0, 0);
let posts = this.state.posts;
let backlog = this.state.backlogPosts;
if (posts && backlog && backlog.length > 0) {
let push = backlog.concat(posts);
this.setState({ posts: push as [Status], backlogPosts: null });
}
}
componentWillUnmount() {
this.streamListener.stop();
loadMoreTimelinePieces() {
this.setState({ viewDidLoad: false, viewIsLoading: true });
if (this.state.posts) {
this.client
.get("/timelines/public", {
max_id: this.state.posts[this.state.posts.length - 1].id,
limit: 20,
local: true
})
.then((resp: any) => {
let newPosts: [Status] = resp.data;
let posts = this.state.posts as [Status];
newPosts.forEach((post: Status) => {
posts.push(post);
});
this.setState({
viewIsLoading: false,
viewDidLoad: true,
posts
});
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar("Failed to get posts", {
variant: "error"
});
});
}
}
insertBacklog() {
window.scrollTo(0, 0);
let posts = this.state.posts;
let backlog = this.state.backlogPosts;
if (posts && backlog && backlog.length > 0) {
let push = backlog.concat(posts);
this.setState({ posts: push as [Status], backlogPosts: null })
}
}
render() {
const { classes } = this.props;
loadMoreTimelinePieces() {
this.setState({ viewDidLoad: false, viewIsLoading: true})
if (this.state.posts) {
this.client.get('/timelines/public', { max_id: this.state.posts[this.state.posts.length - 1].id, limit: 20, local: true }).then((resp: any) => {
let newPosts: [Status] = resp.data;
let posts = this.state.posts as [Status];
newPosts.forEach((post: Status) => {
posts.push(post);
});
this.setState({
viewIsLoading: false,
viewDidLoad: true,
posts
})
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("Failed to get posts", {
variant: 'error',
});
})
}
}
render() {
const {classes} = this.props;
return (
<div className={classes.pageLayoutMaxConstraints}>
{
this.state.backlogPosts?
<div className={classes.pageTopChipContainer}>
<div className={classes.pageTopChips}>
<Slide direction="down" in={true}>
<Chip
avatar={
<Avatar>
<ArrowUpwardIcon/>
</Avatar>
}
label={`View ${this.state.backlogPosts.length} new post${this.state.backlogPosts.length > 1? "s": ""}`}
color="primary"
className={classes.pageTopChip}
onClick={() => this.insertBacklog()}
clickable
/>
</Slide>
</div>
</div>: null
}
{ this.state.posts?
<div>
{this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client}/>
})}
<br/>
{
this.state.viewDidLoad && !this.state.viewDidError? <div style={{textAlign: "center"}} onClick={() => this.loadMoreTimelinePieces()}><Button variant="contained">Load more</Button></div>: null
}
</div>:
<span/>
}
{
this.state.viewDidError?
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">Something went wrong when loading this timeline.</Typography>
<Typography>{this.state.viewDidErrorCode? this.state.viewDidErrorCode: ""}</Typography>
</Paper>:
<span/>
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
<span/>
}
return (
<div className={classes.pageLayoutMaxConstraints}>
{this.state.backlogPosts ? (
<div className={classes.pageTopChipContainer}>
<div className={classes.pageTopChips}>
<Slide direction="down" in={true}>
<Chip
avatar={
<Avatar>
<ArrowUpwardIcon />
</Avatar>
}
label={`View ${this.state.backlogPosts.length} new post${
this.state.backlogPosts.length > 1 ? "s" : ""
}`}
color="primary"
className={classes.pageTopChip}
onClick={() => this.insertBacklog()}
clickable
/>
</Slide>
</div>
);
}
</div>
) : null}
{this.state.posts ? (
<div>
{this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client} />;
})}
<br />
{this.state.viewDidLoad && !this.state.viewDidError ? (
<div
style={{ textAlign: "center" }}
onClick={() => this.loadMoreTimelinePieces()}
>
<Button variant="contained">Load more</Button>
</div>
) : null}
</div>
) : (
<span />
)}
{this.state.viewDidError ? (
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">
Something went wrong when loading this timeline.
</Typography>
<Typography>
{this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
</Typography>
</Paper>
) : (
<span />
)}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : (
<span />
)}
</div>
);
}
}
export default withStyles(styles)(withSnackbar(LocalPage));

207
src/pages/Messages.tsx
View File

@ -1,107 +1,130 @@
import React, { Component } from 'react';
import {withStyles, ListSubheader, Paper, List, ListItem, ListItemText, CircularProgress, ListItemAvatar, Avatar, ListItemSecondaryAction, Tooltip} from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';
import ForumIcon from '@material-ui/icons/Forum';
import {styles} from './PageLayout.styles';
import Mastodon from 'megalodon';
import { Status } from '../types/Status';
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
import React, { Component } from "react";
import {
withStyles,
ListSubheader,
Paper,
List,
ListItem,
ListItemText,
CircularProgress,
ListItemAvatar,
Avatar,
ListItemSecondaryAction,
Tooltip
} from "@material-ui/core";
import PersonIcon from "@material-ui/icons/Person";
import ForumIcon from "@material-ui/icons/Forum";
import { styles } from "./PageLayout.styles";
import Mastodon from "megalodon";
import { Status } from "../types/Status";
import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
interface IMessagesState {
posts?: [Status];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
posts?: [Status];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
}
class MessagesPage extends Component<any, IMessagesState> {
client: Mastodon;
client: Mastodon;
constructor(props: any) {
super(props);
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 = {
viewIsLoading: true
};
}
this.state = {
viewIsLoading: true
componentWillMount() {
this.client.get("/conversations").then(resp => {
let data: any = resp.data;
let messages: any = [];
data.forEach((message: any) => {
if (message.last_status !== null) {
messages.push(message.last_status);
}
}
});
componentWillMount() {
this.client.get('/conversations')
.then((resp) => {
let data:any = resp.data;
let messages: any = [];
data.forEach((message: any) => {
if (message.last_status !== null) {
messages.push(message.last_status);
}
});
this.setState({
posts: messages,
viewIsLoading: false,
viewDidLoad: true
});
});
}
this.setState({
posts: messages,
viewIsLoading: false,
viewDidLoad: true
});
});
}
removeHTMLContent(text: string) {
const div = document.createElement("div");
div.innerHTML = text;
let innerContent = div.textContent || div.innerText || "";
innerContent = innerContent.slice(0, 100) + "...";
return innerContent;
}
removeHTMLContent(text: string) {
const div = document.createElement('div');
div.innerHTML = text;
let innerContent = div.textContent || div.innerText || "";
innerContent = innerContent.slice(0, 100) + "..."
return innerContent;
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
{
this.state.viewDidLoad?
<div className={classes.pageListContsraints}>
<ListSubheader>Recent messages</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
{
this.state.posts?
this.state.posts.map((message: Status) => {
return (
<ListItem>
<ListItemAvatar>
<LinkableAvatar to={`/profile/${message.account.id}`} alt={message.account.username} src={message.account.avatar_static}>
<PersonIcon/>
</LinkableAvatar>
</ListItemAvatar>
<ListItemText primary={message.account.display_name || "@" + message.account.acct} secondary={this.removeHTMLContent(message.content)}/>
<ListItemSecondaryAction>
<Tooltip title="View conversation">
<LinkableIconButton to={`/conversation/${message.id}`}>
<ForumIcon/>
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
)
}): null
}
</List>
</Paper>
<br/>
</div>: null
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
null
}
</div>
)
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
{this.state.viewDidLoad ? (
<div className={classes.pageListContsraints}>
<ListSubheader>Recent messages</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
{this.state.posts
? this.state.posts.map((message: Status) => {
return (
<ListItem>
<ListItemAvatar>
<LinkableAvatar
to={`/profile/${message.account.id}`}
alt={message.account.username}
src={message.account.avatar_static}
>
<PersonIcon />
</LinkableAvatar>
</ListItemAvatar>
<ListItemText
primary={
message.account.display_name ||
"@" + message.account.acct
}
secondary={this.removeHTMLContent(message.content)}
/>
<ListItemSecondaryAction>
<Tooltip title="View conversation">
<LinkableIconButton
to={`/conversation/${message.id}`}
>
<ForumIcon />
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
})
: null}
</List>
</Paper>
<br />
</div>
) : null}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : null}
</div>
);
}
}
export default withStyles(styles)(MessagesPage);
export default withStyles(styles)(MessagesPage);

45
src/pages/Missingno.tsx
View File

@ -1,25 +1,28 @@
import React, {Component} from 'react';
import {withStyles, Typography} from '@material-ui/core';
import {styles} from './PageLayout.styles';
import {LinkableButton} from '../interfaces/overrides';
import React, { Component } from "react";
import { withStyles, Typography } from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import { LinkableButton } from "../interfaces/overrides";
class Missingno extends Component<any, any> {
render() {
const {classes} = this.props;
return (
<div className={classes.pageLayoutConstraints}>
<div>
<Typography variant="h4" component="h1"><b>Uh oh!</b></Typography>
<Typography variant="h6" component="p">The part of Hyperspace you're looking for isn't here.</Typography>
<br/>
<LinkableButton to="/home" color="primary" variant="contained">
Go back to home timeline
</LinkableButton>
</div>
</div>
)
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
<div>
<Typography variant="h4" component="h1">
<b>Uh oh!</b>
</Typography>
<Typography variant="h6" component="p">
The part of Hyperspace you're looking for isn't here.
</Typography>
<br />
<LinkableButton to="/home" color="primary" variant="contained">
Go back to home timeline
</LinkableButton>
</div>
</div>
);
}
}
export default withStyles(styles)(Missingno);
export default withStyles(styles)(Missingno);

644
src/pages/Notifications.tsx
View File

@ -1,304 +1,376 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import {
List,
ListItem,
ListItemText,
ListSubheader,
ListItemSecondaryAction,
ListItemAvatar,
Paper,
IconButton,
withStyles,
Typography,
CircularProgress,
Button,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Tooltip
} from '@material-ui/core';
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
import PersonIcon from '@material-ui/icons/Person';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import DeleteIcon from '@material-ui/icons/Delete';
import {styles} from './PageLayout.styles';
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
import ForumIcon from '@material-ui/icons/Forum';
import ReplyIcon from '@material-ui/icons/Reply';
import Mastodon from 'megalodon';
import { Notification } from '../types/Notification';
import { Account } from '../types/Account';
import { withSnackbar } from 'notistack';
List,
ListItem,
ListItemText,
ListSubheader,
ListItemSecondaryAction,
ListItemAvatar,
Paper,
IconButton,
withStyles,
Typography,
CircularProgress,
Button,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Tooltip
} from "@material-ui/core";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import PersonIcon from "@material-ui/icons/Person";
import PersonAddIcon from "@material-ui/icons/PersonAdd";
import DeleteIcon from "@material-ui/icons/Delete";
import { styles } from "./PageLayout.styles";
import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
import ForumIcon from "@material-ui/icons/Forum";
import ReplyIcon from "@material-ui/icons/Reply";
import Mastodon from "megalodon";
import { Notification } from "../types/Notification";
import { Account } from "../types/Account";
import { withSnackbar } from "notistack";
interface INotificationsPageState {
notifications?: [Notification];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: string;
deleteDialogOpen: boolean;
interface INotificationsPageState {
notifications?: [Notification];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: string;
deleteDialogOpen: boolean;
}
class NotificationsPage extends Component<any, INotificationsPageState> {
client: Mastodon;
streamListener: any;
client: Mastodon;
streamListener: any;
constructor(props: any) {
super(props);
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
localStorage.getItem("baseurl") + "/api/v1"
);
constructor(props: any) {
super(props);
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
this.state = {
viewIsLoading: true,
deleteDialogOpen: false
};
}
this.state = {
viewIsLoading: true,
deleteDialogOpen: false
}
}
componentWillMount() {
this.client.get('/notifications').then((resp: any) => {
let notifications: [Notification] = resp.data;
this.setState({
notifications,
viewIsLoading: false,
viewDidLoad: true
})
}).catch((err: Error) => {
this.setState({
viewDidLoad: true,
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
})
}
componentDidMount() {
this.streamNotifications();
}
streamNotifications() {
this.streamListener = this.client.stream('/streaming/user');
this.streamListener.on('notification', (notif: Notification) => {
let notifications = this.state.notifications;
if (notifications) {
notifications.unshift(notif);
this.setState({ notifications });
}
})
}
toggleDeleteDialog() {
this.setState({ deleteDialogOpen: !this.state.deleteDialogOpen });
}
removeHTMLContent(text: string) {
const div = document.createElement('div');
div.innerHTML = text;
let innerContent = div.textContent || div.innerText || "";
if (innerContent.length > 65)
innerContent = innerContent.slice(0, 65) + "...";
return innerContent;
}
removeNotification(id: string) {
this.client.post('/notifications/dismiss', {id: id}).then((resp: any) => {
let notifications = this.state.notifications;
if (notifications !== undefined && notifications.length > 0) {
notifications.forEach((notification: Notification) => {
if (notifications !== undefined && notification.id === id) {
notifications.splice(notifications.indexOf(notification), 1);
}
})
}
this.setState({ notifications })
this.props.enqueueSnackbar("Notification deleted.");
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't delete notification: " + err.name, {
variant: 'error'
});
componentWillMount() {
this.client
.get("/notifications")
.then((resp: any) => {
let notifications: [Notification] = resp.data;
this.setState({
notifications,
viewIsLoading: false,
viewDidLoad: true
});
}
})
.catch((err: Error) => {
this.setState({
viewDidLoad: true,
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
});
}
removeAllNotifications() {
this.client.post('/notifications/clear').then((resp: any) => {
this.setState({ notifications: undefined })
this.props.enqueueSnackbar('All notifications deleted.');
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't delete notifications: " + err.name, {
variant: 'error'
});
})
}
componentDidMount() {
this.streamNotifications();
}
createNotification(notif: Notification) {
const { classes } = this.props;
let primary = "";
let secondary = "";
switch (notif.type) {
case "follow":
primary = `${notif.account.display_name || notif.account.username} is now following you!`;
break;
case "mention":
primary = `${notif.account.display_name || notif.account.username} mentioned you in a post.`;
secondary = this.removeHTMLContent(notif.status? notif.status.content: "");
break;
case "reblog":
primary = `${notif.account.display_name || notif.account.username} reblogged your post.`;
secondary = this.removeHTMLContent(notif.status? notif.status.content: "");
break;
case "favourite":
primary = `${notif.account.display_name || notif.account.username} favorited your post.`;
secondary = this.removeHTMLContent(notif.status? notif.status.content: "");
break;
default:
if (notif.status && notif.status.poll) {
primary = "A poll you voted in or created has ended.";
secondary = this.removeHTMLContent(notif.status? notif.status.content: "");
} else {
primary = "A magical thing happened!";
}
break;
streamNotifications() {
this.streamListener = this.client.stream("/streaming/user");
this.streamListener.on("notification", (notif: Notification) => {
let notifications = this.state.notifications;
if (notifications) {
notifications.unshift(notif);
this.setState({ notifications });
}
});
}
toggleDeleteDialog() {
this.setState({ deleteDialogOpen: !this.state.deleteDialogOpen });
}
removeHTMLContent(text: string) {
const div = document.createElement("div");
div.innerHTML = text;
let innerContent = div.textContent || div.innerText || "";
if (innerContent.length > 65)
innerContent = innerContent.slice(0, 65) + "...";
return innerContent;
}
removeNotification(id: string) {
this.client
.post("/notifications/dismiss", { id: id })
.then((resp: any) => {
let notifications = this.state.notifications;
if (notifications !== undefined && notifications.length > 0) {
notifications.forEach((notification: Notification) => {
if (notifications !== undefined && notification.id === id) {
notifications.splice(notifications.indexOf(notification), 1);
}
});
}
return (
<ListItem key={notif.id}>
<ListItemAvatar>
<LinkableAvatar alt={notif.account.username} src={notif.account.avatar_static} to={`/profile/${notif.account.id}`}>
<PersonIcon/>
</LinkableAvatar>
</ListItemAvatar>
<ListItemText primary={primary} secondary={
<span>
<Typography color="textSecondary" className={classes.mobileOnly}>
{secondary.slice(0, 35) + "..."}
</Typography>
<Typography color="textSecondary" className={classes.desktopOnly}>
{secondary}
</Typography>
</span>
}/>
<ListItemSecondaryAction>
{
notif.type === "follow"?
<span>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${notif.account.id}`}>
<AssignmentIndIcon/>
</LinkableIconButton>
</Tooltip>
<Tooltip title="Follow account">
<IconButton onClick={() => this.followMember(notif.account)}>
<PersonAddIcon/>
</IconButton>
</Tooltip>
</span>:
this.setState({ notifications });
this.props.enqueueSnackbar("Notification deleted.");
})
.catch((err: Error) => {
this.props.enqueueSnackbar(
"Couldn't delete notification: " + err.name,
{
variant: "error"
}
);
});
}
notif.status?
<span>
<Tooltip title="View conversation">
<LinkableIconButton to={`/conversation/${notif.status.id}`}>
<ForumIcon/>
</LinkableIconButton>
</Tooltip>
{
notif.type === "mention"?
<Tooltip title="Reply">
<LinkableIconButton to={`/compose?reply=${notif.status.reblog? notif.status.reblog.id: notif.status.id}&visibility=${notif.status.visibility}&acct=${notif.status.reblog? notif.status.reblog.account.acct: notif.status.account.acct}`}>
<ReplyIcon/>
</LinkableIconButton>
</Tooltip>: null
}
</span>:
null
removeAllNotifications() {
this.client
.post("/notifications/clear")
.then((resp: any) => {
this.setState({ notifications: undefined });
this.props.enqueueSnackbar("All notifications deleted.");
})
.catch((err: Error) => {
this.props.enqueueSnackbar(
"Couldn't delete notifications: " + err.name,
{
variant: "error"
}
);
});
}
createNotification(notif: Notification) {
const { classes } = this.props;
let primary = "";
let secondary = "";
switch (notif.type) {
case "follow":
primary = `${notif.account.display_name ||
notif.account.username} is now following you!`;
break;
case "mention":
primary = `${notif.account.display_name ||
notif.account.username} mentioned you in a post.`;
secondary = this.removeHTMLContent(
notif.status ? notif.status.content : ""
);
break;
case "reblog":
primary = `${notif.account.display_name ||
notif.account.username} reblogged your post.`;
secondary = this.removeHTMLContent(
notif.status ? notif.status.content : ""
);
break;
case "favourite":
primary = `${notif.account.display_name ||
notif.account.username} favorited your post.`;
secondary = this.removeHTMLContent(
notif.status ? notif.status.content : ""
);
break;
default:
if (notif.status && notif.status.poll) {
primary = "A poll you voted in or created has ended.";
secondary = this.removeHTMLContent(
notif.status ? notif.status.content : ""
);
} else {
primary = "A magical thing happened!";
}
break;
}
return (
<ListItem key={notif.id}>
<ListItemAvatar>
<LinkableAvatar
alt={notif.account.username}
src={notif.account.avatar_static}
to={`/profile/${notif.account.id}`}
>
<PersonIcon />
</LinkableAvatar>
</ListItemAvatar>
<ListItemText
primary={primary}
secondary={
<span>
<Typography color="textSecondary" className={classes.mobileOnly}>
{secondary.slice(0, 35) + "..."}
</Typography>
<Typography color="textSecondary" className={classes.desktopOnly}>
{secondary}
</Typography>
</span>
}
/>
<ListItemSecondaryAction>
{notif.type === "follow" ? (
<span>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${notif.account.id}`}>
<AssignmentIndIcon />
</LinkableIconButton>
</Tooltip>
<Tooltip title="Follow account">
<IconButton onClick={() => this.followMember(notif.account)}>
<PersonAddIcon />
</IconButton>
</Tooltip>
</span>
) : notif.status ? (
<span>
<Tooltip title="View conversation">
<LinkableIconButton to={`/conversation/${notif.status.id}`}>
<ForumIcon />
</LinkableIconButton>
</Tooltip>
{notif.type === "mention" ? (
<Tooltip title="Reply">
<LinkableIconButton
to={`/compose?reply=${
notif.status.reblog
? notif.status.reblog.id
: notif.status.id
}&visibility=${notif.status.visibility}&acct=${
notif.status.reblog
? notif.status.reblog.account.acct
: notif.status.account.acct
}`}
>
<ReplyIcon />
</LinkableIconButton>
</Tooltip>
) : null}
</span>
) : null}
<Tooltip title="Remove notification">
<IconButton onClick={() => this.removeNotification(notif.id)}>
<DeleteIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
}
followMember(acct: Account) {
this.client
.post(`/accounts/${acct.id}/follow`)
.then((resp: any) => {
this.props.enqueueSnackbar("You are now following this account.");
})
.catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, {
variant: "error"
});
console.error(err.message);
});
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
{this.state.viewDidLoad ? (
this.state.notifications && this.state.notifications.length > 0 ? (
<div>
<ListSubheader>Recent notifications</ListSubheader>
<Button
className={classes.clearAllButton}
variant="text"
onClick={() => this.toggleDeleteDialog()}
>
{" "}
Clear All
</Button>
<Paper className={classes.pageListConstraints}>
<List>
{this.state.notifications.map(
(notification: Notification) => {
return this.createNotification(notification);
}
<Tooltip title="Remove notification">
<IconButton onClick={() => this.removeNotification(notif.id)}>
<DeleteIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
}
followMember(acct: Account) {
this.client.post(`/accounts/${acct.id}/follow`).then((resp: any) => {
this.props.enqueueSnackbar('You are now following this account.');
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, { variant: 'error' });
console.error(err.message);
})
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
{
this.state.viewDidLoad?
this.state.notifications && this.state.notifications.length > 0?
<div>
<ListSubheader>Recent notifications</ListSubheader>
<Button className={classes.clearAllButton} variant="text" onClick={() => this.toggleDeleteDialog()}> Clear All</Button>
<Paper className={classes.pageListConstraints}>
<List>
{
this.state.notifications.map((notification: Notification) => {
return this.createNotification(notification)
})
}
</List>
</Paper>
</div>:
<div className={classes.pageLayoutEmptyTextConstraints}>
<Typography variant="h4">All clear!</Typography>
<Typography paragraph>It looks like you have no notifications. Why not get the conversation going with a new post?</Typography>
</div>:
null
}
{
this.state.viewDidError?
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">Something went wrong when loading this timeline.</Typography>
<Typography>{this.state.viewDidErrorCode? this.state.viewDidErrorCode: ""}</Typography>
</Paper>:
<span/>
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
<span/>
}
<Dialog
open={this.state.deleteDialogOpen}
onClose={() => this.toggleDeleteDialog()}
>
<DialogTitle id="alert-dialog-title">Delete all notifications?</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete all notifications? This action cannot be undone.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => this.toggleDeleteDialog()} color="primary" autoFocus>
Cancel
</Button>
<Button onClick={() => {
this.removeAllNotifications();
this.toggleDeleteDialog();
}} color="primary">
Delete
</Button>
</DialogActions>
</Dialog>
)}
</List>
</Paper>
</div>
);
}
) : (
<div className={classes.pageLayoutEmptyTextConstraints}>
<Typography variant="h4">All clear!</Typography>
<Typography paragraph>
It looks like you have no notifications. Why not get the
conversation going with a new post?
</Typography>
</div>
)
) : null}
{this.state.viewDidError ? (
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">
Something went wrong when loading this timeline.
</Typography>
<Typography>
{this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
</Typography>
</Paper>
) : (
<span />
)}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : (
<span />
)}
<Dialog
open={this.state.deleteDialogOpen}
onClose={() => this.toggleDeleteDialog()}
>
<DialogTitle id="alert-dialog-title">
Delete all notifications?
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete all notifications? This action
cannot be undone.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={() => this.toggleDeleteDialog()}
color="primary"
autoFocus
>
Cancel
</Button>
<Button
onClick={() => {
this.removeAllNotifications();
this.toggleDeleteDialog();
}}
color="primary"
>
Delete
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
export default withStyles(styles)(withSnackbar(NotificationsPage));
export default withStyles(styles)(withSnackbar(NotificationsPage));

189
src/pages/PageLayout.styles.tsx
View File

@ -2,11 +2,12 @@ import { Theme, createStyles } from "@material-ui/core";
import { isDarwinApp } from "../utilities/desktop";
import { isAppbarExpanded } from "../utilities/appbar";
export const styles = (theme: Theme) => createStyles({
export const styles = (theme: Theme) =>
createStyles({
root: {
width: '100%',
display: 'flex',
height: '100%'
width: "100%",
display: "flex",
height: "100%"
},
pageLayoutConstraints: {
marginTop: 72,
@ -14,87 +15,87 @@ export const styles = (theme: Theme) => createStyles({
padding: theme.spacing.unit * 3,
paddingLeft: theme.spacing.unit,
paddingRight: theme.spacing.unit,
[theme.breakpoints.up('md')]: {
[theme.breakpoints.up("md")]: {
marginLeft: 250,
marginTop: 88,
paddingLeft: theme.spacing.unit * 24,
paddingRight: theme.spacing.unit * 24
},
backgroundColor: theme.palette.background.default,
minHeight: isDarwinApp()? "100vh": 'auto',
minHeight: isDarwinApp() ? "100vh" : "auto"
},
pageLayoutMaxConstraints: {
marginTop: 72,
flexGrow: 1,
paddingTop: theme.spacing.unit * 2,
padding: theme.spacing.unit,
[theme.breakpoints.up('md')]: {
[theme.breakpoints.up("md")]: {
marginLeft: 250,
marginTop: 88,
padding: theme.spacing.unit * 3,
paddingLeft: theme.spacing.unit * 16,
paddingRight: theme.spacing.unit * 16,
paddingRight: theme.spacing.unit * 16
},
[theme.breakpoints.up('lg')]: {
[theme.breakpoints.up("lg")]: {
marginLeft: 250,
marginTop: 88,
padding: theme.spacing.unit * 3,
paddingLeft: theme.spacing.unit * 32,
paddingRight: theme.spacing.unit * 32,
paddingRight: theme.spacing.unit * 32
},
[theme.breakpoints.up('xl')]: {
[theme.breakpoints.up("xl")]: {
marginLeft: 250,
marginTop: 88,
padding: theme.spacing.unit * 3,
paddingLeft: theme.spacing.unit * 40,
paddingRight: theme.spacing.unit * 40,
paddingRight: theme.spacing.unit * 40
},
backgroundColor: theme.palette.background.default,
minHeight: isDarwinApp()? "100vh": 'auto',
minHeight: isDarwinApp() ? "100vh" : "auto"
},
pageLayoutMinimalConstraints: {
flexGrow: 1,
[theme.breakpoints.up('md')]: {
marginLeft: 250,
[theme.breakpoints.up("md")]: {
marginLeft: 250
},
backgroundColor: theme.palette.background.default,
minHeight: isDarwinApp()? "100vh": 'auto',
minHeight: isDarwinApp() ? "100vh" : "auto"
},
pageLayoutEmptyTextConstraints: {
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2
},
pageHeroBackground: {
position: 'relative',
height: 'intrinsic',
position: "relative",
height: "intrinsic",
backgroundColor: theme.palette.primary.dark,
width: '100%',
width: "100%",
color: theme.palette.common.white,
zIndex: 1,
top: isAppbarExpanded()? 80: 64,
top: isAppbarExpanded() ? 80 : 64
},
pageHeroBackgroundImage: {
position: 'absolute',
position: "absolute",
bottom: 0,
left: 0,
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
height: '100%',
width: '100%',
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
height: "100%",
width: "100%",
opacity: 0.35,
zIndex: -1,
filter: 'blur(2px)'
filter: "blur(2px)"
},
pageHeroContent: {
padding: 16,
paddingTop: 8,
textAlign: 'center',
width: '100%',
height: '100%',
[theme.breakpoints.up('md')]: {
paddingLeft: '5%',
paddingRight: '5%',
textAlign: "center",
width: "100%",
height: "100%",
[theme.breakpoints.up("md")]: {
paddingLeft: "5%",
paddingRight: "5%"
},
position: "relative",
zIndex: 1
@ -102,65 +103,65 @@ export const styles = (theme: Theme) => createStyles({
pageHeroToolbar: {
position: "absolute",
right: theme.spacing.unit * 2,
marginTop: -16,
marginTop: -16
},
pageListConstraints: {
paddingLeft: theme.spacing.unit,
paddingRight: theme.spacing.unit,
[theme.breakpoints.up('sm')]: {
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2
},
//backgroundColor: theme.palette.background.default
paddingLeft: theme.spacing.unit,
paddingRight: theme.spacing.unit,
[theme.breakpoints.up("sm")]: {
paddingLeft: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit * 2
}
//backgroundColor: theme.palette.background.default
},
profileToolbar: {
zIndex: 2,
paddingTop: 8,
zIndex: 2,
paddingTop: 8
},
profileContent: {
padding: 16,
[theme.breakpoints.up('md')]: {
paddingLeft: '5%',
paddingRight: '5%',
paddingBottom: 48,
paddingTop: 24,
},
width: '100%',
height: '100%',
position: 'relative',
zIndex: 1,
display: 'flex',
paddingBottom: 24,
paddingTop: 24,
padding: 16,
[theme.breakpoints.up("md")]: {
paddingLeft: "5%",
paddingRight: "5%",
paddingBottom: 48,
paddingTop: 24
},
width: "100%",
height: "100%",
position: "relative",
zIndex: 1,
display: "flex",
paddingBottom: 24,
paddingTop: 24
},
profileAvatar: {
width: 64,
height: 64,
[theme.breakpoints.up('md')]: {
width: 128,
height: 128,
},
backgroundColor: theme.palette.primary.main
width: 64,
height: 64,
[theme.breakpoints.up("md")]: {
width: 128,
height: 128
},
backgroundColor: theme.palette.primary.main
},
profileUserBox: {
paddingLeft: theme.spacing.unit * 2
paddingLeft: theme.spacing.unit * 2
},
pageProfileAvatar: {
width: 128,
height: 128,
marginLeft: 'auto',
marginRight: 'auto',
marginLeft: "auto",
marginRight: "auto",
marginBottom: theme.spacing.unit,
backgroundColor: theme.palette.primary.main
},
pageProfileNameEmoji: {
height: theme.typography.h4.fontSize,
fontWeight: theme.typography.fontWeightMedium,
fontWeight: theme.typography.fontWeightMedium
},
pageProfileStatsDiv: {
display: 'inline-flex',
display: "inline-flex",
marginTop: theme.spacing.unit * 2,
marginBottom: theme.spacing.unit * 2,
marginBottom: theme.spacing.unit * 2
},
pageProfileStat: {
marginLeft: theme.spacing.unit,
@ -177,28 +178,28 @@ export const styles = (theme: Theme) => createStyles({
paddingRight: theme.spacing.unit,
paddingTop: theme.spacing.unit * 12,
paddingBottom: theme.spacing.unit * 2,
[theme.breakpoints.up('lg')]: {
[theme.breakpoints.up("lg")]: {
paddingLeft: theme.spacing.unit * 32,
paddingRight: theme.spacing.unit * 32
},
}
//backgroundColor: theme.palette.background.default,
},
errorCard: {
padding: theme.spacing.unit * 4,
backgroundColor: theme.palette.error.main,
backgroundColor: theme.palette.error.main
},
pageTopChipContainer: {
zIndex: 24,
position: "fixed",
width: '100%'
width: "100%"
},
pageTopChips: {
textAlign: 'center',
[theme.breakpoints.up('md')]: {
marginRight: '55%'
textAlign: "center",
[theme.breakpoints.up("md")]: {
marginRight: "55%"
},
[theme.breakpoints.up('xl')]: {
marginRight: '50%'
[theme.breakpoints.up("xl")]: {
marginRight: "50%"
}
},
pageTopChip: {
@ -206,27 +207,27 @@ export const styles = (theme: Theme) => createStyles({
},
clearAllButton: {
zIndex: 3,
position: 'absolute',
position: "absolute",
right: 24,
top: 100,
[theme.breakpoints.up('md')]: {
[theme.breakpoints.up("md")]: {
top: 116,
right: theme.spacing.unit * 24,
right: theme.spacing.unit * 24
}
},
mobileOnly: {
[theme.breakpoints.up('sm')]: {
display: 'none'
[theme.breakpoints.up("sm")]: {
display: "none"
}
},
desktopOnly: {
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'block'
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block"
}
},
pageLayoutFooter: {
'& a': {
"& a": {
color: theme.palette.primary.light
}
},
@ -235,13 +236,13 @@ export const styles = (theme: Theme) => createStyles({
width: 88
},
youPaper: {
padding: theme.spacing.unit * 2,
padding: theme.spacing.unit * 2
},
youGrid: {
textAlign: "center",
'& *': {
"& *": {
marginLeft: "auto",
marginRight: "auto",
marginRight: "auto"
}
},
youGridAvatar: {
@ -249,7 +250,7 @@ export const styles = (theme: Theme) => createStyles({
width: 128
},
youGridImage: {
width: 'auto',
width: "auto",
height: 128
},
instanceHeaderPaper: {
@ -277,6 +278,6 @@ export const styles = (theme: Theme) => createStyles({
color: theme.palette.common.white
},
pageGrow: {
flexGrow: 1
flexGrow: 1
}
});
});

808
src/pages/ProfilePage.tsx
View File

@ -1,362 +1,504 @@
import React, {Component} from 'react';
import React, { Component } from "react";
import {
withStyles,
Typography,
Avatar,
Divider,
Button,
CircularProgress,
Paper,
Tooltip,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Toolbar,
IconButton
} from '@material-ui/core';
import {styles} from './PageLayout.styles';
import Mastodon from 'megalodon';
import { Account } from '../types/Account';
import { Status } from '../types/Status';
import { Relationship } from '../types/Relationship';
import Post from '../components/Post';
import {withSnackbar} from 'notistack';
import { LinkableIconButton } from '../interfaces/overrides';
import { emojifyString } from '../utilities/emojis';
import AccountEditIcon from 'mdi-material-ui/AccountEdit';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import PersonAddDisabledIcon from '@material-ui/icons/PersonAddDisabled';
import AccountMinusIcon from 'mdi-material-ui/AccountMinus';
import ChatIcon from '@material-ui/icons/Chat';
import AccountRemoveIcon from 'mdi-material-ui/AccountRemove';
import AccountHeartIcon from 'mdi-material-ui/AccountHeart';
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
withStyles,
Typography,
Avatar,
Divider,
Button,
CircularProgress,
Paper,
Tooltip,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Toolbar,
IconButton
} from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import Mastodon from "megalodon";
import { Account } from "../types/Account";
import { Status } from "../types/Status";
import { Relationship } from "../types/Relationship";
import Post from "../components/Post";
import { withSnackbar } from "notistack";
import { LinkableIconButton } from "../interfaces/overrides";
import { emojifyString } from "../utilities/emojis";
import AccountEditIcon from "mdi-material-ui/AccountEdit";
import PersonAddIcon from "@material-ui/icons/PersonAdd";
import PersonAddDisabledIcon from "@material-ui/icons/PersonAddDisabled";
import AccountMinusIcon from "mdi-material-ui/AccountMinus";
import ChatIcon from "@material-ui/icons/Chat";
import AccountRemoveIcon from "mdi-material-ui/AccountRemove";
import AccountHeartIcon from "mdi-material-ui/AccountHeart";
import OpenInNewIcon from "@material-ui/icons/OpenInNew";
interface IProfilePageState {
account?: Account;
relationship?: Relationship;
posts?: [Status];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: string;
blockDialogOpen: boolean;
account?: Account;
relationship?: Relationship;
posts?: [Status];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: string;
blockDialogOpen: boolean;
}
class ProfilePage extends Component<any, IProfilePageState> {
client: Mastodon;
client: Mastodon;
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
localStorage.getItem("baseurl") + "/api/v1"
);
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
this.state = {
viewIsLoading: true,
blockDialogOpen: false
};
}
this.state = {
viewIsLoading: true,
blockDialogOpen: false
}
}
toggleBlockDialog() {
if (this.state.relationship && !this.state.relationship.blocking)
this.setState({ blockDialogOpen: !this.state.blockDialogOpen });
else this.toggleBlock();
}
toggleBlockDialog() {
if (this.state.relationship && !this.state.relationship.blocking)
this.setState({ blockDialogOpen: !this.state.blockDialogOpen })
else
this.toggleBlock()
}
getAccountData(id: string) {
this.client
.get(`/accounts/${id}`)
.then((resp: any) => {
let profile: Account = resp.data;
getAccountData(id: string) {
this.client.get(`/accounts/${id}`).then((resp: any) => {
let profile: Account = resp.data;
const div = document.createElement("div");
div.innerHTML = profile.note;
profile.note = div.textContent || div.innerText || "";
const div = document.createElement('div');
div.innerHTML = profile.note;
profile.note = div.textContent || div.innerText || "";
this.setState({
account: profile
})
}).catch((error: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: error.message
})
this.setState({
account: profile
});
this.getRelationships();
this.client.get(`/accounts/${id}/statuses`).then((resp: any) => {
this.setState({
posts: resp.data,
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
})
}).catch( (err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
})
.catch((error: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: error.message
});
}
});
this.getRelationships();
this.client
.get(`/accounts/${id}/statuses`)
.then((resp: any) => {
this.setState({
posts: resp.data,
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
});
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
});
}
componentWillReceiveProps(props: any) {
this.getAccountData(props.match.params.profileId);
window.scrollTo(0, 0);
}
componentWillReceiveProps(props: any) {
this.getAccountData(props.match.params.profileId);
window.scrollTo(0, 0);
}
componentWillMount() {
const { match: { params }} = this.props;
this.getAccountData(params.profileId);
}
componentWillMount() {
const {
match: { params }
} = this.props;
this.getAccountData(params.profileId);
}
isItMe(): boolean {
if (this.state.account) {
return this.state.account.id === JSON.parse(localStorage.getItem('account') as string).id;
} else {
return false;
}
isItMe(): boolean {
if (this.state.account) {
return (
this.state.account.id ===
JSON.parse(localStorage.getItem("account") as string).id
);
} else {
return false;
}
}
getRelationships() {
this.client.get("/accounts/relationships", {id: this.props.match.params.profileId }).then((resp: any) => {
let relationship: Relationship = resp.data[0];
getRelationships() {
this.client
.get("/accounts/relationships", { id: this.props.match.params.profileId })
.then((resp: any) => {
let relationship: Relationship = resp.data[0];
this.setState({ relationship });
})
.catch((error: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: error.message
});
});
}
loadMoreTimelinePieces() {
const {
match: { params }
} = this.props;
this.setState({ viewDidLoad: false, viewIsLoading: true });
if (this.state.posts && this.state.posts.length > 0) {
this.client
.get(`/accounts/${params.profileId}/statuses`, {
max_id: this.state.posts[this.state.posts.length - 1].id,
limit: 20
})
.then((resp: any) => {
let newPosts: [Status] = resp.data;
let posts = this.state.posts as [Status];
if (newPosts.length <= 0) {
this.props.enqueueSnackbar("Reached end of posts", {
variant: "error"
});
} else {
newPosts.forEach((post: Status) => {
posts.push(post);
});
}
this.setState({
viewIsLoading: false,
viewDidLoad: true,
posts
});
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar("Failed to get posts", {
variant: "error"
});
});
} else {
this.props.enqueueSnackbar("Reached end of posts", { variant: "error" });
this.setState({
viewIsLoading: false,
viewDidLoad: true
});
}
}
toggleFollow() {
if (this.state.relationship) {
if (this.state.relationship.following) {
this.client
.post(
`/accounts/${
this.state.account
? this.state.account.id
: this.props.match.params.profileId
}/unfollow`
)
.then((resp: any) => {
let relationship: Relationship = resp.data;
this.setState({ relationship });
}).catch((error: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: error.message
})
});
this.props.enqueueSnackbar(
"You are no longer following this account."
);
})
.catch((err: Error) => {
this.props.enqueueSnackbar(
"Couldn't unfollow account: " + err.name,
{ variant: "error" }
);
console.error(err.message);
});
} else {
this.client
.post(
`/accounts/${
this.state.account
? this.state.account.id
: this.props.match.params.profileId
}/follow`
)
.then((resp: any) => {
let relationship: Relationship = resp.data;
this.setState({ relationship });
this.props.enqueueSnackbar("You are now following this account.");
})
.catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, {
variant: "error"
});
console.error(err.message);
});
}
}
}
loadMoreTimelinePieces() {
const { match: {params}} = this.props;
this.setState({ viewDidLoad: false, viewIsLoading: true})
if (this.state.posts && this.state.posts.length > 0) {
this.client.get(`/accounts/${params.profileId}/statuses`, { max_id: this.state.posts[this.state.posts.length - 1].id, limit: 20 }).then((resp: any) => {
let newPosts: [Status] = resp.data;
let posts = this.state.posts as [Status];
if (newPosts.length <= 0) {
this.props.enqueueSnackbar("Reached end of posts", {
variant: 'error'
});
} else {
newPosts.forEach((post: Status) => {
posts.push(post);
});
}
this.setState({
viewIsLoading: false,
viewDidLoad: true,
posts
})
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("Failed to get posts", {
variant: 'error',
});
})
} else {
this.props.enqueueSnackbar("Reached end of posts", { variant: 'error'} );
this.setState({
viewIsLoading: false,
viewDidLoad: true
})
}
}
toggleFollow() {
if (this.state.relationship) {
if (this.state.relationship.following) {
this.client.post(`/accounts/${this.state.account? this.state.account.id: this.props.match.params.profileId}/unfollow`).then((resp: any) => {
let relationship: Relationship = resp.data;
this.setState({ relationship });
this.props.enqueueSnackbar('You are no longer following this account.');
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't unfollow account: " + err.name, { variant: 'error' });
console.error(err.message);
})
} else {
this.client.post(`/accounts/${this.state.account? this.state.account.id: this.props.match.params.profileId}/follow`).then((resp: any) => {
let relationship: Relationship = resp.data;
this.setState({ relationship });
this.props.enqueueSnackbar('You are now following this account.');
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, { variant: 'error' });
console.error(err.message);
})
}
}
toggleBlock() {
if (this.state.relationship) {
if (this.state.relationship.blocking) {
this.client
.post(
`/accounts/${
this.state.account
? this.state.account.id
: this.props.match.params.profileId
}/unblock`
)
.then((resp: any) => {
let relationship: Relationship = resp.data;
this.setState({ relationship });
this.props.enqueueSnackbar(
"You are no longer blocking this account."
);
})
.catch((err: Error) => {
this.props.enqueueSnackbar(
"Couldn't unblock account: " + err.name,
{ variant: "error" }
);
console.error(err.message);
});
} else {
this.client
.post(
`/accounts/${
this.state.account
? this.state.account.id
: this.props.match.params.profileId
}/block`
)
.then((resp: any) => {
let relationship: Relationship = resp.data;
this.setState({ relationship });
this.props.enqueueSnackbar("You are now blocking this account.");
})
.catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't block account: " + err.name, {
variant: "error"
});
console.error(err.message);
});
}
}
}
toggleBlock() {
if (this.state.relationship) {
if (this.state.relationship.blocking) {
this.client.post(`/accounts/${this.state.account? this.state.account.id: this.props.match.params.profileId}/unblock`).then((resp: any) => {
let relationship: Relationship = resp.data;
this.setState({ relationship });
this.props.enqueueSnackbar('You are no longer blocking this account.');
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't unblock account: " + err.name, { variant: 'error' });
console.error(err.message);
})
} else {
this.client.post(`/accounts/${this.state.account? this.state.account.id: this.props.match.params.profileId}/block`).then((resp: any) => {
let relationship: Relationship = resp.data;
this.setState({ relationship });
this.props.enqueueSnackbar('You are now blocking this account.');
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't block account: " + err.name, { variant: 'error' });
console.error(err.message);
})
}
}
}
render() {
const { classes } = this.props;
return(
<div className={classes.pageLayoutMinimalConstraints}>
<div className={classes.pageHeroBackground}>
<div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: this.state.account? `url("${this.state.account.header}")`: `url("")`}}/>
<Toolbar className={classes.profileToolbar}>
<div className={classes.pageGrow}/>
<Tooltip title={
this.isItMe()?
"You can't follow yourself.":
this.state.relationship && this.state.relationship.following?
"Unfollow":
"Follow"
}>
<IconButton color={"inherit"} disabled={this.isItMe()} onClick={() => this.toggleFollow()}>
{
this.isItMe()?
<PersonAddDisabledIcon/>:
this.state.relationship && this.state.relationship.following?
<AccountMinusIcon/>:
<PersonAddIcon/>
}
</IconButton>
</Tooltip>
<Tooltip title={"Send a message or post"}>
<LinkableIconButton to={`/compose?acct=${this.state.account? this.state.account.acct: ""}`} color={"inherit"}>
<ChatIcon/>
</LinkableIconButton>
</Tooltip>
<Tooltip title={this.state.relationship && this.state.relationship.blocking? "Unblock this account": "Block this account"}>
<IconButton color={"inherit"} disabled={this.isItMe()} onClick={() => this.toggleBlockDialog()}>
{
this.state.relationship && this.state.relationship.blocking? <AccountHeartIcon/>: <AccountRemoveIcon/>
}
</IconButton>
</Tooltip>
<Tooltip title="Open in web">
<IconButton href={this.state.account? this.state.account.url: ""} target="_blank" rel={"nofollower noreferrer noopener"} color={"inherit"}>
<OpenInNewIcon/>
</IconButton>
</Tooltip>
{
this.isItMe()?
<Tooltip title="Edit profile">
<LinkableIconButton to="/you" color="inherit">
<AccountEditIcon/>
</LinkableIconButton>
</Tooltip>: null
}
</Toolbar>
<div className={classes.profileContent}>
<Avatar className={classes.profileAvatar} src={this.state.account ? this.state.account.avatar: ""}/>
<div className={classes.profileUserBox}>
<Typography variant="h4" color="inherit" dangerouslySetInnerHTML={
{__html: this.state.account?
this.state.account.display_name?
emojifyString(this.state.account.display_name, this.state.account.emojis, classes.pageProfileNameEmoji)
: this.state.account.username
: ""}}
className={classes.pageProfileNameEmoji}/>
<Typography variant="caption" color="inherit">{this.state.account ? '@' + this.state.account.acct: ""}</Typography>
<Typography paragraph color="inherit">{
this.state.account ?
this.state.account.note?
this.state.account.note
: "No bio provided by user."
: "No bio available."
}</Typography>
<Typography color={"inherit"}>
{this.state.account? this.state.account.followers_count: 0} followers | {this.state.account? this.state.account.following_count: 0} following | {this.state.account? this.state.account.statuses_count: 0} posts
</Typography>
</div>
</div>
</div>
<div className={classes.pageContentLayoutConstraints}>
{
this.state.viewDidError?
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">Something went wrong when loading this profile.</Typography>
<Typography>{this.state.viewDidErrorCode? this.state.viewDidErrorCode: ""}</Typography>
</Paper>:
<span/>
}
{
this.state.posts?
<div>
{
this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client}/>;
})
}
<br/>
{
this.state.viewDidLoad && !this.state.viewDidError? <div style={{textAlign: "center"}} onClick={() => this.loadMoreTimelinePieces()}><Button variant="contained">Load more</Button></div>: null
}
</div>: <span/>
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
<span/>
}
<Dialog
open={this.state.blockDialogOpen}
onClose={() => this.toggleBlockDialog()}
>
<DialogTitle id="alert-dialog-title">Block this person?</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to block this person? You won't see their posts on your home feed, local timeline, or public timeline.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => this.toggleBlockDialog()} color="primary" autoFocus>
Cancel
</Button>
<Button onClick={() => {
this.toggleBlock();
this.toggleBlockDialog();
}} color="primary">
Block
</Button>
</DialogActions>
</Dialog>
</div>
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutMinimalConstraints}>
<div className={classes.pageHeroBackground}>
<div
className={classes.pageHeroBackgroundImage}
style={{
backgroundImage: this.state.account
? `url("${this.state.account.header}")`
: `url("")`
}}
/>
<Toolbar className={classes.profileToolbar}>
<div className={classes.pageGrow} />
<Tooltip
title={
this.isItMe()
? "You can't follow yourself."
: this.state.relationship && this.state.relationship.following
? "Unfollow"
: "Follow"
}
>
<IconButton
color={"inherit"}
disabled={this.isItMe()}
onClick={() => this.toggleFollow()}
>
{this.isItMe() ? (
<PersonAddDisabledIcon />
) : this.state.relationship &&
this.state.relationship.following ? (
<AccountMinusIcon />
) : (
<PersonAddIcon />
)}
</IconButton>
</Tooltip>
<Tooltip title={"Send a message or post"}>
<LinkableIconButton
to={`/compose?acct=${
this.state.account ? this.state.account.acct : ""
}`}
color={"inherit"}
>
<ChatIcon />
</LinkableIconButton>
</Tooltip>
<Tooltip
title={
this.state.relationship && this.state.relationship.blocking
? "Unblock this account"
: "Block this account"
}
>
<IconButton
color={"inherit"}
disabled={this.isItMe()}
onClick={() => this.toggleBlockDialog()}
>
{this.state.relationship && this.state.relationship.blocking ? (
<AccountHeartIcon />
) : (
<AccountRemoveIcon />
)}
</IconButton>
</Tooltip>
<Tooltip title="Open in web">
<IconButton
href={this.state.account ? this.state.account.url : ""}
target="_blank"
rel={"nofollower noreferrer noopener"}
color={"inherit"}
>
<OpenInNewIcon />
</IconButton>
</Tooltip>
{this.isItMe() ? (
<Tooltip title="Edit profile">
<LinkableIconButton to="/you" color="inherit">
<AccountEditIcon />
</LinkableIconButton>
</Tooltip>
) : null}
</Toolbar>
<div className={classes.profileContent}>
<Avatar
className={classes.profileAvatar}
src={this.state.account ? this.state.account.avatar : ""}
/>
<div className={classes.profileUserBox}>
<Typography
variant="h4"
color="inherit"
dangerouslySetInnerHTML={{
__html: this.state.account
? this.state.account.display_name
? emojifyString(
this.state.account.display_name,
this.state.account.emojis,
classes.pageProfileNameEmoji
)
: this.state.account.username
: ""
}}
className={classes.pageProfileNameEmoji}
/>
<Typography variant="caption" color="inherit">
{this.state.account ? "@" + this.state.account.acct : ""}
</Typography>
<Typography paragraph color="inherit">
{this.state.account
? this.state.account.note
? this.state.account.note
: "No bio provided by user."
: "No bio available."}
</Typography>
<Typography color={"inherit"}>
{this.state.account ? this.state.account.followers_count : 0}{" "}
followers |{" "}
{this.state.account ? this.state.account.following_count : 0}{" "}
following |{" "}
{this.state.account ? this.state.account.statuses_count : 0}{" "}
posts
</Typography>
</div>
);
}
</div>
</div>
<div className={classes.pageContentLayoutConstraints}>
{this.state.viewDidError ? (
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">
Something went wrong when loading this profile.
</Typography>
<Typography>
{this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
</Typography>
</Paper>
) : (
<span />
)}
{this.state.posts ? (
<div>
{this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client} />;
})}
<br />
{this.state.viewDidLoad && !this.state.viewDidError ? (
<div
style={{ textAlign: "center" }}
onClick={() => this.loadMoreTimelinePieces()}
>
<Button variant="contained">Load more</Button>
</div>
) : null}
</div>
) : (
<span />
)}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : (
<span />
)}
<Dialog
open={this.state.blockDialogOpen}
onClose={() => this.toggleBlockDialog()}
>
<DialogTitle id="alert-dialog-title">
Block this person?
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to block this person? You won't see their
posts on your home feed, local timeline, or public timeline.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={() => this.toggleBlockDialog()}
color="primary"
autoFocus
>
Cancel
</Button>
<Button
onClick={() => {
this.toggleBlock();
this.toggleBlockDialog();
}}
color="primary"
>
Block
</Button>
</DialogActions>
</Dialog>
</div>
</div>
);
}
}
export default withStyles(styles)(withSnackbar(ProfilePage));
export default withStyles(styles)(withSnackbar(ProfilePage));

371
src/pages/Public.tsx
View File

@ -1,192 +1,225 @@
import React, { Component } from 'react';
import { withStyles, CircularProgress, Typography, Paper, Button, Chip, Avatar, Slide} from '@material-ui/core';
import {styles} from './PageLayout.styles';
import Post from '../components/Post';
import { Status } from '../types/Status';
import Mastodon, { StreamListener } from 'megalodon';
import {withSnackbar} from 'notistack';
import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
import React, { Component } from "react";
import {
withStyles,
CircularProgress,
Typography,
Paper,
Button,
Chip,
Avatar,
Slide
} from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import Post from "../components/Post";
import { Status } from "../types/Status";
import Mastodon, { StreamListener } from "megalodon";
import { withSnackbar } from "notistack";
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
interface IPublicPageState {
posts?: [Status];
backlogPosts?: [Status] | null;
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
posts?: [Status];
backlogPosts?: [Status] | null;
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: any;
}
class PublicPage extends Component<any, IPublicPageState> {
client: Mastodon;
streamListener: StreamListener;
client: Mastodon;
streamListener: StreamListener;
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.state = {
viewIsLoading: true,
backlogPosts: null
};
this.state = {
viewIsLoading: true,
backlogPosts: null
}
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
(localStorage.getItem("baseurl") as string) + "/api/v1"
);
this.streamListener = this.client.stream("/streaming/public");
}
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1");
this.streamListener = this.client.stream('/streaming/public');
}
componentWillMount() {
this.streamListener.on('connect', () => {
this.client.get('/timelines/public', {limit: 40}).then((resp: any) => {
let statuses: [Status] = resp.data;
this.setState({
posts: statuses,
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
})
}).catch((resp: any) => {
this.setState({
viewIsLoading: false,
viewDidLoad: true,
viewDidError: true,
viewDidErrorCode: String(resp)
})
this.props.enqueueSnackbar("Failed to get posts.", {
variant: 'error',
});
})
componentWillMount() {
this.streamListener.on("connect", () => {
this.client
.get("/timelines/public", { limit: 40 })
.then((resp: any) => {
let statuses: [Status] = resp.data;
this.setState({
posts: statuses,
viewIsLoading: false,
viewDidLoad: true,
viewDidError: false
});
})
.catch((resp: any) => {
this.setState({
viewIsLoading: false,
viewDidLoad: true,
viewDidError: true,
viewDidErrorCode: String(resp)
});
this.props.enqueueSnackbar("Failed to get posts.", {
variant: "error"
});
});
});
this.streamListener.on('update', (status: Status) => {
let queue = this.state.backlogPosts;
if (queue !== null && queue !== undefined) { queue.unshift(status); } else { queue = [status] }
this.setState({ backlogPosts: queue });
})
this.streamListener.on("update", (status: Status) => {
let queue = this.state.backlogPosts;
if (queue !== null && queue !== undefined) {
queue.unshift(status);
} else {
queue = [status];
}
this.setState({ backlogPosts: queue });
});
this.streamListener.on('delete', (id: number) => {
let posts = this.state.posts;
if (posts) {
posts.forEach((post: Status) => {
if (posts && parseInt(post.id) === id) {
posts.splice(posts.indexOf(post), 1);
}
})
this.setState({ posts });
}
})
this.streamListener.on("delete", (id: number) => {
let posts = this.state.posts;
if (posts) {
posts.forEach((post: Status) => {
if (posts && parseInt(post.id) === id) {
posts.splice(posts.indexOf(post), 1);
}
});
this.setState({ posts });
}
});
this.streamListener.on('error', (err: Error) => {
this.setState({
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("An error occured.", {
variant: 'error',
});
})
this.streamListener.on("error", (err: Error) => {
this.setState({
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar("An error occured.", {
variant: "error"
});
});
this.streamListener.on('heartbeat', () => {
})
this.streamListener.on("heartbeat", () => {});
}
componentWillUnmount() {
this.streamListener.stop();
}
insertBacklog() {
window.scrollTo(0, 0);
let posts = this.state.posts;
let backlog = this.state.backlogPosts;
if (posts && backlog && backlog.length > 0) {
let push = backlog.concat(posts);
this.setState({ posts: push as [Status], backlogPosts: null });
}
}
componentWillUnmount() {
this.streamListener.stop();
loadMoreTimelinePieces() {
this.setState({ viewDidLoad: false, viewIsLoading: true });
if (this.state.posts) {
this.client
.get("/timelines/public", {
max_id: this.state.posts[this.state.posts.length - 1].id,
limit: 20
})
.then((resp: any) => {
let newPosts: [Status] = resp.data;
let posts = this.state.posts as [Status];
newPosts.forEach((post: Status) => {
posts.push(post);
});
this.setState({
viewIsLoading: false,
viewDidLoad: true,
posts
});
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar("Failed to get posts", {
variant: "error"
});
});
}
}
insertBacklog() {
window.scrollTo(0, 0);
let posts = this.state.posts;
let backlog = this.state.backlogPosts;
if (posts && backlog && backlog.length > 0) {
let push = backlog.concat(posts);
this.setState({ posts: push as [Status], backlogPosts: null })
}
}
render() {
const { classes } = this.props;
loadMoreTimelinePieces() {
this.setState({ viewDidLoad: false, viewIsLoading: true})
if (this.state.posts) {
this.client.get('/timelines/public', { max_id: this.state.posts[this.state.posts.length - 1].id, limit: 20 }).then((resp: any) => {
let newPosts: [Status] = resp.data;
let posts = this.state.posts as [Status];
newPosts.forEach((post: Status) => {
posts.push(post);
});
this.setState({
viewIsLoading: false,
viewDidLoad: true,
posts
})
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar("Failed to get posts", {
variant: 'error',
});
})
}
}
render() {
const {classes} = this.props;
return (
<div className={classes.pageLayoutMaxConstraints}>
{
this.state.backlogPosts?
<div className={classes.pageTopChipContainer}>
<div className={classes.pageTopChips}>
<Slide direction="down" in={true}>
<Chip
avatar={
<Avatar>
<ArrowUpwardIcon/>
</Avatar>
}
label={`View ${this.state.backlogPosts.length} new post${this.state.backlogPosts.length > 1? "s": ""}`}
color="primary"
className={classes.pageTopChip}
onClick={() => this.insertBacklog()}
clickable
/>
</Slide>
</div>
</div>: null
}
{ this.state.posts?
<div>
{this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client}/>
})}
<br/>
{
this.state.viewDidLoad && !this.state.viewDidError? <div style={{textAlign: "center"}} onClick={() => this.loadMoreTimelinePieces()}><Button variant="contained">Load more</Button></div>: null
}
</div>:
<span/>
}
{
this.state.viewDidError?
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">Something went wrong when loading this timeline.</Typography>
<Typography>{this.state.viewDidErrorCode? this.state.viewDidErrorCode: ""}</Typography>
</Paper>:
<span/>
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
<span/>
}
return (
<div className={classes.pageLayoutMaxConstraints}>
{this.state.backlogPosts ? (
<div className={classes.pageTopChipContainer}>
<div className={classes.pageTopChips}>
<Slide direction="down" in={true}>
<Chip
avatar={
<Avatar>
<ArrowUpwardIcon />
</Avatar>
}
label={`View ${this.state.backlogPosts.length} new post${
this.state.backlogPosts.length > 1 ? "s" : ""
}`}
color="primary"
className={classes.pageTopChip}
onClick={() => this.insertBacklog()}
clickable
/>
</Slide>
</div>
);
}
</div>
) : null}
{this.state.posts ? (
<div>
{this.state.posts.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client} />;
})}
<br />
{this.state.viewDidLoad && !this.state.viewDidError ? (
<div
style={{ textAlign: "center" }}
onClick={() => this.loadMoreTimelinePieces()}
>
<Button variant="contained">Load more</Button>
</div>
) : null}
</div>
) : (
<span />
)}
{this.state.viewDidError ? (
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">
Something went wrong when loading this timeline.
</Typography>
<Typography>
{this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
</Typography>
</Paper>
) : (
<span />
)}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : (
<span />
)}
</div>
);
}
}
export default withStyles(styles)(withSnackbar(PublicPage));

523
src/pages/Recommendations.tsx
View File

@ -1,239 +1,312 @@
import React, {Component} from 'react';
import {withStyles, Typography, List, ListItem, Paper, ListItemText, Avatar, ListItemSecondaryAction, ListItemAvatar, ListSubheader, CircularProgress, IconButton, Divider, Tooltip} from '@material-ui/core';
import {styles} from './PageLayout.styles';
import Mastodon from 'megalodon';
import {Account} from '../types/Account';
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import CheckIcon from '@material-ui/icons/Check';
import CloseIcon from '@material-ui/icons/Close';
import {withSnackbar, withSnackbarProps} from 'notistack';
import React, { Component } from "react";
import {
withStyles,
Typography,
List,
ListItem,
Paper,
ListItemText,
Avatar,
ListItemSecondaryAction,
ListItemAvatar,
ListSubheader,
CircularProgress,
IconButton,
Divider,
Tooltip
} from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import Mastodon from "megalodon";
import { Account } from "../types/Account";
import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import PersonAddIcon from "@material-ui/icons/PersonAdd";
import CheckIcon from "@material-ui/icons/Check";
import CloseIcon from "@material-ui/icons/Close";
import { withSnackbar, withSnackbarProps } from "notistack";
interface IRecommendationsPageProps extends withSnackbarProps {
classes: any;
classes: any;
}
interface IRecommendationsPageState {
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: Boolean;
viewDidErrorCode?: string;
requestedFollows?: [Account];
followSuggestions?: [Account];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: Boolean;
viewDidErrorCode?: string;
requestedFollows?: [Account];
followSuggestions?: [Account];
}
class RecommendationsPage extends Component<IRecommendationsPageProps, IRecommendationsPageState> {
class RecommendationsPage extends Component<
IRecommendationsPageProps,
IRecommendationsPageState
> {
client: Mastodon;
client: Mastodon;
constructor(props: any) {
super(props);
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
localStorage.getItem("baseurl") + "/api/v1"
);
this.state = {
viewIsLoading: true
};
}
constructor(props: any) {
super(props);
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
this.state = {
viewIsLoading: true
componentDidMount() {
this.client
.get("/follow_requests")
.then((resp: any) => {
let requestedFollows: [Account] = resp.data;
this.setState({ requestedFollows });
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.name
});
console.error(err.message);
});
this.client
.get("/suggestions")
.then((resp: any) => {
let followSuggestions: [Account] = resp.data;
this.setState({
viewIsLoading: false,
viewDidLoad: true,
followSuggestions
});
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.name
});
console.error(err.message);
});
}
followMember(acct: Account) {
this.client
.post(`/accounts/${acct.id}/follow`)
.then((resp: any) => {
this.props.enqueueSnackbar("You are now following this account.");
this.client.del(`/suggestions/${acct.id}`).then((resp: any) => {
let followSuggestions = this.state.followSuggestions;
if (followSuggestions) {
followSuggestions.forEach((suggestion: Account, index: number) => {
if (followSuggestions && suggestion.id === acct.id) {
followSuggestions.splice(index, 1);
}
});
this.setState({ followSuggestions });
}
});
})
.catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, {
variant: "error"
});
console.error(err.message);
});
}
handleFollowRequest(acct: Account, type: "authorize" | "reject") {
this.client
.post(`/follow_requests/${acct.id}/${type}`)
.then((resp: any) => {
let requestedFollows = this.state.requestedFollows;
if (requestedFollows) {
requestedFollows.forEach((request: Account, index: number) => {
if (requestedFollows && request.id === acct.id) {
requestedFollows.splice(index, 1);
}
});
}
}
this.setState({ requestedFollows });
componentDidMount() {
this.client.get('/follow_requests').then((resp: any) => {
let requestedFollows: [Account] = resp.data;
this.setState({ requestedFollows })
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.name
});
console.error(err.message);
})
this.client.get('/suggestions').then((resp: any) => {
let followSuggestions: [Account] = resp.data;
this.setState({
viewIsLoading: false,
viewDidLoad: true,
followSuggestions
})
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.name
});
console.error(err.message);
})
}
followMember(acct: Account) {
this.client.post(`/accounts/${acct.id}/follow`).then((resp: any) => {
this.props.enqueueSnackbar('You are now following this account.');
this.client.del(`/suggestions/${acct.id}`).then((resp: any) => {
let followSuggestions = this.state.followSuggestions;
if (followSuggestions) {
followSuggestions.forEach((suggestion: Account, index: number) => {
if (followSuggestions && suggestion.id === acct.id) {
followSuggestions.splice(index, 1);
}
});
this.setState({ followSuggestions });
}
})
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, { variant: 'error' });
console.error(err.message);
})
}
handleFollowRequest(acct: Account, type: "authorize" | "reject") {
this.client.post(`/follow_requests/${acct.id}/${type}`).then((resp: any) => {
let requestedFollows = this.state.requestedFollows;
if (requestedFollows) {
requestedFollows.forEach((request: Account, index: number) => {
if (requestedFollows && request.id === acct.id) {
requestedFollows.splice(index, 1);
};
});
};
this.setState({requestedFollows});
let verb: string = type;
verb === "authorize"? verb = "authorized": verb = "rejected";
this.props.enqueueSnackbar(`You have ${verb} this request.`);
}).catch((err: Error) => {
this.props.enqueueSnackbar(`Couldn't ${type} this request: ${err.name}`, { variant: 'error' });
console.error(err.message);
})
}
showFollowRequests() {
const {classes} = this.props;
return (
<div>
<ListSubheader>Follow requests</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
{
this.state.requestedFollows?
this.state.requestedFollows.map((request: Account) => {
return (
<ListItem key={request.id}>
<ListItemAvatar>
<LinkableAvatar to={`/profile/${request.id}`} alt={request.username} src={request.avatar_static}/>
</ListItemAvatar>
<ListItemText primary={request.display_name || request.acct} secondary={request.acct}/>
<ListItemSecondaryAction>
<Tooltip title="Accept request">
<IconButton onClick={() => this.handleFollowRequest(request, "authorize")}>
<CheckIcon/>
</IconButton>
</Tooltip>
<Tooltip title="Reject request">
<IconButton onClick={() => this.handleFollowRequest(request, "reject")}>
<CloseIcon/>
</IconButton>
</Tooltip>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${request.id}`}>
<AccountCircleIcon/>
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
}): null
}
</List>
</Paper>
<br/>
</div>
)
}
showFollowSuggestions() {
const {classes} = this.props;
return (
<div>
<ListSubheader>Suggested accounts</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
{
this.state.followSuggestions?
this.state.followSuggestions.map((suggestion: Account) => {
return (
<ListItem key={suggestion.id}>
<ListItemAvatar>
<LinkableAvatar to={`/profile/${suggestion.id}`} alt={suggestion.username} src={suggestion.avatar_static}/>
</ListItemAvatar>
<ListItemText primary={suggestion.display_name || suggestion.acct} secondary={suggestion.acct}/>
<ListItemSecondaryAction>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${suggestion.id}`}>
<AssignmentIndIcon/>
</LinkableIconButton>
</Tooltip>
<Tooltip title="Follow">
<IconButton onClick={() => this.followMember(suggestion)}>
<PersonAddIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
}): null
}
</List>
</Paper>
<br/>
</div>
)
}
render() {
const {classes} = this.props;
return (
<div className={classes.pageLayoutConstraints}>
{
this.state.viewDidLoad?
<div>
{
this.state.requestedFollows && this.state.requestedFollows.length > 0?
this.showFollowRequests():
<div className={classes.pageLayoutEmptyTextConstraints}>
<Typography variant="h6">You don't have any follow requests.</Typography>
<br/>
</div>
}
<Divider/>
<br/>
{
this.state.followSuggestions && this.state.followSuggestions.length > 0? this.showFollowSuggestions():
<div className={classes.pageLayoutEmptyTextConstraints}>
<Typography variant="h5">We don't have any suggestions for you.</Typography>
<Typography paragraph>Why not interact with the fediverse a bit by creating a new post?</Typography>
</div>
}
</div>: null
}
{
this.state.viewDidError?
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">Something went wrong when loading this timeline.</Typography>
<Typography>{this.state.viewDidErrorCode? this.state.viewDidErrorCode: ""}</Typography>
</Paper>:
<span/>
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
<span/>
}
</div>
let verb: string = type;
verb === "authorize" ? (verb = "authorized") : (verb = "rejected");
this.props.enqueueSnackbar(`You have ${verb} this request.`);
})
.catch((err: Error) => {
this.props.enqueueSnackbar(
`Couldn't ${type} this request: ${err.name}`,
{ variant: "error" }
);
}
console.error(err.message);
});
}
showFollowRequests() {
const { classes } = this.props;
return (
<div>
<ListSubheader>Follow requests</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
{this.state.requestedFollows
? this.state.requestedFollows.map((request: Account) => {
return (
<ListItem key={request.id}>
<ListItemAvatar>
<LinkableAvatar
to={`/profile/${request.id}`}
alt={request.username}
src={request.avatar_static}
/>
</ListItemAvatar>
<ListItemText
primary={request.display_name || request.acct}
secondary={request.acct}
/>
<ListItemSecondaryAction>
<Tooltip title="Accept request">
<IconButton
onClick={() =>
this.handleFollowRequest(request, "authorize")
}
>
<CheckIcon />
</IconButton>
</Tooltip>
<Tooltip title="Reject request">
<IconButton
onClick={() =>
this.handleFollowRequest(request, "reject")
}
>
<CloseIcon />
</IconButton>
</Tooltip>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${request.id}`}>
<AccountCircleIcon />
</LinkableIconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
})
: null}
</List>
</Paper>
<br />
</div>
);
}
showFollowSuggestions() {
const { classes } = this.props;
return (
<div>
<ListSubheader>Suggested accounts</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
{this.state.followSuggestions
? this.state.followSuggestions.map((suggestion: Account) => {
return (
<ListItem key={suggestion.id}>
<ListItemAvatar>
<LinkableAvatar
to={`/profile/${suggestion.id}`}
alt={suggestion.username}
src={suggestion.avatar_static}
/>
</ListItemAvatar>
<ListItemText
primary={suggestion.display_name || suggestion.acct}
secondary={suggestion.acct}
/>
<ListItemSecondaryAction>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${suggestion.id}`}>
<AssignmentIndIcon />
</LinkableIconButton>
</Tooltip>
<Tooltip title="Follow">
<IconButton
onClick={() => this.followMember(suggestion)}
>
<PersonAddIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
})
: null}
</List>
</Paper>
<br />
</div>
);
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
{this.state.viewDidLoad ? (
<div>
{this.state.requestedFollows &&
this.state.requestedFollows.length > 0 ? (
this.showFollowRequests()
) : (
<div className={classes.pageLayoutEmptyTextConstraints}>
<Typography variant="h6">
You don't have any follow requests.
</Typography>
<br />
</div>
)}
<Divider />
<br />
{this.state.followSuggestions &&
this.state.followSuggestions.length > 0 ? (
this.showFollowSuggestions()
) : (
<div className={classes.pageLayoutEmptyTextConstraints}>
<Typography variant="h5">
We don't have any suggestions for you.
</Typography>
<Typography paragraph>
Why not interact with the fediverse a bit by creating a new
post?
</Typography>
</div>
)}
</div>
) : null}
{this.state.viewDidError ? (
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">
Something went wrong when loading this timeline.
</Typography>
<Typography>
{this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
</Typography>
</Paper>
) : (
<span />
)}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : (
<span />
)}
</div>
);
}
}
export default withStyles(styles)(withSnackbar(RecommendationsPage));
export default withStyles(styles)(withSnackbar(RecommendationsPage));

549
src/pages/Search.tsx
View File

@ -1,268 +1,331 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import {
List,
ListItem,
ListItemText,
ListSubheader,
ListItemSecondaryAction,
ListItemAvatar,
Avatar,
Paper,
withStyles,
Typography,
CircularProgress,
Tooltip,
IconButton
} from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import {styles} from './PageLayout.styles';
import {LinkableIconButton, LinkableAvatar} from '../interfaces/overrides';
import Mastodon from 'megalodon';
import {parse as parseParams, ParsedQuery} from 'query-string';
import { Results } from '../types/Search';
import { withSnackbar } from 'notistack';
import Post from '../components/Post';
import { Status } from '../types/Status';
import { Account } from '../types/Account';
List,
ListItem,
ListItemText,
ListSubheader,
ListItemSecondaryAction,
ListItemAvatar,
Avatar,
Paper,
withStyles,
Typography,
CircularProgress,
Tooltip,
IconButton
} from "@material-ui/core";
import PersonIcon from "@material-ui/icons/Person";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import PersonAddIcon from "@material-ui/icons/PersonAdd";
import { styles } from "./PageLayout.styles";
import { LinkableIconButton, LinkableAvatar } from "../interfaces/overrides";
import Mastodon from "megalodon";
import { parse as parseParams, ParsedQuery } from "query-string";
import { Results } from "../types/Search";
import { withSnackbar } from "notistack";
import Post from "../components/Post";
import { Status } from "../types/Status";
import { Account } from "../types/Account";
interface ISearchPageState {
query: string[] | string;
type?: string[] | string;
results?: Results;
tagResults?: [Status];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: string;
interface ISearchPageState {
query: string[] | string;
type?: string[] | string;
results?: Results;
tagResults?: [Status];
viewIsLoading: boolean;
viewDidLoad?: boolean;
viewDidError?: boolean;
viewDidErrorCode?: string;
}
class SearchPage extends Component<any, ISearchPageState> {
client: Mastodon;
client: Mastodon;
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.client = new Mastodon(
localStorage.getItem("access_token") as string,
localStorage.getItem("baseurl") + "/api/v2"
);
this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v2");
let searchParams = this.getQueryAndType(props);
let searchParams = this.getQueryAndType(props);
this.state = {
viewIsLoading: true,
query: searchParams.query,
type: searchParams.type
};
this.state = {
viewIsLoading: true,
query: searchParams.query,
type: searchParams.type
}
if (searchParams.type === "tag") {
this.searchForPostsWithTags(searchParams.query);
} else {
this.searchQuery(searchParams.query);
}
}
if (searchParams.type === "tag") {
this.searchForPostsWithTags(searchParams.query);
} else {
this.searchQuery(searchParams.query);
}
componentWillReceiveProps(props: any) {
this.setState({
viewDidLoad: false,
viewIsLoading: true,
viewDidError: false,
viewDidErrorCode: "",
results: undefined
});
let searchParams = this.getQueryAndType(props);
this.setState({ query: searchParams.query, type: searchParams.type });
if (searchParams.type === "tag") {
this.searchForPostsWithTags(searchParams.query);
} else {
this.searchQuery(searchParams.query);
}
}
runQueryCheck(newLocation?: string): ParsedQuery {
let searchParams = "";
if (newLocation !== undefined && typeof newLocation === "string") {
searchParams = newLocation.replace("#/search", "");
} else {
searchParams = location.hash.replace("#/search", "");
}
return parseParams(searchParams);
}
getQueryAndType(props: any) {
let newSearch = this.runQueryCheck(props.location);
let query: string | string[];
let type;
if (newSearch.query) {
if (newSearch.query.toString().startsWith("tag:")) {
type = "tag";
query = newSearch.query.toString().replace("tag:", "");
} else {
query = newSearch.query;
}
} else {
query = "";
}
componentWillReceiveProps(props: any) {
this.setState({ viewDidLoad: false, viewIsLoading: true, viewDidError: false, viewDidErrorCode: '', results: undefined});
let searchParams = this.getQueryAndType(props);
this.setState({ query: searchParams.query, type: searchParams.type });
if (searchParams.type === "tag") {
this.searchForPostsWithTags(searchParams.query);
} else {
this.searchQuery(searchParams.query);
}
if (newSearch.type && newSearch.type !== undefined) {
type = newSearch.type;
}
return {
query: query,
type: type
};
}
runQueryCheck(newLocation?: string): ParsedQuery {
let searchParams = "";
if (newLocation !== undefined && typeof(newLocation) === "string") {
searchParams = newLocation.replace("#/search", "");
} else {
searchParams = location.hash.replace("#/search", "");
}
return parseParams(searchParams);
}
getQueryAndType(props: any) {
let newSearch = this.runQueryCheck(props.location);
let query: string | string[];
let type;
if (newSearch.query) {
if (newSearch.query.toString().startsWith("tag:")) {
type = "tag";
query = newSearch.query.toString().replace("tag:", "");
} else {
query = newSearch.query;
}
} else {
query = "";
}
if (newSearch.type && newSearch.type !== undefined) {
type = newSearch.type;
}
return {
query: query,
type: type
};
}
searchQuery(query: string | string[]) {
this.client.get('/search', {q: query}).then((resp: any) => {
let results: Results = resp.data;
this.setState({
results,
viewDidLoad: true,
viewIsLoading: false
});
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar(`Couldn't search for ${this.state.query}: ${err.name}`, { variant: 'error' });
searchQuery(query: string | string[]) {
this.client
.get("/search", { q: query })
.then((resp: any) => {
let results: Results = resp.data;
this.setState({
results,
viewDidLoad: true,
viewIsLoading: false
});
}
searchForPostsWithTags(query: string | string[]) {
let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
client.get(`/timelines/tag/${query}`).then((resp: any) => {
let tagResults: [Status] = resp.data;
this.setState({
tagResults,
viewDidLoad: true,
viewIsLoading: false
});
console.log(this.state.tagResults);
}).catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
})
this.props.enqueueSnackbar(`Couldn't search for posts with tag ${this.state.query}: ${err.name}`, { variant: 'error' });
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
}
followMemberFromQuery(acct: Account) {
let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
client.post(`/accounts/${acct.id}/follow`).then((resp: any) => {
this.props.enqueueSnackbar('You are now following this account.');
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, { variant: 'error' });
console.error(err.message);
})
}
showAllAccountsFromQuery() {
const { classes } = this.props;
return (
<div>
<ListSubheader>Accounts</ListSubheader>
{
this.state.results && this.state.results.accounts.length > 0?
<Paper className={classes.pageListConstraints}>
<List>
{ this.state.results.accounts.map((acct: Account) => {
return (
<ListItem key={acct.id}>
<ListItemAvatar>
<LinkableAvatar to={`/profile/${acct.id}`} alt={acct.username} src={acct.avatar_static}/>
</ListItemAvatar>
<ListItemText primary={acct.display_name || acct.acct} secondary={acct.acct}/>
<ListItemSecondaryAction>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${acct.id}`}>
<AssignmentIndIcon/>
</LinkableIconButton>
</Tooltip>
<Tooltip title="Follow">
<IconButton onClick={() => this.followMemberFromQuery(acct)}>
<PersonAddIcon/>
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
</Paper>: <Typography variant="caption" className={classes.pageLayoutEmptyTextConstraints}>No results found</Typography>
}
<br/>
</div>
)
}
showAllPostsFromQuery() {
const {classes} = this.props;
return (
<div>
<ListSubheader>Posts</ListSubheader>
{
this.state.results?
this.state.results.statuses.length > 0?
this.state.results.statuses.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client}/>
}): <Typography variant="caption" className={classes.pageLayoutEmptyTextConstraints}>No results found.</Typography>: null
}
</div>
this.props.enqueueSnackbar(
`Couldn't search for ${this.state.query}: ${err.name}`,
{ variant: "error" }
);
}
});
}
showAllPostsWithTag() {
const {classes} = this.props;
return (
<div>
<ListSubheader>Tagged posts</ListSubheader>
{
this.state.tagResults?
this.state.tagResults.length > 0?
this.state.tagResults.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client}/>
}): <Typography variant="caption" className={classes.pageLayoutEmptyTextConstraints}>No results found.</Typography>: null
}
</div>
searchForPostsWithTags(query: string | string[]) {
let client = new Mastodon(
localStorage.getItem("access_token") as string,
localStorage.getItem("baseurl") + "/api/v1"
);
client
.get(`/timelines/tag/${query}`)
.then((resp: any) => {
let tagResults: [Status] = resp.data;
this.setState({
tagResults,
viewDidLoad: true,
viewIsLoading: false
});
console.log(this.state.tagResults);
})
.catch((err: Error) => {
this.setState({
viewIsLoading: false,
viewDidError: true,
viewDidErrorCode: err.message
});
this.props.enqueueSnackbar(
`Couldn't search for posts with tag ${this.state.query}: ${err.name}`,
{ variant: "error" }
);
}
});
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
{
this.state.type && this.state.type === "tag"?
this.showAllPostsWithTag():
<div>
{this.showAllAccountsFromQuery()}
{this.showAllPostsFromQuery()}
</div>
}
{
this.state.viewDidError?
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">Something went wrong when loading this timeline.</Typography>
<Typography>{this.state.viewDidErrorCode? this.state.viewDidErrorCode: ""}</Typography>
</Paper>:
<span/>
}
{
this.state.viewIsLoading?
<div style={{ textAlign: 'center' }}><CircularProgress className={classes.progress} color="primary" /></div>:
<span/>
}
</div>
);
}
followMemberFromQuery(acct: Account) {
let client = new Mastodon(
localStorage.getItem("access_token") as string,
localStorage.getItem("baseurl") + "/api/v1"
);
client
.post(`/accounts/${acct.id}/follow`)
.then((resp: any) => {
this.props.enqueueSnackbar("You are now following this account.");
})
.catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, {
variant: "error"
});
console.error(err.message);
});
}
showAllAccountsFromQuery() {
const { classes } = this.props;
return (
<div>
<ListSubheader>Accounts</ListSubheader>
{this.state.results && this.state.results.accounts.length > 0 ? (
<Paper className={classes.pageListConstraints}>
<List>
{this.state.results.accounts.map((acct: Account) => {
return (
<ListItem key={acct.id}>
<ListItemAvatar>
<LinkableAvatar
to={`/profile/${acct.id}`}
alt={acct.username}
src={acct.avatar_static}
/>
</ListItemAvatar>
<ListItemText
primary={acct.display_name || acct.acct}
secondary={acct.acct}
/>
<ListItemSecondaryAction>
<Tooltip title="View profile">
<LinkableIconButton to={`/profile/${acct.id}`}>
<AssignmentIndIcon />
</LinkableIconButton>
</Tooltip>
<Tooltip title="Follow">
<IconButton
onClick={() => this.followMemberFromQuery(acct)}
>
<PersonAddIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
</Paper>
) : (
<Typography
variant="caption"
className={classes.pageLayoutEmptyTextConstraints}
>
No results found
</Typography>
)}
<br />
</div>
);
}
showAllPostsFromQuery() {
const { classes } = this.props;
return (
<div>
<ListSubheader>Posts</ListSubheader>
{this.state.results ? (
this.state.results.statuses.length > 0 ? (
this.state.results.statuses.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client} />;
})
) : (
<Typography
variant="caption"
className={classes.pageLayoutEmptyTextConstraints}
>
No results found.
</Typography>
)
) : null}
</div>
);
}
showAllPostsWithTag() {
const { classes } = this.props;
return (
<div>
<ListSubheader>Tagged posts</ListSubheader>
{this.state.tagResults ? (
this.state.tagResults.length > 0 ? (
this.state.tagResults.map((post: Status) => {
return <Post key={post.id} post={post} client={this.client} />;
})
) : (
<Typography
variant="caption"
className={classes.pageLayoutEmptyTextConstraints}
>
No results found.
</Typography>
)
) : null}
</div>
);
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutConstraints}>
{this.state.type && this.state.type === "tag" ? (
this.showAllPostsWithTag()
) : (
<div>
{this.showAllAccountsFromQuery()}
{this.showAllPostsFromQuery()}
</div>
)}
{this.state.viewDidError ? (
<Paper className={classes.errorCard}>
<Typography variant="h4">Bummer.</Typography>
<Typography variant="h6">
Something went wrong when loading this timeline.
</Typography>
<Typography>
{this.state.viewDidErrorCode ? this.state.viewDidErrorCode : ""}
</Typography>
</Paper>
) : (
<span />
)}
{this.state.viewIsLoading ? (
<div style={{ textAlign: "center" }}>
<CircularProgress className={classes.progress} color="primary" />
</div>
) : (
<span />
)}
</div>
);
}
}
export default withStyles(styles)(withSnackbar(SearchPage));
export default withStyles(styles)(withSnackbar(SearchPage));

434
src/pages/Settings.tsx
View File

@ -1,14 +1,14 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import {
List,
List,
ListItem,
ListItemAvatar,
ListItemText,
ListSubheader,
ListItemSecondaryAction,
Paper,
IconButton,
withStyles,
ListItemText,
ListSubheader,
ListItemSecondaryAction,
Paper,
IconButton,
withStyles,
Button,
Switch,
Dialog,
@ -22,28 +22,44 @@ import {
Grid,
Theme,
Typography
} from '@material-ui/core';
import {styles} from './PageLayout.styles';
import {setUserDefaultBool, getUserDefaultBool, getUserDefaultTheme, setUserDefaultTheme, getUserDefaultVisibility, setUserDefaultVisibility, getConfig} from '../utilities/settings';
import {canSendNotifications, browserSupportsNotificationRequests} from '../utilities/notifications';
import {themes, defaultTheme} from '../types/HyperspaceTheme';
import ThemePreview from '../components/ThemePreview';
import {setHyperspaceTheme, getHyperspaceTheme, getDarkModeFromSystem} from '../utilities/themes';
import { Visibility } from '../types/Visibility';
import {LinkableButton} from '../interfaces/overrides';
} from "@material-ui/core";
import { styles } from "./PageLayout.styles";
import {
setUserDefaultBool,
getUserDefaultBool,
getUserDefaultTheme,
setUserDefaultTheme,
getUserDefaultVisibility,
setUserDefaultVisibility,
getConfig
} from "../utilities/settings";
import {
canSendNotifications,
browserSupportsNotificationRequests
} from "../utilities/notifications";
import { themes, defaultTheme } from "../types/HyperspaceTheme";
import ThemePreview from "../components/ThemePreview";
import {
setHyperspaceTheme,
getHyperspaceTheme,
getDarkModeFromSystem
} from "../utilities/themes";
import { Visibility } from "../types/Visibility";
import { LinkableButton } from "../interfaces/overrides";
import { Config } from "../types/Config";
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import DevicesIcon from '@material-ui/icons/Devices';
import Brightness3Icon from '@material-ui/icons/Brightness3';
import PaletteIcon from '@material-ui/icons/Palette';
import AccountEditIcon from 'mdi-material-ui/AccountEdit';
import MastodonIcon from 'mdi-material-ui/Mastodon';
import VisibilityIcon from '@material-ui/icons/Visibility';
import NotificationsIcon from '@material-ui/icons/Notifications';
import BellAlertIcon from 'mdi-material-ui/BellAlert';
import RefreshIcon from '@material-ui/icons/Refresh';
import UndoIcon from '@material-ui/icons/Undo';
import { Config } from '../types/Config';
import OpenInNewIcon from "@material-ui/icons/OpenInNew";
import DevicesIcon from "@material-ui/icons/Devices";
import Brightness3Icon from "@material-ui/icons/Brightness3";
import PaletteIcon from "@material-ui/icons/Palette";
import AccountEditIcon from "mdi-material-ui/AccountEdit";
import MastodonIcon from "mdi-material-ui/Mastodon";
import VisibilityIcon from "@material-ui/icons/Visibility";
import NotificationsIcon from "@material-ui/icons/Notifications";
import BellAlertIcon from "mdi-material-ui/BellAlert";
import RefreshIcon from "@material-ui/icons/Refresh";
import UndoIcon from "@material-ui/icons/Undo";
import CancelIcon from "@material-ui/icons/Cancel";
interface ISettingsState {
darkModeEnabled: boolean;
@ -62,25 +78,28 @@ interface ISettingsState {
}
class SettingsPage extends Component<any, ISettingsState> {
constructor(props: any) {
super(props);
this.state = {
darkModeEnabled: getUserDefaultBool('darkModeEnabled'),
systemDecidesDarkMode: getUserDefaultBool('systemDecidesDarkMode'),
darkModeEnabled: getUserDefaultBool("darkModeEnabled"),
systemDecidesDarkMode: getUserDefaultBool("systemDecidesDarkMode"),
pushNotificationsEnabled: canSendNotifications(),
badgeDisplaysAllNotifs: getUserDefaultBool('displayAllOnNotificationBadge'),
badgeDisplaysAllNotifs: getUserDefaultBool(
"displayAllOnNotificationBadge"
),
selectThemeName: getUserDefaultTheme().key,
themeDialogOpen: false,
visibilityDialogOpen: false,
resetHyperspaceDialog: false,
resetSettingsDialog: false,
previewTheme: setHyperspaceTheme(getUserDefaultTheme()) || setHyperspaceTheme(defaultTheme),
previewTheme:
setHyperspaceTheme(getUserDefaultTheme()) ||
setHyperspaceTheme(defaultTheme),
defaultVisibility: getUserDefaultVisibility() || "public",
brandName: "Hyperspace",
federated: true
}
};
this.toggleDarkMode = this.toggleDarkMode.bind(this);
this.toggleSystemDarkMode = this.toggleSystemDarkMode.bind(this);
@ -94,13 +113,15 @@ class SettingsPage extends Component<any, ISettingsState> {
}
componentDidMount() {
getConfig().then((config: any) => {
this.setState({
brandName: config.branding.name
getConfig()
.then((config: any) => {
this.setState({
brandName: config.branding.name
});
})
}).catch((err: Error) => {
console.error(err.message);
});
.catch((err: Error) => {
console.error(err.message);
});
this.getFederatedStatus();
console.log(getDarkModeFromSystem());
}
@ -109,32 +130,49 @@ class SettingsPage extends Component<any, ISettingsState> {
getConfig().then((result: any) => {
if (result !== undefined) {
let config: Config = result;
console.log(config.federation.allowPublicPosts === false)
this.setState({ federated: config.federation.allowPublicPosts });
console.log(config.federation.allowPublicPosts === false);
this.setState({
federated: config.federation.allowPublicPosts
});
}
})
});
}
toggleDarkMode() {
this.setState({ darkModeEnabled: !this.state.darkModeEnabled });
setUserDefaultBool('darkModeEnabled', !this.state.darkModeEnabled);
setUserDefaultBool("darkModeEnabled", !this.state.darkModeEnabled);
window.location.reload();
}
toggleSystemDarkMode() {
this.setState({ systemDecidesDarkMode: !this.state.systemDecidesDarkMode });
setUserDefaultBool('systemDecidesDarkMode', !this.state.systemDecidesDarkMode);
this.setState({
systemDecidesDarkMode: !this.state.systemDecidesDarkMode
});
setUserDefaultBool(
"systemDecidesDarkMode",
!this.state.systemDecidesDarkMode
);
window.location.reload();
}
togglePushNotifications() {
this.setState({ pushNotificationsEnabled: !this.state.pushNotificationsEnabled });
setUserDefaultBool('enablePushNotifications', !this.state.pushNotificationsEnabled);
this.setState({
pushNotificationsEnabled: !this.state.pushNotificationsEnabled
});
setUserDefaultBool(
"enablePushNotifications",
!this.state.pushNotificationsEnabled
);
}
toggleBadgeCount() {
this.setState({ badgeDisplaysAllNotifs: !this.state.badgeDisplaysAllNotifs });
setUserDefaultBool('displayAllOnNotificationBadge', !this.state.badgeDisplaysAllNotifs);
this.setState({
badgeDisplaysAllNotifs: !this.state.badgeDisplaysAllNotifs
});
setUserDefaultBool(
"displayAllOnNotificationBadge",
!this.state.badgeDisplaysAllNotifs
);
}
toggleThemeDialog() {
@ -142,11 +180,15 @@ class SettingsPage extends Component<any, ISettingsState> {
}
toggleVisibilityDialog() {
this.setState({ visibilityDialogOpen: !this.state.visibilityDialogOpen });
this.setState({
visibilityDialogOpen: !this.state.visibilityDialogOpen
});
}
toggleResetDialog() {
this.setState({ resetHyperspaceDialog: !this.state.resetHyperspaceDialog });
this.setState({
resetHyperspaceDialog: !this.state.resetHyperspaceDialog
});
}
toggleResetSettingsDialog() {
@ -178,15 +220,22 @@ class SettingsPage extends Component<any, ISettingsState> {
}
refresh() {
let settings = ['darkModeEnabled', 'enablePushNotifications', 'clearNotificationsOnRead', 'theme', 'displayAllOnNotificationBadge', 'defaultVisibility'];
let settings = [
"darkModeEnabled",
"enablePushNotifications",
"clearNotificationsOnRead",
"theme",
"displayAllOnNotificationBadge",
"defaultVisibility"
];
settings.forEach(setting => {
localStorage.removeItem(setting);
})
});
window.location.reload();
}
showThemeDialog() {
const {classes} = this.props;
const { classes } = this.props;
return (
<Dialog
open={this.state.themeDialogOpen}
@ -196,7 +245,9 @@ class SettingsPage extends Component<any, ISettingsState> {
fullWidth={true}
aria-labelledby="confirmation-dialog-title"
>
<DialogTitle id="confirmation-dialog-title">Choose a theme</DialogTitle>
<DialogTitle id="confirmation-dialog-title">
Choose a theme
</DialogTitle>
<DialogContent>
<Grid container spacing={16}>
<Grid item xs={12} md={6}>
@ -204,17 +255,31 @@ class SettingsPage extends Component<any, ISettingsState> {
aria-label="Theme"
name="colorScheme"
value={this.state.selectThemeName}
onChange={(e, value) => this.changeThemeName(value)}
onChange={(e, value) =>
this.changeThemeName(value)
}
>
{themes.map(theme => (
<FormControlLabel value={theme.key} key={theme.key} control={<Radio />} label={theme.name} />
<FormControlLabel
value={theme.key}
key={theme.key}
control={<Radio />}
label={theme.name}
/>
))}
))}
</RadioGroup>
</Grid>
<Grid item xs={12} md={6} className={classes.desktopOnly}>
<Typography variant="h6" component="p">Theme preview</Typography>
<ThemePreview theme={this.state.previewTheme}/>
<Grid
item
xs={12}
md={6}
className={classes.desktopOnly}
>
<Typography variant="h6" component="p">
Theme preview
</Typography>
<ThemePreview theme={this.state.previewTheme} />
</Grid>
</Grid>
</DialogContent>
@ -240,22 +305,54 @@ class SettingsPage extends Component<any, ISettingsState> {
fullWidth={true}
aria-labelledby="confirmation-dialog-title"
>
<DialogTitle id="confirmation-dialog-title">Set your default visibility</DialogTitle>
<DialogTitle id="confirmation-dialog-title">
Set your default visibility
</DialogTitle>
<DialogContent>
<RadioGroup
aria-label="Visibility"
name="visibility"
value={this.state.defaultVisibility}
onChange={(e, value) => this.changeVisibility(value as Visibility)}
onChange={(e, value) =>
this.changeVisibility(value as Visibility)
}
>
<FormControlLabel value={"public"} key={"public"} control={<Radio />} label={`Public ${this.state.federated? "": "(disabled by provider)"}`} disabled={!this.state.federated}/>
<FormControlLabel value={"unlisted"} key={"unlisted"} control={<Radio />} label={"Unlisted"} />
<FormControlLabel value={"private"} key={"private"} control={<Radio />} label={"Private (followers only)"} />
<FormControlLabel value={"direct"} key={"direct"} control={<Radio />} label={"Direct"} />
<FormControlLabel
value={"public"}
key={"public"}
control={<Radio />}
label={`Public ${
this.state.federated
? ""
: "(disabled by provider)"
}`}
disabled={!this.state.federated}
/>
<FormControlLabel
value={"unlisted"}
key={"unlisted"}
control={<Radio />}
label={"Unlisted"}
/>
<FormControlLabel
value={"private"}
key={"private"}
control={<Radio />}
label={"Private (followers only)"}
/>
<FormControlLabel
value={"direct"}
key={"direct"}
control={<Radio />}
label={"Direct"}
/>
</RadioGroup>
</DialogContent>
<DialogActions>
<Button onClick={this.toggleVisibilityDialog} color="default">
<Button
onClick={this.toggleVisibilityDialog}
color="default"
>
Cancel
</Button>
<Button onClick={this.setVisibility} color="secondary">
@ -271,19 +368,28 @@ class SettingsPage extends Component<any, ISettingsState> {
<Dialog
open={this.state.resetSettingsDialog}
onClose={() => this.toggleResetSettingsDialog()}
>
<DialogTitle id="alert-dialog-title">Are you sure you want to refresh settings?</DialogTitle>
>
<DialogTitle id="alert-dialog-title">
Are you sure you want to refresh settings?
</DialogTitle>
<DialogActions>
<Button onClick={() => this.toggleResetSettingsDialog()} color="primary" autoFocus>
Cancel
<Button
onClick={() => this.toggleResetSettingsDialog()}
color="primary"
autoFocus
>
Cancel
</Button>
<Button onClick={() => {
this.refresh();
}} color="primary">
Refresh
<Button
onClick={() => {
this.refresh();
}}
color="primary"
>
Refresh
</Button>
</DialogActions>
</Dialog>
</Dialog>
);
}
@ -292,24 +398,35 @@ class SettingsPage extends Component<any, ISettingsState> {
<Dialog
open={this.state.resetHyperspaceDialog}
onClose={() => this.toggleResetDialog()}
>
<DialogTitle id="alert-dialog-title">Reset {this.state.brandName}?</DialogTitle>
>
<DialogTitle id="alert-dialog-title">
Reset {this.state.brandName}?
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to reset {this.state.brandName}? You'll need to re-authorize {this.state.brandName} access again.
Are you sure you want to reset {this.state.brandName}?
You'll need to re-authorize {this.state.brandName}{" "}
access again.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => this.toggleResetDialog()} color="primary" autoFocus>
Cancel
<Button
onClick={() => this.toggleResetDialog()}
color="primary"
autoFocus
>
Cancel
</Button>
<Button onClick={() => {
this.reset();
}} color="primary">
Reset
<Button
onClick={() => {
this.reset();
}}
color="primary"
>
Reset
</Button>
</DialogActions>
</Dialog>
</Dialog>
);
}
@ -322,34 +439,43 @@ class SettingsPage extends Component<any, ISettingsState> {
<List>
<ListItem>
<ListItemAvatar>
<DevicesIcon color="action"/>
<DevicesIcon color="action" />
</ListItemAvatar>
<ListItemText primary="Match system appearance" secondary="Obey light/dark theme from your system"/>
<ListItemText
primary="Match system appearance"
secondary="Obey light/dark theme from your system"
/>
<ListItemSecondaryAction>
<Switch
checked={this.state.systemDecidesDarkMode}
<Switch
checked={this.state.systemDecidesDarkMode}
onChange={this.toggleSystemDarkMode}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<Brightness3Icon color="action"/>
<Brightness3Icon color="action" />
</ListItemAvatar>
<ListItemText primary="Dark mode" secondary="Toggles light or dark theme"/>
<ListItemText
primary="Dark mode"
secondary="Toggles light or dark theme"
/>
<ListItemSecondaryAction>
<Switch
disabled={this.state.systemDecidesDarkMode}
checked={this.state.darkModeEnabled}
checked={this.state.darkModeEnabled}
onChange={this.toggleDarkMode}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<PaletteIcon color="action"/>
<PaletteIcon color="action" />
</ListItemAvatar>
<ListItemText primary="Interface theme" secondary="The color palette used for the interface"/>
<ListItemText
primary="Interface theme"
secondary="The color palette used for the interface"
/>
<ListItemSecondaryAction>
<Button onClick={this.toggleThemeDialog}>
Set theme
@ -358,41 +484,69 @@ class SettingsPage extends Component<any, ISettingsState> {
</ListItem>
</List>
</Paper>
<br/>
<br />
<ListSubheader>Your Account</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
<ListItem>
<ListItemAvatar>
<AccountEditIcon color="action"/>
<AccountEditIcon color="action" />
</ListItemAvatar>
<ListItemText primary="Edit your profile" secondary="Change your bio, display name, and images"/>
<ListItemText
primary="Edit your profile"
secondary="Change your bio, display name, and images"
/>
<ListItemSecondaryAction>
<LinkableButton to="/you">Edit</LinkableButton>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<MastodonIcon color="action"/>
<CancelIcon color="action" />
</ListItemAvatar>
<ListItemText primary="Configure on Mastodon"/>
<ListItemText
primary="Manage blocked servers"
secondary="View and manage servers that you've blocked"
/>
<ListItemSecondaryAction>
<IconButton href={(localStorage.getItem("baseurl") as string) + "/settings/preferences"} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
<LinkableButton to="/blocked">
Manage
</LinkableButton>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<MastodonIcon color="action" />
</ListItemAvatar>
<ListItemText primary="Configure on Mastodon" />
<ListItemSecondaryAction>
<IconButton
href={
(localStorage.getItem(
"baseurl"
) as string) + "/settings/preferences"
}
target="_blank"
rel="noreferrer"
>
<OpenInNewIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</List>
</Paper>
<br/>
<br />
<ListSubheader>Composer</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
<ListItem>
<ListItemAvatar>
<VisibilityIcon color="action"/>
<VisibilityIcon color="action" />
</ListItemAvatar>
<ListItemText primary="Default visibility" secondary="New posts in composer will use this visiblity"/>
<ListItemText
primary="Default visibility"
secondary="New posts in composer will use this visiblity"
/>
<ListItemSecondaryAction>
<Button onClick={this.toggleVisibilityDialog}>
Change
@ -401,73 +555,92 @@ class SettingsPage extends Component<any, ISettingsState> {
</ListItem>
</List>
</Paper>
<br/>
<br />
<ListSubheader>Notifications</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
<ListItem>
<ListItemAvatar>
<NotificationsIcon color="action"/>
<NotificationsIcon color="action" />
</ListItemAvatar>
<ListItemText
<ListItemText
primary="Enable push notifications"
secondary={
getUserDefaultBool('userDeniedNotification')?
"Check your browser's notification permissions.":
browserSupportsNotificationRequests()?
"Send a push notification when not focused.":
"Notifications aren't supported."
getUserDefaultBool("userDeniedNotification")
? "Check your browser's notification permissions."
: browserSupportsNotificationRequests()
? "Send a push notification when not focused."
: "Notifications aren't supported."
}
/>
<ListItemSecondaryAction>
<Switch
checked={this.state.pushNotificationsEnabled}
<Switch
checked={
this.state.pushNotificationsEnabled
}
onChange={this.togglePushNotifications}
disabled={!browserSupportsNotificationRequests() || getUserDefaultBool('userDeniedNotification')}
disabled={
!browserSupportsNotificationRequests() ||
getUserDefaultBool(
"userDeniedNotification"
)
}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<BellAlertIcon color="action"/>
<BellAlertIcon color="action" />
</ListItemAvatar>
<ListItemText
<ListItemText
primary="Notification badge counts all notifications"
secondary={
"Counts all notifications, read or unread."
}
/>
<ListItemSecondaryAction>
<Switch
checked={this.state.badgeDisplaysAllNotifs}
<Switch
checked={this.state.badgeDisplaysAllNotifs}
onChange={this.toggleBadgeCount}
/>
</ListItemSecondaryAction>
</ListItem>
</List>
</Paper>
<br/>
<br />
<ListSubheader>Advanced</ListSubheader>
<Paper className={classes.pageListConstraints}>
<List>
<ListItem>
<ListItemAvatar>
<RefreshIcon color="action"/>
<RefreshIcon color="action" />
</ListItemAvatar>
<ListItemText primary="Refresh settings" secondary="Reset the settings to defaults."/>
<ListItemText
primary="Refresh settings"
secondary="Reset the settings to defaults."
/>
<ListItemSecondaryAction>
<Button onClick={() => this.toggleResetSettingsDialog()}>
<Button
onClick={() =>
this.toggleResetSettingsDialog()
}
>
Refresh
</Button>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemAvatar>
<UndoIcon color="action"/>
<UndoIcon color="action" />
</ListItemAvatar>
<ListItemText primary={`Reset ${this.state.brandName}`} secondary="Deletes all data and resets the app"/>
<ListItemText
primary={`Reset ${this.state.brandName}`}
secondary="Deletes all data and resets the app"
/>
<ListItemSecondaryAction>
<Button onClick={() => this.toggleResetDialog()}>
<Button
onClick={() => this.toggleResetDialog()}
>
Reset
</Button>
</ListItemSecondaryAction>
@ -481,7 +654,6 @@ class SettingsPage extends Component<any, ISettingsState> {
</div>
);
}
}
export default withStyles(styles)(SettingsPage);
export default withStyles(styles)(SettingsPage);

1099
src/pages/Welcome.tsx
View File

File diff suppressed because it is too large Load Diff

111
src/pages/WelcomePage.styles.tsx
View File

@ -1,72 +1,73 @@
import { Theme, createStyles } from '@material-ui/core';
import { Theme, createStyles } from "@material-ui/core";
export const styles = (theme: Theme) => createStyles({
export const styles = (theme: Theme) =>
createStyles({
root: {
width: '100%',
height: '100%',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
top: 0,
left: 0,
position: "absolute",
[theme.breakpoints.up('sm')]: {
paddingTop: theme.spacing.unit * 4,
paddingLeft: '25%',
paddingRight: '25%',
},
[theme.breakpoints.up('lg')]: {
paddingTop: theme.spacing.unit * 12,
paddingLeft: '35%',
paddingRight: '35%',
}
width: "100%",
height: "100%",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
top: 0,
left: 0,
position: "absolute",
[theme.breakpoints.up("sm")]: {
paddingTop: theme.spacing.unit * 4,
paddingLeft: "25%",
paddingRight: "25%"
},
[theme.breakpoints.up("lg")]: {
paddingTop: theme.spacing.unit * 12,
paddingLeft: "35%",
paddingRight: "35%"
}
},
titleBarRoot: {
top: 0,
left: 0,
height: 24,
width: '100%',
backgroundColor: "rgba(0, 0, 0, 0.2)",
textAlign: 'center',
zIndex: 1000,
verticalAlign: 'middle',
WebkitUserSelect: 'none',
WebkitAppRegion: "drag",
position: "absolute"
top: 0,
left: 0,
height: 24,
width: "100%",
backgroundColor: "rgba(0, 0, 0, 0.2)",
textAlign: "center",
zIndex: 1000,
verticalAlign: "middle",
WebkitUserSelect: "none",
WebkitAppRegion: "drag",
position: "absolute"
},
titleBarText: {
color: theme.palette.common.white,
fontSize: 12,
paddingTop: 2,
paddingBottom: 1
color: theme.palette.common.white,
fontSize: 12,
paddingTop: 2,
paddingBottom: 1
},
paper: {
height: '100%',
[theme.breakpoints.up('sm')]: {
height: 'auto',
paddingLeft: theme.spacing.unit * 8,
paddingRight: theme.spacing.unit * 8,
paddingTop: theme.spacing.unit * 6,
},
paddingTop: theme.spacing.unit * 12,
paddingLeft: theme.spacing.unit * 4,
paddingRight: theme.spacing.unit * 4,
paddingBottom: theme.spacing.unit * 6,
textAlign: 'center',
height: "100%",
[theme.breakpoints.up("sm")]: {
height: "auto",
paddingLeft: theme.spacing.unit * 8,
paddingRight: theme.spacing.unit * 8,
paddingTop: theme.spacing.unit * 6
},
paddingTop: theme.spacing.unit * 12,
paddingLeft: theme.spacing.unit * 4,
paddingRight: theme.spacing.unit * 4,
paddingBottom: theme.spacing.unit * 6,
textAlign: "center"
},
welcomeLink: {
color: theme.palette.primary.light
color: theme.palette.primary.light
},
flexGrow: {
flexGrow: 1
flexGrow: 1
},
middlePadding: {
height: theme.spacing.unit * 6
height: theme.spacing.unit * 6
},
logo: {
[theme.breakpoints.up('sm')]: {
height: 64,
width: "auto"
},
[theme.breakpoints.up("sm")]: {
height: 64,
width: "auto"
}
}
});
});

443
src/pages/You.tsx
View File

@ -1,192 +1,291 @@
import React, {Component} from 'react';
import {withStyles, Typography, Paper, Avatar, Button, TextField, ListItem, ListItemText, ListItemAvatar, List, Grid} from '@material-ui/core';
import {withSnackbar, withSnackbarProps} from 'notistack';
import {styles} from './PageLayout.styles';
import { Account } from '../types/Account';
import Mastodon from 'megalodon';
import filedialog from 'file-dialog';
import React, { Component } from "react";
import {
withStyles,
Typography,
Paper,
Avatar,
Button,
TextField,
ListItem,
ListItemText,
ListItemAvatar,
List,
Grid
} from "@material-ui/core";
import { withSnackbar, withSnackbarProps } from "notistack";
import { styles } from "./PageLayout.styles";
import { Account } from "../types/Account";
import Mastodon from "megalodon";
import filedialog from "file-dialog";
import PersonIcon from '@material-ui/icons/Person';
import PersonIcon from "@material-ui/icons/Person";
interface IYouProps extends withSnackbarProps {
classes: any;
classes: any;
}
interface IYouState {
currentAccount: Account;
newDisplayName?: string;
newBio?: string;
currentAccount: Account;
newDisplayName?: string;
newBio?: string;
}
class You extends Component<IYouProps, IYouState> {
client: Mastodon;
client: Mastodon;
constructor(props: any) {
super(props);
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 = {
currentAccount: this.getAccount()
};
}
this.state = {
currentAccount: this.getAccount()
getAccount() {
let acct = localStorage.getItem("account");
if (acct) {
return JSON.parse(acct);
}
}
updateAvatar() {
filedialog({
multiple: false,
accept: "image/*"
})
.then((images: FileList) => {
if (images.length > 0) {
this.props.enqueueSnackbar("Updating avatar...", {
persist: true,
key: "persistAvatar"
});
let upload = new FormData();
upload.append("avatar", images[0]);
this.client
.patch("/accounts/update_credentials", upload)
.then((acct: any) => {
let currentAccount: Account = acct.data;
this.setState({ currentAccount });
localStorage.setItem("account", JSON.stringify(currentAccount));
this.props.closeSnackbar("persistAvatar");
this.props.enqueueSnackbar("Avatar updated successfully.");
})
.catch((err: Error) => {
this.props.closeSnackbar("persistAvatar");
this.props.enqueueSnackbar(
"Couldn't update avatar: " + err.name,
{ variant: "error" }
);
});
}
}
})
.catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't update avatar: " + err.name);
});
}
getAccount() {
let acct = localStorage.getItem('account');
if (acct) {
return JSON.parse(acct);
updateHeader() {
filedialog({
multiple: false,
accept: "image/*"
})
.then((images: FileList) => {
if (images.length > 0) {
this.props.enqueueSnackbar("Updating header...", {
persist: true,
key: "persistHeader"
});
let upload = new FormData();
upload.append("header", images[0]);
this.client
.patch("/accounts/update_credentials", upload)
.then((acct: any) => {
let currentAccount: Account = acct.data;
this.setState({ currentAccount });
localStorage.setItem("account", JSON.stringify(currentAccount));
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Header updated successfully.");
})
.catch((err: Error) => {
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar(
"Couldn't update header: " + err.name,
{ variant: "error" }
);
});
}
}
})
.catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't update header: " + err.name);
});
}
updateAvatar() {
filedialog({
multiple: false,
accept: "image/*"
}).then((images: FileList) => {
if (images.length > 0) {
this.props.enqueueSnackbar("Updating avatar...", { persist: true, key: "persistAvatar" });
let upload = new FormData();
upload.append("avatar", images[0]);
this.client.patch("/accounts/update_credentials", upload).then((acct: any) => {
let currentAccount: Account = acct.data;
this.setState({ currentAccount });
localStorage.setItem("account", JSON.stringify(currentAccount));
this.props.closeSnackbar("persistAvatar");
this.props.enqueueSnackbar("Avatar updated successfully.");
}).catch((err: Error) => {
this.props.closeSnackbar("persistAvatar");
this.props.enqueueSnackbar("Couldn't update avatar: " + err.name, { variant: "error" });
})
}
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't update avatar: " + err.name);
})
}
updateHeader() {
filedialog({
multiple: false,
accept: "image/*"
}).then((images: FileList) => {
if (images.length > 0) {
this.props.enqueueSnackbar("Updating header...", { persist: true, key: "persistHeader" });
let upload = new FormData();
upload.append("header", images[0]);
this.client.patch("/accounts/update_credentials", upload).then((acct: any) => {
let currentAccount: Account = acct.data;
this.setState({ currentAccount });
localStorage.setItem("account", JSON.stringify(currentAccount));
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Header updated successfully.");
}).catch((err: Error) => {
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Couldn't update header: " + err.name, { variant: "error" });
})
}
}).catch((err: Error) => {
this.props.enqueueSnackbar("Couldn't update header: " + err.name);
})
}
removeHTMLContent(text: string) {
const div = document.createElement('div');
div.innerHTML = text;
let innerContent = div.textContent || div.innerText || "";
return innerContent;
}
changeDisplayName() {
this.client.patch('/accounts/update_credentials', {
display_name: this.state.newDisplayName? this.state.newDisplayName: this.state.currentAccount.display_name
})
.then((acct: any) =>{
let currentAccount: Account = acct.data
this.setState({currentAccount});
localStorage.setItem('account', JSON.stringify(currentAccount));
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Display name updated to " + this.state.newDisplayName);
} ).catch((err:Error) => {
console.error(err.name)
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Couldn't update display name: " + err.name, { variant: "error" })
})
}
updateDisplayname(name: string) {
this.setState({ newDisplayName: name });
};
changeBio() {
this.client.patch('/accounts/update_credentials', {note: this.state.newBio? this.state.newBio: this.state.currentAccount.note})
.then((acct:any) => {
let currentAccount: Account = acct.data
this.setState({currentAccount});
localStorage.setItem('account', JSON.stringify(currentAccount));
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Bio updated successfully.");
}).catch((err: Error) => {
console.error(err.name)
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Couldn't update bio: " + err.name, { variant: "error"});
})
}
updateBio(bio:string){
this.setState({newBio:bio})
}
render() {
const {classes} = this.props;
return (
<div className={classes.pageLayoutMinimalConstraints}>
<div className={classes.pageHeroBackground}>
<div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: `url("${this.state.currentAccount.header_static}")`}}/>
<div className={classes.pageHeroContent}>
<Avatar className={classes.pageProfileAvatar} src={this.state.currentAccount.avatar_static}/>
<Typography variant="h4" color="inherit" component="h1">Edit your profile</Typography>
<br/>
<div>
<Button className={classes.pageProfileFollowButton} variant="contained" onClick={() => this.updateAvatar()}>Change Avatar</Button>
<Button className={classes.pageProfileFollowButton} variant="contained" onClick={() => this.updateHeader()}>Change Header</Button>
</div>
<br/>
</div>
</div>
<div className={classes.pageContentLayoutConstraints}>
<Paper className={classes.youPaper}>
<Typography variant="h5" component="h2">Display Name</Typography>
<br/>
<TextField className = {classes.TextField}
defaultValue = {this.state.currentAccount.display_name}
rowsMax = "1"
variant = "outlined"
fullWidth
onChange = {(event: any) => this.updateDisplayname(event.target.value)}>
</TextField>
<div style = {{textAlign: "right"}}>
<Button className={classes.pageProfileFollowButton} color = "primary" onClick = {() => this.changeDisplayName()}>Update display Name</Button>
</div>
</Paper>
<br/>
<Paper className={classes.youPaper}>
<Typography variant="h5" component="h2">About you</Typography>
<br/>
<TextField className = {classes.TextField}
defaultValue = {this.state.currentAccount.note? this.removeHTMLContent(this.state.currentAccount.note): "Tell a little bit about yourself"}
multiline
variant = "outlined"
rows = "2"
rowsMax = "5"
fullWidth
onChange = {(event:any) =>this.updateBio(event.target.value)}>
</TextField>
<div style={{textAlign: "right"}}>
<Button className={classes.pageProfileFollowButton} color = "primary" onClick = {() => this.changeBio()}>Update biography</Button>
</div>
</Paper>
</div>
</div>
removeHTMLContent(text: string) {
const div = document.createElement("div");
div.innerHTML = text;
let innerContent = div.textContent || div.innerText || "";
return innerContent;
}
changeDisplayName() {
this.client
.patch("/accounts/update_credentials", {
display_name: this.state.newDisplayName
? this.state.newDisplayName
: this.state.currentAccount.display_name
})
.then((acct: any) => {
let currentAccount: Account = acct.data;
this.setState({ currentAccount });
localStorage.setItem("account", JSON.stringify(currentAccount));
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar(
"Display name updated to " + this.state.newDisplayName
);
}
})
.catch((err: Error) => {
console.error(err.name);
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar(
"Couldn't update display name: " + err.name,
{ variant: "error" }
);
});
}
updateDisplayname(name: string) {
this.setState({ newDisplayName: name });
}
changeBio() {
this.client
.patch("/accounts/update_credentials", {
note: this.state.newBio
? this.state.newBio
: this.state.currentAccount.note
})
.then((acct: any) => {
let currentAccount: Account = acct.data;
this.setState({ currentAccount });
localStorage.setItem("account", JSON.stringify(currentAccount));
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Bio updated successfully.");
})
.catch((err: Error) => {
console.error(err.name);
this.props.closeSnackbar("persistHeader");
this.props.enqueueSnackbar("Couldn't update bio: " + err.name, {
variant: "error"
});
});
}
updateBio(bio: string) {
this.setState({ newBio: bio });
}
render() {
const { classes } = this.props;
return (
<div className={classes.pageLayoutMinimalConstraints}>
<div className={classes.pageHeroBackground}>
<div
className={classes.pageHeroBackgroundImage}
style={{
backgroundImage: `url("${this.state.currentAccount.header_static}")`
}}
/>
<div className={classes.pageHeroContent}>
<Avatar
className={classes.pageProfileAvatar}
src={this.state.currentAccount.avatar_static}
/>
<Typography variant="h4" color="inherit" component="h1">
Edit your profile
</Typography>
<br />
<div>
<Button
className={classes.pageProfileFollowButton}
variant="contained"
onClick={() => this.updateAvatar()}
>
Change Avatar
</Button>
<Button
className={classes.pageProfileFollowButton}
variant="contained"
onClick={() => this.updateHeader()}
>
Change Header
</Button>
</div>
<br />
</div>
</div>
<div className={classes.pageContentLayoutConstraints}>
<Paper className={classes.youPaper}>
<Typography variant="h5" component="h2">
Display Name
</Typography>
<br />
<TextField
className={classes.TextField}
defaultValue={this.state.currentAccount.display_name}
rowsMax="1"
variant="outlined"
fullWidth
onChange={(event: any) =>
this.updateDisplayname(event.target.value)
}
></TextField>
<div style={{ textAlign: "right" }}>
<Button
className={classes.pageProfileFollowButton}
color="primary"
onClick={() => this.changeDisplayName()}
>
Update display Name
</Button>
</div>
</Paper>
<br />
<Paper className={classes.youPaper}>
<Typography variant="h5" component="h2">
About you
</Typography>
<br />
<TextField
className={classes.TextField}
defaultValue={
this.state.currentAccount.note
? this.removeHTMLContent(this.state.currentAccount.note)
: "Tell a little bit about yourself"
}
multiline
variant="outlined"
rows="2"
rowsMax="5"
fullWidth
onChange={(event: any) => this.updateBio(event.target.value)}
></TextField>
<div style={{ textAlign: "right" }}>
<Button
className={classes.pageProfileFollowButton}
color="primary"
onClick={() => this.changeBio()}
>
Update biography
</Button>
</div>
</Paper>
</div>
</div>
);
}
}
export default withStyles(styles)(withSnackbar(You));
export default withStyles(styles)(withSnackbar(You));

54
src/types/Account.tsx
View File

@ -1,34 +1,34 @@
import { MastodonEmoji } from './Emojis';
import { Field } from './Field';
import { MastodonEmoji } from "./Emojis";
import { Field } from "./Field";
/**
* Basic type for an account on Mastodon
*/
export type Account = {
id: string;
username: string;
acct: string;
display_name: string;
locked: boolean;
created_at: string;
followers_count: number;
following_count: number;
statuses_count: number;
note: string;
url: string;
avatar: string;
avatar_static: string;
header: string;
header_static: string;
emojis: [MastodonEmoji];
moved: Account | null;
fields: [Field];
bot: boolean | null;
}
id: string;
username: string;
acct: string;
display_name: string;
locked: boolean;
created_at: string;
followers_count: number;
following_count: number;
statuses_count: number;
note: string;
url: string;
avatar: string;
avatar_static: string;
header: string;
header_static: string;
emojis: [MastodonEmoji];
moved: Account | null;
fields: [Field];
bot: boolean | null;
};
export type UAccount = {
id: string;
acct: string;
display_name: string;
avatar_static: string;
}
id: string;
acct: string;
display_name: string;
avatar_static: string;
};

18
src/types/Attachment.tsx
View File

@ -2,12 +2,12 @@
* Basic type for an attachment, usually on Statuses
*/
export type Attachment = {
id: string;
type: "unknown" | "image" | "gifv" | "video";
url: string;
remote_url: string | null;
preview_url: string;
text_url: string | null;
meta: any | null;
description: string | null;
}
id: string;
type: "unknown" | "image" | "gifv" | "video";
url: string;
remote_url: string | null;
preview_url: string;
text_url: string | null;
meta: any | null;
description: string | null;
};

26
src/types/Card.tsx
View File

@ -2,16 +2,16 @@
* Basic type for Cards, usually in Statuses
*/
export type Card = {
url: string;
title: string;
description: string;
image: string | null;
type: "link" | "photo" | "video" | "rich";
author_name: string | null;
author_url: string | null;
provider_name: string | null;
provider_url: string | null;
html: string | null;
width: number | null;
height: number | null;
}
url: string;
title: string;
description: string;
image: string | null;
type: "link" | "photo" | "video" | "rich";
author_name: string | null;
author_url: string | null;
provider_name: string | null;
provider_url: string | null;
html: string | null;
width: number | null;
height: number | null;
};

52
src/types/Config.tsx
View File

@ -1,31 +1,31 @@
export type Config = {
version: string;
location: string;
branding?: {
name?: string;
logo?: string;
background?: string;
};
developer?: boolean;
federation: Federation;
registration?: {
defaultInstance?: string;
};
admin?: {
name?: string;
account?: string;
};
license: License;
repository?: string;
}
version: string;
location: string;
branding?: {
name?: string;
logo?: string;
background?: string;
};
developer?: boolean;
federation: Federation;
registration?: {
defaultInstance?: string;
};
admin?: {
name?: string;
account?: string;
};
license: License;
repository?: string;
};
export type License = {
name: string;
url: string;
}
name: string;
url: string;
};
export type Federation = {
universalLogin: boolean;
allowPublicPosts: boolean;
enablePublicTimeline: boolean;
}
universalLogin: boolean;
allowPublicPosts: boolean;
enablePublicTimeline: boolean;
};

8
src/types/Context.tsx
View File

@ -1,6 +1,6 @@
import { Status } from './Status';
import { Status } from "./Status";
export type Context = {
ancestors: [Status];
descendants: [Status];
}
ancestors: [Status];
descendants: [Status];
};

14
src/types/Emojis.tsx
View File

@ -2,16 +2,16 @@
* Basic type for Emojis on Mastodon.
*/
export type MastodonEmoji = {
shortcode: string;
static_url: string;
url: string;
visible_in_picker: boolean;
shortcode: string;
static_url: string;
url: string;
visible_in_picker: boolean;
};
/**
* Trimmed type of Emoji from emoji-mart
*/
export type Emoji = {
name: string;
imageUrl: string;
};
name: string;
imageUrl: string;
};

8
src/types/Field.tsx
View File

@ -2,7 +2,7 @@
* Basic type for a table entry, usually in Account
*/
export type Field = {
name: string;
value: string;
verified_at: string | null;
}
name: string;
value: string;
verified_at: string | null;
};

231
src/types/HyperspaceTheme.tsx
View File

@ -1,130 +1,161 @@
import {Color} from '@material-ui/core';
import { deepPurple, red, lightGreen, yellow, purple, deepOrange, indigo, lightBlue, orange, blue, amber, pink, brown, blueGrey } from '@material-ui/core/colors';
import { isDarwinApp } from '../utilities/desktop';
import { Color } from "@material-ui/core";
import {
deepPurple,
red,
lightGreen,
yellow,
purple,
deepOrange,
indigo,
lightBlue,
orange,
blue,
amber,
pink,
brown,
blueGrey
} from "@material-ui/core/colors";
import { isDarwinApp } from "../utilities/desktop";
/**
* Basic theme colors for Hyperspace.
*/
export type HyperspaceTheme = {
key: string;
name: string;
palette: {
primary: {
main: string;
} | Color;
secondary: {
main: string;
} | Color;
}
}
key: string;
name: string;
palette: {
primary:
| {
main: string;
}
| Color;
secondary:
| {
main: string;
}
| Color;
};
};
export const defaultTheme: HyperspaceTheme = {
key: "defaultTheme",
name: "Royal (Default)",
palette: {
primary: deepPurple,
secondary: red
}
}
key: "defaultTheme",
name: "Royal (Default)",
palette: {
primary: deepPurple,
secondary: red
}
};
export const gardenerTheme: HyperspaceTheme = {
key: "gardnerTheme",
name: "Botanical",
palette: {
primary: lightGreen,
secondary: yellow
}
}
key: "gardnerTheme",
name: "Botanical",
palette: {
primary: lightGreen,
secondary: yellow
}
};
export const teacherTheme: HyperspaceTheme = {
key: "teacherTheme",
name: "Compassionate",
palette: {
primary: purple,
secondary: deepOrange
}
}
key: "teacherTheme",
name: "Compassionate",
palette: {
primary: purple,
secondary: deepOrange
}
};
export const jokerTheme: HyperspaceTheme = {
key: "jokerTheme",
name: "Joker",
palette: {
primary: indigo,
secondary: lightBlue
}
}
key: "jokerTheme",
name: "Joker",
palette: {
primary: indigo,
secondary: lightBlue
}
};
export const guardTheme: HyperspaceTheme = {
key: "guardTheme",
name: "Enthusiastic",
palette: {
primary: blue,
secondary: deepOrange
}
}
key: "guardTheme",
name: "Enthusiastic",
palette: {
primary: blue,
secondary: deepOrange
}
};
export const entertainerTheme: HyperspaceTheme = {
key: "entertainerTheme",
name: "Animated",
palette: {
primary: pink,
secondary: purple
}
}
key: "entertainerTheme",
name: "Animated",
palette: {
primary: pink,
secondary: purple
}
};
export const classicTheme: HyperspaceTheme = {
key: "classicTheme",
name: "Classic",
palette: {
primary: {
main: "#555555"
},
secondary: {
main: "#5c2d91"
}
key: "classicTheme",
name: "Classic",
palette: {
primary: {
main: "#555555"
},
secondary: {
main: "#5c2d91"
}
}
}
};
export const dragonTheme: HyperspaceTheme = {
key: "dragonTheme",
name: "Adventurous",
palette: {
primary: purple,
secondary: purple
}
}
key: "dragonTheme",
name: "Adventurous",
palette: {
primary: purple,
secondary: purple
}
};
export const memoriumTheme: HyperspaceTheme = {
key: "memoriumTheme",
name: "Memorial",
palette: {
primary: red,
secondary: red
}
}
key: "memoriumTheme",
name: "Memorial",
palette: {
primary: red,
secondary: red
}
};
export const blissTheme: HyperspaceTheme = {
key: "blissTheme",
name: "Bliss",
palette: {
primary: {
main: "#3e2723"
},
secondary: lightBlue
}
}
key: "blissTheme",
name: "Bliss",
palette: {
primary: {
main: "#3e2723"
},
secondary: lightBlue
}
};
export const attractTheme: HyperspaceTheme = {
key: "attractTheme",
name: "Attract",
palette: {
primary: {
main: '#E57373',
},
secondary: {
main: "#78909C",
}
key: "attractTheme",
name: "Attract",
palette: {
primary: {
main: "#E57373"
},
secondary: {
main: "#78909C"
}
}
}
};
export const themes = [defaultTheme, gardenerTheme, teacherTheme, jokerTheme, guardTheme, entertainerTheme, classicTheme, dragonTheme, memoriumTheme, blissTheme, attractTheme]
export const themes = [
defaultTheme,
gardenerTheme,
teacherTheme,
jokerTheme,
guardTheme,
entertainerTheme,
classicTheme,
dragonTheme,
memoriumTheme,
blissTheme,
attractTheme
];

22
src/types/Instance.tsx
View File

@ -2,14 +2,14 @@ import { Field } from "./Field";
import { Account } from "./Account";
export type Instance = {
uri: string;
title: string;
description: string;
email: string;
version: string;
thumbnail: string | null;
urls: Field;
stats: Field;
languages: [string];
contact_account: Account;
}
uri: string;
title: string;
description: string;
email: string;
version: string;
thumbnail: string | null;
urls: Field;
stats: Field;
languages: [string];
contact_account: Account;
};

10
src/types/Mention.tsx
View File

@ -2,8 +2,8 @@
* Basic type for a person mentioned in a Status
*/
export type Mention = {
url: string;
username: string;
acct: string;
id: string;
}
url: string;
username: string;
acct: string;
id: string;
};

12
src/types/Notification.tsx
View File

@ -2,9 +2,9 @@ import { Account } from "./Account";
import { Status } from "./Status";
export type Notification = {
id: string;
type: "follow" | "mention" | "reblog" | "favourite";
created_at: string;
account: Account;
status: Status | null;
}
id: string;
type: "follow" | "mention" | "reblog" | "favourite";
created_at: string;
account: Account;
status: Status | null;
};

34
src/types/Poll.tsx
View File

@ -2,29 +2,29 @@
* Basic type for a Poll on Mastodon
*/
export type Poll = {
id: string;
expires_at: string | null;
expired: boolean;
multiple: boolean;
votes_count: number;
options: [PollOption];
voted: boolean | null;
}
id: string;
expires_at: string | null;
expired: boolean;
multiple: boolean;
votes_count: number;
options: [PollOption];
voted: boolean | null;
};
/**
* Basic type for a Poll option in a Poll
*/
export type PollOption = {
title: string;
votes_count: number | null;
}
title: string;
votes_count: number | null;
};
export type PollWizard = {
expires_at: string;
multiple: boolean;
options: PollWizardOption[];
}
expires_at: string;
multiple: boolean;
options: PollWizardOption[];
};
export type PollWizardOption = {
title: string;
}
title: string;
};

22
src/types/Relationship.tsx
View File

@ -1,12 +1,12 @@
export type Relationship = {
id: string;
following: boolean;
followed_by: boolean;
blocking: boolean;
muting: boolean;
muting_notifications: boolean;
requested: boolean;
domain_blocking: boolean;
showing_reblogs: boolean;
endorsed: boolean;
}
id: string;
following: boolean;
followed_by: boolean;
blocking: boolean;
muting: boolean;
muting_notifications: boolean;
requested: boolean;
domain_blocking: boolean;
showing_reblogs: boolean;
endorsed: boolean;
};

8
src/types/Search.tsx
View File

@ -3,7 +3,7 @@ import { Status } from "./Status";
import { Tag } from "./Tag";
export type Results = {
accounts: [Account];
statuses: [Status];
hashtags: [Tag];
}
accounts: [Account];
statuses: [Status];
hashtags: [Tag];
};

10
src/types/SessionData.tsx
View File

@ -1,6 +1,6 @@
export type SaveClientSession = {
clientId: string;
clientSecret: string;
authUrl: string;
emergency: boolean;
}
clientId: string;
clientSecret: string;
authUrl: string;
emergency: boolean;
};

70
src/types/Status.tsx
View File

@ -1,40 +1,40 @@
import { MastodonEmoji } from './Emojis';
import { Visibility } from './Visibility';
import { Account } from './Account';
import { Attachment } from './Attachment';
import { Mention } from './Mention';
import { Poll } from './Poll';
import { Card } from './Card';
import { Tag } from './Tag';
import { MastodonEmoji } from "./Emojis";
import { Visibility } from "./Visibility";
import { Account } from "./Account";
import { Attachment } from "./Attachment";
import { Mention } from "./Mention";
import { Poll } from "./Poll";
import { Card } from "./Card";
import { Tag } from "./Tag";
/**
* Basic type for a status on Mastodon
*/
export type Status = {
id: string;
uri: string;
url: string | null;
account: Account;
in_reply_to_id: string | null;
in_reply_to_account_id: string | null;
reblog: Status | null;
content: string;
created_at: string;
emojis: [MastodonEmoji];
replies_count: number;
reblogs_count: number;
favourites_count: number;
reblogged: boolean | null;
favourited: boolean | null;
muted: boolean | null;
sensitive: boolean;
spoiler_text: string;
visibility: Visibility;
media_attachments: [Attachment];
mentions: [Mention];
tags: [Tag];
card: Card | null;
poll: Poll | null;
application: any;
pinned: boolean | null;
}
id: string;
uri: string;
url: string | null;
account: Account;
in_reply_to_id: string | null;
in_reply_to_account_id: string | null;
reblog: Status | null;
content: string;
created_at: string;
emojis: [MastodonEmoji];
replies_count: number;
reblogs_count: number;
favourites_count: number;
reblogged: boolean | null;
favourited: boolean | null;
muted: boolean | null;
sensitive: boolean;
spoiler_text: string;
visibility: Visibility;
media_attachments: [Attachment];
mentions: [Mention];
tags: [Tag];
card: Card | null;
poll: Poll | null;
application: any;
pinned: boolean | null;
};

6
src/types/Tag.tsx
View File

@ -1,4 +1,4 @@
export type Tag = {
name: string;
url: string;
}
name: string;
url: string;
};

2
src/types/Visibility.tsx
View File

@ -1,4 +1,4 @@
/**
* Types of a post's visibility on Mastodon.
*/
export type Visibility = "direct" | "private" | "unlisted" | "public";
export type Visibility = "direct" | "private" | "unlisted" | "public";

37
src/utilities/accounts.tsx
View File

@ -1,21 +1,30 @@
import Mastodon from "megalodon";
export function userLoggedIn(): boolean {
if (localStorage.getItem('baseurl') && localStorage.getItem('access_token')) {
return true;
} else {
return false;
}
if (localStorage.getItem("baseurl") && localStorage.getItem("access_token")) {
return true;
} else {
return false;
}
}
export function refreshUserAccountData() {
let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1");
client.get('/accounts/verify_credentials').then((resp: any) => {
localStorage.setItem('account', JSON.stringify(resp.data));
}).catch((err: Error) => {
console.error(err.message);
});
client.get('/instance').then((resp: any) => {
localStorage.setItem('isPleroma', (resp.data.version.match(/Pleroma/) ? "true" : "false"))
let client = new Mastodon(
localStorage.getItem("access_token") as string,
(localStorage.getItem("baseurl") as string) + "/api/v1"
);
client
.get("/accounts/verify_credentials")
.then((resp: any) => {
localStorage.setItem("account", JSON.stringify(resp.data));
})
}
.catch((err: Error) => {
console.error(err.message);
});
client.get("/instance").then((resp: any) => {
localStorage.setItem(
"isPleroma",
resp.data.version.match(/Pleroma/) ? "true" : "false"
);
});
}

4
src/utilities/appbar.tsx
View File

@ -7,5 +7,5 @@ import { isDarwinApp } from "./desktop";
* @returns Boolean dictating if the title bar is visible
*/
export function isAppbarExpanded(): boolean {
return isDarwinApp() || process.env.NODE_ENV === "development";
}
return isDarwinApp() || process.env.NODE_ENV === "development";
}

16
src/utilities/desktop.tsx
View File

@ -2,7 +2,7 @@
* A Window interface with extra properties for Electron
*/
interface ElectronWindow extends Window {
require?: any;
require?: any;
}
/**
@ -10,22 +10,22 @@ interface ElectronWindow extends Window {
* @returns Boolean of whether it is in desktop mode or not
*/
export function isDesktopApp(): boolean {
return navigator.userAgent.includes("Hyperspace" || "Electron");
return navigator.userAgent.includes("Hyperspace" || "Electron");
}
/**
* Determines whether the app is the macOS application
*/
export function isDarwinApp(): boolean {
return isDesktopApp() && navigator.userAgent.includes("Macintosh")
return isDesktopApp() && navigator.userAgent.includes("Macintosh");
}
/**
* Determine whether the system is in dark mode or not (macOS)
*/
export function isDarkMode() {
// Lift window to an ElectronWindow and add use require()
const eWin = window as ElectronWindow;
const {remote} = eWin.require('electron');
return remote.systemPreferences.isDarkMode()
}
// Lift window to an ElectronWindow and add use require()
const eWin = window as ElectronWindow;
const { remote } = eWin.require("electron");
return remote.systemPreferences.isDarkMode();
}

75
src/utilities/emojis.tsx
View File

@ -1,5 +1,5 @@
import {MastodonEmoji} from '../types/Emojis';
import Mastodon from 'megalodon';
import { MastodonEmoji } from "../types/Emojis";
import Mastodon from "megalodon";
/**
* Takes a given string and replaces emoji codes with their respective image tags.
@ -8,36 +8,51 @@ import Mastodon from 'megalodon';
* @param className The associated class for the string
* @returns String with image tags for emojis
*/
export function emojifyString(contents: string, emojis: [MastodonEmoji], className?: any): string {
let newContents: string = contents;
export function emojifyString(
contents: string,
emojis: [MastodonEmoji],
className?: any
): string {
let newContents: string = contents;
emojis.forEach((emoji: MastodonEmoji) => {
let filter = new RegExp(`:${emoji.shortcode}:`, 'g');
newContents = newContents.replace(filter, `<img src=${emoji.static_url} ${className? `class="${className}"`: ""}/>`)
})
emojis.forEach((emoji: MastodonEmoji) => {
let filter = new RegExp(`:${emoji.shortcode}:`, "g");
newContents = newContents.replace(
filter,
`<img src=${emoji.static_url} ${
className ? `class="${className}"` : ""
}/>`
);
});
return newContents;
return newContents;
}
export function collectEmojisFromServer() {
let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
let emojisPath = localStorage.getItem('emojis');
let emojis: any[] = [];
if (emojisPath === null) {
client.get('/custom_emojis').then((resp: any) => {
resp.data.forEach((emoji: MastodonEmoji) => {
let customEmoji = {
name: emoji.shortcode,
emoticons: [''],
short_names: [emoji.shortcode],
imageUrl: emoji.static_url,
keywords: ['mastodon', 'custom']
}
emojis.push(customEmoji);
localStorage.setItem("emojis", JSON.stringify(emojis));
})
}).catch((err: Error) => {
console.error(err.message);
})
}
}
let client = new Mastodon(
localStorage.getItem("access_token") as string,
localStorage.getItem("baseurl") + "/api/v1"
);
let emojisPath = localStorage.getItem("emojis");
let emojis: any[] = [];
if (emojisPath === null) {
client
.get("/custom_emojis")
.then((resp: any) => {
resp.data.forEach((emoji: MastodonEmoji) => {
let customEmoji = {
name: emoji.shortcode,
emoticons: [""],
short_names: [emoji.shortcode],
imageUrl: emoji.static_url,
keywords: ["mastodon", "custom"]
};
emojis.push(customEmoji);
localStorage.setItem("emojis", JSON.stringify(emojis));
});
})
.catch((err: Error) => {
console.error(err.message);
});
}
}

69
src/utilities/login.tsx
View File

@ -1,4 +1,4 @@
import Mastodon from 'megalodon';
import Mastodon from "megalodon";
/**
* Creates the Hyperspace app with the appropriate Redirect URI
@ -7,34 +7,51 @@ import Mastodon from 'megalodon';
* @param baseurl The base URL of the instance
* @param redirect_uri The URL to redirect to when authorizing
*/
export function createHyperspaceApp(name: string, scopes: string, baseurl: string, redirect_uri: string) {
let appName = name === "Hyperspace"? "Hyperspace": `${name} (Hyperspace-like)`
return Mastodon.createApp(appName, {
scopes: scopes,
redirect_uris: redirect_uri,
website: 'https://hyperspace.marquiskurt.net',
}, baseurl).then(appData => {
return Mastodon.generateAuthUrl(appData.clientId, appData.clientSecret, {
redirect_uri: redirect_uri,
scope: scopes
}, baseurl).then(url => {
appData.url = url;
return appData;
})
})
export function createHyperspaceApp(
name: string,
scopes: string,
baseurl: string,
redirect_uri: string
) {
let appName =
name === "Hyperspace" ? "Hyperspace" : `${name} (Hyperspace-like)`;
return Mastodon.createApp(
appName,
{
scopes: scopes,
redirect_uris: redirect_uri,
website: "https://hyperspace.marquiskurt.net"
},
baseurl
).then(appData => {
return Mastodon.generateAuthUrl(
appData.clientId,
appData.clientSecret,
{
redirect_uri: redirect_uri,
scope: scopes
},
baseurl
).then(url => {
appData.url = url;
return appData;
});
});
}
/**
* Gets the appropriate redirect address.
* @param type The address or configuration to use
*/
export function getRedirectAddress(type: "desktop" | "dynamic" | string): string {
switch(type) {
case "desktop":
return "hyperspace://hyperspace/app/";
case "dynamic":
return `https://${window.location.host}`;
default:
return type;
}
}
export function getRedirectAddress(
type: "desktop" | "dynamic" | string
): string {
switch (type) {
case "desktop":
return "hyperspace://hyperspace/app/";
case "dynamic":
return `https://${window.location.host}`;
default:
return type;
}
}

54
src/utilities/notifications.tsx
View File

@ -1,23 +1,25 @@
import {getUserDefaultBool, setUserDefaultBool} from './settings';
import { getUserDefaultBool, setUserDefaultBool } from "./settings";
/**
* Get the person's permission to send notification requests.
*/
export function getNotificationRequestPermission() {
if ('Notification' in window) {
Notification.requestPermission();
let request = Notification.permission;
if (request === "granted") {
setUserDefaultBool('enablePushNotifications', true);
setUserDefaultBool('userDeniedNotification', false);
} else {
setUserDefaultBool('enablePushNotifications', false);
setUserDefaultBool('userDeniedNotification', true);
}
if ("Notification" in window) {
Notification.requestPermission();
let request = Notification.permission;
if (request === "granted") {
setUserDefaultBool("enablePushNotifications", true);
setUserDefaultBool("userDeniedNotification", false);
} else {
console.warn("Notifications aren't supported in this browser. The setting will be disabled.");
setUserDefaultBool('enablePushNotifications', false);
setUserDefaultBool("enablePushNotifications", false);
setUserDefaultBool("userDeniedNotification", true);
}
} else {
console.warn(
"Notifications aren't supported in this browser. The setting will be disabled."
);
setUserDefaultBool("enablePushNotifications", false);
}
}
/**
@ -25,7 +27,7 @@ export function getNotificationRequestPermission() {
* @returns Boolean value that determines whether the browser supports the Notification API
*/
export function browserSupportsNotificationRequests(): boolean {
return ('Notification' in window);
return "Notification" in window;
}
/**
@ -33,7 +35,7 @@ export function browserSupportsNotificationRequests(): boolean {
* @returns Boolean value of `enablePushNotifications`
*/
export function canSendNotifications() {
return getUserDefaultBool('enablePushNotifications');
return getUserDefaultBool("enablePushNotifications");
}
/**
@ -42,15 +44,15 @@ export function canSendNotifications() {
* @param body The contents of the push notification
*/
export function sendNotificationRequest(title: string, body: string) {
if (canSendNotifications()) {
let notif = new Notification(title, {
body: body
});
if (canSendNotifications()) {
let notif = new Notification(title, {
body: body
});
notif.onclick = () => {
window.focus();
};
} else {
console.warn('The person has opted to not receive push notifications.');
}
}
notif.onclick = () => {
window.focus();
};
} else {
console.warn("The person has opted to not receive push notifications.");
}
}

159
src/utilities/settings.tsx
View File

@ -1,18 +1,18 @@
import { defaultTheme, themes } from "../types/HyperspaceTheme";
import { getNotificationRequestPermission } from './notifications';
import axios from 'axios';
import { getNotificationRequestPermission } from "./notifications";
import axios from "axios";
import { Config } from "../types/Config";
import { Visibility } from "../types/Visibility";
type SettingsTemplate = {
[key:string]: any;
darkModeEnabled: boolean;
systemDecidesDarkMode: boolean;
enablePushNotifications: boolean;
clearNotificationsOnRead: boolean;
displayAllOnNotificationBadge: boolean;
defaultVisibility: string;
}
[key: string]: any;
darkModeEnabled: boolean;
systemDecidesDarkMode: boolean;
enablePushNotifications: boolean;
clearNotificationsOnRead: boolean;
displayAllOnNotificationBadge: boolean;
defaultVisibility: string;
};
/**
* Gets the user default from localStorage
@ -20,12 +20,14 @@ type SettingsTemplate = {
* @returns The boolean value associated with the key
*/
export function getUserDefaultBool(key: string): boolean {
if (localStorage.getItem(key) === null) {
console.warn('This key has not been set before, so the default value is FALSE for now.');
return false;
} else {
return localStorage.getItem(key) === "true";
}
if (localStorage.getItem(key) === null) {
console.warn(
"This key has not been set before, so the default value is FALSE for now."
);
return false;
} else {
return localStorage.getItem(key) === "true";
}
}
/**
@ -34,10 +36,10 @@ export function getUserDefaultBool(key: string): boolean {
* @param value The boolean value for the key
*/
export function setUserDefaultBool(key: string, value: boolean) {
if (localStorage.getItem(key) === null) {
console.warn('This key has not been set before.');
}
localStorage.setItem(key, value.toString());
if (localStorage.getItem(key) === null) {
console.warn("This key has not been set before.");
}
localStorage.setItem(key, value.toString());
}
/**
@ -45,12 +47,14 @@ export function setUserDefaultBool(key: string, value: boolean) {
* @returns The Visibility value associated with the key
*/
export function getUserDefaultVisibility(): Visibility {
if (localStorage.getItem("defaultVisibility") === null) {
console.warn('This key has not been set before, so the default value is PUBLIC for now.');
return "public";
} else {
return localStorage.getItem("defaultVisibility") as Visibility;
}
if (localStorage.getItem("defaultVisibility") === null) {
console.warn(
"This key has not been set before, so the default value is PUBLIC for now."
);
return "public";
} else {
return localStorage.getItem("defaultVisibility") as Visibility;
}
}
/**
@ -58,23 +62,23 @@ export function getUserDefaultVisibility(): Visibility {
* @param key The settings key in localStorage to change
*/
export function setUserDefaultVisibility(key: string) {
if (localStorage.getItem("defaultVisibility") === null) {
console.warn('This key has not been set before.');
}
localStorage.setItem("defaultVisibility", key.toString());
if (localStorage.getItem("defaultVisibility") === null) {
console.warn("This key has not been set before.");
}
localStorage.setItem("defaultVisibility", key.toString());
}
/**
* Gets the user's default theme or the default theme
*/
export function getUserDefaultTheme() {
let returnTheme = defaultTheme;
themes.forEach((theme) => {
if(theme.key === localStorage.getItem('theme')) {
returnTheme = theme;
}
});
return returnTheme;
let returnTheme = defaultTheme;
themes.forEach(theme => {
if (theme.key === localStorage.getItem("theme")) {
returnTheme = theme;
}
});
return returnTheme;
}
/**
@ -82,37 +86,42 @@ export function getUserDefaultTheme() {
* @param themeName The name of the theme
*/
export function setUserDefaultTheme(themeName: string) {
localStorage.setItem('theme', themeName);
localStorage.setItem("theme", themeName);
}
/**
* Creates the user defaults if they do not exist already.
*/
export function createUserDefaults() {
let defaults: SettingsTemplate = {
darkModeEnabled: false,
systemDecidesDarkMode: true,
enablePushNotifications: true,
clearNotificationsOnRead: false,
displayAllOnNotificationBadge: false,
defaultVisibility: "public"
let defaults: SettingsTemplate = {
darkModeEnabled: false,
systemDecidesDarkMode: true,
enablePushNotifications: true,
clearNotificationsOnRead: false,
displayAllOnNotificationBadge: false,
defaultVisibility: "public"
};
let settings = [
"darkModeEnabled",
"systemDecidesDarkMode",
"clearNotificationsOnRead",
"displayAllOnNotificationBadge",
"defaultVisibility"
];
migrateExistingSettings();
settings.forEach((setting: string) => {
if (localStorage.getItem(setting) === null) {
if (typeof defaults[setting] === "boolean") {
setUserDefaultBool(setting, defaults[setting]);
} else {
localStorage.setItem(setting, defaults[setting].toString());
}
}
let settings = ["darkModeEnabled", "systemDecidesDarkMode", "clearNotificationsOnRead", "displayAllOnNotificationBadge", "defaultVisibility"];
migrateExistingSettings();
settings.forEach((setting: string) => {
if (localStorage.getItem(setting) === null) {
if (typeof defaults[setting] === "boolean") {
setUserDefaultBool(setting, defaults[setting]);
} else {
localStorage.setItem(setting, defaults[setting].toString());
}
}
})
getNotificationRequestPermission();
});
getNotificationRequestPermission();
}
/**
@ -120,18 +129,22 @@ export function createUserDefaults() {
* @returns The Promise data from getting the config.
*/
export async function getConfig(): Promise<Config | undefined> {
try {
const resp = await axios.get('config.json');
let config: Config = resp.data;
return config;
}
catch (err) {
console.error("Couldn't configure Hyperspace with the config file. Reason: " + err.name);
}
try {
const resp = await axios.get("config.json");
let config: Config = resp.data;
return config;
} catch (err) {
console.error(
"Couldn't configure Hyperspace with the config file. Reason: " + err.name
);
}
}
export function migrateExistingSettings() {
if (localStorage.getItem('prefers-dark-mode')) {
setUserDefaultBool('darkModeEnabled', localStorage.getItem('prefers-dark-mode') === "true")
}
}
if (localStorage.getItem("prefers-dark-mode")) {
setUserDefaultBool(
"darkModeEnabled",
localStorage.getItem("prefers-dark-mode") === "true"
);
}
}

109
src/utilities/themes.tsx
View File

@ -1,7 +1,11 @@
import { createMuiTheme, Theme } from '@material-ui/core';
import { HyperspaceTheme, themes, defaultTheme } from '../types/HyperspaceTheme';
import { getUserDefaultBool } from './settings';
import { isDarwinApp, isDarkMode } from './desktop';
import { createMuiTheme, Theme } from "@material-ui/core";
import {
HyperspaceTheme,
themes,
defaultTheme
} from "../types/HyperspaceTheme";
import { getUserDefaultBool } from "./settings";
import { isDarwinApp, isDarkMode } from "./desktop";
/**
* Locates a Hyperspace theme from the themes catalog
@ -9,13 +13,13 @@ import { isDarwinApp, isDarkMode } from './desktop';
* @returns Hyperspace theme with name or the default
*/
export function getHyperspaceTheme(name: string): HyperspaceTheme {
let theme: HyperspaceTheme = defaultTheme;
themes.forEach((themeItem: HyperspaceTheme) => {
if (themeItem.key === name) {
theme = themeItem;
}
});
return theme;
let theme: HyperspaceTheme = defaultTheme;
themes.forEach((themeItem: HyperspaceTheme) => {
if (themeItem.key === name) {
theme = themeItem;
}
});
return theme;
}
/**
@ -24,45 +28,48 @@ export function getHyperspaceTheme(name: string): HyperspaceTheme {
* @returns A Material-UI theme with the Hyperspace theme's palette colors
*/
export function setHyperspaceTheme(theme: HyperspaceTheme): Theme {
return createMuiTheme({
typography: {
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
useNextVariants: true,
},
palette: {
primary: theme.palette.primary,
secondary: theme.palette.secondary,
type: getUserDefaultBool('darkModeEnabled')? "dark":
getDarkModeFromSystem() === "dark"? "dark": "light"
}
})
return createMuiTheme({
typography: {
fontFamily: [
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"'
].join(","),
useNextVariants: true
},
palette: {
primary: theme.palette.primary,
secondary: theme.palette.secondary,
type: getUserDefaultBool("darkModeEnabled")
? "dark"
: getDarkModeFromSystem() === "dark"
? "dark"
: "light"
}
});
}
export function getDarkModeFromSystem(): string {
if (getUserDefaultBool('systemDecidesDarkMode')) {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
} else {
if (isDarwinApp()) {
return isDarkMode()? "dark": "light";
} else {
return "light";
}
}
if (getUserDefaultBool("systemDecidesDarkMode")) {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
} else {
if (isDarwinApp()) {
return isDarkMode() ? "dark" : "light";
} else {
return "light";
}
}
} else {
return "light";
}
}
/**
@ -71,10 +78,10 @@ export function getDarkModeFromSystem(): string {
* @param setting Whether dark mode should be on (`true`) or off (`false`)
*/
export function darkMode(theme: Theme, setting: boolean): Theme {
if (setting) {
theme.palette.type = 'dark';
} else {
theme.palette.type = 'light';
}
return theme;
}
if (setting) {
theme.palette.type = "dark";
} else {
theme.palette.type = "light";
}
return theme;
}