Merge pull request #41 from hyperspacedev/edit-profile

Edit profile
2025-02-04 03:08:10 +01:00 · 2019-05-03 13:08:39 -04:00 · 2019-05-03 13:08:39 -04:00 · b3bdfdacb1
commit b3bdfdacb1
parent bd9e096bd8 1536247af4
9 changed files with 261 additions and 6 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10953,6 +10953,11 @@
        "safe-buffer": "^5.1.2"
      }
    },
+    "mdi-material-ui": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/mdi-material-ui/-/mdi-material-ui-5.11.0.tgz",
+      "integrity": "sha512-9fIvdiKCKAfBoW11LqZsgaxZtu9WCQEd8FL9/8ceLHvStSf+fZM6sC7exwXaXZmzfwtJMfN1KiMGsPBPSTQFQg=="
+    },
    "mdn-data": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "emoji-mart": "^2.8.2",
    "file-dialog": "^0.0.7",
    "material-ui-pickers": "^2.2.4",
+    "mdi-material-ui": "^5.11.0",
    "megalodon": "^0.6.3",
    "moment": "^2.24.0",
    "notistack": "^0.5.1",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -19,6 +19,7 @@ import WelcomePage from './pages/Welcome';
 import MessagesPage from './pages/Messages';
 import RecommendationsPage from './pages/Recommendations';
 import Missingno from './pages/Missingno';
+import You from './pages/You';
 import {withSnackbar} from 'notistack';
 import {PrivateRoute} from './interfaces/overrides';
 import { userLoggedIn } from './utilities/accounts';
@ -60,6 +61,7 @@ class App extends Component<any, any> {
            <PrivateRoute path="/conversation/:conversationId" component={Conversation}/>
            <PrivateRoute path="/search" component={SearchPage}/>
            <PrivateRoute path="/settings" component={Settings}/>
+            <PrivateRoute path="/you" component={You}/>
            <PrivateRoute path="/about" component={AboutPage}/>
            <PrivateRoute path="/compose" component={Composer}/>
            <PrivateRoute path="/recommended" component={RecommendationsPage}/>
--- a/src/components/AppLayout/AppLayout.styles.tsx
+++ b/src/components/AppLayout/AppLayout.styles.tsx
@ -22,7 +22,9 @@ export const styles = (theme: Theme) => createStyles({
      backgroundColor: theme.palette.primary.dark,
      textAlign: 'center',
      zIndex: 1000,
-      verticalAlign: 'middle'
+      verticalAlign: 'middle',
+      WebkitUserSelect: 'none',
+      WebkitAppRegion: "drag"
    },
    titleBarText: {
      color: theme.palette.common.white,
@ -148,5 +150,5 @@ export const styles = (theme: Theme) => createStyles({
      bottom: theme.spacing.unit * 2,
      right: theme.spacing.unit * 2,
      zIndex: 50
-    }
+    },
  });
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/src/components/AppLayout/AppLayout.tsx
@ -10,7 +10,7 @@ import PublicIcon from '@material-ui/icons/Public';
 import GroupIcon from '@material-ui/icons/Group';
 import SettingsIcon from '@material-ui/icons/Settings';
 import InfoIcon from '@material-ui/icons/Info';
-import EditIcon from '@material-ui/icons/Edit';
+import CreateIcon from '@material-ui/icons/Create';
 //import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import {styles} from './AppLayout.styles';
@ -395,7 +395,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
        </Dialog>
        <Tooltip title="Create a new post">
          <LinkableFab to="/compose" className={classes.composeButton} color="secondary" aria-label="Compose">
-            <EditIcon/>
+            <CreateIcon/>
          </LinkableFab>
        </Tooltip>
    </div>
--- a/src/pages/PageLayout.styles.tsx
+++ b/src/pages/PageLayout.styles.tsx
@ -86,8 +86,14 @@ export const styles = (theme: Theme) => createStyles({
        paddingLeft: '25%',
        paddingRight: '25%',
      },
+      position: "relative",
      zIndex: 1
    },
+    pageHeroToolbar: {
+      position: "absolute",
+      right: theme.spacing.unit * 2,
+      marginTop: -16,
+    },
    pageListConstraints: {
        paddingLeft: theme.spacing.unit,
        paddingRight: theme.spacing.unit,
@ -179,4 +185,26 @@ export const styles = (theme: Theme) => createStyles({
        color: theme.palette.primary.light
      }
    },
+    youHeadingAvatar: {
+      height: 88,
+      width: 88
+    },
+    youPaper: {
+      padding: theme.spacing.unit * 2,
+    },
+    youGrid: {
+      textAlign: "center",
+      '& *': {
+        marginLeft: "auto",
+        marginRight: "auto",
+      }
+    },
+    youGridAvatar: {
+      height: 128,
+      width: 128
+    },
+    youGridImage: {
+      width: 'auto',
+      height: 128
+    },
  });
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@ -7,9 +7,11 @@ import { Status } from '../types/Status';
 import { Relationship } from '../types/Relationship';
 import Post from '../components/Post';
 import {withSnackbar} from 'notistack';
