hyperspace-desktop-client-windows-linux-macos/src/pages/You.tsx

import React, {Component} from 'react';
import {withStyles, Typography, Paper, Avatar, Button, TextField, ListItem, ListItemText, ListItemAvatar, List, Grid} from '@material-ui/core';
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';

interface IYouProps extends withSnackbarProps {
    classes: any;
}

interface IYouState {
    currentAccount: Account;
    newDisplayName?: string;
    newBio?: string;
}

class You extends Component<IYouProps, IYouState> {

    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 = {
            currentAccount: this.getAccount()
        }
    }

    getAccount() {
        let acct = localStorage.getItem('account');
        if (acct) {
          return JSON.parse(acct);
        }
    }

    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);
        })
    }

    removeHTMLContent(text: string) {
        const div = document.createElement('div');
        div.innerHTML = text;
        let innerContent = div.textContent || div.innerText || "";
        return innerContent;
    }
    changeDisplayName() {
        this.client.patch('/accounts/update_credentials', { 
            display_name: this.state.newDisplayName? this.state.newDisplayName: this.state.currentAccount.display_name
        })
        .then((acct: any) =>{
            let currentAccount: Account = acct.data
            this.setState({currentAccount});
            localStorage.setItem('account', JSON.stringify(currentAccount));
            this.props.closeSnackbar("persistHeader");
            this.props.enqueueSnackbar("Display name updated to " + this.state.newDisplayName);
        } ).catch((err:Error) => {
            console.error(err.name)
            this.props.closeSnackbar("persistHeader");
            this.props.enqueueSnackbar("Couldn't update display name: " + err.name, { variant: "error" })
        })
    }

    updateDisplayname(name: string) {
        this.setState({ newDisplayName: name });
      };
    changeBio() {
        this.client.patch('/accounts/update_credentials', {note: this.state.newBio? this.state.newBio: this.state.currentAccount.note})
        .then((acct:any) => {
            let currentAccount: Account = acct.data
            this.setState({currentAccount});
            localStorage.setItem('account', JSON.stringify(currentAccount));
            this.props.closeSnackbar("persistHeader");
            this.props.enqueueSnackbar("Bio updated successfully.");
        }).catch((err: Error) => {
            console.error(err.name)
            this.props.closeSnackbar("persistHeader");
            this.props.enqueueSnackbar("Couldn't update bio: " + err.name, { variant: "error"});
        })
    }

    updateBio(bio:string){
        this.setState({newBio:bio})
    }

    render() {
        const {classes} = this.props;
        return (
            <div className={classes.pageLayoutMinimalConstraints}>
                <div className={classes.pageHeroBackground}>
                    <div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: `url("${this.state.currentAccount.header_static}")`}}/>
                    <div className={classes.pageHeroContent}>
                        <Avatar className={classes.pageProfileAvatar} src={this.state.currentAccount.avatar_static}/>
                        <Typography variant="h4" color="inherit" component="h1">Edit your profile</Typography>
                        <br/>
                        <div>
                            <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}>
                    <Paper className={classes.youPaper}>
                    <Typography variant="h5" component="h2">Display Name</Typography>
                    <br/>
                    <TextField className = {classes.TextField} 
                        defaultValue = {this.state.currentAccount.display_name}
                        rowsMax = "1"
                        variant = "outlined"
                        fullWidth
                        onChange = {(event: any) => this.updateDisplayname(event.target.value)}>
                        </TextField>
                    <div style = {{textAlign: "right"}}>
                        <Button className={classes.pageProfileFollowButton} color = "primary" onClick = {() => this.changeDisplayName()}>Update display Name</Button>
                    </div>
                    </Paper>
                    <br/>
                    <Paper className={classes.youPaper}>
                        <Typography variant="h5" component="h2">About you</Typography>
                        <br/>
                        <TextField className = {classes.TextField} 
                            defaultValue = {this.state.currentAccount.note? this.removeHTMLContent(this.state.currentAccount.note): "Tell a little bit about yourself"}
                            multiline
                            variant = "outlined"
                            rows = "2"
                            rowsMax = "5"
                            fullWidth
                            onChange = {(event:any) =>this.updateBio(event.target.value)}>
                        </TextField>
                        <div style={{textAlign: "right"}}>
                            <Button className={classes.pageProfileFollowButton} color = "primary" onClick = {() => this.changeBio()}>Update biography</Button>
                        </div>
                    </Paper>
                </div>
            </div>
        );
    }
}

export default withStyles(styles)(withSnackbar(You));