Kevin and Mary can upload a picture (#153)

* nightwatch config and write basics of kevin smoke test

* update readme and Kevin logged in successfully step

* rebase master

* minor change to the way we get the selenium server path

* chore(git): remove unneeded .gitignore lines

* add profile image upload form to profile page

* show profile picture first, on hover give option to upload new, on click show upload new form

* add profilePicture to User model

* missed a comma in the schema definition

* add placeholder profile image, display user's profile picture in header

* fix some minor linting errors - passes all tests here

* merge master

* merge master

* show profile picture first, on hover give option to upload new, on click show upload new form

* add profilePicture to User model

* missed a comma in the schema definition

* add placeholder profile image, display user's profile picture in header

* fix some minor linting errors - passes all tests here

* remove redux form in favour of material ui

* yarn lock after merge

* re-add profile picture avatar after merging with master

* run yarn

* fix upload dropzone improts

* add an h3 to main.scss

* style profile page

* add upload profile picture functionality to both front end and back end

* update upload dropzone to use our scss theme colours

* import profile image at top

* remove arrow functions from onclick in profule picture form

* fix profile picture import

* add confirmation stage to profile picture upload flow

Author: mattwills8

client/actions/user/index.js

@@ -1,10 +1,17 @@
-import { UPDATE_USER } from './types'
+import * as userTypes from './types'
 
 import apiOptionsFromState from '../../api/lib/apiOptionsFromState'
 import usersApiClient from '../../api/users'
 import ApplyForProjectException from '../../exceptions/ApplyForProjectException'
 
-export const updateUser = { type: UPDATE_USER }
+export const updateUser = { type: userTypes.UPDATE_USER }
+
+export const uploadingProfilePicture = { type: userTypes.UPLOADING_PROFILE_PICTURE }
+export const failedUploadingProfilePicture = { type: userTypes.FAILED_UPLOADING_PROFILE_PICTURE }
+export const successUploadingProfilePicture = { type: userTypes.SUCCESS_UPLOADING_PROFILE_PICTURE }
+
+export const updatingProfilePicture = { type: userTypes.UPDATE_PROFILE_PICTURE }
+export const failedUpdatingProfilePicture = { type: userTypes.FAILED_UPDATING_PROFILE_PICTURE }
 
 export default class UserActionCreator {
   static applyForProject (project, user) {
@@ -25,4 +32,37 @@ export default class UserActionCreator {
       }
     }
   }
+
+  static updateProfilePicture (file) {
+    return async (dispatch, getState) => {
+      const filename = file.name.replace(/(\.[\w\d_-]+)$/i, '_profilePicture_' + Date.now() + '$1')
+      const state = getState()
+      const apiOptions = apiOptionsFromState(state)
+
+      // try uploading image to server
+      dispatch(uploadingProfilePicture)
+      try {
+        const url = await usersApiClient.getPresignedUrlForUserProfilePicture(apiOptions, filename)
+        await usersApiClient.uploadImage(apiOptions, url, file)
+      } catch (e) {
+        console.log(e)
+        dispatch(failedUploadingProfilePicture)
+      }
+      dispatch(successUploadingProfilePicture)
+
+      // try updating user profile picture in db
+      dispatch(updatingProfilePicture)
+      try {
+        const updatedUser = await usersApiClient.updateUserProfilePictureFilename(apiOptions, filename)
+
+        dispatch({
+          ...updateUser,
+          payload: updatedUser
+        })
+      } catch (e) {
+        console.log(e)
+        dispatch(failedUpdatingProfilePicture)
+      }
+    }
+  }
 }

client/actions/user/types.js

@@ -1 +1,9 @@
 export const UPDATE_USER = 'UPDATE_USER'
+
+export const UPLOADING_PROFILE_PICTURE = 'UPLOADING_PROFILE_PICTURE'
+export const FAILED_UPLOADING_PROFILE_PICTURE = 'FAILED_UPLOADING_PROFILE_PICTURE'
+export const SUCCESS_UPLOADING_PROFILE_PICTURE = 'SUCCESS_UPLOADING_PROFILE_PICTURE'
+
+export const UPDATE_PROFILE_PICTURE = 'UPDATE_PROFILE_PICTURE_IN_DB'
+export const FAILED_UPDATING_PROFILE_PICTURE = 'FAILED_UPDATING_PROFILE_PICTURE_IN_DB'
+export const SUCCESS_UPDATING_PROFILE_PICTURE = 'SUCCESS_UPDATING_PROFILE_PICTURE_IN_DB'

client/api/users.js

@@ -30,6 +30,23 @@ const usersApiClient = {
     return apiRequest.post('/users', apiOptions, body)
   },
 
