Add header/avatar image upload support

src/pages/You.tsx

@@ -4,6 +4,7 @@ import {withSnackbar, withSnackbarProps} from 'notistack';
 import {styles} from './PageLayout.styles';
 import { Account } from '../types/Account';
 import Mastodon from 'megalodon';
+import filedialog from 'file-dialog';
 
 import PersonIcon from '@material-ui/icons/Person';
 
@@ -13,8 +14,6 @@ interface IYouProps extends withSnackbarProps {
 
 interface IYouState {
     currentAccount: Account;
-    newProfile?: any;
-    newHeader?: any;
     newDisplayName?: string;
     newBio?: string;
 }
@@ -40,6 +39,66 @@ class You extends Component<IYouProps, IYouState> {
         }
     }
 
+    updateAvatar() {
+        filedialog({
+            multiple: false,
+            accept: "image/*"
+        }).then((images: FileList) => {
+            if (images.length > 0) {
+                this.props.enqueueSnackbar("Updating avatar...", { persist: true, key: "persistAvatar" });
+                let upload = new FormData();
+                upload.append("avatar", images[0]);
+                this.client.patch("/accounts/update_credentials", upload).then((acct: any) => {
+                    let currentAccount: Account = acct.data;
+                    this.setState({ currentAccount });
+                    localStorage.setItem("account", JSON.stringify(currentAccount));
+                    this.props.closeSnackbar("persistAvatar");
+                    this.props.enqueueSnackbar("Avatar updated successfully.");
+                }).catch((err: Error) => {
+                    this.props.closeSnackbar("persistAvatar");
+                    this.props.enqueueSnackbar("Couldn't update avatar: " + err.name, { variant: "error" });
+                })
+            }
+        }).catch((err: Error) => {
+            this.props.enqueueSnackbar("Couldn't update avatar: " + err.name);
+        })
+    }
+
+    updateHeader() {
+        filedialog({
+            multiple: false,
+            accept: "image/*"
+        }).then((images: FileList) => {
+            if (images.length > 0) {
+                this.props.enqueueSnackbar("Updating header...", { persist: true, key: "persistHeader" });
+                let upload = new FormData();
+                upload.append("header", images[0]);
+                this.client.patch("/accounts/update_credentials", upload).then((acct: any) => {
+                    let currentAccount: Account = acct.data;
+                    this.setState({ currentAccount });
+                    localStorage.setItem("account", JSON.stringify(currentAccount));
+                    this.props.closeSnackbar("persistHeader");
+                    this.props.enqueueSnackbar("Header updated successfully.");
+                }).catch((err: Error) => {
+                    this.props.closeSnackbar("persistHeader");
+                    this.props.enqueueSnackbar("Couldn't update header: " + err.name, { variant: "error" });
+                })
+            }
+        }).catch((err: Error) => {
+            this.props.enqueueSnackbar("Couldn't update header: " + err.name);
+        })
+    }
+
+    //TODO: Implement changeDisplayName
+    changeDisplayName() {
+        
+    }
+
+    //TODO: Implement changeBio
+    changeBio() {
+
+    }
+
     render() {
         const {classes} = this.props;
         return (
@@ -51,9 +110,10 @@ class You extends Component<IYouProps, IYouState> {
                         <Typography variant="h4" color="inherit" component="h1">Edit your profile</Typography>
                         <br/>
                         <div>
-                            <Button className={classes.pageProfileFollowButton} variant="contained">Edit Avatar</Button>
+                            <Button className={classes.pageProfileFollowButton} variant="contained" onClick={() => this.updateAvatar()}>Change Avatar</Button>
-                            <Button className={classes.pageProfileFollowButton} variant="contained">Edit Header</Button>
+                            <Button className={classes.pageProfileFollowButton} variant="contained" onClick={() => this.updateHeader()}>Change Header</Button>
                         </div>
+                        <br/>
                     </div>
                 </div>
                 <div className={classes.pageContentLayoutConstraints}>