feat(signup): add user signup functionality

.babelrc

@@ -1,4 +1,7 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
 }

package.json

@@ -10,7 +10,7 @@
     "heroku-postbuild": "npm run build",
     "dev": "webpack-dev-server --open --config webpack.config.dev.js",
     "dev:hot": "npm run dev -- --hot",
-    "test": "jest --config=jest.config.json",
+    "test": "jest --config=jest.config.json --env=jsdom",
     "test:watch": "npm test -- --watch",
     "coverage": "npm run test -- --coverage",
     "coveralls": "npm run coverage && cat ./coverage/lcov.info | coveralls"
@@ -27,7 +27,9 @@
   },
   "homepage": "https://github.com/akhilome/kiakiafood#readme",
   "dependencies": {
+    "axios": "^0.18.0",
     "express": "^4.16.4",
+    "jwt-decode": "^2.2.0",
     "prop-types": "^15.6.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
@@ -41,8 +43,10 @@
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.3",
     "@babel/preset-react": "^7.0.0",
+    "axios-mock-adapter": "^1.16.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",

src/actions/index.js

@@ -0,0 +1,46 @@
+import axios from '../services/axios';
+import actionTypes from './types';
+import { saveToken, getToken } from '../utils/localStorage';
+import decode from '../utils/jwt';
+
+export const startFetching = () => ({ type: actionTypes.START_FETCHING });
+export const stopFetching = (fetchSuccess = true, message = '') => ({
+  type: actionTypes.STOP_FETCHING,
+  payload: {
+    error: !fetchSuccess,
+    message,
+  },
+});
+
+export const signUpUser = userData => async (dispatch) => {
+  dispatch(startFetching());
+  try {
+    const { status, user } = (await axios.post('/auth/signup', userData)).data;
+    if (status === 'success') saveToken(user.auth_token);
+    const { userName: name, userStatus: role } = decode(user.auth_token);
+    dispatch({
+      type: actionTypes.SIGN_UP,
+      payload: {
+        name,
+        role,
+      },
+    });
+    return dispatch(stopFetching());
+  } catch (error) {
+    return dispatch(
+      stopFetching(false, error.response ? error.response.data.message : 'something went wrong'),
+    );
+  }
+};
+
+export const checkAuthStatus = () => {
+  try {
+    const { userName: name, userStatus: role } = decode(getToken());
+    return {
+      type: actionTypes.CHECK_AUTH_STATUS,
+      payload: { name, role },
+    };
+  } catch (error) {
+    return { type: actionTypes.CHECK_AUTH_STATUS_FAIL };
+  }
+};

src/actions/types/index.js

@@ -0,0 +1,8 @@
+export default {
+  SIGN_UP: 'SIGN_UP',
+  LOG_IN: 'LOG_IN',
+  START_FETCHING: 'START_FETCHING',
+  STOP_FETCHING: 'STOP_FETCHING',
+  CHECK_AUTH_STATUS: 'CHECK_AUTH_STATUS',
+  CHECK_AUTH_STATUS_FAIL: 'CHECK_AUTH_STATUS_FAIL',
+};

src/components/App.jsx

@@ -1,20 +1,43 @@
 import '../index.css';
-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import propTypes from 'prop-types';
+import { checkAuthStatus } from '../actions';
 import HomePage from './HomePage';
 import LoginPage from './LoginPage';
 import SignupPage from './SignupPage';
 import NotFoundPage from './NotFoundPage';
 
-const App = () => (
-  <Router>
-    <Switch>
-      <Route path="/" exact component={HomePage} />
-      <Route path="/login" component={LoginPage} />
-      <Route path="/signup" component={SignupPage} />
-      <Route component={NotFoundPage} />
-    </Switch>
-  </Router>
-);
+class App extends Component {
+  componentDidMount() {
+    const { checkAuthStatus: checkUserAuthStatus } = this.props;
+    checkUserAuthStatus();
+  }
 
-export default App;
+  render() {
+    return (
+      <Router>
+        <Switch>
+          <Route path="/" exact component={HomePage} />
+          <Route path="/login" component={LoginPage} />
+          <Route path="/signup" component={SignupPage} />
+          <Route component={NotFoundPage} />
+        </Switch>
+      </Router>
+    );
+  }
+}
+
+App.propTypes = {
+  checkAuthStatus: propTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  loggedIn: state.user.isLoggedIn,
+});
+
+export default connect(
+  mapStateToProps,
+  { checkAuthStatus },
+)(App);