-import { LinkableButton } from '../interfaces/overrides';
+import { LinkableButton, LinkableIconButton } from '../interfaces/overrides';
 import { emojifyString } from '../utilities/emojis';

+import AccountEditIcon from 'mdi-material-ui/AccountEdit';
+
 interface IProfilePageState {
    account?: Account;
    relationship?: Relationship;
@ -89,6 +91,14 @@ class ProfilePage extends Component<any, IProfilePageState> {
        this.getAccountData(params.profileId);
    }

+    isItMe(): boolean {
+        if (this.state.account) {
+            return this.state.account.id === JSON.parse(localStorage.getItem('account') as string).id;
+        } else {
+            return false;
+        }
+    }
+
    getRelationships() {
        this.client.get("/accounts/relationships", {id: this.props.match.params.profileId }).then((resp: any) => {
            let relationship: Relationship = resp.data[0];
@ -216,6 +226,14 @@ class ProfilePage extends Component<any, IProfilePageState> {
                <div className={classes.pageHeroBackground}>
                    <div className={classes.pageHeroBackgroundImage} style={{ backgroundImage: this.state.account? `url("${this.state.account.header}")`: `url("")`}}/>
                    <div className={classes.pageHeroContent}>
+                        {
+                            this.isItMe()?
+                            <Tooltip title="Edit profile">
+                                <LinkableIconButton to="/you" color="inherit" className={classes.pageHeroToolbar}>
+                                    <AccountEditIcon/>
+                                </LinkableIconButton>
+                            </Tooltip>: null
+                        }
                        <Avatar className={classes.pageProfileAvatar} src={this.state.account ? this.state.account.avatar: ""}/>
                        <Typography variant="h4" color="inherit" dangerouslySetInnerHTML={{__html: this.state.account? emojifyString(this.state.account.display_name, this.state.account.emojis, classes.pageProfileNameEmoji): ""}}></Typography>
                        <Typography variant="caption" color="inherit">{this.state.account ? '@' + this.state.account.acct: ""}</Typography>
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@ -30,6 +30,7 @@ import {themes, defaultTheme} from '../types/HyperspaceTheme';
 import ThemePreview from '../components/ThemePreview';
 import {setHyperspaceTheme, getHyperspaceTheme} from '../utilities/themes';
 import { Visibility } from '../types/Visibility';
+import {LinkableButton} from '../interfaces/overrides';

 interface ISettingsState {
    darkModeEnabled: boolean;
@ -331,9 +332,15 @@ class SettingsPage extends Component<any, ISettingsState> {
                    </List>
                </Paper>
                <br/>
-                <ListSubheader>Accounts</ListSubheader>
+                <ListSubheader>Your Account</ListSubheader>
                <Paper className={classes.pageListConstraints}>
                    <List>
+                        <ListItem>
+                            <ListItemText primary="Edit your profile" secondary="Change your bio, display name, and images"/>
+                            <ListItemSecondaryAction>
+                                <LinkableButton to="/you">Edit</LinkableButton>
+                            </ListItemSecondaryAction>
+                        </ListItem>
                        <ListItem>
                            <ListItemText primary="Configure on Mastodon"/>
                            <ListItemSecondaryAction>
--- a/src/pages/You.tsx
+++ b/src/pages/You.tsx
@ -0,0 +1,192 @@
+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));