Merge pull request #155 from wbprice/limit-questions-to-survey

User flow, limit questions to survey

api/controllers/ViewController.js

@@ -23,6 +23,15 @@ module.exports = class ViewController extends Controller {
         });
     }
 
+    surveyList(request, reply) {
+        getLayout(request, 'client', function(error, html) {
+            if (error) {
+                // handle error
+            }
+            reply(html);
+        });
+    }
+
     category(request, reply) {
         getLayout(request, 'client', function(error, html) {
             if (error) {

config/dev-fixtures/question-fixtures.js

@@ -15,39 +15,38 @@ const questions = [
     },
     {
         text: 'What do you think about clouds',
-        CategoryId: 4
+        CategoryId: 1
     }
 ];
 
 module.exports = {
 
     load: (app) => {
         return app.orm.Question.count({})
-    .then(count => {
-        if (count > 0) {
-            return [];
-        }
-        else {
-        // For all surveys, create three questions.
-            return app.orm.Survey.findAll({where: {}})
-        .then(surveys => {
-            surveys.map((survey, index) => {
-                return Promise.all(
-              questions.map(question => {
-                  return app.orm.Question.create(
-                  Object.assign({}, question, {SurveyId: survey.toJSON().id})
-                );
-              })
-            );
-            });
-        })
-        // Create Questions
-        .then(questions => {
-            app.log.info('Questions created.');
-            return questions;
+        .then(count => {
+            if (count > 0) {
+                return [];
+            }
+            else {
+                // For all surveys, create three questions.
+                return app.orm.Survey.findAll({where: {}})
+                .then(surveys => {
+                    surveys.map((survey, index) => {
+                        return Promise.all(
+                            questions.map(question => {
+                                return app.orm.Question.create(
+                                Object.assign({}, question, {SurveyId: survey.toJSON().id})
+                                );
+                            })
+                        );
+                    });
+                })
+                // Create Questions
+                .then(questions => {
+                    app.log.info('Questions created.');
+                    return questions;
+                });
+            }
         });
-        }
-    });
     }
-
 };

config/routes.js

@@ -21,13 +21,23 @@ module.exports = [
     {
         method: 'GET',
         path: '/survey',
-        handler: 'ViewController.survey'
+        handler: 'ViewController.surveyList'
+    },
+    {
+        method: 'GET',
+        path: '/survey/{id}',
+        handler: 'ViewController.category'
     },
     {
         method: 'GET',
-        path: '/category',
+        path: '/survey/{id}/category',
         handler: 'ViewController.category'
     },
+    {
+        method: 'GET',
+        path: '/survey/{id}/questions',
+        handler: 'ViewController.survey'
+    },
     {
         method: 'GET',
         path: '/admin/{view*}',

frontend/js/components/atoms/Card.js

@@ -7,12 +7,20 @@ class Card extends Component {
     }
 
     render() {
+        const cardStyle = {};
+
+        if (this.props.onClick) {
+            cardStyle.cursor = 'pointer';
+        }
+
         return (
-      <section
-        className={`card ${this.props.className}`}
-        style={this.props.style}>
-        {this.props.children}
-      </section>
+            <section
+                style={cardStyle}
+                className={`card ${this.props.className}`}
+                style={this.props.style}
+                onClick={this.props.onClick}>
+                {this.props.children}
+            </section>
         );
     }
 
@@ -21,7 +29,8 @@ class Card extends Component {
 Card.propTypes = {
     style: PropTypes.object,
     children: PropTypes.any,
-    className: PropTypes.string
+    className: PropTypes.string,
+    onClick: PropTypes.func
 };
 
 export default Card;

frontend/js/components/ecosystems/CategoryList.js

@@ -6,6 +6,7 @@ import update from 'immutability-helper';
 
 import CategoryListItem from './../organisms/CategoryListItem';
 import { CategoryListItemNameStatic } from './../organisms/CategoryListItemName';
+import { gotoRoute } from './../../redux/actions/router-actions';
 
 class CategoryList extends Component {
 
@@ -52,31 +53,44 @@ class CategoryList extends Component {
         }));
     }
 
+    back() {
+        gotoRoute('/');
+    }
+
+    next() {
+        gotoRoute(`/survey/${this.props.surveyId}/questions`);
+    }
+
     render() {
         return (
-            <div className="category-list">
-                <Preview generator={this.generatePreview.bind(this)} />
-                {
-                    this.state.categories.map((categoryItem, index) => {
-                        return (
-                            <CategoryListItem
-                                key={categoryItem.id}
-                                index={index}
-                                id={categoryItem.id}
-                                name={categoryItem.name}
-                                icon={categoryItem.icon}
-                                moveCard={this.moveCard} />
-                        );
-                    })
-                }
+            <div>
+                <p>Sort these categories in order of importance to you.</p>
+                <div className="category-list">
+                    <Preview generator={this.generatePreview.bind(this)} />
+                    {
+                        this.state.categories.map((categoryItem, index) => {
+                            return (
+                                <CategoryListItem
+                                    key={categoryItem.id}
+                                    index={index}
+                                    id={categoryItem.id}
+                                    name={categoryItem.name}
+                                    icon={categoryItem.icon}
+                                    moveCard={this.moveCard} />
+                            );
+                        })
+                    }
+                </div>
+                <button onClick={this.next.bind(this)}>OK</button>
             </div>
         );
-    }}
-
-
+    }
+}
 
 CategoryList.propTypes = {
-    categories: PropTypes.array
+    categories: PropTypes.array,
+    surveyId: PropTypes.string,
+    dispatch: PropTypes.func
 };
 
 export default DragDropContext(MultiBackend(HTML5toTouch))(CategoryList);

frontend/js/components/environments/Category.js

@@ -22,9 +22,10 @@ class Category extends Component {
 
     render() {
         const categories = this.props.category.categories;
-
         return (
             <CategoryList
+                surveyId={this.props.router.params.id}
+                dispatch={this.props.dispatch}
                 categories={categories.sort((catA, catB) => {
                     return catA.rank - catB.rank;
                 })} />
@@ -37,7 +38,9 @@ Category.propTypes = {
     ui: PropTypes.object,
     login: PropTypes.object,
     survey: PropTypes.object,
-    dispatch: PropTypes.func
+    dispatch: PropTypes.func,
+    params: PropTypes.object,
+    router: PropTypes.object
 };
 
 export default connect(

frontend/js/components/environments/Survey.js

@@ -21,7 +21,7 @@ class Survey extends Component {
     }
 
     componentDidMount() {
-        this.props.dispatch(fetchSurveyQuestions());
+        this.props.dispatch(fetchSurveyQuestions(this.props.params.id));
     }
 
     gotoPrevQuestion() {
@@ -33,7 +33,7 @@ class Survey extends Component {
 
     gotoNextQuestion() {
         if (this.props.survey.questionIndex >= this.props.survey.questions.length - 1) {
-            return gotoRoute('/results');
+            return gotoRoute('/results/publicPhraseOne');
         }
         return this.props.dispatch(gotoNextQuestion());
     }
@@ -62,7 +62,8 @@ class Survey extends Component {
 
 Survey.propTypes = {
     dispatch: PropTypes.func,
-    survey: PropTypes.object
+    survey: PropTypes.object,
+    params: PropTypes.object
 };
 
 module.exports = connect(

frontend/js/components/environments/SurveySelector.js

@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { gotoRoute } from './../../redux/actions/router-actions';
 
 import { connect } from 'react-redux';
 
@@ -12,19 +13,30 @@ class SurveySelector extends Component {
         super(props);
     }
 
+    onClickSurveyCard(id) {
+        gotoRoute(`survey/${id}`);
+    }
+
     render() {
         return (
             <section>
-                <Card>
-                    <pre>Survey Selector</pre>
-                </Card>
+                {this.props.pickSurvey.surveys.map((survey, index) => {
+                    return (
+                        <Card
+                            key={index}
+                            onClick={this.onClickSurveyCard.bind(this, survey.id)}>
+                            <h2>{survey.name}</h2>
+                            <button>Take it!</button>
+                        </Card>
+                    );
+                })}
             </section>
         );
     }
 }
 
 SurveySelector.propTypes = {
-    surveys: PropTypes.array
+    pickSurvey: PropTypes.object
 };
 
 export default connect(

frontend/js/components/organisms/AppLogo.js

@@ -10,7 +10,7 @@ class AppLogo extends Component {
         <IconButton
           onClick={this.props.onClick}
           icon="menu" />
-        <a href="#">
+        <a href="/">
           <img alt="OKCandidate" src="/dist/images/okcandidate-logo.svg" />
         </a>
       </section>

frontend/js/redux/actions/pick-survey-actions.js

@@ -1,5 +1,6 @@
 import fetch from 'isomorphic-fetch';
 import checkStatus from './../utils/checkStatus';
+import { gotoRoute } from './../actions/router-actions';
 
 export const FETCH_SURVEYS_BY_LOCATION_REQUEST = 'FETCH_SURVEYS_BY_LOCATION_REQUEST';
 export const FETCH_SURVEYS_BY_LOCATION_SUCCESS = 'FETCH_SURVEYS_BY_LOCATION_SUCCESS';
@@ -33,6 +34,7 @@ export function fetchSurveysByLocation(coordinates) {
         .then(response => response.json())
         .then(response => {
             dispatch(fetchSurveysByLocationSuccess(response));
+            gotoRoute('/survey');
         })
         .catch(error => dispatch(fetchSurveysByLocationFailure(error)));
     };

frontend/js/redux/actions/survey-actions.js

@@ -1,5 +1,6 @@
 import fetch from 'isomorphic-fetch';
 import checkStatus from './../utils/checkStatus';
+import uniqBy from 'lodash.uniqby';
 
 export const FETCH_SURVEY_QUESTIONS_REQUEST = 'FETCH_SURVEY_QUESTIONS_REQUEST';
 export const FETCH_SURVEY_QUESTIONS_SUCCESS = 'FETCH_SURVEY_QUESTIONS_SUCCESS';
@@ -25,14 +26,14 @@ export function fetchSurveyQuestionsFailure(error) {
     };
 }
 
-export function fetchSurveyQuestions() {
+export function fetchSurveyQuestions(id) {
     return function(dispatch) {
         dispatch(fetchSurveyQuestionsRequest());
-        return fetch('/api/v1/question')
+        return fetch(`/api/v1/question?SurveyId=${id}`)
         .then(checkStatus)
         .then(response => response.json())
         .then(response => {
-            dispatch(fetchSurveyQuestionsSuccess(response));
+            dispatch(fetchSurveyQuestionsSuccess(uniqBy(response, 'id')));
         })
         .catch(error => dispatch(fetchSurveyQuestionsFailure(error)));
     };

frontend/js/routes.js

@@ -20,6 +20,7 @@ module.exports = (
   <Route path="/" component={Frame}>
     <IndexRoute component={Home} />
     <Route path="survey" component={SurveySelector} />
+    <Route path="survey/:id" component={Category} />
     <Route path="survey/:id/category" component={Category} />
     <Route path="survey/:id/questions" component={Survey} />
     <Route path="results/:passPhrase" component={Results} />

package.json

@@ -34,6 +34,7 @@
     "immutability-helper": "^2.2.2",
     "inert": "^4.2.0",
     "isomorphic-fetch": "^2.2.1",
+    "lodash.uniqby": "^4.7.0",
     "pg": "^6.1.0",
     "prop-types": "^15.5.10",
     "react": "^15.3.2",