john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Basic UI elements in place

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-27 12:16:27 -08:00
parent 5faa4600f5
commit 73b5cf6caa
49 changed files with 525 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
website/src/Profile/Profile.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import { ProfileForm } from './ProfileForm'
import { Constants, api } from '../helpers'
import { WaitDialog, MessageDialog, ChangePasswordDialog, ChangeEmailDialog } from '../Dialog'
import { WaitModal, MessageModal, ChangePasswordModal, ChangeEmailModal } from '../Modal'
import { autoBind } from 'auto-bind2'
export class Profile extends React.Component {
@@ -11,11 +11,11 @@ export class Profile extends React.Component {
const user = api.loggedInUser
this.state = {
messageDialog: null,
waitDialog: null,
changePasswordDialog: null,
changeEmailDialog: null,
progressDialog: null,
messageModal: null,
waitModal: null,
changePasswordModal: null,
changeEmailModal: null,
progressModal: null,
uploadPercent: 0,
user,
userImageUrl: api.makeImageUrl(user.imageId, Constants.bigUserImageSize)
@@ -35,32 +35,32 @@ export class Profile extends React.Component {
}
handleSaved(user) {
this.setState({ waitDialog: { message: 'Updating Profile' } })
this.setState({ waitModal: { message: 'Updating Profile' } })
api.updateUser(user).then((updatedUser) => {
this.setState({
waitDialog: null,
waitModal: null,
user: updatedUser
})
}).catch((error) => {
this.setState({
waitDialog: null,
messageDialog: { title: 'Update Error...', message: `Unable to save the profile changes. ${error.message}` }
waitModal: null,
messageModal: { title: 'Update Error...', message: `Unable to save the profile changes. ${error.message}` }
})
})
}
handleMessageDialogDismiss() {
this.setState({ messageDialog: null })
handleMessageModalDismiss() {
this.setState({ messageModal: null })
}
handleChangePassword() {
this.setState({ changePasswordDialog: true })
this.setState({ changePasswordModal: true })
}
handleSelectImage(file) {
this.setState({ progressDialog: { message: `Uploading image '${file.name}'...`, file }, uploadPercent: 0 })
this.setState({ progressModal: { message: `Uploading image '${file.name}'...`, file }, uploadPercent: 0 })
api.upload(file, this.handleProgress).then((uploadData) => {
this.setState({ progressDialog: null })
this.setState({ progressModal: null })
return api.setUserImage({
_id: api.loggedInUser._id,
imageId: uploadData.assetId,
@@ -70,14 +70,14 @@ export class Profile extends React.Component {
}).catch((error) => {
// TODO: if the upload succeeds but the setUserImage fails, delete the uploaded image
this.setState({
progressDialog: null,
messageDialog: { title: 'Upload Error...', message: `Unable to upload the file. ${error.message}` }
progressModal: null,
messageModal: { title: 'Upload Error...', message: `Unable to upload the file. ${error.message}` }
})
})
}
handleProgress(uploadData) {
if (this.state.progressDialog) {
if (this.state.progressModal) {
this.setState({ uploadPercent: Math.round(uploadData.uploadedChunks / uploadData.numberOfChunks * 100) })
return true
} else {
@@ -86,22 +86,22 @@ export class Profile extends React.Component {
}
handleUploadCancel(result) {
this.setState({ progressDialog: null })
this.setState({ progressModal: null })
}
handleChangePasswordDismiss(passwords) {
this.setState({ changePasswordDialog: false })
this.setState({ changePasswordModal: false })
if (passwords) {
this.setState({
waitDialog: { message: 'Changing Password' }
waitModal: { message: 'Changing Password' }
})
api.changePassword(passwords).then(() => {
this.setState({ waitDialog: false })
this.setState({ waitModal: false })
}).catch((error) => {
this.setState({
waitDialog: false,
messageDialog: {
waitModal: false,
messageModal: {
title: 'Changing Password Error',
message: `Unable to change password. ${error.message}.`
}
@@ -111,21 +111,21 @@ export class Profile extends React.Component {
}
handleChangeEmail() {
this.setState({ changeEmailDialog: {} })
this.setState({ changeEmailModal: {} })
}
handleChangeEmailDismiss(newEmail) {
this.setState({ changeEmailDialog: null })
this.setState({ changeEmailModal: null })
if (!newEmail) {
return
}
this.setState({
waitDialog: { message: 'Requesting Email Change...' }
waitModal: { message: 'Requesting Email Change...' }
})
api.sendConfirmEmail({ newEmail }).then(() => {
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: false,
title: 'Email Change Requested...',
message: `An email has been sent to '${newEmail}' with a link that you need to click on to finish changing your email.`
@@ -134,8 +134,8 @@ export class Profile extends React.Component {
}).catch((error) => {
this.setState({
error: true,
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: true,
title: 'Email Change Error...',
message: `Unable to request email change. ${error ? error.message : ''}`
@@ -155,16 +155,16 @@ export class Profile extends React.Component {
onChangeEmail={this.handleChangeEmail}
userImageUrl={this.state.userImageUrl} />
<MessageDialog error open={!!this.state.messageDialog}
title={this.state.messageDialog ? this.state.messageDialog.title : ''}
message={this.state.messageDialog ? this.state.messageDialog.message : ''}
onDismiss={this.handleMessageDialogDismiss} />
<MessageModal error open={!!this.state.messageModal}
title={this.state.messageModal ? this.state.messageModal.title : ''}
message={this.state.messageModal ? this.state.messageModal.message : ''}
onDismiss={this.handleMessageModalDismiss} />
<ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} />
<ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
<WaitDialog active={!!this.state.waitDialog} message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
<WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
<ChangePasswordDialog open={!!this.state.changePasswordDialog} onDismiss={this.handleChangePasswordDismiss} />
<ChangePasswordModal open={!!this.state.changePasswordModal} onDismiss={this.handleChangePasswordDismiss} />
</div>
)
}