Resolved merge conflicts

relates #14

client/package.json

@@ -10,6 +10,7 @@
     "react-scripts": "1.1.0",
     "react-select": "^1.2.1",
     "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
     "tachyons": "^4.9.1",
     "tachyons-cli": "^1.2.0"
   },

client/public/style.css

@@ -1,7 +1,8 @@
 body {
   background-color: #17bebb;
 }
-h1 {
+h1,
+label {
   font-family: 'Arvo', serif;
 }
 ul {
@@ -13,6 +14,10 @@ ul {
 .bg-orange {
   background-color: #e4572e;
 }
+
 .bg-green {
   background-color: #17bebb;
 }
+.custom-font {
+  font-family: 'Arvo', serif;
+}

client/src/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter, Route } from 'react-router-dom';
 import Landing from './components/Landing';
 import Navbar from './components/Navbar';
 import CategoryForm from './containers/CategoryForm';
+import SymptomsForm from './containers/SymptomsForm';
 import LocationForm from './containers/LocationForm';
 
 const App = () => {
@@ -13,6 +14,7 @@ const App = () => {
         <Route exact path="/" component={Landing} />
         <Route exact path="/categories" component={CategoryForm} />
         <Route exact path="/location" component={LocationForm} />
+        <Route exact path="/symptoms" component={SymptomsForm} />4
       </div>
     </BrowserRouter>
   );

client/src/actions/index.js

@@ -1,9 +1,24 @@
-import { FETCH_CATEGORY, SELECT_LOCATION } from './types';
+
+import { FETCH_CATEGORY, CHOSEN_SYMPTOMS, FETCH_SYMPTOMS,SELECT_LOCATION } from "./types";
+
 
 export const chooseCategory = category => {
   return { type: FETCH_CATEGORY, payload: category };
 };
 
+
 export const chooseLocation = location => {
   return { type: SELECT_LOCATION, payload: location };
+
+export const chooseSymptoms = symptoms => {
+  const chosenSymptoms = Object.keys(symptoms);
+  const symptomsSelected = chosenSymptoms.filter(item => {
+    return symptoms[item] === true;
+  })
+  return { type: CHOSEN_SYMPTOMS, payload: symptomsSelected };
+};
+
+export const renderSymptoms = category => {
+  return { type: FETCH_SYMPTOMS, payload: category }
+
 };

client/src/actions/types.js

@@ -1,2 +1,4 @@
-export const FETCH_CATEGORY = 'FETCH_CATEGORY';
 export const SELECT_LOCATION = 'SELECT_LOCATION';
+export const FETCH_CATEGORY = 'FETCH_CATEGORY';
+export const CHOSEN_SYMPTOMS = 'CHOSEN_SYMPTOMS';
+export const FETCH_SYMPTOMS = 'FETCH_SYMPTOMS';

client/src/components/Landing.js

@@ -1,19 +1,27 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const Landing = () => {
   return (
     <div>
       <header className="tc pv4 pv5-ns">
         <h1 className="white pt5 fw3 f1">EasyRep</h1>
-        <h2 className="white pa1 fw1 f2">Feel safe while making a difference</h2>
+        <h2 className="white pa1 fw1 f2">
+          Feel safe while making a difference
+        </h2>
       </header>
       <div className="tc">
-        <a href="/" className="f2 link dim br3 ph5 pv3 mb2 dib white bg-orange">
+        <Link
+          className="f2 link dim br3 ph5 pv3 mb2 dib white bg-orange"
+          to="/categories"
+        >
           REPORT
-        </a>
+        </Link>
       </div>
       <div className="tc pv4">
-        <h3 className="white f4 fw3">Taking action is fast, anonymous and EASY!</h3>
+        <h3 className="white f4 fw3">
+          Taking action is fast, anonymous and EASY!
+        </h3>
       </div>
       <div className="tc">
         <a href="/" className="link f3">

client/src/containers/CategoryForm.js

@@ -1,34 +1,38 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
+import { Redirect } from 'react-router-dom';
 import * as actions from "../actions";
 
 class CategoryForm extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
+    this.state = {
+      redirect: false
+    };
 
     this.selectCategory = this.selectCategory.bind(this);
   }
 
   selectCategory(event) {
     event.preventDefault();
     const categorySelected = event.target.category.value;
-
     this.props.changeCategory(categorySelected);
+    this.props.changeSymptoms(categorySelected);
+    this.setState({ redirect: true });
   }
 
   renderList() {
     return this.props.categories.map(category => {
       return (
         <li key={category.name}>
-          <div className="fl w-50 w-50-ns pa2 ">
+          <div className="fl w-50 w-50-ns pa2">
             <form onSubmit={this.selectCategory}>
-              <label className="f4 black">{category.name}</label>
+              <label className="f4 white">{category.name}</label>
               <br />
               <input type="hidden" name="category" value={category.name} />
               <button
-                className="hover-bg-orange bg-white pv4 h4 w4 br4"
+                className="hover-bg-orange bg-white pv2 h4 w4 br4"
                 type="submit"
               >
                 <img
@@ -45,6 +49,10 @@ class CategoryForm extends Component {
   }
 
   render() {
+    if (this.state.redirect) {
+      return <Redirect to="/symptoms" />
+    }
+
     return (
       <div className="mw7 center ph3-ns">
         <div className="cf ph2-ns">
@@ -60,7 +68,8 @@ const mapStateToProps = ({ categories }) => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  changeCategory: category => dispatch(actions.chooseCategory(category))
+  changeCategory: category => dispatch(actions.chooseCategory(category)),
+  changeSymptoms: category => dispatch(actions.renderSymptoms(category))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(CategoryForm);

client/src/containers/SymptomsForm.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import * as actions from '../actions';
+
+class SymptomsForm extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      symptoms: {}
+    }
+
+    this.selectSymptoms = this.selectSymptoms.bind(this);
+    this.sendSymptoms = this.sendSymptoms.bind(this);
+  }
+
+  componentDidMount() {
+    const symptoms = this.props.symptoms.reduce((res, item) => {
+      res[item] = false;
+      return res;
+    }, {});
+
+    this.setState({ symptoms });
+  }
+
+  renderSymptoms(category) {
+    return this.props.symptoms.map(symptom => {
+      return (
+        <div key={symptom} className="pv1-ns pv2">
+      <input type="checkbox"
+        className="ml6-ns pl2-ns"
+        name="symptom"
+        value={symptom}
+        onChange={this.selectSymptoms} />
+
+      <span className="custom-font white f4 ml3-ns pl2 tj">{symptom}</span>
+
+    </div>
+  );
+    });
+  }
+
+  selectSymptoms(event) {
+    const symptom = event.target.value;
+    this.setState({ symptoms: {...this.state.symptoms, [symptom]: event.target.checked }})
+  }
+
+  sendSymptoms() {
+    this.props.chooseSymptoms(this.state.symptoms);
+  }
+
+  render() {
+
+    return (
+      <div className="mw6 mw7-ns center ph3 ph3-ns">
+        <form className="pv3 pv4-ns ml4 pl4-ns">
+          {this.renderSymptoms(this.props.category)}
+        </form>
+        <div className="ph3">
+        <Link
+          className="f6 fw6 ttu tracked link dim br3 ph3 pv2 mb2 dib orange bg-white fl"
+          to="/categories"
+        >
+          Back
+        </Link>
+        <Link
+          className="f6 fw6 ttu tracked link dim br3 ph3 pv2 mb2 dib orange bg-white fr"
+          onClick={this.sendSymptoms}
+          to="/location"
+        >
+          Next
+        </Link>
+      </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({ symptoms, category }) => ({ symptoms, category });
+
+const mapDispatchToProps = dispatch => ({
+  chooseSymptoms: symptoms => dispatch(actions.chooseSymptoms(symptoms))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SymptomsForm);

client/src/index.js

@@ -2,11 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
+import logger from 'redux-logger';
 import reducers from './reducers';
 
 import App from './App';
 
-const store = createStore(reducers, {}, applyMiddleware());
+const store = createStore(reducers, {}, applyMiddleware(logger));
 
 ReactDOM.render(
   <Provider store={store}>

client/src/reducers/category_list.js

@@ -1,39 +1,39 @@
-import airPollution from "../icons/1.png";
-import waterPollution from "../icons/2.png";
-import wasteDisposal from "../icons/3.png";
-import badInfra from "../icons/4.png";
+import airPollution from '../icons/1.png';
+import waterPollution from '../icons/2.png';
+import wasteDisposal from '../icons/3.png';
+import badInfra from '../icons/4.png';
 
 export default function() {
   return [
     {
-      name: "Waste Disposal",
+      name: 'Waste Disposal',
       icon: wasteDisposal,
-      alt: "Waste Burning icon"
+      alt: 'Waste Burning icon'
     },
     {
-      name: "Air Pollution",
+      name: 'Air Pollution',
       icon: airPollution,
-      alt: "Air Pollution icon"
+      alt: 'Air Pollution icon'
     },
     {
-      name: "Water Pollution",
+      name: 'Water Pollution',
       icon: waterPollution,
-      alt: "Water Pollution icon"
+      alt: 'Water Pollution icon'
     },
     {
-      name: "Bad Infrastructures",
+      name: 'Bad Infrastructures',
       icon: badInfra,
-      alt: "Bad Infrastructures icon"
+      alt: 'Bad Infrastructures icon'
     },
     {
-      name: "Waste Burning",
-      icon: "",
-      alt: "Waste Burning icon"
+      name: 'Waste Burning',
+      icon: '',
+      alt: 'Waste Burning icon'
     },
     {
-      name: "Noise",
-      icon: "",
-      alt: "Noise icon"
+      name: 'Noise',
+      icon: '',
+      alt: 'Noise icon'
     }
   ];
 }

client/src/reducers/chosenSymptomsReducer.js

@@ -0,0 +1,10 @@
+import { CHOSEN_SYMPTOMS } from '../actions/types';
+
+export default function(state = {}, action) {
+  switch (action.type) {
+    case CHOSEN_SYMPTOMS:
+      return action.payload;
+    default:
+      return state;
+  }
+}

client/src/reducers/index.js

@@ -2,9 +2,13 @@ import { combineReducers } from 'redux';
 import categoryList from './category_list';
 import categoryReducer from './categoryReducer';
 import locationReducer from './locationReducer';
+import symptomsReducer from './symptomsReducer';
+import chosenSymptomsReducer from './chosenSymptomsReducer';
 
 export default combineReducers({
   categories: categoryList,
   category: categoryReducer,
   location: locationReducer,
+  symptoms: symptomsReducer,
+  chosenSymptoms: chosenSymptomsReducer,
 });

client/src/reducers/symptomsReducer.js

@@ -0,0 +1,34 @@
+import { FETCH_SYMPTOMS } from '../actions/types';
+
+export default (state = [], action) => {
+  switch (action.type) {
+    case FETCH_SYMPTOMS:
+      const symptoms = {
+        'Waste Burning': ['Bad smell in the streets', 'Risk of fire'],
+        'Water Pollution': [
+          'Sewage is overflooding',
+          'Bad smells coming from sewage'
+        ],
+        Noise: [
+          'Loud construction noise even late at night',
+          "Kids can't sleep because of noise"
+        ],
+        'Waste Disposal': [
+          'No room to park because of the garbage',
+          'Not enough garbage collection'
+        ],
+        'Air Pollution': [
+          'Can not breathe because of the dust',
+          'Need to wear masks'
+        ],
+        'Bad Infrastructures': [
+          'Roads are dangerous because of holes',
+          'I got injured'
+        ]
+      };
+
+      return Object.values(symptoms[action.payload]);
+    default:
+      return state;
+  }
+};