feature/#154303604 - Mary receives notification that Kevin applied to her projects (#173)

* mary notifs - initial commit

* create application

create a new application when applying to a project.

* fix lint

* remove white space

* mark as seen applications

* show application info

* remove unused class

Author: sexta13

client/App.js

@@ -27,6 +27,11 @@ const CreateProjectRestrictedLoadable = restricted(Loadable({
   loading: Loading
 }))
 
+const ApplicationsRestrictedLoadable = restricted(Loadable({
+  loader: () => import('./components/Applications/ApplicationsList'),
+  loading: Loading
+}))
+
 class App extends Component {
   componentDidMount () {
     this.props.appLoad()
@@ -46,6 +51,7 @@ class App extends Component {
           <Route path='/signup' component={SignupForm}/>
           <Route path='/landing-a' component={LandingA} />
           <Route path='/landing-c' component={LandingC} />
+          <Route path='/show-applications' component={ApplicationsRestrictedLoadable} />
         </Switch>
       </div>
     )

client/actions/application/index.js

@@ -0,0 +1,46 @@
+import apiOptionsFromState from '../../api/lib/apiOptionsFromState'
+import applicationsApiClient from '../../api/applications'
+import * as actionTypes from './types'
+
+export default class ApplicationActionCreator {
+  static getNotifications (user) {
+    return (dispatch, getState) => {
+      dispatch({type: actionTypes.FETCH_NOTIFICATIONS_START})
+      try {
+        const state = getState()
+        const apiOptions = apiOptionsFromState(state)
+        const applications = applicationsApiClient.getNotifications(apiOptions)
+        dispatch({type: actionTypes.FETCH_NOTIFICATIONS_SUCCESS, payload: applications})
+      } catch (error) {
+        dispatch({type: actionTypes.FETCH_NOTIFICATIONS_ERROR, payload: error, error: true})
+      }
+    }
+  }
+
+  static markAsSeen (applicationId) {
+    return (dispatch, getState) => {
+      try {
+        const state = getState()
+        const apiOptions = apiOptionsFromState(state)
+        const application = applicationsApiClient.markAsSeenApplication(apiOptions, applicationId)
+        dispatch({type: actionTypes.MARK_AS_SEEN_SUCCESS, payload: application})
+      } catch (error) {
+        dispatch({type: actionTypes.MARK_AS_SEEN_ERROR, payload: error, error: true})
+      }
+    }
+  }
+
+  static createApplication (project, user) {
+    return (dispatch, getState) => {
+      try {
+        const state = getState()
+        const apiOptions = apiOptionsFromState(state)
+        const applicationToCreate = { project: project.id, volunteer: user.id }
+        const application = applicationsApiClient.createApplication(apiOptions, applicationToCreate)
+        dispatch({type: actionTypes.CREATE_APPLICATION_SUCCESS, payload: application})
+      } catch (error) {
+        dispatch({type: actionTypes.CREATE_APPLICATION_ERROR, payload: error, error: true})
+      }
+    }
+  }
+}

client/actions/application/types.js

@@ -0,0 +1,8 @@
+
+export const FETCH_NOTIFICATIONS_START = 'FETCH_NOTIFICATIONS_START'
+export const FETCH_NOTIFICATIONS_SUCCESS = 'FETCH_NOTIFICATIONS_SUCCESS'
+export const FETCH_NOTIFICATIONS_ERROR = 'FETCH_NOTIFICATIONS_ERROR'
+export const CREATE_APPLICATION_SUCCESS = 'CREATE_APPLICATION_SUCCESS'
+export const CREATE_APPLICATION_ERROR = 'CREATE_APPLICATION_ERROR'
+export const MARK_AS_SEEN_SUCCESS = 'MARK_AS_SEEN_SUCCESS'
+export const MARK_AS_SEEN_ERROR = 'MARK_AS_SEEN_ERROR'

client/api/applications.js

@@ -22,6 +22,14 @@ const applicationsApiClient = {
 
   rejectApplication (apiOptions, applicationId) {
     return apiRequest.post(`/applications/${applicationId}/reject`, apiOptions)
+  },
+
+  getNotifications (apiOptions) {
+    return apiRequest.get('/applications/notifications', apiOptions)
+  },
+
+  markAsSeenApplication (apiOptions, applicationId) {
+    return apiRequest.post(`/applications/${applicationId}/markAsSeen`, apiOptions)
   }
 }
 

client/components/Applications/ApplicationsList.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ApplicationActionCreator from '../../actions/application/'
+
+class ApplicationsList extends Component {
+  componentWillReceiveProps (nextProps) {
+    this._markAsSeenApplications(nextProps.applications)
+  }
+
+  componentDidMount () {
+    this._markAsSeenApplications(this.props.applications)
+  }
+
+  _markAsSeenApplications (applications) {
+    if (Array.isArray(applications)) {
+      applications.map(application => {
+        this.props.markAsSeen(application.id)
+      })
+    }
+  }
+  renderApplicationInfo (application) {
+    return (<div> Volunteer email: {application.volunteer.email} - Project name: {application.project.name} </div>)
+  }
+  render () {
+    return (
+      Array.isArray(this.props.applications) && this.props.applications.map(this.renderApplicationInfo)
+    )
+  }
+}
+
+const mapStateToProps = (state) => ({
+  applications: state.application.applications
+})
+
+const mapDispatchToProps = {
+  markAsSeen: ApplicationActionCreator.markAsSeen
+}
+
+ApplicationsList.propTypes = {
+  applications: PropTypes.any,
+  markAsSeen: PropTypes.func
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ApplicationsList)

client/components/Header/Header.js

@@ -5,16 +5,33 @@ import PropTypes from 'prop-types'
 import AppBar from 'material-ui/AppBar'
 import Toolbar from 'material-ui/Toolbar'
 import Typography from 'material-ui/Typography'
+import Badge from 'material-ui/Badge'
 
 import AuthActionCreator from '../../actions/auth'
 import styles from './Header.scss'
+import ApplicationActionCreator from '../../actions/application'
 
 class Header extends Component {
   constructor (props) {
     super(props)
 
     this.renderHeaderButtons = this.renderHeaderButtons.bind(this)
     this.getLinkStyles = this.getLinkStyles.bind(this)
+    this.renderNotificationBadge = this.renderNotificationBadge.bind(this)
+  }
+
+  componentDidMount () {
+    this.props.getNotifications()
+  }
+
+  renderNotificationBadge () {
+    const { applications } = this.props
+    return applications &&
+    <Link key="show-applications" to="/show-applications" className={this.getLinkStyles('show-project')}>
+      {applications.notSeenCounter > 0 ? <Badge badgeContent={applications.notSeenCounter} color="primary" >
+        <span className={styles.applicationBadgeText}>APPLICATIONS</span>
+      </Badge> : <span className={styles.applicationBadgeText}>APPLICATIONS</span>}
+    </Link>
   }
 
   renderHeaderButtons () {
@@ -25,6 +42,7 @@ class Header extends Component {
       ]
       if (this.props.user.usertype === 'contact') {
         return [
+          this.renderNotificationBadge(),
           <Link key="create-project" to="/create-project" className={this.getLinkStyles('create-project')}>CREATE PROJECT</Link>,
           ...authButtons
         ]
@@ -65,6 +83,7 @@ class Header extends Component {
 
 function mapStateToProps (state) {
   return {
+    applications: state.application,
     authenticated: state.auth.authenticated,
     currentPage: state.routing.location.pathname,
     user: state.user,
@@ -73,15 +92,23 @@ function mapStateToProps (state) {
 }
 
 const mapDispatchToProps = {
-  logout: AuthActionCreator.logout
+  logout: AuthActionCreator.logout,
+  getNotifications: ApplicationActionCreator.getNotifications
 }
 
 Header.propTypes = {
   authenticated: PropTypes.bool.isRequired,
   currentPage: PropTypes.string.isRequired,
   logout: PropTypes.func.isRequired,
   user: PropTypes.object.isRequired,
-  login: PropTypes.object
+  login: PropTypes.object,
+  applications: PropTypes.shape({
+    applications: PropTypes.any,
+    fetching: PropTypes.bool,
+    notSeenCounter: PropTypes.number
+  }),
+  getNotifications: PropTypes.func
+
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Header)

client/components/Header/Header.scss

@@ -37,3 +37,6 @@
   pointer-events: none;
   opacity: 0.6;
 }
+.applicationBadgeText {
+  padding: 0 15px;
+}

client/components/Home/Home.js

@@ -72,11 +72,13 @@ function mapStateToProps (state) {
 
 const mapDispatchToProps = {
   onLoad: ProjectActionCreator.fetchAllProjects
+
 }
 
 Home.propTypes = {
   onLoad: PropTypes.func,
   projects: PropTypes.array
+
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Home)

client/components/ListOfProjects/ListOfProjects.js

@@ -5,6 +5,7 @@ import GridList, { GridListTile } from 'material-ui/GridList'
 import Chip from 'material-ui/Chip'
 
 import UserActionCreator from '../../actions/user'
+import ApplicationActionCreator from '../../actions/application'
 import Project from '../Project/Project'
 import styles from './ListOfProjects.scss'
 
@@ -13,6 +14,12 @@ class ListOfProjects extends Component {
     super(props)
 
     this.renderListOfProjects = this.renderListOfProjects.bind(this)
+    this.applyToProject = this.applyToProject.bind(this)
+  }
+
+  applyToProject (project, user) {
+    this.props.applyForProject(project, user)
+    this.props.createApplication(project, user)
   }
 
   renderListOfProjects () {
@@ -22,7 +29,7 @@ class ListOfProjects extends Component {
           <Project
             project={project}
             authenticated={this.props.authenticated}
-            applyForProject={this.props.applyForProject} />
+            applyForProject={this.applyToProject} />
 
           <div className={styles.causesContainer}>
             { project.causes.map((cause, chipIndex) => {
@@ -60,14 +67,16 @@ function mapStateToProps (state) {
 }
 
 const mapDispatchToProps = {
-  applyForProject: UserActionCreator.applyForProject
+  applyForProject: UserActionCreator.applyForProject,
+  createApplication: ApplicationActionCreator.createApplication
 }
 
 ListOfProjects.propTypes = {
   applyForProject: PropTypes.func,
   authenticated: PropTypes.bool.isRequired,
   projects: PropTypes.array,
-  title: PropTypes.string
+  title: PropTypes.string,
+  createApplication: PropTypes.func
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ListOfProjects)

client/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
 import createHistory from 'history/createBrowserHistory'
-import { createStore, combineReducers, applyMiddleware } from 'redux'
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
 import { createLogger } from 'redux-logger'
 import { Provider } from 'react-redux'
 import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'
@@ -16,6 +16,7 @@ import './scss/main.scss'
 import App from './App'
 import reducers from './reducers'
 
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 const browserHistory = createHistory()
 const navigationMiddleware = routerMiddleware(browserHistory)
 const loggerMiddleware = createLogger({
@@ -27,12 +28,14 @@ const store = createStore(
     ...reducers,
     routing: routerReducer
   }),
-  applyMiddleware(
-    navigationMiddleware,
-    loggerMiddleware,
-    promiseMiddleware,
-    thunkMiddleware,
-    localStorageMiddleware
+  composeEnhancers(
+    applyMiddleware(
+      navigationMiddleware,
+      loggerMiddleware,
+      promiseMiddleware,
+      thunkMiddleware,
+      localStorageMiddleware
+    )
   )
 )