App.js

import React from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import { CookiesProvider } from "react-cookie";
import Header from "./Header/Header";
import Footer from "./Footer/Footer";
import Home from "./Home/Home";
import NotFound from "./NotFound/NotFound";
import Login from "./Account/Login/Login";
import WrappedSignup from "./Account/Signup/WrappedSignup";
import Profile from "./Account/Profile/Profile";
import Forgot from "./Account/Forgot/Forgot";
import Reset from "./Account/Reset/Reset";
import Feedback from "./Feedback/Feedback";

import { Provider, subscribe } from "react-contextual";

const store = {
  initialState: { jwtToken: null, user: {}, messages: {} },
  actions: {
    saveSession: (jwtToken, user) => ({ jwtToken, user }),
    clearSession: () => ({ jwtToken: null, user: {} }),
    clearMessages: () => ({ messages: {} }),
    setErrorMessages: errors => ({ messages: { error: errors } }),
    setSuccessMessages: success => ({ messages: { success: success } })
  }
};

const isAuthenticated = props => props.jwtToken !== null;

const PrivateRoute = subscribe()(({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated(props) ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
));

class App extends React.Component {
  render() {
    return (
      <Provider {...store}>
        <CookiesProvider>
          <BrowserRouter>
            <div>
              <Header />
              <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/feedback" component={Feedback} />
                <Route path="/login" component={Login} />
                <Route path="/signup" component={WrappedSignup} />
                <PrivateRoute path="/account" component={Profile} />
                <Route path="/forgot" component={Forgot} />
                <Route path="/reset/:token" component={Reset} />
                <Route path="*" component={NotFound} />
              </Switch>
              <Footer />
            </div>
          </BrowserRouter>
        </CookiesProvider>
      </Provider>
    );
  }
}

export default App;

Signup.js

import React from "react";
import Messages from "../../Messages/Messages";
import { Link } from "react-router-dom";

const Signup = props => (
  <div className="login-container container">
    <div className="panel">
      <div className="panel-body">
        <Messages messages={props.messageContext.messages} />
        <form onSubmit={props.handleSignup.bind(this)}>
          <legend>Create an account</legend>
          <div className="form-group">
            <label htmlFor="name">Name</label>
            <input
              type="text"
              name="name"
              id="name"
              placeholder="Name"
              autoFocus
              className="form-control"
              value={props.name}
              onChange={props.handleChange.bind(this)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="Email"
              className="form-control"
              value={props.email}
              onChange={props.handleChange.bind(this)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="Password"
              className="form-control"
              value={props.password}
              onChange={props.handleChange.bind(this)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="password">Confirm Password</label>
            <input
              type="password"
              name="confirm"
              id="confirm"
              placeholder="Password"
              className="form-control"
              value={props.confirm}
              onChange={props.handleChange.bind(this)}
            />
          </div>
          <div className="form-group">
            <small className="text-muted">
              By signing up, you agree to the{" "}
              <Link to="/">Terms of Service</Link>.
            </small>
          </div>
          <button type="submit" className="btn btn-success">
            Create an account
          </button>
        </form>
      </div>
    </div>
    <p className="text-center">
      Already have an account?{" "}
      <Link to="/login">
        <strong>Log in</strong>
      </Link>
    </p>
  </div>
);

export default Signup;

WrappedSignup.js

import React from "react";
import Signup from "./Signup";
import { signup } from "../../../actions/auth";
import { object, instanceOf } from "prop-types";
import { withCookies, Cookies } from "react-cookie";

import { ProviderContext, subscribe } from "react-contextual";
import {
  mapMessageContextToProps,
  mapSessionContextToProps,
  messageContextPropType,
  sessionContextPropType
} from "../../context_helper";

export class WrappedSignup extends React.Component {
  static propTypes = {
    history: object.isRequired,
    cookies: instanceOf(Cookies).isRequired,
    ...messageContextPropType,
    ...sessionContextPropType
  };

  constructor(props) {
    super(props);
    this.state = { name: "", email: "", password: "", confirm: "" };
  }

  componentWillUnmount() {
    this.props.messageContext.clearMessages();
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSignup(event) {
    event.preventDefault();
    signup({
      name: this.state.name,
      email: this.state.email,
      password: this.state.password,
      confirm: this.state.confirm,
      history: this.props.history,
      cookies: this.props.cookies,
      messageContext: this.props.messageContext,
      sessionContext: this.props.sessionContext
    });
  }

  render() {
    return (
      <Signup
        {...this.props}
        {...this.state}
        handleSignup={this.handleSignup.bind(this)}
        handleChange={this.handleChange.bind(this)}
      />
    );
  }
}

const mapContextToProps = context => {
  return {
    ...mapSessionContextToProps(context),
    ...mapMessageContextToProps(context)
  };
};

export default subscribe(ProviderContext, mapContextToProps)(
  withCookies(WrappedSignup)
);