121 lines
4.2 KiB
TypeScript
121 lines
4.2 KiB
TypeScript
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;
|
|
}
|
|
|
|
|
|
class Conversation extends Component<any, IConversationPageState> {
|
|
|
|
client: Mastodon;
|
|
streamListener: any;
|
|
|
|
constructor(props: any) {
|
|
super(props);
|
|
|
|
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");
|
|
|
|
}
|
|
|
|
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' });
|
|
});
|
|
}
|
|
|
|
componentWillReceiveProps(props: any) {
|
|
if (props.match.params.conversationId !== this.state.conversationId) {
|
|
this.getContext()
|
|
}
|
|
}
|
|
|
|
componentWillMount() {
|
|
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);
|
|
}
|
|
}
|
|
|
|
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));
|