);
22 | expect(wrapper.find('QuestionResponseList')).to.have.length(2);
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/src/components/Root.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Provider} from 'react-redux'
3 | import {ConnectedRouter} from 'react-router-redux';
4 | import {Route, Switch, Redirect} from 'react-router-dom';
5 |
6 | import store from '../configureStore'
7 | import * as actionTypes from '../constants/actionTypes';
8 | import history from '../history';
9 |
10 | import SurveyPage from './SurveyPage/SurveyPage'
11 | import SurveyBuilderPage from './SurveyBuilderPage/SurveyBuilderPage';
12 | import ResponsesPage from './ResponsesPage/ResponsesPage';
13 | import Header from './Header/Header';
14 | import SignInPage from './auth/SignInPage';
15 | import SignOutPage from './auth/SignOutPage';
16 | import SignUpPage from './auth/SignUpPage';
17 | import RequireAuth from './auth/RequireAuth';
18 |
19 | import '../styles/core/reset.css';
20 | import '../styles/layouts/layout.css';
21 | import '../styles/modules/buttons.css';
22 | import '../styles/modules/typography.css';
23 | import '../styles/modules/form.css';
24 | import '../styles/modules/navigation.css';
25 | import '../styles/modules/spinner.css';
26 | import '../styles/modules/error-message.css';
27 | import '../styles/pages/App.css';
28 | import '../styles/pages/SurveyBuilder.css';
29 | import '../styles/pages/SurveyForm.css';
30 | import '../styles/pages/LoginForm.css';
31 | import '../styles/pages/SurveyResponses.css';
32 |
33 |
34 | if (localStorage.getItem('token')) {
35 | store.dispatch({
36 | type: actionTypes.AUTH_SIGN_IN_SUCCESS
37 | });
38 | }
39 |
40 | const Root = () => (
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | );
60 |
61 | export default Root;
--------------------------------------------------------------------------------
/src/components/SurveyBuilderPage/AnswerOptionListBuilder/AnswerOptionListBuilder.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {Field} from 'redux-form';
4 | import {required} from 'redux-form-validators'
5 |
6 | import customPropTypes from '../../../constants/customPropTypes';
7 |
8 | import FormInput from '../../shared/FormInput';
9 |
10 |
11 | const AnswerOptionListBuilder = ({
12 | questionId,
13 | answerOptions,
14 | onAddNewAnswerOption
15 | }) => {
16 |
17 | const handleAddNewAnswerOption = () => {
18 | return onAddNewAnswerOption({questionId});
19 | };
20 |
21 | return (
22 |
23 |
24 | {answerOptions.map((answerOption, index) => {
25 | return (
26 | -
27 | radio_button_unchecked
28 |
29 |
37 |
38 | );
39 | })}
40 |
41 |
42 |
43 | radio_button_unchecked
44 |
50 |
51 |
41 |
42 |
46 |
50 | delete
51 |
52 |
53 |
54 |
55 |
62 |
63 | {
64 | question.type === questionTypes.MULTIPLE_ANSWER &&
65 |
66 |
72 | }
73 |
25 | -
26 |
35 |
36 | -
37 |
46 |
47 |
48 | )
49 | };
50 |
51 | QuestionTypeSelector.propTypes = {
52 | onSelectQuestionType: PropTypes.func.isRequired,
53 | questionType: PropTypes.oneOf([
54 | questionTypes.SHORT_ANSWER,
55 | questionTypes.MULTIPLE_ANSWER
56 | ]).isRequired
57 | };
58 |
59 | export default QuestionTypeSelector;
60 |
--------------------------------------------------------------------------------
/src/components/SurveyBuilderPage/QuestionTypeSelector/QuestionTypeSelector.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {shallow} from 'enzyme';
3 | import sinon from 'sinon';
4 |
5 | import questionTypes from '../../../constants/questionTypes';
6 |
7 | import QuestionTypeSelector from './QuestionTypeSelector';
8 |
9 |
10 | describe('QuestionTypeSelector', () => {
11 | let props;
12 | let wrapper;
13 |
14 | before(() => {
15 | props = {
16 | onSelectQuestionType: sinon.spy(),
17 | questionType: questionTypes.SHORT_ANSWER
18 | };
19 |
20 | wrapper = shallow();
21 | });
22 |
23 | it('should call first btn onSelectQuestionType callback with SHORT_ANSWER type', () => {
24 | wrapper.find('button').first().simulate('click');
25 |
26 | expect(props.onSelectQuestionType.calledWith({
27 | type: questionTypes.SHORT_ANSWER
28 | }));
29 | });
30 |
31 |
32 | it('should call last btn onSelectQuestionType callback with SHORT_ANSWER type', () => {
33 | wrapper.find('button').last().simulate('click');
34 |
35 | expect(props.onSelectQuestionType.calledWith({
36 | type: questionTypes.MULTIPLE_ANSWER
37 | }));
38 | });
39 | });
--------------------------------------------------------------------------------
/src/components/SurveyBuilderPage/SurveyBuilderPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {connect} from 'react-redux';
3 | import {reduxForm, Field} from 'redux-form';
4 | import {bindActionCreators} from 'redux';
5 | import PropTypes from 'prop-types';
6 | import {required} from 'redux-form-validators'
7 |
8 | import * as surveyActions from '../../actions/surveyActions/surveyActions';
9 | import * as questionActions from '../../actions/questionActions';
10 | import customPropTypes from '../../constants/customPropTypes';
11 |
12 | import getDenormalizedSurvey from '../../selectors/getDenormalizedSurvey';
13 | import getInitialFormBuilderValues from '../../selectors/getInitialFormBuilderValues';
14 | import SurveyBuilderQuestionList from './SurveyBuilderQuestionList/SurveyBuilderQuestionList';
15 | import DefaultSpinner from '../shared/DefaultSpinner';
16 | import FormInput from '../shared/FormInput';
17 |
18 | export class SurveyBuilderPage extends React.Component {
19 | componentDidMount() {
20 | this.props.surveyActions.loadSurvey();
21 | }
22 |
23 | componentWillUnmount() {
24 | this.props.surveyActions.resetSurvey();
25 | }
26 |
27 | render() {
28 | const {
29 | survey,
30 | handleSubmit,
31 | submitting
32 | } = this.props;
33 |
34 | if (!survey) {
35 | return ;
36 | }
37 |
38 | return (
39 |
87 | );
88 | }
89 |
90 | handleAddNewQuestion = () => {
91 | this.props.questionActions.addNewQuestion({
92 | surveyId: this.props.survey._id
93 | });
94 | };
95 |
96 | handleSaveSurvey = (surveyFormData) => {
97 | return this.props.surveyActions.saveSurvey({surveyFormData});
98 | };
99 | }
100 |
101 | SurveyBuilderPage.propTypes = {
102 | handleSubmit: PropTypes.func.isRequired,
103 | questionActions: PropTypes.shape({
104 | addNewQuestion: PropTypes.func.isRequired,
105 | }).isRequired,
106 | submitting: PropTypes.bool.isRequired,
107 | survey: PropTypes.shape({
108 | description: PropTypes.string.isRequired,
109 | questions: PropTypes.arrayOf(customPropTypes.question),
110 | name: PropTypes.string.isRequired
111 | }),
112 | surveyActions: PropTypes.shape({
113 | loadSurvey: PropTypes.func.isRequired,
114 | resetSurvey: PropTypes.func.isRequired,
115 | saveSurvey: PropTypes.func.isRequired
116 | }).isRequired
117 | };
118 |
119 | const mapStateToProps = (state) => ({
120 | survey: getDenormalizedSurvey(state),
121 | initialValues: getInitialFormBuilderValues(state),
122 | });
123 |
124 | const mapDispatchToProps = (dispatch) => ({
125 | surveyActions: bindActionCreators(surveyActions, dispatch),
126 | questionActions: bindActionCreators(questionActions, dispatch)
127 | });
128 |
129 | export const SurveyBuilderPageForm = reduxForm({
130 | form: 'surveyBuilderForm',
131 | shouldValidate: () => true // Due to bug https://github.com/erikras/redux-form/issues/3276
132 | })(SurveyBuilderPage);
133 |
134 | const ConnectedSurveyBuilderPageForm = connect(
135 | mapStateToProps,
136 | mapDispatchToProps
137 | )(SurveyBuilderPageForm);
138 |
139 | export default ConnectedSurveyBuilderPageForm;
140 |
--------------------------------------------------------------------------------
/src/components/SurveyBuilderPage/SurveyBuilderPage.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {shallow} from 'enzyme';
3 | import sinon from 'sinon';
4 |
5 | import {SurveyBuilderPage} from './SurveyBuilderPage';
6 |
7 |
8 | describe('SurveyBuilderPage', () => {
9 | let props;
10 |
11 | before(() => {
12 | props = {
13 | survey: {
14 | _id: 'Id_s1',
15 | name: '',
16 | description: ''
17 | },
18 | handleSubmit: sinon.spy(),
19 | submitting: false,
20 | questionActions: {
21 | addNewQuestion: sinon.spy()
22 | },
23 | surveyActions: {
24 | loadSurvey: sinon.spy(),
25 | resetSurvey: sinon.spy(),
26 | saveSurvey: sinon.spy()
27 | }
28 | };
29 | });
30 |
31 | it('should show default spinner when survey not loaded', () => {
32 | const propsWithoutSurvey = {...props, survey: undefined};
33 | const wrapper = shallow();
34 |
35 | expect(wrapper.find('DefaultSpinner').exists());
36 | });
37 |
38 | it('should not show SurveyBuilderQuestionList when survey is new', () => {
39 | const wrapper = shallow();
40 |
41 | expect(wrapper.find('SurveyBuilderQuestionList').exists()).to.equal(false);
42 | });
43 |
44 | it('should call addNewQuestion handler when Add new question button is clicked', () => {
45 | const wrapper = shallow();
46 | wrapper.find('.survey-builder__add-question-button').simulate('click');
47 |
48 | expect(props.questionActions.addNewQuestion.calledOnce);
49 | });
50 |
51 | it('should reset survey data when component is unmounted', () => {
52 | const wrapper = shallow();
53 | wrapper.unmount();
54 |
55 | expect(props.surveyActions.resetSurvey.calledOnce);
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/src/components/SurveyBuilderPage/SurveyBuilderQuestionList/SurveyBuilderQuestionLIst.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {shallow} from 'enzyme';
3 |
4 | import surveyQuestionTypes from '../../../constants/questionTypes';
5 |
6 | import SurveyBuilderQuestionList from './SurveyBuilderQuestionList';
7 |
8 |
9 | describe('SurveyBuilderQuestionList', () => {
10 | let props;
11 | let wrapper;
12 |
13 | before(() => {
14 | props = {
15 | questions: [{
16 | _id: 'Id_q1',
17 | title: 'Test question 1',
18 | type: surveyQuestionTypes.SHORT_ANSWER,
19 | }, {
20 | _id: 'Id_q2',
21 | title: 'Test question 2',
22 | type: surveyQuestionTypes.SHORT_ANSWER,
23 | }],
24 | surveyId: 'Id_s1'
25 | };
26 |
27 | wrapper = shallow();
28 | });
29 |
30 | it('should render QuestionBuilder for each question', () => {
31 | expect(wrapper.find('Connect(QuestionBuilder)')).to.have.length(2);
32 | });
33 | });
34 |
--------------------------------------------------------------------------------
/src/components/SurveyBuilderPage/SurveyBuilderQuestionList/SurveyBuilderQuestionList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import customPropTypes from '../../../constants/customPropTypes';
5 |
6 | import QuestionBuilder from '../QuestionBuilder/QuestionBuilder';
7 |
8 |
9 | const SurveyBuilderQuestionList = ({questions, surveyId}) => {
10 | return (
11 |
12 | {questions.map((question) => (
13 |
18 | ))}
19 |
20 | );
21 | };
22 |
23 | SurveyBuilderQuestionList.propTypes = {
24 | questions: PropTypes.arrayOf(customPropTypes.question).isRequired,
25 | surveyId: PropTypes.string.isRequired
26 | };
27 |
28 | export default SurveyBuilderQuestionList;
--------------------------------------------------------------------------------
/src/components/SurveyPage/SurveyAnswerOptionList/SurveyAnswerOptionList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import customPropTypes from '../../../constants/customPropTypes';
5 |
6 | const SurveyAnswerOptionList = ({
7 | input,
8 | meta,
9 | answerOptions
10 | }) => {
11 | return (
12 |
42 | );
43 | };
44 |
45 | SurveyAnswerOptionList.propTypes = {
46 | answerOptions: PropTypes.arrayOf(customPropTypes.answerOption).isRequired,
47 | input: PropTypes.object.isRequired,
48 | meta: PropTypes.object.isRequired
49 | };
50 |
51 | export default SurveyAnswerOptionList;
--------------------------------------------------------------------------------
/src/components/SurveyPage/SurveyAnswerOptionList/SurveyAnswerOptionList.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {shallow} from 'enzyme';
3 |
4 | import SurveyAnswerOptionList from './SurveyAnswerOptionList';
5 |
6 |
7 | describe('SurveyAnswerOptionList', () => {
8 | let props;
9 | let wrapper;
10 |
11 | before(() => {
12 | props = {
13 | answerOptions: [{
14 | _id: 'Id_ao1',
15 | title: 'Option A',
16 | }, {
17 | _id: 'Id_ao2',
18 | title: 'Option B'
19 | }],
20 | input: {},
21 | meta: {}
22 | };
23 | });
24 |
25 |
26 | it('should render all answer options provided', () => {
27 | wrapper = shallow();
28 | expect(wrapper.find('.survey-form__radio-group-list-item')).to.have.length(2);
29 | });
30 |
31 | });
--------------------------------------------------------------------------------
/src/components/SurveyPage/SurveyPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {reduxForm} from 'redux-form';
3 | import {connect} from 'react-redux';
4 | import {bindActionCreators} from 'redux';
5 | import queryString from 'query-string';
6 | import PropTypes from 'prop-types';
7 |
8 | import * as surveyActions from '../../actions/surveyActions/surveyActions';
9 | import getDenormalizedSurvey from '../../selectors/getDenormalizedSurvey';
10 | import customPropTypes from '../../constants/customPropTypes';
11 |
12 | import SurveyQuestionList from './SurveyQuestionList/SurveyQuestionList';
13 | import DefaultSpinner from '../shared/DefaultSpinner';
14 |
15 |
16 | export class SurveyPage extends React.Component {
17 | componentDidMount() {
18 | const {location, history} = this.props;
19 | const surveyId = queryString.parse(location.search).id;
20 |
21 | if (!surveyId) {
22 | history.push('/sign-in');
23 | }
24 |
25 | this.props.surveyActions.loadSurveyById({surveyId});
26 | }
27 |
28 | componentWillUnmount() {
29 | this.props.surveyActions.resetSurvey();
30 | }
31 |
32 | render() {
33 | const {
34 | survey,
35 | handleSubmit,
36 | submitting,
37 | submitSucceeded
38 | } = this.props;
39 |
40 | if (!survey) {
41 | return ;
42 | }
43 |
44 | if (!survey.questions.length) {
45 | return Survey not ready.
;
46 | }
47 |
48 | if (submitSucceeded) {
49 | return (
50 | Thank you for participating in a survey :)
51 | );
52 | }
53 |
54 | return (
55 |
56 |
57 |
{survey.name}
58 |
{survey.description}
59 |
14 |
{question.title} *
15 |
16 | {
17 | question.type !== questionTypes.MULTIPLE_ANSWER &&
18 |
19 |
26 | }
27 |
28 | {
29 | question.answerOptions.length > 0 &&
30 |
31 |
37 | }
38 |
39 |
12 | {
13 | questions.map((question) => (
14 |
18 | ))
19 | }
20 |
21 | );
22 | };
23 |
24 | SurveyQuestionList.propTypes = {
25 | questions: PropTypes.arrayOf(customPropTypes.question).isRequired
26 | };
27 |
28 | export default SurveyQuestionList;
--------------------------------------------------------------------------------
/src/components/SurveyPage/SurveyQuestionList/SurveyQuestionList.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {shallow} from 'enzyme';
3 |
4 | import surveyQuestionTypes from '../../../constants/questionTypes';
5 |
6 | import SurveyQuestionList from './SurveyQuestionList';
7 |
8 |
9 | describe('SurveyQuestionList', () => {
10 | it('should render question list for all questions', () => {
11 | const props = {
12 | questions: [{
13 | _id: 'Id_q1',
14 | title: 'Test question 1',
15 | type: surveyQuestionTypes.MULTIPLE_ANSWER
16 | }, {
17 | _id: 'Id_q2',
18 | title: 'Test question 2',
19 | type: surveyQuestionTypes.SHORT_ANSWER
20 | }]
21 | };
22 |
23 | const wrapper = shallow();
24 |
25 | expect(wrapper.find('SurveyQuestion')).to.have.length(2);
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/src/components/auth/RequireAuth.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {connect} from 'react-redux';
3 | import {withRouter} from 'react-router-dom';
4 |
5 |
6 | export default function (ComposedComponent) {
7 |
8 | class Authentication extends Component {
9 | componentWillMount() {
10 | if (!this.props.authenticated) {
11 | this.props.history.push('/sign-in');
12 | }
13 | }
14 |
15 | componentWillUpdate(nextProps) {
16 | if (!nextProps.authenticated) {
17 | this.props.history.push('/sign-in');
18 | }
19 | }
20 |
21 | render() {
22 | return
23 | }
24 | }
25 |
26 | const mapStateToProps = (state) => {
27 | return {authenticated: state.auth.authenticated};
28 | };
29 |
30 | return withRouter(connect(mapStateToProps)(Authentication));
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/auth/SignInPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {reduxForm, Field} from 'redux-form';
3 | import {bindActionCreators} from 'redux';
4 | import {connect} from 'react-redux';
5 | import PropTypes from 'prop-types';
6 |
7 | import * as authActions from '../../actions/authActions';
8 | import {NOTIFICATION_DISPLAY_INTERVAL} from '../../config/appConfig';
9 |
10 | import FormInput from '../shared/FormInput';
11 | import ErrorMessage from '../shared/ErrorMessage';
12 |
13 |
14 |
15 | class SignInPage extends React.Component {
16 | componentWillUnmount() {
17 | this.props.authActions.clearErrors();
18 | }
19 |
20 | componentWillReceiveProps(nextProps) {
21 | if (nextProps.errorMessage) {
22 |
23 | setTimeout(() => {
24 | this.props.authActions.clearErrors();
25 | }, NOTIFICATION_DISPLAY_INTERVAL);
26 | }
27 | }
28 |
29 | render() {
30 | const {
31 | handleSubmit,
32 | errorMessage
33 | } = this.props;
34 |
35 | return (
36 |
37 | {
38 | errorMessage &&
39 |
40 | }
41 |
42 |
70 | Sorry to see you go...
17 | );
18 | }
19 | }
20 |
21 | SignOutPage.propTypes = {
22 | authActions: PropTypes.shape({
23 | signOutUser: PropTypes.func.isRequired
24 | }).isRequired
25 | };
26 |
27 | const mapDispatchToProps = (dispatch) => ({
28 | authActions: bindActionCreators(authActions, dispatch)
29 | });
30 |
31 | export default connect(null, mapDispatchToProps)(SignOutPage);
--------------------------------------------------------------------------------
/src/components/auth/SignUpPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {reduxForm, Field} from 'redux-form';
3 | import {bindActionCreators} from 'redux';
4 | import {connect} from 'react-redux';
5 | import PropTypes from 'prop-types';
6 |
7 | import * as authActions from '../../actions/authActions';
8 | import {NOTIFICATION_DISPLAY_INTERVAL} from '../../config/appConfig';
9 |
10 | import FormInput from '../shared/FormInput';
11 | import ErrorMessage from '../shared/ErrorMessage';
12 |
13 |
14 | class SignUpPage extends React.Component {
15 | componentWillUnmount() {
16 | this.props.authActions.clearErrors();
17 | }
18 |
19 | componentWillReceiveProps(nextProps) {
20 | if (nextProps.errorMessage) {
21 |
22 | setTimeout(() => {
23 | this.props.authActions.clearErrors();
24 | }, NOTIFICATION_DISPLAY_INTERVAL);
25 | }
26 | }
27 |
28 | render() {
29 | const {
30 | handleSubmit,
31 | errorMessage
32 | } = this.props;
33 |
34 | return (
35 |
36 | {
37 | errorMessage &&
38 |
39 | }
40 |
41 |
77 |
78 |
8 |
14 |
15 | );
16 | };
17 |
18 | export default DefaultSpinner;
--------------------------------------------------------------------------------
/src/components/shared/ErrorMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const ErrorMessage = ({message}) => {
5 | return (
6 | {message}
7 | );
8 | };
9 |
10 | ErrorMessage.propTypes = {
11 | message: PropTypes.string.isRequired
12 | };
13 |
14 |
15 | export default ErrorMessage;
--------------------------------------------------------------------------------
/src/components/shared/FormInput.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classnames from 'classnames'
3 | import PropTypes from 'prop-types';
4 |
5 | const FormInput = ({meta, type, input, placeholder}) => {
6 | const inputSyle = classnames('input', {
7 | 'input__has-error': meta.touched && meta.error
8 | });
9 |
10 | return (
11 |
12 |
18 |
19 | {
20 | meta.touched && meta.error &&
21 | {`Error: ${meta.error}`}
22 | }
23 |
24 |