Feature/#154707884 - User sees list of filters on home page listings (#169)

* chore(client): refactor constants into shared

* feature(client): add filters

* chore(client): export constants on their own as well

* chore(e2e): try to harden e2e tests even more

Author: timdavish

client/components/CreateProjectForm/CreateProjectForm.js

@@ -11,26 +11,7 @@ import projectsApiClient from '../../api/projects'
 import UploadDropzone from '../UploadDropzone/UploadDropzone'
 import styles from './CreateProjectForm.scss'
 import { buttonSubmit } from './createProjectFormJss'
-
-const causes = [
-  'Animal',
-  'Environment',
-  'International NGO',
-  'Health',
-  'Education',
-  'Arts & Culture',
-  'Other'
-]
-
-const technologies = [
-  'JavaScript',
-  'Ruby',
-  'Java',
-  'Python',
-  'PHP',
-  'C++',
-  'Other'
-]
+import { causes, technologies } from '../shared/constants'
 
 class CreateProjectForm extends Component {
   constructor (props, context) {

client/components/Home/Home.js

@@ -1,20 +1,63 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
+import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import Checkbox from 'material-ui/Checkbox'
+import { FormGroup, FormLabel, FormControlLabel } from 'material-ui/Form'
 
 import ProjectActionCreator from '../../actions/project'
 import ListOfProjects from '../ListOfProjects/ListOfProjects'
+import styles from './Home.scss'
+import { causes, technologies } from '../shared/constants'
 
 class Home extends Component {
+  constructor (props) {
+    super(props)
+    this.handleCheckbox = this.handleCheckbox.bind(this)
+    this.renderList = this.renderList.bind(this)
+    this.state = {
+      filters: {}
+    }
+  }
+
   componentDidMount () {
     this.props.onLoad()
   }
 
+  handleCheckbox (event, checked) {
+    console.log(event.target.name, event.target.value, checked)
+  }
+
+  renderList (items, type) {
+    return items.map((item, index) => {
+      return (
+        <FormControlLabel key={index}
+          control={ <Checkbox name={type} value={item} onChange={this.handleCheckbox} /> }
+          label={item}
+        />
+      )
+    })
+  }
+
   render () {
     return (
-      <ListOfProjects
-        title={'Click To Apply'}
-        projects={this.props.projects} />
+      <Fragment>
+        <section className={styles.filterSection}>
+          <h1>{'Filters'}</h1>
+          <FormLabel>Causes</FormLabel>
+          <FormGroup row>
+            { this.renderList(causes, 'causes') }
+          </FormGroup>
+
+          <FormLabel>Technologies</FormLabel>
+          <FormGroup row>
+            { this.renderList(technologies, 'technologies') }
+          </FormGroup>
+        </section>
+
+        <ListOfProjects
+          title={'Click To Apply'}
+          projects={this.props.projects} />
+      </Fragment>
     )
   }
 }

client/components/Home/Home.scss

@@ -0,0 +1,4 @@
+.filterSection {
+  padding: 0 60px;
+  display: grid;
+}

client/components/shared/constants/causes.js

@@ -0,0 +1,16 @@
+export const ANIMAL = 'Animal'
+export const ENVIRONMENT = 'Environment'
+export const INTERNATIONAL_NGO = 'International NGO'
+export const HEALTH = 'Health'
+export const EDUCATION = 'Education'
+export const ARTS_CULTURE = 'Arts & Culture'
+
+export default [
+  ANIMAL,
+  ENVIRONMENT,
+  INTERNATIONAL_NGO,
+  HEALTH,
+  EDUCATION,
+  ARTS_CULTURE,
+  'Other'
+]

client/components/shared/constants/index.js

@@ -0,0 +1,2 @@
+export { default as causes } from './causes'
+export { default as technologies } from './technologies'

client/components/shared/constants/technologies.js

@@ -0,0 +1,16 @@
+export const JAVASCRIPT = 'JavaScript'
+export const RUBY = 'Ruby'
+export const JAVA = 'Java'
+export const PYTHON = 'Python'
+export const PHP = 'PHP'
+export const CPLUSPLUS = 'C++'
+
+export default [
+  JAVASCRIPT,
+  RUBY,
+  JAVA,
+  PYTHON,
+  PHP,
+  CPLUSPLUS,
+  'Other'
+]

e2e/step_definitions/steps.js

@@ -26,18 +26,25 @@ Then(/^I am on the "(.*)" page$/, async selector => {
 
 When(/^I click the "(.*)" header link$/, async selector => {
   const header = client.page.header()
-  await header.click(`@${selector}Button`)
+  const button = `@${selector}Button`
+  await header.waitForElementVisible(button, 2500)
+  await header.click(button)
 })
 
 When(/^I login with the login details (.*?) (.*?)$/, async (email, password) => {
   const login = client.page.login()
+  await login.waitForElementVisible('@loginForm', 2500)
+  await login.waitForElementVisible('@emailField', 2500)
   login.setValue('@emailField', email)
+  await login.waitForElementVisible('@passwordField', 2500)
   login.setValue('@passwordField', password)
   await login.submitForm('@loginForm')
 })
 
 When(/^I create a project with the project details (.*?)$/, async name => {
   const createProject = client.page.createProject()
+  await createProject.waitForElementVisible('@createProjectForm', 2500)
+  await createProject.waitForElementVisible('@nameField', 2500)
   createProject.setValue('@nameField', name)
   await createProject.submitForm('@createProjectForm')
 })