562 lines
22 KiB
TypeScript
562 lines
22 KiB
TypeScript
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";
|
|
|
|
interface IProfilePageState {
|
|
account?: Account;
|
|
relationship?: Relationship;
|
|
posts?: [Status];
|
|
viewIsLoading: boolean;
|
|
viewDidLoad?: boolean;
|
|
viewDidError?: boolean;
|
|
viewDidErrorCode?: string;
|
|
blockDialogOpen: boolean;
|
|
}
|
|
|
|
class ProfilePage extends Component<any, IProfilePageState> {
|
|
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,
|
|
blockDialogOpen: false
|
|
};
|
|
}
|
|
|
|
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;
|
|
|
|
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.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);
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
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 });
|
|
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);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
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"
|
|
dangerouslySetInnerHTML={{
|
|
__html: this.state.account
|
|
? this.state.account.note
|
|
? emojifyString(
|
|
this.state.account.note,
|
|
this.state.account.emojis,
|
|
classes.pageProfileBioEmoji
|
|
)
|
|
: "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));
|