+  async getPresignedUrlForUserProfilePicture (apiOptions, imageName) {
+    const query = { imageName }
+    return apiRequest.get('/users/presignedUrl', apiOptions, query)
+  },
+
+  async uploadImage (apiOptions, url, file) {
+    return fetch(url, {
+      method: 'PUT',
+      body: file
+    })
+  },
+
+  async updateUserProfilePictureFilename (apiOptions, filename) {
+    const body = { profilePicture: filename }
+    return apiRequest.put(`/users/profilePicture`, apiOptions, body)
+  },
+
   applyForProject (apiOptions, projectId) {
     return apiRequest.post(`/users/apply/${projectId}`, apiOptions)
   },

client/components/Header/Header.js

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types'
 import AppBar from 'material-ui/AppBar'
 import Toolbar from 'material-ui/Toolbar'
 import Typography from 'material-ui/Typography'
+import Avatar from 'material-ui/Avatar'
 import Badge from 'material-ui/Badge'
 import Button from 'material-ui/Button'
-
+import defaultProfileImage from '../../images/profile-image.jpg'
 import AuthActionCreator from '../../actions/auth'
 import styles from './Header.scss'
 import ApplicationActionCreator from '../../actions/application'
@@ -35,8 +36,7 @@ class Header extends Component {
         <Link
           key="show-applications"
           to="/show-applications"
-          className={this.getLinkStyles('show-project')}
-        >
+          className={this.getLinkStyles('show-project')}>
           {applications.notSeenCounter > 0 ? (
             <Badge badgeContent={applications.notSeenCounter} color="primary">
               <span className={styles.applicationBadgeText}>APPLICATIONS</span>
@@ -56,16 +56,18 @@ class Header extends Component {
           key="logout"
           to="/"
           onClick={this.props.logout}
-          className={this.getLinkStyles()}
-        >
+          className={this.getLinkStyles()}>
           LOG OUT
         </Link>,
         <Link
           key="profile"
           to="/profile"
-          className={this.getLinkStyles('profile')}
-        >
-          PROFILE
+          className={this.getLinkStyles('profile')}>
+          <Avatar
+            src={
+              this.props.user.profilePicture || defaultProfileImage
+            }
+          />
         </Link>
       ]
       if (this.props.user.usertype === 'contact') {
@@ -74,8 +76,7 @@ class Header extends Component {
           <Link
             key="create-project"
             to="/create-project"
-            className={this.getLinkStyles('create-project')}
-          >
+            className={this.getLinkStyles('create-project')}>
             CREATE PROJECT
           </Link>,
           ...authButtons
@@ -88,8 +89,7 @@ class Header extends Component {
         <Link
           key="projects"
           to="/projects"
-          className={this.getLinkStyles('projects')}
-        >
+          className={this.getLinkStyles('projects')}>
           PROJECTS
         </Link>,
         <Link key="login" to="/login" className={this.getLinkStyles('login')}>
@@ -99,8 +99,7 @@ class Header extends Component {
           key="signup"
           to="/signup"
           component={Link}
-          className={styles.navButton}
-        >
+          className={styles.navButton}>
           SIGN UP
         </Button>
       ]

client/components/ListOfProjects/ListOfProjects.js

@@ -26,19 +26,18 @@ class ListOfProjects extends Component {
           <Project
             project={project}
             authenticated={this.props.authenticated}
-            applyForProject={this.applyToProject} />
+            applyForProject={this.applyToProject}
+          />
         </div>
       )
     })
   }
 
   render () {
     return (
-      <section className={styles.projectListSection}>
+      <section className={`${styles.projectListSection} project-list-section`}>
         <div className={styles.listContainer}>
-          <div className={styles.list}>
-            { this.renderListOfProjects() }
-          </div>
+          <div className={styles.list}>{this.renderListOfProjects()}</div>
         </div>
       </section>
     )

client/components/Profile/Profile.js

@@ -3,22 +3,35 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import ProjectActionCreator from '../../actions/project'
+import UserActionCreator from '../../actions/user'
+import ProfilePictureForm from './ProfilePictureForm/ProfilePictureForm'
 import ListOfProjects from '../ListOfProjects/ListOfProjects'
+import styles from './Profile.scss'
 
 class Profile extends Component {
   componentDidMount () {
     this.props.onLoad(this.props.user)
   }
 
   render () {
-    const title = this.props.user.usertype === 'contact'
-      ? 'Your Organization\'s Projects'
-      : 'Projects Applied For'
+    const title =
+      this.props.user.usertype === 'contact'
+        ? "Your Organization's Projects"
+        : 'Projects Applied For'
 
     return (
-      <ListOfProjects
-        title={title}
-        projects={this.props.projects} />
+      <div className={styles.profilePage}>
+        <div className={styles.profilePictureForm}>
+          <ProfilePictureForm
+            user={this.props.user}
+            updateProfilePicture={this.props.updateProfilePicture} />
+        </div>
+
+        <div className={styles.listOfProjects}>
+          <h3 className={styles.youProjects}>Your Projects</h3>
+          <ListOfProjects title={title} projects={this.props.projects} />
+        </div>
+      </div>
     )
   }
 }
@@ -31,11 +44,13 @@ function mapStateToProps (state) {
 }
 
 const mapDispatchToProps = {
-  onLoad: ProjectActionCreator.fetchProfileProjects
+  onLoad: ProjectActionCreator.fetchProfileProjects,
+  updateProfilePicture: UserActionCreator.updateProfilePicture
 }
 
 Profile.propTypes = {
   onLoad: PropTypes.func,
+  updateProfilePicture: PropTypes.func,
   projects: PropTypes.array,
   user: PropTypes.object
 }

client/components/Profile/Profile.scss

@@ -0,0 +1,34 @@
+.profilePage {
+  display: grid;
+  grid-template-columns: 30% repeat(2, 1fr);
+  grid-template-rows: auto;
+  grid-row-gap: 15px;
+  padding: 0;
+
+  h3 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .profilePictureForm {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    text-align: center;
+  }
+
+  .listOfProjects {
+    grid-column: 2 / 4;
+    grid-row: 1 / 4;
+    padding-top: 20px;
+
+    h3 {
+      margin-top: 0;
+      width: 93%;
+    }
+
+    :global(.project-list-section) {
+      padding: 0;
+    }
+  }
+}

client/components/Profile/ProfilePictureForm/ProfilePictureForm.js

@@ -0,0 +1,115 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import defaultProfileImage from '../../../images/profile-image.jpg'
+import VerticalAlignHelper from '../../shared/VerticalAlignHelper/VerticalAlignHelper'
+import UploadDropzone from '../../UploadDropzone/UploadDropzone'
+import styles from './ProfilePictureForm.scss'
+
+class ProfilePictureForm extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      showForm: false,
+      showConfirmation: false
+    }
+  }
+
+  handleFormSubmit (event) {
+    event.preventDefault()
+  }
+
+  handleUploadClick (event) {
+    this.setState({ showForm: true, showConfirmation: false })
+  }
+
+  saveFile (file) {
+    this.file = file
+    this.setState({ showConfirmation: true })
+  }
+
+  async handleConfirmationClick (event) {
+    event.preventDefault()
+    await this.uploadImage(this.file)
+    this.setState({ showForm: false, showConfirmation: false })
+  }
+
+  async uploadImage (file) {
+    if (!file) {
+      return this.setState({ showForm: true, showConfirmation: false })
+    }
+    await this.props.updateProfilePicture(file)
+  }
+
+  renderImageUpload (field) {
+    return (
+      <UploadDropzone
+        className={styles.inputImageUpload}
+        saveFile={this.saveFile.bind(this)}
+      />
+    )
+  }
+
+  renderForm () {
+    return (
+      <form
+        id="uploadProfilePictureForm"
+        className={styles.form}
+        onSubmit={this.handleFormSubmit.bind(this)} >
+        {this.renderImageUpload()}
+      </form>
+    )
+  }
+
+  renderProfilePicture () {
+    const { user } = this.props
+    return (
+      <div
+        className={styles.profilePicture}
+        onClick={this.handleUploadClick.bind(this)}>
+        <div className={styles.profilePictureInner}>
+          <img
+            className={styles.image}
+            src={
+              user.profilePicture || defaultProfileImage
+            }
+          />
+
+          <div className={styles.imageHoverCover} />
+
+          <div className={styles.uploadNewButton}>
+            <VerticalAlignHelper />
+            <button>Upload New</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const render = this.state.showForm
+      ? this.renderForm()
+      : this.renderProfilePicture()
+
+    return (
+      <div className={styles.profilePictureWrapper}>
+        <h3 className={styles.formHeading}>You</h3>
+        {render}
+        {this.state.showConfirmation && (
+          <button
+            className={styles.confirmation}
+            onClick={this.handleConfirmationClick.bind(this)}>
+            Confirm
+          </button>
+        )}
+      </div>
+    )
+  }
+}
+
+ProfilePictureForm.propTypes = {
+  user: PropTypes.object,
+  updateProfilePicture: PropTypes.func.isRequired
+}
+
+export default ProfilePictureForm