From b8f9035be1a3af2962c150ada548a78258c0e869 Mon Sep 17 00:00:00 2001
From: Marquis Kurt <software@marquiskurt.net>
Date: Sat, 30 Mar 2019 17:13:49 -0400
Subject: [PATCH] Work on adding basic posts

---
 package-lock.json                             | 208 ++++++++++-
 package.json                                  |  17 +-
 src/App.tsx                                   |  16 +-
 src/components/AppLayout/AppLayout.styles.tsx |   1 -
 src/components/AppLayout/AppLayout.tsx        |  20 +-
 .../Attachment/Attachment.styles.tsx          |  16 +
 src/components/Attachment/Attachment.tsx      | 105 ++++++
 src/components/Attachment/index.tsx           |   5 +
 src/components/Post/Post.styles.tsx           |  58 +++
 src/components/Post/Post.tsx                  | 341 ++++++++++++++++++
 src/components/Post/PostShareMenu.tsx         |  15 +
 src/components/Post/index.tsx                 |   6 +
 src/index.tsx                                 |  11 +-
 src/interfaces/overrides.tsx                  |  33 +-
 src/pages/About.tsx                           |   2 +-
 src/pages/Home.tsx                            | 157 ++++++++
 src/pages/PageLayout.styles.tsx               |  31 +-
 src/pages/ProfilePage.tsx                     | 189 ++++++++--
 18 files changed, 1146 insertions(+), 85 deletions(-)
 create mode 100644 src/components/Attachment/Attachment.styles.tsx
 create mode 100644 src/components/Attachment/Attachment.tsx
 create mode 100644 src/components/Attachment/index.tsx
 create mode 100644 src/components/Post/Post.styles.tsx
 create mode 100644 src/components/Post/Post.tsx
 create mode 100644 src/components/Post/PostShareMenu.tsx
 create mode 100644 src/components/Post/index.tsx
 create mode 100644 src/pages/Home.tsx

diff --git a/package-lock.json b/package-lock.json
index ee45b63..8861623 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -945,9 +945,9 @@
       "dev": true
     },
     "@material-ui/core": {
-      "version": "3.9.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.2.tgz",
-      "integrity": "sha512-aukR3mSH3g115St2OnqoeMRtmxzxxx+Mch7pFKRV3Tz3URExBlZwOolimjxKZpG4LGec8HlhREawafLsDzjVWQ==",
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.3.tgz",
+      "integrity": "sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.2.0",
@@ -1272,6 +1272,15 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-swipeable-views": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@types/react-swipeable-views/-/react-swipeable-views-0.13.0.tgz",
+      "integrity": "sha512-orrreCcXev6IUXDuHf07RDDCAoIZRMSr95eyWmYNRfjic7w/O+68iPu0NCysVls+UygRNvoqZMuXI72N/58E1w==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "2.0.16",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.16.tgz",
@@ -4494,6 +4503,17 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-class": {
+      "version": "15.6.3",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
+      "dev": true,
+      "requires": {
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "create-react-context": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
@@ -10424,6 +10444,12 @@
         "array-includes": "^3.0.3"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=",
+      "dev": true
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -10786,9 +10812,9 @@
       "dev": true
     },
     "megalodon": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/megalodon/-/megalodon-0.5.1.tgz",
-      "integrity": "sha512-gnE12mA2zClg0fsPo6ARszJiUGpbM48hL1kWtK/3M8KrrnG7V33cyg9qwaCZNkOmmu+aUxZjesgTlG3PT1mI0A==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/megalodon/-/megalodon-0.6.0.tgz",
+      "integrity": "sha512-SXk6DqM02NJGLppr4XpCKDX3HqsPBS1fyuxm19IPmMlHRerChVyIDoWlmxlAEq3jdcCQrMmVVC/E5QuoO5uc0Q==",
       "dev": true,
       "requires": {
         "@types/oauth": "^0.9.0",
@@ -11094,6 +11120,12 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+      "dev": true
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -11362,6 +11394,16 @@
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
       "dev": true
     },
+    "notistack": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-0.5.1.tgz",
+      "integrity": "sha512-Pym0iWYCDFsC3imDL+zx4lWjkeEu6s/mlIDq6m+VRpHPPNFJErNcHCqo+xakvkkpOOR3fz4Y802GtMk8GDFVIA==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.6.2"
+      }
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -14846,15 +14888,15 @@
       }
     },
     "react": {
-      "version": "16.8.5",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.8.5.tgz",
-      "integrity": "sha512-daCb9TD6FZGvJ3sg8da1tRAtIuw29PbKZW++NN4wqkbEvxL+bZpaaYb4xuftW/SpXmgacf1skXl/ddX6CdOlDw==",
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
+      "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.13.5"
+        "scheduler": "^0.13.6"
       }
     },
     "react-app-polyfill": {
@@ -15004,15 +15046,15 @@
       }
     },
     "react-dom": {
-      "version": "16.8.5",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.5.tgz",
-      "integrity": "sha512-VIEIvZLpFafsfu4kgmftP5L8j7P1f0YThfVTrANMhZUFMDOsA6e0kfR6wxw/8xxKs4NB59TZYbxNdPCDW34x4w==",
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
+      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.13.5"
+        "scheduler": "^0.13.6"
       }
     },
     "react-error-overlay": {
@@ -15149,10 +15191,99 @@
         "workbox-webpack-plugin": "3.6.3"
       }
     },