src/components/HomePage.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-
 import Nav from './Nav';
 
 const HomePage = () => (

src/components/SignupPage.jsx

@@ -1,12 +1,126 @@
-import React from 'react';
+import React, { Component, Fragment } from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { signUpUser } from '../actions';
+import Nav from './Nav';
 
-const SignupPage = () => (
-  <div>
-    This is the signup page
-    <br />
-    <Link to="/">Go Home</Link>
-  </div>
-);
+class SignupPage extends Component {
+  state = {
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+    adminSecret: '',
+  };
 
-export default SignupPage;
+  componentDidMount() {
+    const { isLoggedIn, fetching, history } = this.props;
+    if (!fetching && isLoggedIn) history.push('/menu');
+  }
+
+  onFormSubmit = async (e) => {
+    e.preventDefault();
+    const {
+      name, email, password, confirmPassword, adminSecret,
+    } = this.state;
+    const { signUpUser: register } = this.props;
+    await register({
+      name,
+      email,
+      password,
+      confirmPassword,
+      adminSecret,
+    });
+    const { isLoggedIn, fetching, history } = this.props;
+    if (!fetching && isLoggedIn) history.push('/menu');
+  };
+
+  render() {
+    const {
+      name, email, password, confirmPassword, adminSecret,
+    } = this.state;
+    return (
+      <Fragment>
+        <Nav />
+        <div className="wrapper auth">
+          <section className="container">
+            <h2>Create An Account</h2>
+
+            <form onSubmit={this.onFormSubmit}>
+              <input
+                type="text"
+                name="name"
+                placeholder="Your full name"
+                value={name}
+                onChange={e => this.setState({ name: e.target.value })}
+                required
+              />
+              <input
+                type="email"
+                name="email"
+                placeholder="Your Email Address"
+                value={email}
+                onChange={e => this.setState({ email: e.target.value })}
+                required
+              />
+              <input
+                type="password"
+                name="password"
+                placeholder="Choose Password"
+                value={password}
+                onChange={e => this.setState({ password: e.target.value })}
+                required
+              />
+              <input
+                type="password"
+                name="password-confirm"
+                placeholder="Confirm Password"
+                value={confirmPassword}
+                onChange={e => this.setState({ confirmPassword: e.target.value })}
+                required
+              />
+              <input
+                type="password"
+                name="admin-secret"
+                placeholder="Admin Secret [optional]"
+                value={adminSecret}
+                onChange={e => this.setState({ adminSecret: e.target.value })}
+              />
+              <input type="submit" name="submit" value="Sign Up" className="btn-primary" />
+            </form>
+            <div>
+              <p>
+                Already have an account?
+                {' '}
+                <Link to="/login">Sign In</Link>
+              </p>
+            </div>
+          </section>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+SignupPage.defaultProps = {
+  isLoggedIn: false,
+  fetching: false,
+};
+
+SignupPage.propTypes = {
+  signUpUser: PropTypes.func.isRequired,
+  isLoggedIn: PropTypes.bool,
+  fetching: PropTypes.bool,
+  history: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired,
+};
+
+const mapStateToProps = state => ({
+  isLoggedIn: state.user.isLoggedIn,
+  fetching: state.fetching.fetching,
+});
+
+export default connect(
+  mapStateToProps,
+  { signUpUser },
+)(SignupPage);

src/index.html

@@ -10,7 +10,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>KiaKiaFood</title>
   </head>
-  <body>
+  <body class="auth">
     <div id="app"></div>
   </body>
 </html>