Broken Proxy*

README.md

@@ -0,0 +1,3 @@
+# FullstackReactCode
+
+Companion repo to a course on Udemy.com. See here: https://www.udemy.com/node-with-react-fullstack-web-development

diagrams/07/.gitkeep

@@ -0,0 +1 @@
+

server/client/public/index.html

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

server/client/src/actions/index.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { FETCH_USER } from './types';
+import { FETCH_USER, FETCH_SURVEYS } from './types';
 
 export const fetchUser = () => async dispatch => {
   const res = await axios.get('/api/current_user');
@@ -12,3 +12,16 @@ export const handleToken = token => async dispatch => {
 
   dispatch({ type: FETCH_USER, payload: res.data });
 };
+
+export const submitSurvey = (values, history) => async dispatch => {
+  const res = await axios.post('/api/surveys', values);
+
+  history.push('/surveys');
+  dispatch({ type: FETCH_USER, payload: res.data });
+};
+
+export const fetchSurveys = () => async dispatch => {
+  const res = await axios.get('/api/surveys');
+
+  dispatch({ type: FETCH_SURVEYS, payload: res.data });
+};

server/client/src/actions/types.js

@@ -1 +1,2 @@
 export const FETCH_USER = 'fetch_user';
+export const FETCH_SURVEYS = 'fetch_surveys';

server/client/src/components/App.js

@@ -5,8 +5,8 @@ import * as actions from '../actions';
 
 import Header from './Header';
 import Landing from './Landing';
-const Dashboard = () => <h2>Dashboard</h2>;
-const SurveyNew = () => <h2>SurveyNew</h2>;
+import Dashboard from './Dashboard';
+import SurveyNew from './surveys/SurveyNew';
 
 class App extends Component {
   componentDidMount() {

server/client/src/components/Dashboard.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import SurveyList from './surveys/SurveyList';
+
+const Dashboard = () => {
+  return (
+    <div>
+      <SurveyList />
+      <div className="fixed-action-btn">
+        <Link to="/surveys/new" className="btn-floating btn-large red">
+          <i className="material-icons">add</i>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

server/client/src/components/surveys/SurveyField.js

@@ -0,0 +1,15 @@
+// SurveyField contains logic to render a single
+// label and text input
+import React from 'react';
+
+export default ({ input, label, meta: { error, touched } }) => {
+  return (
+    <div>
+      <label>{label}</label>
+      <input {...input} style={{ marginBottom: '5px' }} />
+      <div className="red-text" style={{ marginBottom: '20px' }}>
+        {touched && error}
+      </div>
+    </div>
+  );
+};

server/client/src/components/surveys/SurveyForm.js

@@ -0,0 +1,61 @@
+// SurveyForm shows a form for a user to add input
+import _ from 'lodash';
+import React, { Component } from 'react';
+import { reduxForm, Field } from 'redux-form';
+import { Link } from 'react-router-dom';
+import SurveyField from './SurveyField';
+import validateEmails from '../../utils/validateEmails';
+import formFields from './formFields';
+
+class SurveyForm extends Component {
+  renderFields() {
+    return _.map(formFields, ({ label, name }) => {
+      return (
+        <Field
+          key={name}
+          component={SurveyField}
+          type="text"
+          label={label}
+          name={name}
+        />
+      );
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.props.handleSubmit(this.props.onSurveySubmit)}>
+          {this.renderFields()}
+          <Link to="/surveys" className="red btn-flat white-text">
+            Cancel
+          </Link>
+          <button type="submit" className="teal btn-flat right white-text">
+            Next
+            <i className="material-icons right">done</i>
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+function validate(values) {
+  const errors = {};
+
+  errors.recipients = validateEmails(values.recipients || '');
+
+  _.each(formFields, ({ name }) => {
+    if (!values[name]) {
+      errors[name] = 'You must provide a value';
+    }
+  });
+
+  return errors;
+}
+
+export default reduxForm({
+  validate,
+  form: 'surveyForm',
+  destroyOnUnmount: false
+})(SurveyForm);

server/client/src/components/surveys/SurveyFormReview.js

@@ -0,0 +1,46 @@
+// SurveyFormReview shows users their form inputs for review
+import _ from 'lodash';
+import React from 'react';
+import { connect } from 'react-redux';
+import formFields from './formFields';
+import { withRouter } from 'react-router-dom';
+import * as actions from '../../actions';
+
+const SurveyFormReview = ({ onCancel, formValues, submitSurvey, history }) => {
+  const reviewFields = _.map(formFields, ({ name, label }) => {
+    return (
+      <div key={name}>
+        <label>{label}</label>
+        <div>
+          {formValues[name]}
+        </div>
+      </div>
+    );
+  });
+
+  return (
+    <div>
+      <h5>Please confirm your entries</h5>
+      {reviewFields}
+      <button
+        className="yellow darken-3 white-text btn-flat"
+        onClick={onCancel}
+      >
+        Back
+      </button>
+      <button
+        onClick={() => submitSurvey(formValues, history)}
+        className="green btn-flat right white-text"
+      >
+        Send Survey
+        <i className="material-icons right">email</i>
+      </button>
+    </div>
+  );
+};
+
+function mapStateToProps(state) {
+  return { formValues: state.form.surveyForm.values };
+}
+
+export default connect(mapStateToProps, actions)(withRouter(SurveyFormReview));

server/client/src/components/surveys/SurveyList.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { fetchSurveys } from '../../actions';
+
+class SurveyList extends Component {
+  componentDidMount() {
+    this.props.fetchSurveys();
+  }
+
+  renderSurveys() {
+    return this.props.surveys.reverse().map(survey => {
+      return (
+        <div className="card darken-1" key={survey._id}>
+          <div className="card-content">
+            <span className="card-title">{survey.title}</span>
+            <p>
+              {survey.body}
+            </p>
+            <p className="right">
+              Sent On: {new Date(survey.dateSent).toLocaleDateString()}
+            </p>
+          </div>
+          <div className="card-action">
+            <a>Yes: {survey.yes}</a>
+            <a>No: {survey.no}</a>
+          </div>
+        </div>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderSurveys()}
+      </div>
+    );
+  }
+}
+
+function mapStateToProps({ surveys }) {
+  return { surveys };
+}
+
+export default connect(mapStateToProps, { fetchSurveys })(SurveyList);

server/client/src/components/surveys/SurveyNew.js

@@ -0,0 +1,37 @@
+// SurveyNew shows SurveyForm and SurveyFormReview
+import React, { Component } from 'react';
+import { reduxForm } from 'redux-form';
+import SurveyForm from './SurveyForm';
+import SurveyFormReview from './SurveyFormReview';
+
+class SurveyNew extends Component {
+  state = { showFormReview: false };
+
+  renderContent() {
+    if (this.state.showFormReview) {
+      return (
+        <SurveyFormReview
+          onCancel={() => this.setState({ showFormReview: false })}
+        />
+      );
+    }
+
+    return (
+      <SurveyForm
+        onSurveySubmit={() => this.setState({ showFormReview: true })}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderContent()}
+      </div>
+    );
+  }
+}
+
+export default reduxForm({
+  form: 'surveyForm'
+})(SurveyNew);

server/client/src/components/surveys/formFields.js

@@ -0,0 +1,6 @@
+export default [
+  { label: 'Campaign Title', name: 'title' },
+  { label: 'Subject Line', name: 'subject' },
+  { label: 'Email Body', name: 'body' },
+  { label: 'Recipient List', name: 'recipients' }
+];

server/client/src/index.js

@@ -8,6 +8,10 @@ import reduxThunk from 'redux-thunk';
 import App from './components/App';
 import reducers from './reducers';
 
+// Development only axios helpers!
+import axios from 'axios';
+window.axios = axios;
+
 const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
 
 ReactDOM.render(

server/client/src/reducers/index.js

@@ -1,6 +1,10 @@
 import { combineReducers } from 'redux';
+import { reducer as reduxForm } from 'redux-form';
 import authReducer from './authReducer';
+import surveysReducer from './surveysReducer';
 
 export default combineReducers({
-  auth: authReducer
+  auth: authReducer,
+  form: reduxForm,
+  surveys: surveysReducer
 });

server/client/src/reducers/surveysReducer.js

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

server/client/src/utils/validateEmails.js

@@ -0,0 +1,14 @@
+const re = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+export default emails => {
+  const invalidEmails = emails
+    .split(',')
+    .map(email => email.trim())
+    .filter(email => re.test(email) === false);
+
+  if (invalidEmails.length) {
+    return `These emails are invalid: ${invalidEmails}`;
+  }
+
+  return;
+};