+    "react-swipeable-views": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views/-/react-swipeable-views-0.13.1.tgz",
+      "integrity": "sha512-zZIRBD+HFO0P5z3TCkDMsSG/Sc3LXGGtojO+dEAGxsPvZjc3ji4Z/oOcLjZ4ozl0xIlLQJZ89o1rR82H/MDBHw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "dom-helpers": "^3.2.1",
+        "prop-types": "^15.5.4",
+        "react-swipeable-views-core": "^0.13.1",
+        "react-swipeable-views-utils": "^0.13.1",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+          "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        }
+      }
+    },
+    "react-swipeable-views-core": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views-core/-/react-swipeable-views-core-0.13.1.tgz",
+      "integrity": "sha512-EP8sCvvD7VDiZLglPt9icMuMNu8qLRLk0ab/fB1HXv7lX8ClnwF3UMCM0ZrN3sguSY7CsX3LevducGGsT1VcDg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+          "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        }
+      }
+    },
+    "react-swipeable-views-utils": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.1.tgz",
+      "integrity": "sha512-r5eyPIIHnlvILvFHXGnASDXa3RwC6X2YevegA2II5fhzYqwQRpJ81+lnzknNg5hiIN6ucXc5vrkqRRjabAhMpA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "fbjs": "^0.8.4",
+        "keycode": "^2.1.7",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.0",
+        "react-swipeable-views-core": "^0.13.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+          "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        }
+      }
+    },
     "react-transition-group": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.7.0.tgz",
