Basic message UI (todo: Make chat UI)

src/App.tsx

@@ -16,9 +16,10 @@ 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 {withSnackbar} from 'notistack';
 import {PrivateRoute} from './interfaces/overrides';
-import { userLoggedIn, refreshUserAccountData } from './utilities/accounts';
+import { userLoggedIn } from './utilities/accounts';
 let theme = setHyperspaceTheme(getUserDefaultTheme());
 
 class App extends Component<any, any> {
@@ -51,7 +52,7 @@ class App extends Component<any, any> {
             <PrivateRoute path="/home" component={HomePage}/>
             <PrivateRoute path="/local" component={LocalPage}/>
             <PrivateRoute path="/public" component={PublicPage}/>
-            <Route path="/messages"/>
+            <PrivateRoute path="/messages" component={MessagesPage}/>
             <PrivateRoute path="/notifications" component={NotificationsPage}/>
             <PrivateRoute path="/profile/:profileId" component={ProfilePage}/>
             <PrivateRoute path="/conversation/:conversationId" component={Conversation}/>

src/pages/About.tsx

@@ -70,9 +70,9 @@ class AboutPage extends Component<any, IAboutPageState> {
                                 "Loading..."
                             }/>
                             <ListItemSecondaryAction>
-                                <IconButton>
+                                <LinkableIconButton to={`/compose?visibility=public&acct=${this.state? this.state.instance.contact_account.acct: ""}`}>
                                     <ChatIcon/>
-                                </IconButton>
+                                </LinkableIconButton>
                                 <LinkableIconButton to={`/profile/${this.state? this.state.instance.contact_account.id: 0}`}>
                                     <PersonIcon/>
                                 </LinkableIconButton>

src/pages/Messages.tsx

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import {withStyles, ListSubheader, Paper, List, ListItem, ListItemText, CircularProgress, ListItemAvatar, Avatar, ListItemSecondaryAction} 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 } from '../interfaces/overrides';
+
+interface IMessagesState {
+    posts?: [Status];
+    viewIsLoading: boolean;
+    viewDidLoad?: boolean;
+    viewDidError?: boolean;
+    viewDidErrorCode?: any;
+}
+
+class MessagesPage extends Component<any, IMessagesState> {
+
+    client: Mastodon;
+
+    constructor(props: any) {
+        super(props);
+
+        this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1");
+
+        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);
+                    }
+                });
+
+                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;
+    }
+
+    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>
+                                                            <Avatar alt={message.account.username} src={message.account.avatar_static}>
+                                                                <PersonIcon/>
+                                                            </Avatar>
+                                                        </ListItemAvatar>
+                                                        <ListItemText primary={message.account.display_name || "@" + message.account.acct} secondary={this.removeHTMLContent(message.content)}/>
+                                                        <ListItemSecondaryAction>
+                                                            <LinkableIconButton to={`/conversation/${message.id}`}>
+                                                                <ForumIcon/>
+                                                            </LinkableIconButton>
+                                                        </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);