Work on fetching instance info

src/App.tsx

@@ -37,8 +37,8 @@ class App extends Component<any, any> {
         <Route path="/public"/>
         <Route path="/messages"/>
         <Route path="/notifications"/>
-        <Route path="/profile"/>
-        <Route path="/conversation"/>
+        <Route path="/profile/:profileId"/>
+        <Route path="/conversation/:conversationId"/>
         <Route path="/settings" component={Settings}/>
         <Route path="/about" component={AboutPage}/>
       </MuiThemeProvider>

src/components/AppLayout/AppLayout.styles.tsx

@@ -94,6 +94,9 @@ export const styles = (theme: Theme) => createStyles({
     },
     appBarAcctMenuIcon: {
       backgroundColor: theme.palette.primary.dark
+    },
+    acctMenu: {
+      
     },
     drawer: {
       [theme.breakpoints.up('sm')]: {

src/components/AppLayout/AppLayout.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItem, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, withStyles } from '@material-ui/core';
+import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItem, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, withStyles, Menu, MenuItem, ClickAwayListener } 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';
@@ -13,35 +13,33 @@ import InfoIcon from '@material-ui/icons/Info';
 import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import {styles} from './AppLayout.styles';
-import { Link } from 'react-router-dom';
-import { ListItemProps } from '@material-ui/core/ListItem';
-import { getCurrentUserData } from '../../utilities/accounts';
 import { UAccount } from '../../types/Account';
+import {LinkableListItem, LinkableIconButton} from '../../interfaces/overrides';
 
 interface IAppLayoutState {
+    acctMenuOpen: boolean;
     drawerOpenOnMobile: boolean;
     currentUser: UAccount;
 }
 
-interface ILinkableListItemProps extends ListItemProps {
-  to: string;
-  replace?: boolean;
-}
-
-const LinkableListItem = (props: ILinkableListItemProps) => (
-  <ListItem {...props} component={Link as any}/>
-)
-
 export class AppLayout extends Component<any, IAppLayoutState> {
     constructor(props: any) {
         super(props);
+
+        let accountData = JSON.parse(localStorage.getItem('account') as string);
     
         this.state = {
           drawerOpenOnMobile: false,
-          currentUser: getCurrentUserData()
+          acctMenuOpen: false,
+          currentUser: accountData
         }
     
         this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this);
+        this.toggleAcctMenu = this.toggleAcctMenu.bind(this);
+      }
+
+      toggleAcctMenu() {
+        this.setState({ acctMenuOpen: !this.state.acctMenuOpen });
       }
 
       toggleDrawerOnMobile() {
@@ -73,7 +71,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
           <div>
               <List>
                 <div className={classes.drawerDisplayMobile}>
-                  <LinkableListItem button key="profile-mobile" to="/profile">
+                  <LinkableListItem button key="profile-mobile" to={`/profile/${this.state.currentUser.id}`}>
                     <ListItemAvatar>
                       <Avatar alt="You" src={this.state.currentUser.avatar_static}/>
                     </ListItemAvatar>
@@ -163,15 +161,33 @@ export class AppLayout extends Component<any, IAppLayoutState> {
               </div>
               <div className={classes.appBarFlexGrow}/>
               <div className={classes.appBarActionButtons}>
-                  <IconButton color="inherit">
+                  <LinkableIconButton color="inherit" to="/notifications">
                     <NotificationsIcon/>
-                  </IconButton>
-                  <IconButton color="inherit">
+                  </LinkableIconButton>
+                  <LinkableIconButton color="inherit" to="/messages">
                     <MailIcon/>
-                  </IconButton>
-                  <IconButton>
+                  </LinkableIconButton>
+                  <IconButton id="acctMenuBtn" onClick={this.toggleAcctMenu}>
                     <Avatar className={classes.appBarAcctMenuIcon} alt="You" src={this.state.currentUser.avatar_static}/>
                   </IconButton>
+                  <Menu
+                    id="acct-menu"
+                    anchorEl={document.getElementById("acctMenuBtn")}
+                    open={this.state.acctMenuOpen}
+                    className={classes.acctMenu}
+                  >
+                    <ClickAwayListener onClickAway={this.toggleAcctMenu}>
+                      <LinkableListItem to={`/profile/${this.state.currentUser.id}`}>
+                        <ListItemAvatar>
+                          <Avatar alt="You" src={this.state.currentUser.avatar_static}/>
+                        </ListItemAvatar>
+                        <ListItemText primary={this.state.currentUser.display_name} secondary={this.state.currentUser.acct}/>
+                      </LinkableListItem>
+                      <Divider/>
+                      <MenuItem>Switch account</MenuItem>
+                      <MenuItem>Log out</MenuItem>
+                    </ClickAwayListener>
+                  </Menu>
               </div>
             </Toolbar>
           </AppBar>

src/interfaces/overrides.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ListItem, { ListItemProps } from "@material-ui/core/ListItem";
+import IconButton, { IconButtonProps } from "@material-ui/core/IconButton";
+import { Link } from "react-router-dom";
+
+export interface ILinkableListItemProps extends ListItemProps {
+    to: string;
+    replace?: boolean;
+}
+
+export interface ILinkableIconButtonProps extends IconButtonProps {
+    to: string;
+    replace?: boolean;
+}
+
+export const LinkableListItem = (props: ILinkableListItemProps) => (
+    <ListItem {...props} component={Link as any}/>
+  )
+  
+export const LinkableIconButton = (props: ILinkableIconButtonProps) => (
+    <IconButton {...props} component={Link as any}/>
+)

src/pages/About.tsx

@@ -18,25 +18,26 @@ import DomainIcon from '@material-ui/icons/Domain';
 import ChatIcon from '@material-ui/icons/Chat';
 import PersonIcon from '@material-ui/icons/Person';
 import {styles} from './PageLayout.styles';
-import {getCurrentInstanceData} from '../utilities/instances';
 import {Instance} from '../types/Instance';
+import {LinkableIconButton} from '../interfaces/overrides';
+import Mastodon from 'megalodon';
 
 interface IAboutPageState  {
-    instance: Instance;
+    instance: Instance | any;
 }
 
 class AboutPage extends Component<any, IAboutPageState> {
 
     constructor(props: any) {
         super(props);
+    }
 
-        let instance = getCurrentInstanceData();
-        instance.then((resp: any) => {
-            let data: Instance = resp.data;
-            console.log("From response: " + data);
+    componentWillMount() {
+        let client = new Mastodon(localStorage.getItem('account_token') as string, localStorage.getItem('baseurl') + "/api/v1");
+        client.get('/instance').then((resp: any) => {
             this.setState({
-                instance: data
-            });
+                instance: resp.data
+            })
         })
     }
 
@@ -53,9 +54,9 @@ class AboutPage extends Component<any, IAboutPageState> {
                                     <DomainIcon/>
                                 </Avatar>
                             </ListItemAvatar>
-                            <ListItemText primary="Instance location (URL)" secondary={this.state ? this.state.instance.uri: "Couldn't determine location"}/>
+                            <ListItemText primary="Instance location (URL)" secondary={this.state ? this.state.instance.uri: "Loading..."}/>
                             <ListItemSecondaryAction>
-                                <IconButton>
+                                <IconButton href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer">
                                     <OpenInNewIcon/>
                                 </IconButton>
                             </ListItemSecondaryAction>
@@ -66,15 +67,15 @@ class AboutPage extends Component<any, IAboutPageState> {
                             </ListItemAvatar>
                             <ListItemText primary="Instance admin" secondary={
                                 this.state ? `${this.state.instance.contact_account.display_name} (@${this.state.instance.contact_account.acct})`:
-                                "Couldn't determine admin"
+                                "Loading..."
                             }/>
                             <ListItemSecondaryAction>
                                 <IconButton>
                                     <ChatIcon/>
                                 </IconButton>
-                                <IconButton>
+                                <LinkableIconButton to={`/profile/${this.state? this.state.instance.contact_account.id: 0}`}>
                                     <PersonIcon/>
-                                </IconButton>
+                                </LinkableIconButton>
                             </ListItemSecondaryAction>
                         </ListItem>
                     </List>

src/tests/App.test.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from '../App';
-import { HashRouter } from 'react-router-dom';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(
-    <HashRouter>
-      <App />
-    </HashRouter>
-  , div);
-  ReactDOM.unmountComponentAtNode(div);
-});

src/types/Account.tsx

@@ -27,6 +27,7 @@ export type Account = {
 }
 
 export type UAccount = {
+    id: string;
     acct: string;
     display_name: string;
     avatar_static: string;

src/utilities/accounts.tsx

@@ -1,16 +0,0 @@
-import Mastodon from 'megalodon';
-import { Account, UAccount } from '../types/Account';
-
-export function getCurrentUserData() {
-    let currentData: Account = JSON.parse(localStorage.getItem('account') as string);
-    if (currentData === null) {
-        let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1/");
-        client.get('/account/verify_credentials').then((resp: any) => { let acct: Account = resp.data; currentData = acct; return acct; });
-    }
-    let account: UAccount = {
-        acct: "@" + currentData.acct,
-        display_name: currentData.display_name || "@" + currentData.acct,
-        avatar_static: currentData.avatar_static
-    }
-    return account;
-}

src/utilities/instances.tsx

@@ -1,9 +0,0 @@
-import Mastodon from 'megalodon';
-import { Instance } from '../types/Instance';
-
-export function getCurrentInstanceData() {
-    let instance;
-    let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1/");
-    instance = client.get<Instance>('/instance');
-    return instance;
-}