-      "integrity": "sha512-CzF22K0x6arjQO4AxkasMaiYcFG/QH0MhPNs45FmNsfWsQmsO9jv52sIZJAalnlryD5RgrrbLtV5CMJSokrrMA==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.7.1.tgz",
+      "integrity": "sha512-b0VJTzNRnXxRpCuxng6QJbAzmmrhBn1BZJfPPnHbH2PIo8msdkajqwtfdyGm/OypPXZNfAHKEqeN15wjMXrRJQ==",
       "dev": true,
       "requires": {
         "dom-helpers": "^3.3.1",
@@ -15161,6 +15292,43 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "react-web-share-api": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/react-web-share-api/-/react-web-share-api-0.0.2.tgz",
+      "integrity": "sha1-pp7BMEYXHnb3JIq8XU7ufdj3slo=",
+      "dev": true,
+      "requires": {
+        "react": "^15.5.0",
+        "react-dom": "^15.5.0"
+      },
+      "dependencies": {
+        "react": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
+          "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
+          "dev": true,
+          "requires": {
+            "create-react-class": "^15.6.0",
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.0",
+            "prop-types": "^15.5.10"
+          }
+        },
+        "react-dom": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
+          "integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
+          "dev": true,
+          "requires": {
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.0",
+            "prop-types": "^15.5.10"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -16375,9 +16543,9 @@
       "dev": true
     },
     "scheduler": {
-      "version": "0.13.5",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.5.tgz",
-      "integrity": "sha512-K98vjkQX9OIt/riLhp6F+XtDPtMQhqNcf045vsh+pcuvHq+PHy1xCrH3pq1P40m6yR46lpVvVhKdEOtnimuUJw==",
+      "version": "0.13.6",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+      "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
diff --git a/package.json b/package.json
index d7ba21b..3485b38 100644
--- a/package.json
+++ b/package.json
@@ -3,22 +3,27 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
-    "@material-ui/core": "^3.9.2",
+    "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "@types/jest": "24.0.11",
     "@types/node": "11.11.6",
     "@types/react": "16.8.8",
     "@types/react-dom": "16.8.3",
     "@types/react-router-dom": "^4.3.1",
-    "megalodon": "latest",
-    "react": "^16.8.5",
-    "react-dom": "^16.8.5",
+    "@types/react-swipeable-views": "latest",
+    "megalodon": "^0.6.0",
+    "moment": "^2.24.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
-    "typescript": "3.3.4000"
+    "react-swipeable-views": "^0.13.1",
+    "typescript": "3.3.4000",
+    "notistack": "^0.5.1",
+    "react-web-share-api": "^0.0.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "BROWSER='Safari Technology Preview' react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/src/App.tsx b/src/App.tsx
index d2a17c6..552118f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {MuiThemeProvider, CssBaseline, withStyles, Typography } from '@material-ui/core';
+import {MuiThemeProvider, CssBaseline, withStyles } from '@material-ui/core';
 import { setHyperspaceTheme, darkMode } from './utilities/themes';
 import AppLayout from './components/AppLayout';
 import {styles} from './App.styles';
@@ -8,11 +8,16 @@ 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 {withSnackbar} from 'notistack';
+import {ProfileRoute} from './interfaces/overrides';
 
 let theme = setHyperspaceTheme(getUserDefaultTheme());
 
 class App extends Component<any, any> {
 
+  offline: any;
+
   constructor(props: any) {
     super(props);
 
@@ -28,17 +33,18 @@ class App extends Component<any, any> {
 
   render() {
     const { classes } = this.props;
+    
     return (
       <MuiThemeProvider theme={this.state.theme}>
         <CssBaseline/>
         <AppLayout/>
-        <Route exact path="/"/>
-        <Route path="/home"/>
+        <Route exact path="/" component={HomePage}/>
+        <Route path="/home" component={HomePage}/>
         <Route path="/local"/>
         <Route path="/public"/>
         <Route path="/messages"/>
         <Route path="/notifications"/>
-        <Route path="/profile/:profileId" component={ProfilePage}/>
+        <Route path="/profile/:profileId" render={props => <ProfilePage {...props}></ProfilePage>}/>
         <Route path="/conversation/:conversationId"/>
         <Route path="/settings" component={Settings}/>
         <Route path="/about" component={AboutPage}/>
@@ -47,4 +53,4 @@ class App extends Component<any, any> {
   }
 }
 
-export default withStyles(styles)(App);
+export default withStyles(styles)(withSnackbar(App));
diff --git a/src/components/AppLayout/AppLayout.styles.tsx b/src/components/AppLayout/AppLayout.styles.tsx
index 8462cf9..1287130 100644
--- a/src/components/AppLayout/AppLayout.styles.tsx
+++ b/src/components/AppLayout/AppLayout.styles.tsx
@@ -6,7 +6,6 @@ export const styles = (theme: Theme) => createStyles({
     root: {
       width: '100%',
       display: 'flex',
-      height: '100%'
     },
     stickyArea: {
       position: 'fixed',
diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
index fa06a57..3c3bdac 100644
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/src/components/AppLayout/AppLayout.tsx
@@ -177,15 +177,17 @@ export class AppLayout extends Component<any, IAppLayoutState> {
                     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>
+                      <div>
+                        <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>                      
+                      </div>
                     </ClickAwayListener>
                   </Menu>
               </div>
diff --git a/src/components/Attachment/Attachment.styles.tsx b/src/components/Attachment/Attachment.styles.tsx
new file mode 100644
index 0000000..ad83d5b
--- /dev/null
+++ b/src/components/Attachment/Attachment.styles.tsx
@@ -0,0 +1,16 @@
+import { Theme, createStyles } from '@material-ui/core';
+
+export const styles = (theme: Theme) => createStyles({
+    mediaContainer: {
+        padding: theme.spacing.unit * 2,
+    },
+    mediaObject: {
+        width: '100%',
+        height: '100%'
+    },
+    mediaSlide: {
+        backgroundColor: theme.palette.primary.light,
+        width: '100%',
+        height: 'auto'
+    }
+});
\ No newline at end of file
diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx
new file mode 100644
index 0000000..9ca470c
--- /dev/null
+++ b/src/components/Attachment/Attachment.tsx
@@ -0,0 +1,105 @@
+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;
+}
+
+interface IAttachmentState {
+    totalSteps: number;
+    currentStep: number;
+    attachments: [Attachment];
+}
+
+class AttachmentComponent extends Component<IAttachmentProps, IAttachmentState> {
+    constructor(props: IAttachmentProps) {
+        super(props);
+
+        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 });
+    }
+
+    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 
+        })
+    }
+
+    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];
+        return (
+            <div className={classes.mediaContainer}>
+                <Typography variant="button">{mediaItem.description? mediaItem.description: "No description provided."}</Typography>
+                <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>
+                    }
+                    />
+            </div>
+        )
+    }
+}
+
+export default withStyles(styles)(AttachmentComponent);
\ No newline at end of file
diff --git a/src/components/Attachment/index.tsx b/src/components/Attachment/index.tsx
new file mode 100644
index 0000000..91d4810
--- /dev/null
+++ b/src/components/Attachment/index.tsx
@@ -0,0 +1,5 @@
+import {withStyles} from '@material-ui/core';
+import AttachmentComponent from './Attachment';
+import {styles} from './Attachment.styles';
+
+export default withStyles(styles)(AttachmentComponent);
\ No newline at end of file
diff --git a/src/components/Post/Post.styles.tsx b/src/components/Post/Post.styles.tsx
new file mode 100644
index 0000000..2b1784e
--- /dev/null
+++ b/src/components/Post/Post.styles.tsx
@@ -0,0 +1,58 @@
+import { Theme, createStyles } from "@material-ui/core";
+
+export const styles = (theme: Theme) => createStyles({
+    post: {
+      marginTop: theme.spacing.unit,
+      marginBottom: theme.spacing.unit
+    },
+    postReblogChip: {
+      color: theme.palette.common.white,
+      '&:hover': {
+        backgroundColor: theme.palette.secondary.light
+      },
+      marginBottom: theme.spacing.unit
+    },
+    postContent: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      '& a': {
+        textDecoration: 'none',
+        color: theme.palette.secondary.light,
+        '&:hover': {
+          textDecoration: 'underline'
+        },
+      }
+    },
+    postCard: {
+      '& a:hover': {
+        textDecoration: 'none'
+      }
+    },
+    postEmoji: {
+      width: theme.typography.body2.fontSize
+    },
+    postMedia: {
+      height: 0,
+      paddingTop: '56.25%', // 16:9
+    },
+    postActionsReply: {
+      marginLeft: theme.spacing.unit,
+      marginRight: theme.spacing.unit
+    },
+    postFlexGrow: {
+      flexGrow: 1
+    },
+    postTypeIconDiv: {
+      marginRight: theme.spacing.unit * 2
+    },
+    postTypeIcon: {
+      color: theme.palette.grey[500]
+    },
+    postWarningIcon: {
+      marginRight: theme.spacing.unit,
+      color: theme.palette.grey[700]
+    },
+    postDidAction: {
+      color: theme.palette.secondary.main
+    }
+});
\ No newline at end of file
diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx
new file mode 100644
index 0000000..125a65f
--- /dev/null
+++ b/src/components/Post/Post.tsx
@@ -0,0 +1,341 @@
+import React from 'react';
+import { Typography, IconButton, Card, CardHeader, Avatar, CardContent, CardActions, withStyles, Menu, MenuItem, Chip, Divider, CardMedia, CardActionArea, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Zoom, Tooltip } from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import ReplyIcon from '@material-ui/icons/Reply';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import AutorenewIcon from '@material-ui/icons/Autorenew';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import PublicIcon from '@material-ui/icons/Public';
+import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
+import WarningIcon from '@material-ui/icons/Warning';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import GroupIcon from '@material-ui/icons/Group';
+import ForumIcon from '@material-ui/icons/Forum';
+import AlternateEmailIcon from '@material-ui/icons/AlternateEmail';
+import {styles} from './Post.styles';
+import { Status } from '../../types/Status';
+import { Mention } from '../../types/Mention';
+import { Visibility } from '../../types/Visibility';
+import moment from 'moment';
+import { MastodonEmoji } from '../../types/Emojis';
+import AttachmentComponent from '../Attachment';
+import Mastodon from 'megalodon';
+import { LinkableChip, LinkableMenuItem, LinkableIconButton } from '../../interfaces/overrides';
+import {withSnackbar} from 'notistack';
+import ShareMenu from './PostShareMenu';
+
+interface IPostProps {
+    post: Status;
+    classes: any;
+    client: Mastodon;
+}
+
+interface IPostState {
+    post: Status;
+    media_slides?: number;
+    menuIsOpen: boolean;
+}
+
+export class Post extends React.Component<any, IPostState> {
+
+    client: Mastodon;
+
+    constructor(props: any) {
+        super(props);
+
+        this.state = {
+            post: this.props.post,
+            media_slides: this.props.post.media_attachments.length > 0? this.props.post.media_attachments.length: 0,
+            menuIsOpen: false
+        }
+
+        this.client = this.props.client;
+
+    }
+
+    togglePostMenu() {
+        this.setState({ menuIsOpen: !this.state.menuIsOpen })
+    }
+
+    materializeContent(status: Status) {
+        const { classes } = this.props;
+        const oldContent = document.createElement('div');
+        oldContent.innerHTML = status.content;
+        if (status.emojis !== undefined && status.emojis.length > 0) {
+            status.emojis.forEach((emoji: MastodonEmoji) => {
+                let regexp = new RegExp(':' + emoji.shortcode + ':', 'g');
+                oldContent.innerHTML = oldContent.innerHTML.replace(regexp, `<img src="${emoji.static_url}" class="${classes.postEmoji}"/>`)
+            })
+        }
+        return (
+            <div className={classes.mediaContainer}>
+                <Typography paragraph dangerouslySetInnerHTML={{__html: oldContent.innerHTML}}/>
+                {
+                    status.card?
+                    <div className={classes.postCard}>
+                        <Divider/>
+                        <CardActionArea href={status.card.url} target="_blank" rel="noreferrer">
+                            <CardContent>
+                                <Typography gutterBottom variant="h6" component="h2">{status.card.title}</Typography>
+                                <Typography>{status.card.description}</Typography>
+                            </CardContent>
+                            {
+                                status.card.image?
+                                <CardMedia className={classes.postMedia} image={status.card.image}/>: <span/>
+                            }
+                            <CardContent>
+                                <Typography>{status.card.provider_url|| status.card.author_url || status.card.author_url}</Typography>
+                            </CardContent>
+                        </CardActionArea>
+                        <Divider/>
+                    </div>:
+                    <span/>
+                }
+                {
+                    status.media_attachments.length > 0?
+                    <AttachmentComponent media={status.media_attachments}/>:
+                    <span/>
+                }
+            </div>
+        );
+    }
+
+    getSensitiveContent(spoiler_text: string, content: Status) {
+        const { classes } = this.props;
+        const warningText = spoiler_text || "Unmarked content";
+        let icon;
+        if (spoiler_text.includes("NSFW") || spoiler_text.includes("Spoiler") || warningText === "Unmarked content") {
+            icon = <WarningIcon className={classes.postWarningIcon}/>;
+        }
+        return (
+            <ExpansionPanel>
+                <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
+                    {icon}<Typography className={classes.heading}>{warningText}</Typography>
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails className={classes.postContent}>
+                    {this.materializeContent(content)}
+                </ExpansionPanelDetails>
+            </ExpansionPanel>
+        )
+    }
+
+    getReblogOfPost(of: Status | null) {
+        const { classes } = this.props;
+        if (of !== null) {
+            return (
+                <CardContent className={classes.postContent}>
+                    <LinkableChip
+                        avatar={
+                            <Avatar alt={of.account.acct} src={of.account.avatar_static}/>
+                        }
+                        className={classes.postReblogChip}
+                        label={`@${of.account.username} posted:`}
+                        key={of.id + "_reblog_chip_" + of.account.id}
+                        to={`/profile/${of.account.id}`}
+                        replace={true}
+                        clickable
+                    />
+                    {of.sensitive? this.getSensitiveContent(of.spoiler_text, of): this.materializeContent(of)}
+                </CardContent>
+            );
+        } else {
+            return null;
+        }
+    }
+
+    getMentions(mention: [Mention]) {
+        if (mention.length > 0) {
+            return (
+                <CardContent>
+                    <Typography variant="caption">Mentions</Typography>
+                    {
+                        this.state.post.mentions.map((person: Mention) => {
+                            return <LinkableChip
+                                        avatar={
+                                            <Avatar>
+                                                <AlternateEmailIcon/>
+                                            </Avatar>
+                                        }
+                                        label={person.username}
+                                        key={this.state.post.id + "_mention_" + person.id}
+                                        to={`/profile/${person.id}`}
+                                        clickable
+                                    />
+                        })
+                    }
+                </CardContent>
+            )
+        } else {
+            return null;
+        }
+    }
+
+    showVisibilityIcon(visibility: Visibility) {
+        const { classes } = this.props;
+        switch(visibility) {
+            case "public":
+                return <PublicIcon className={classes.postTypeIcon}/>;
+            case "private":
+                return <GroupIcon className={classes.postTypeIcon}/>;
+            case "unlisted":
+                return <VisibilityOffIcon className={classes.postTypeIcon}/>
+        }
+    }
+
+    getMastodonUrl(post: Status) {
+        let url = "";
+        if (post.reblog) {
+            url = post.reblog.uri
+        } else {
+            url = post.uri
+        }
+        return url;
+    }
+    
+    toggleFavorited(post: Status) {
+        let _this = this;
+        if (post.favourited) {
+            this.client.post(`/statuses/${post.id}/unfavourite`).then((resp: any) => {
+                let post: Status = resp.data;
+                this.setState({ post });
+            }).catch((err: Error) => {
+                _this.props.enqueueSnackbar(`Couldn't unfavorite post: ${err.name}`, {
+                    variant: 'error'
+                })
+                console.log(err.message);
+            })
+        } else {
+            this.client.post(`/statuses/${post.id}/favourite`).then((resp: any) => {
+                let post: Status = resp.data;
+                this.setState({ post });
+            }).catch((err: Error) => {
+                _this.props.enqueueSnackbar(`Couldn't favorite post: ${err.name}`, {
+                    variant: 'error'
+                })
+                console.log(err.message);
+            })
+        }
+    }
+
+    toggleReblogged(post: Status) {
+        if (post.reblogged) {
+            this.client.post(`/statuses/${post.id}/unreblog`).then((resp: any) => {
+                let post = this.state.post;
+                post.reblogged = false;
+                this.setState({ post });
+            }).catch((err: Error) => {
+                this.props.enqueueSnackbar(`Couldn't unboost post: ${err.name}`, {
+                    variant: 'error'
+                })
+                console.log(err.message);
+            })
+        } else {
+            this.client.post(`/statuses/${post.id}/reblog`).then((resp: any) => {
+                let post = this.state.post;
+                post.reblogged = true;
+                this.setState({ post });
+            }).catch((err: Error) => {
+                this.props.enqueueSnackbar(`Couldn't boost post: ${err.name}`, {
+                    variant: 'error'
+                })
+                console.log(err.message);
+            })
+        }
+    }
+
+    render() {
+        const { classes } = this.props;
+        return (
+            <Zoom in={true}>
+            <Card className={classes.post}>
+                <CardHeader avatar={<Avatar src={this.state.post.account.avatar_static} />} action={
+                <IconButton key={`${this.state.post.id}_submenu`} id={`${this.state.post.id}_submenu`} onClick={() => this.togglePostMenu()}>
+                    <MoreVertIcon />
+                </IconButton>} 
+                title={
+                    `${this.state.post.account.display_name || this.state.post.account.username} (@${this.state.post.account.acct})`
+                } subheader={moment(this.state.post.created_at).format("MMMM Do YYYY [at] h:mm A")} />
+                    {
+                        this.state.post.reblog? this.getReblogOfPost(this.state.post.reblog): null
+                    }
+                    {
+                        this.state.post.sensitive? this.getSensitiveContent(this.state.post.spoiler_text, this.state.post):
+                        <CardContent className={classes.postContent}>
+                            {this.state.post.reblog? null: this.materializeContent(this.state.post)}
+                        </CardContent>
+                    }
+                    {
+                        this.getMentions(this.state.post.mentions)
+                    }
+                    {
+                        this.state.post.reblog && this.state.post.reblog.mentions.length > 0? this.getMentions(this.state.post.reblog.mentions): <span/>
+                    }
+                <CardActions>
+                    <Tooltip title="Reply">
+                        <LinkableIconButton to={`/compose?reply=${this.state.post.id}`}>
+                            <ReplyIcon/>
+                        </LinkableIconButton>
+                    </Tooltip>
+                        <Typography>{this.state.post.replies_count}</Typography>
+                    <Tooltip title="Favorite">
+                        <IconButton onClick={() => this.toggleFavorited(this.state.post)}>
+                            <FavoriteIcon className={this.state.post.favourited? classes.postDidAction: ''}/>
+                        </IconButton>
+                    </Tooltip>
+                        <Typography>{this.state.post.favourites_count}</Typography>
+                    <Tooltip title="Boost">
+                        <IconButton onClick={() => this.toggleReblogged(this.state.post)}>
+                            <AutorenewIcon className={this.state.post.reblogged? classes.postDidAction: ''}/>
+                        </IconButton>
+                    </Tooltip>
+                        <Typography>{this.state.post.reblogs_count}</Typography>
+                    <Tooltip title="View thread">
+                        <LinkableIconButton to={`/conversation/${this.state.post.id}`}>
+                            <ForumIcon />
+                        </LinkableIconButton>
+                    </Tooltip>
+                    <Tooltip title="Open in Web">
+                        <IconButton href={this.getMastodonUrl(this.state.post)} rel="noreferrer" target="_blank">
+                            <OpenInNewIcon />
+                        </IconButton>
+                    </Tooltip>
+                    <div className={classes.postFlexGrow} />
+                    <div className={classes.postTypeIconDiv}>
+                        {this.showVisibilityIcon(this.state.post.visibility)}
+                    </div>
+                </CardActions>
+                <Menu
+                    id="postmenu"
+                    anchorEl={document.getElementById(`${this.state.post.id}_submenu`)}
+                    open={this.state.menuIsOpen}
+                    onClose={() => this.togglePostMenu()}
+                >
+                    <ShareMenu config={{
+                        params: {
+                            title: `@${this.state.post.account.username} posted on Mastodon: `,
+                            text: this.state.post.content,
+                            url: this.getMastodonUrl(this.state.post),
+                        },
+                        onShareSuccess: () => this.props.enqueueSnackbar("Post shared!", {variant: 'success'}),
+                        onShareError: (error: Error) => {
+                            if (error.name != "AbortError")
+                                this.props.enqueueSnackbar(`Couldn't share post: ${error.name}`, {variant: 'error'})
+                        },
+                    }}/>
+                    <LinkableMenuItem to={`/profile/${this.state.post.account.id}`}>View author profile</LinkableMenuItem>
+                    {
+                        this.state.post.account.id == JSON.parse(localStorage.getItem('account') as string).id?
+                        <div>
+                            <Divider/>
+                            <MenuItem>Delete</MenuItem>
+                        </div>:
+                        null
+                    }
+                </Menu>
+            </Card>
+        </Zoom>
+        );
+    }
+}
+
+export default withStyles(styles)(withSnackbar(Post));
diff --git a/src/components/Post/PostShareMenu.tsx b/src/components/Post/PostShareMenu.tsx
new file mode 100644
index 0000000..a8ef126
--- /dev/null
+++ b/src/components/Post/PostShareMenu.tsx
@@ -0,0 +1,15 @@
+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
+
+export default webShare<OwnProps>()(ShareMenu);
\ No newline at end of file
diff --git a/src/components/Post/index.tsx b/src/components/Post/index.tsx
new file mode 100644
index 0000000..f594656
--- /dev/null
+++ b/src/components/Post/index.tsx
@@ -0,0 +1,6 @@
+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));
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 00ea197..cd4a6b3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,16 +5,25 @@ import { HashRouter } from 'react-router-dom';
 import * as serviceWorker from './serviceWorker';
 import {createUserDefaults} from './utilities/settings';
 import {refreshUserAccountData} from './utilities/accounts';
