imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move profile settings to a dedicated component

Browse source 
The tab component is getting a bit hard to navigate
This commit is contained in:
Travis Ralston 2019-01-22 13:28:33 -07:00
parent 19de6694ca
commit fa1ce61a06
8 changed files with 297 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

138
src/components/views/settings/tabs/GeneralSettingsTab.js
View file

@ -17,13 +17,11 @@ limitations under the License.
import React from 'react';
import {_t} from "../../../../languageHandler";
import MatrixClientPeg from "../../../../MatrixClientPeg";
import Field from "../../elements/Field";
import AccessibleButton from "../../elements/AccessibleButton";
import classNames from 'classnames';
import GroupUserSettings from "../../groups/GroupUserSettings";
import PropTypes from "prop-types";
import {MatrixClient} from "matrix-js-sdk";
import { DragDropContext } from 'react-beautiful-dnd';
import ProfileSettings from "../ProfileSettings";
const sdk = require('../../../../index');
const Modal = require("../../../../Modal");
@ -34,20 +32,6 @@ export default class GeneralSettingsTab extends React.Component {
constructor() {
super();
const client = MatrixClientPeg.get();
const user = client.getUser(client.getUserId());
let avatarUrl = user.avatarUrl;
if (avatarUrl) avatarUrl = client.mxcUrlToHttp(avatarUrl, 96, 96, 'crop', false);
this.state = {
userId: user.userId,
originalDisplayName: user.displayName,
displayName: user.displayName,
originalAvatarUrl: avatarUrl,
avatarUrl: avatarUrl,
avatarFile: null,
enableProfileSave: false,
};
}
getChildContext() {
@ -56,78 +40,6 @@ export default class GeneralSettingsTab extends React.Component {
};
}
_uploadAvatar = (e) => {
e.stopPropagation();
e.preventDefault();
this.refs.avatarUpload.click();
};
_saveProfile = async (e) => {
e.stopPropagation();
e.preventDefault();
if (!this.state.enableProfileSave) return;
this.setState({enableProfileSave: false});
const client = MatrixClientPeg.get();
const newState = {};
// TODO: What do we do about errors?
if (this.state.originalDisplayName !== this.state.displayName) {
await client.setDisplayName(this.state.displayName);
newState.originalDisplayName = this.state.displayName;
}
if (this.state.avatarFile) {
const uri = await client.uploadContent(this.state.avatarFile);
await client.setAvatarUrl(uri);
newState.avatarUrl = client.mxcUrlToHttp(uri, 96, 96, 'crop', false);
newState.originalAvatarUrl = newState.avatarUrl;
newState.avatarFile = null;
}
newState.enableProfileSave = true;
this.setState(newState);
};
_changePassword = async (e) => {
e.stopPropagation();
e.preventDefault();
console.log(this.refs.currentPassword);
};
_onDisplayNameChanged = (e) => {
this.setState({
displayName: e.target.value,
enableProfileSave: true,
});
};
_onAvatarChanged = (e) => {
if (!e.target.files || !e.target.files.length) {
this.setState({
avatarUrl: this.state.originalAvatarUrl,
avatarFile: null,
enableProfileSave: false,
});
return;
}
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (ev) => {
this.setState({
avatarUrl: ev.target.result,
avatarFile: file,
enableProfileSave: true,
});
};
reader.readAsDataURL(file);
};
_onPasswordChangeError = (err) => {
// TODO: Figure out a design that doesn't involve replacing the current dialog
let errMsg = err.error || "";
@ -157,57 +69,11 @@ export default class GeneralSettingsTab extends React.Component {
};
_renderProfileSection() {
// TODO: Why is rendering a box with an overlay so complicated? Can the DOM be reduced?
let showOverlayAnyways = true;
let avatarElement = <div className="mx_GeneralSettingsTab_profileAvatarPlaceholder" />;
if (this.state.avatarUrl) {
showOverlayAnyways = false;
avatarElement = <img src={this.state.avatarUrl} className="mx_GeneralSettingsTab_profileAvatarImg"
alt={_t("Profile picture")}/>
}
const avatarOverlayClasses = classNames({
"mx_GeneralSettingsTab_profileAvatarOverlay": true,
"mx_GeneralSettingsTab_profileAvatarOverlay_show": showOverlayAnyways,
});
let avatarHoverElement = (
<div className={avatarOverlayClasses} onClick={this._uploadAvatar}>
<span className="mx_GeneralSettingsTab_profileAvatarOverlayText">{_t("Upload profile picture")}</span>
<div className="mx_GeneralSettingsTab_profileAvatarOverlayImgContainer">
<div className="mx_GeneralSettingsTab_profileAvatarOverlayImg" />
</div>
</div>
);
const form = (
<form onSubmit={this._saveProfile} autoComplete={false} noValidate={true}>
<input type="file" ref="avatarUpload" className="mx_GeneralSettingsTab_profileAvatarUpload"
onChange={this._onAvatarChanged} accept="image/*" />
<div className="mx_GeneralSettingsTab_profile">
<div className="mx_GeneralSettingsTab_profileControls">
<p className="mx_GeneralSettingsTab_profileUsername">{this.state.userId}</p>
<Field id="profileDisplayName" label={_t("Display Name")}
type="text" value={this.state.displayName} autoComplete="off"
onChange={this._onDisplayNameChanged} />
</div>
<div className="mx_GeneralSettingsTab_profileAvatar">
{avatarElement}
{avatarHoverElement}
</div>
</div>
<AccessibleButton onClick={this._saveProfile} kind="primary"
disabled={!this.state.enableProfileSave}>
{_t("Save")}
</AccessibleButton>
</form>
);
// HACK/TODO: Using DragDropContext feels wrong, but we need it.
return (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
{form}
<ProfileSettings />
<span className="mx_SettingsTab_subheading">{_t("Flair")}</span>
<DragDropContext>