Application/#154707979 (#196)

* When mary log in and go to profile page, she will see a list of her own projects. When she click one, she will see the application detail(applicant's email and application date)

merge with master branch

* When mary log in and go to profile page, she will see a list of her own projects. When she click one, she will see the application detail(applicant's email and application date)

* apply first

* When mary log in and go to profile page, she will see a list of her own projects. When she click one, she will see the application detail(applicant's email and application date)

* apply second

* When mary log in and go to profile page, she will see a list of her own projects. When she click one, she will see the application detail(applicant's email and application date)

* When mary log in and go to profile page, she will see a list of her own projects. When she click one, she will see the application detail(applicant's email and application date)

* When mary log in and go to profile page, she will see a list of her own projects. When she click one, she will see the application detail(applicant's email and application date)

* When mary log in and go to profile page, she will see a list of her own projects. When she click one, she will see the application detail(applicant's email and application date)

Author: Mongolialady

client/App.js

@@ -15,6 +15,7 @@ import SignupForm from './components/SignupForm/SignupForm'
 import Version from './components/Version/Version'
 import LandingA from './components/LandingA/LandingA'
 import LandingC from './components/LandingC/LandingC'
+import ProjectDetail from './components/Project/ProjectDetail'
 import Footer from './components/LandingF/LandingF'
 import LandingB from './components/LandingB/LandingB'
 
@@ -57,6 +58,7 @@ class App extends Component {
           <Route path='/landing-f' component={Footer} />
           <Route path='/landing-b' component={LandingB} />
           <Route path='/show-applications' component={ApplicationsRestrictedLoadable} />
+          <Route path='/projects/:id' component={ProjectDetail} />
         </Switch>
       </div>
     )

client/actions/project/index.js

@@ -64,4 +64,21 @@ export default class ProjectActionCreator {
       }
     }
   }
+
+  static fetchProjectById (id) {
+    console.log('show applications 3')
+    return (dispatch, getState) => {
+      dispatch(ProjectActionCreator.fetching())
+
+      try {
+        const state = getState()
+        const apiOptions = apiOptionsFromState(state)
+        const project = projectsApiClient.getProjectById(apiOptions, id)
+        dispatch(ProjectActionCreator.received(project))
+      } catch (e) {
+        console.trace(e)
+        dispatch(ProjectActionCreator.failed())
+      }
+    }
+  }
 }

client/api/lib/apiRequest.js

@@ -29,7 +29,7 @@ async function apiRequest (apiOptions, options) {
 
 function getQueryString (query = {}) {
   const encode = encodeURIComponent
-  const keys = Object.keys(query)
+  const keys = Object.keys(query || {})
 
   return keys.length > 0
     ? '?' + keys.map(k => encode(k) + '=' + encode(query[k])).join('&')

client/api/projects.js

@@ -24,6 +24,10 @@ const projectsApiClient = {
       body: JSON.stringify({ name, causes, technologies, organization })
     }
     return fetch('/api/projects/', options)
+  },
+
+  getProjectById (apiOptions, id) {
+    return apiRequest.get('/projects/' + id, apiOptions, null)
   }
 }
 

client/components/Project/Project.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import Chip from 'material-ui/Chip'
+import {Link} from 'react-router-dom'
 import styles from './Project.scss'
 
 class Project extends Component {
@@ -62,7 +63,9 @@ class Project extends Component {
         onClick={this.handleClick.bind(this)}>
         <img className={styles.image} src={project.image || require('../../images/logo.png')} />
         <div className={styles.projectContent}>
-          <div className={styles.projectTitle}>{project.name}</div>
+          <div className={styles.projectTitle}>
+            <Link to={`/projects/${project.id}`}>{project.name}</Link>
+          </div>
           <div>{isContact && isProfile ? null : project.organization.name || 'Organization Name'}</div>
           <div>{this.renderProjectApplicationResult(project)}</div>
         </div>

client/components/Project/ProjectDetail.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import ProjectActionCreator from '../../actions/project'
+import PropTypes from 'prop-types'
+import {Link} from 'react-router-dom'
+import Card, {CardContent} from 'material-ui/Card'
+import Typography from 'material-ui/Typography'
+import styles from './ProjectDetail.scss'
+
+class ProjectDetail extends Component {
+  constructor (args) {
+    super(args)
+    this.state = {projectId: this.props.match.params.id}
+  }
+
+  componentDidMount () {
+    this.props.fetchProjectById(this.state.projectId)
+  }
+
+  renderApplication (application) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography>
+            Applicant: {application.volunteer.email}
+          </Typography>
+          <Typography expandable={true}>
+            Message: {application.message}
+          </Typography>
+          <Typography>
+            Submitted at: {application.createdAt}
+          </Typography>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  render () {
+    const project = this.props.project || {}
+    const applications = project.applications || []
+    return applications.length === 0 ? (
+      <div>
+        <h1>No one had applied this project</h1>
+        <p className={styles.goBack}>
+          <Link to={`/profile`}>Go Back</Link>
+        </p>
+      </div>) : (
+      <div>
+        <h1>The following applicants applied this project:</h1>
+        <ul>
+          {
+            applications.map((app) => <li key={app.id}> {this.renderApplication(app)} </li>)
+          }
+        </ul>
+        <p className={styles.goBack}>
+          <Link to={`/profile`} >Go Back</Link>
+        </p>
+      </div>)
+  }
+}
+
+const mapDispatchToProps = {
+  fetchProjectById: ProjectActionCreator.fetchProjectById
+}
+
+const mapStateToProperties = (state) => {
+  return {project: state.project.project || {}}
+}
+
+ProjectDetail.propTypes = {
+  project: PropTypes.object,
+  fetchProjectById: PropTypes.func,
+  match: PropTypes.object
+}
+
+export default connect(mapStateToProperties, mapDispatchToProps)(ProjectDetail)

client/components/Project/ProjectDetail.scss

@@ -0,0 +1,5 @@
+@import '../../scss/partials/partials';
+
+.goBack {
+  margin-top: 20px;
+}

client/reducers/projectReducer.js

@@ -13,7 +13,12 @@ export default function (state = initialState.projects, action) {
       return { ...state, fetching: true }
 
     case RECEIVED_PROJECTS:
-      return { ...state, fetching: false, projects: payload }
+      const value = payload || {}
+      if (value instanceof Array) {
+        return {...state, fetching: false, projects: payload}
+      } else {
+        return {...state, fetching: false, project: payload}
+      }
 
     case FAILED_PROJECTS:
       return { ...state, fetching: false }

server/routes/controllers/projects.js

@@ -52,8 +52,10 @@ export default {
   },
 
   async projectById (req, res, next, id) {
-    const project = await this.Projects.findById(id)
-
+    const project = await this.Projects.findById(id).populate({
+      path: 'applications',
+      populate: {path: 'volunteer'}
+    })
     if (!project) throw new NotFoundError()
 
     req.project = project