+import {SnackbarProvider} from 'notistack';
 
 createUserDefaults();
 refreshUserAccountData(); 
 
 ReactDOM.render(
     <HashRouter>
-        <App />
+        <SnackbarProvider
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right',
+            }}
+        >
+            <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.
 // Learn more about service workers: https://bit.ly/CRA-PWA
diff --git a/src/interfaces/overrides.tsx b/src/interfaces/overrides.tsx
index 2113bb1..4c1abf3 100644
--- a/src/interfaces/overrides.tsx
+++ b/src/interfaces/overrides.tsx
@@ -1,7 +1,10 @@
-import React 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 } from "react-router-dom";
+import { Link, Route } 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';
 
 export interface ILinkableListItemProps extends ListItemProps {
     to: string;
@@ -13,10 +16,34 @@ export interface ILinkableIconButtonProps extends IconButtonProps {
     replace?: boolean;
 }
 
+export interface ILinkableChipProps extends ChipProps {
+    to: string;
+    replace?: boolean;
+}
+
+export interface ILinkableMenuItemProps extends MenuItemProps {
+    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}/>
-)
\ No newline at end of file
+)
+
+export const LinkableChip = (props: ILinkableChipProps) => (
+    <Chip {...props} component={Link as any}/>
+)
+
+export const LinkableMenuItem = (props: ILinkableMenuItemProps) => (
+    <MenuItem {...props} component={Link as any}/>
+  )
+
+export const ProfileRoute = (rest: any, component: Component) => (
+    <Route {...rest} render={props => (
+        <Component {...props}/>
+    )}/>
+  )
\ No newline at end of file
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 089f412..b75b6af 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -33,7 +33,7 @@ class AboutPage extends Component<any, IAboutPageState> {
     }
 
     componentWillMount() {
-        let client = new Mastodon(localStorage.getItem('account_token') as string, localStorage.getItem('baseurl') + "/api/v1");
+        let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
         client.get('/instance').then((resp: any) => {
             this.setState({
                 instance: resp.data
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..65a4793
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import { withStyles, CircularProgress, Typography, Paper, Button} from '@material-ui/core';
+import {styles} from './PageLayout.styles';
+import Post from '../components/Post';
+import { Status } from '../types/Status';
+import Mastodon from 'megalodon';
+import {withSnackbar} from 'notistack';
+
+interface IHomePageState {
+    posts?: [Status];
+    viewIsLoading: boolean;
+    viewDidLoad?: boolean;
+    viewDidError?: boolean;
+    viewDidErrorCode?: any;
+}
+
+
+class HomePage extends Component<any, IHomePageState> {
+
+    client: Mastodon;
+    streamListener: any;
+
+    constructor(props: any) {
+        super(props);
+
+        this.state = {
+            viewIsLoading: true
+        }
+
+        this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1");
+        
+    }
+
+    componentWillMount() {
+        this.streamListener = this.client.stream('/streaming/home');
+
+        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 posts = this.state.posts;
+            if (posts) {
+                posts.unshift(status)
+            }
+            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('heartbeat', () => {
+            
+        })
+    }
+
+    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.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));
diff --git a/src/pages/PageLayout.styles.tsx b/src/pages/PageLayout.styles.tsx
index 71c3700..5dc7679 100644
--- a/src/pages/PageLayout.styles.tsx
+++ b/src/pages/PageLayout.styles.tsx
@@ -17,6 +17,26 @@ export const styles = (theme: Theme) => createStyles({
         paddingRight: theme.spacing.unit * 24
       },
     },
+    pageLayoutMaxConstraints: {
+      marginTop: 72,
+      flexGrow: 1,
+      paddingTop: theme.spacing.unit * 2,
+      padding: theme.spacing.unit,
+      [theme.breakpoints.up('md')]: {
+        marginLeft: 250,
+        marginTop: 88,
+        padding: theme.spacing.unit * 3,
+        paddingLeft: theme.spacing.unit * 16,
+        paddingRight: theme.spacing.unit * 16,
+      },
+      [theme.breakpoints.up('lg')]: {
+        marginLeft: 250,
+        marginTop: 88,
+        padding: theme.spacing.unit * 3,
+        paddingLeft: theme.spacing.unit * 40,
+        paddingRight: theme.spacing.unit * 40,
+      },
+    },
     pageLayoutMinimalConstraints: {
       flexGrow: 1,
       [theme.breakpoints.up('md')]: {
@@ -25,7 +45,7 @@ export const styles = (theme: Theme) => createStyles({
     },
     pageHeroBackground: {
       position: 'relative',
-      height: '100%',
+      height: 'intrinsic',
       backgroundColor: theme.palette.primary.dark,
       width: '100%',
       color: theme.palette.common.white,
@@ -90,9 +110,14 @@ export const styles = (theme: Theme) => createStyles({
       paddingLeft: theme.spacing.unit * 4,
       paddingRight: theme.spacing.unit * 4,
       paddingTop: theme.spacing.unit * 4,
+      paddingBottom: theme.spacing.unit * 2,
       [theme.breakpoints.up('md')]: {
-        paddingLeft: theme.spacing.unit * 24,
-        paddingRight: theme.spacing.unit * 24
+        paddingLeft: theme.spacing.unit * 32,
+        paddingRight: theme.spacing.unit * 32
       },
+    },
+    errorCard: {
+      padding: theme.spacing.unit * 4,
+      backgroundColor: theme.palette.error.main,
     }
   });
\ No newline at end of file
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index f678f69..ae45872 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -1,60 +1,117 @@
 import React, {Component} from 'react';
-import {withStyles, Typography, Avatar, Divider, Button} from '@material-ui/core';
+import {withStyles, Typography, Avatar, Divider, Button, CircularProgress, Paper} from '@material-ui/core';
 import {styles} from './PageLayout.styles';
 import Mastodon from 'megalodon';
 import { Account } from '../types/Account';
+import { Status} from '../types/Status';
+import Post from '../components/Post';
+import {withSnackbar} from 'notistack';
 
 interface IProfilePageState {
-    id: string;
-    display_name: string;
-    acct: string;
-    followers_count: number;
-    following_count: number;
-    status_count: number;
-    statuses: [];
-    avatar: string;
-    header: string;
-    note: string;
+    account?: Account;
+    posts?: [Status];
+    viewIsLoading: boolean;
+    viewDidLoad?: boolean;
+    viewDidError?: boolean;
+    viewDidErrorCode?: string;
 }
 
 class ProfilePage extends Component<any, IProfilePageState> {
 
+    client: Mastodon;
+
     constructor(props: any) {
         super(props);
 
-        const { match: { params }} = this.props;
         
-        let client = new Mastodon(localStorage.getItem('account_token') as string, localStorage.getItem('baseurl') + "/api/v1");
-        client.get(`/accounts/${params.profileId}`).then((resp: any) => {
+        this.client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
+
+        this.state = {
+            viewIsLoading: true
+        }
+    }
+
+    componentWillReceiveProps(props: any) {
+        this.client.get(`/accounts/${props.match.params.profileId}`).then((resp: any) => {
             let profile: Account = resp.data;
 
             const div = document.createElement('div');
             div.innerHTML = profile.note;
-            const note = div.textContent || div.innerText || "";
+            profile.note = div.textContent || div.innerText || "";
 
             this.setState({
-                id: profile.id,
-                display_name: profile.display_name,
-                acct: '@' + profile.acct,
-                followers_count: profile.followers_count,
-                following_count: profile.following_count,
-                status_count: profile.statuses_count,
-                avatar: profile.avatar_static,
-                header: profile.header_static,
-                note: note
+                account: profile
+            })
+        }).catch((error: Error) => {
+            this.setState({
+                viewIsLoading: false,
+                viewDidError: true,
+                viewDidErrorCode: error.message
+            })
+        })
+
+        this.client.get(`/accounts/${props.match.params.profileId}/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
+            })
+        })
+        window.scrollTo(0, 0)
+    }
+
+    componentWillMount() {
+        const { match: { params }} = this.props;
+        this.client.get(`/accounts/${params.profileId}`).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.client.get(`/accounts/${params.profileId}/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
             })
         })
     }
 
     statElement(classes: any, stat: 'following' | 'followers' | 'posts') {
         let number = 0;
-        if (this.state) {
+        if (this.state.account) {
             if (stat == 'following') {
-                number = this.state.following_count;
+                number = this.state.account.following_count;
             } else if (stat == 'followers') {
-                number = this.state.followers_count;
+                number = this.state.account.followers_count;
             } else if (stat == 'posts') {
-                number = this.state.status_count;
+                number = this.state.account.statuses_count;
             }
         }
         return <div className={classes.pageProfileStat}>
@@ -63,18 +120,52 @@ class ProfilePage extends Component<any, IProfilePageState> {
         </div>;
     }
 
+    loadMoreTimelinePieces() {
+        const { match: {params}} = this.props;
+        this.setState({ viewDidLoad: false, viewIsLoading: true})
+        if (this.state.posts) {
+            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',
+                });
+            })
+        }
+    }
+
     render() {
         const { classes } = this.props;
 
         return(
             <div className={classes.pageLayoutMinimalConstraints}>
                 <div className={classes.pageHeroBackground}>
-                    <div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: this.state? `url("${this.state.header}")`: `url("")`}}/>
+                    <div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: this.state.account? `url("${this.state.account.header}")`: `url("")`}}/>
                     <div className={classes.pageHeroContent}>
-                        <Avatar className={classes.pageProfileAvatar} src={this.state ? this.state.avatar: ""}/>
-                        <Typography variant="h4" color="inherit">{this.state? this.state.display_name: ""}</Typography>
-                        <Typography variant="caption" color="inherit">{this.state? this.state.acct: ""}</Typography>
-                        <Typography paragraph color="inherit">{this.state? this.state.note: ""}</Typography>
+                        <Avatar className={classes.pageProfileAvatar} src={this.state.account ? this.state.account.avatar: ""}/>
+                        <Typography variant="h4" color="inherit">{this.state.account ? this.state.account.display_name: ""}</Typography>
+                        <Typography variant="caption" color="inherit">{this.state.account ? this.state.account.acct: ""}</Typography>
+                        <Typography paragraph color="inherit">{this.state.account ? this.state.account.note: ""}</Typography>
                         <Divider/>
                         <div className={classes.pageProfileStatsDiv}>
                             {this.statElement(classes, 'followers')}
@@ -88,12 +179,38 @@ class ProfilePage extends Component<any, IProfilePageState> {
                     </div>
                 </div>
                 <div className={classes.pageContentLayoutConstraints}>
-                    <Typography variant="h6">Looks like no one's posted here yet.</Typography>
-                    <Typography>Why not give a nidge to start the conversation?</Typography>
+                    {
+                        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/>
+                    }
                 </div>
             </div>
         );
     }
 }
 
-export default withStyles(styles)(ProfilePage)
\ No newline at end of file
+export default withStyles(styles)(withSnackbar(ProfilePage));
\ No newline at end of file