1
0
mirror of https://github.com/hyperspacedev/hyperspace synced 2025-01-31 01:29:37 +01:00

Add header/avatar image upload support

This commit is contained in:
Marquis Kurt 2019-04-27 15:49:10 -04:00
parent b6c8448b0a
commit 13bcc99b07

View File

@ -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">Edit Header</Button>
<Button className={classes.pageProfileFollowButton} variant="contained" onClick={() => this.updateAvatar()}>Change Avatar</Button>
<Button className={classes.pageProfileFollowButton} variant="contained" onClick={() => this.updateHeader()}>Change Header</Button>
</div>
<br/>
</div>
</div>
<div className={classes.pageContentLayoutConstraints}>