Initial commit

website/src/Profile/Profile.js

@@ -0,0 +1,177 @@
+import React from 'react'
+import { Container } from 'semantic-ui-react'
+import { ProfileForm } from './ProfileForm'
+import { Constants, api } from '../helpers'
+import { WaitDialog, MessageDialog, ChangePasswordDialog, ProgressDialog, ChangeEmailDialog } from '../Dialog'
+import { autoBind } from 'auto-bind2'
+
+export class Profile extends React.Component {
+  constructor(props) {
+    super(props)
+    autoBind(this, (name) => (name.startsWith('handle')))
+
+    const user = api.loggedInUser
+    this.state = {
+      messageDialog: null,
+      waitDialog: null,
+      changePasswordDialog: null,
+      changeEmailDialog: null,
+      progressDialog: null,
+      uploadPercent: 0,
+      user,
+      userImageUrl: api.makeImageUrl(user.imageId, Constants.bigUserImageSize)
+    }
+  }
+
+  componentDidMount() {
+    api.addListener('newProfileImage', this.handleNewProfileImage)
+  }
+
+  componentWillUnmount() {
+    api.removeListener('newProfileImage', this.handleNewProfileImage)
+  }
+
+  handleNewProfileImage(data) {
+    this.setState({ userImageUrl: api.makeImageUrl(data.imageId, Constants.bigUserImageSize) })
+  }
+
+  handleSaved(user) {
+    this.setState({ waitDialog: { message: 'Updating Profile' } })
+    api.updateUser(user).then((updatedUser) => {
+      this.setState({
+        waitDialog: null,
+        user: updatedUser
+      })
+    }).catch((error) => {
+      this.setState({
+        waitDialog: null,
+        messageDialog: { title: 'Update Error...', message: `Unable to save the profile changes. ${error.message}` }
+      })
+    })
+  }
+
+  handleMessageDialogDismiss() {
+    this.setState({ messageDialog: null })
+  }
+
+  handleChangePassword() {
+    this.setState({ changePasswordDialog: true })
+  }
+
+  handleSelectImage(file) {
+    this.setState({ progressDialog: { message: `Uploading image '${file.name}'...`, file }, uploadPercent: 0 })
+    api.upload(file, this.handleProgress).then((uploadData) => {
+      this.setState({ progressDialog: null })
+      return api.setUserImage({
+        _id: api.loggedInUser._id,
+        imageId: uploadData.assetId,
+        bigSize: Profile.bigUserImageSize,
+        smallSize: Constants.smallUserImageSize
+      })
+    }).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}` }
+      })
+    })
+  }
+
+  handleProgress(uploadData) {
+    if (this.state.progressDialog) {
+      this.setState({ uploadPercent: Math.round(uploadData.uploadedChunks / uploadData.numberOfChunks * 100) })
+      return true
+    } else {
+      return false
+    }
+  }
+
+  handleUploadCancel(result) {
+    this.setState({ progressDialog: null })
+  }
+
+  handleChangePasswordDismiss(passwords) {
+    this.setState({ changePasswordDialog: false })
+
+    if (passwords) {
+      this.setState({
+        waitDialog: { message: 'Changing Password' }
+      })
+      api.changePassword(passwords).then(() => {
+        this.setState({ waitDialog: false })
+      }).catch((error) => {
+        this.setState({
+          waitDialog: false,
+          messageDialog: {
+            title: 'Changing Password Error',
+            message: `Unable to change password. ${error.message}.`
+          }
+        })
+      })
+    }
+  }
+
+  handleChangeEmail() {
+    this.setState({ changeEmailDialog: {} })
+  }
+
+  handleChangeEmailDismiss(newEmail) {
+    this.setState({ changeEmailDialog: null })
+    if (!newEmail) {
+      return
+    }
+    this.setState({
+      waitDialog: { message: 'Requesting Email Change...' }
+    })
+    api.sendConfirmEmail({ newEmail }).then(() => {
+      this.setState({
+        waitDialog: null,
+        messageDialog: {
+          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.`
+        }
+      })
+    }).catch((error) => {
+      this.setState({
+        error: true,
+        waitDialog: null,
+        messageDialog: {
+          error: true,
+          title: 'Email Change Error...',
+          message: `Unable to request email change. ${error ? error.message : ''}`
+        }
+      })
+    })
+  }
+
+  render() {
+    return (
+      <Container>
+        <ProfileForm
+          user={this.state.user}
+          onSaved={this.handleSaved}
+          onSelectImage={this.handleSelectImage}
+          onChangePassword={this.handleChangePassword}
+          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} />
+
+        <ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} />
+
+        <WaitDialog active={!!this.state.waitDialog} message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
+
+        <ChangePasswordDialog open={!!this.state.changePasswordDialog} onDismiss={this.handleChangePasswordDismiss} />
+
+        <ProgressDialog open={!!this.state.progressDialog}
+          message={this.state.progressDialog ? this.state.progressDialog.message : ''}
+          percent={this.state.uploadPercent}
+          onCancel={this.handleUploadCancel} />
+      </Container>
+    )
+  }
+}