From fd83cd728a19bc5aa092294ff475026e3f6397f9 Mon Sep 17 00:00:00 2001
From: Asten Mies <sebastien@qualitsy.com>
Date: Thu, 13 Jul 2017 01:35:30 +0200
Subject: [PATCH 01/10] SignUp SignIn SignOut

---
 .gitignore                        |   1 +
 actions/index.js                  |  13 +++
 components/Header.js              |  16 +++-
 components/LinkList.js            |  28 ++++++-
 components/SignInForm.js          | 113 +++++++++++++++++++++++++
 components/SignUpForm.js          | 134 ++++++++++++++++++++++++++++++
 containers/Header.js              |  16 ++++
 containers/SignInFormContainer.js |  61 ++++++++++++++
 containers/SignUpFormContainer.js |  80 ++++++++++++++++++
 libraries/apolloClient.js         |   3 +-
 libraries/redirect.js             |  13 +++
 libraries/reducer.js              |   6 +-
 libraries/reducers/authReducer.js |  16 ++++
 libraries/reduxStore.js           |  10 +++
 package.json                      |   1 +
 pages/create.js                   |   2 +-
 pages/details.js                  |   2 +-
 pages/index.js                    |   2 +-
 pages/signin.js                   |  15 ++++
 pages/signup.js                   |  15 ++++
 routes.js                         |  12 +++
 yarn.lock                         |  36 +++++---
 22 files changed, 571 insertions(+), 24 deletions(-)
 create mode 100644 actions/index.js
 create mode 100644 components/SignInForm.js
 create mode 100644 components/SignUpForm.js
 create mode 100644 containers/Header.js
 create mode 100644 containers/SignInFormContainer.js
 create mode 100644 containers/SignUpFormContainer.js
 create mode 100644 libraries/redirect.js
 create mode 100644 libraries/reducers/authReducer.js
 create mode 100644 pages/signin.js
 create mode 100644 pages/signup.js

diff --git a/.gitignore b/.gitignore
index 2fe34731..b7487c39 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 .next/
 config.js
 .env
+yarn.lock
 coverage/
 
 # Created by https://www.gitignore.io/api/node,macos,linux,windows,webstorm,sublimetext,visualstudiocode
diff --git a/actions/index.js b/actions/index.js
new file mode 100644
index 00000000..ef1cc078
--- /dev/null
+++ b/actions/index.js
@@ -0,0 +1,13 @@
+export const AUTH_SIGNIN = 'AUTH_SIGNIN';
+export const AUTH_SIGNOUT = 'AUTH_SIGNOUT';
+const localForage = require('localforage');
+
+export const signIn = token => {
+  localForage.setItem('accessToken', token);
+  return { type: AUTH_SIGNIN };
+};
+
+export const signOut = () => {
+  localForage.removeItem('accessToken');
+  return { type: AUTH_SIGNOUT };
+};
diff --git a/components/Header.js b/components/Header.js
index 44ce447b..0519193d 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -2,14 +2,24 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import LinkList from './LinkList';
 
-const Header = ({ className, pathname }) =>
+const Header = ({ className, pathname, authenticated, logout }) =>
   <header className={className}>
-    <LinkList pathname={pathname} />
+    <LinkList
+      pathname={pathname}
+      authenticated={authenticated}
+      logout={logout}
+    />
   </header>;
 
+Header.defaultProps = {
+  authenticated: false
+};
+
 Header.propTypes = {
   pathname: PropTypes.string.isRequired,
-  className: PropTypes.string.isRequired
+  className: PropTypes.string.isRequired,
+  authenticated: PropTypes.bool.isRequired,
+  logout: PropTypes.func.isRequired
 };
 
 export default styled(Header)`
diff --git a/components/LinkList.js b/components/LinkList.js
index 1081fb1b..496f60a8 100644
--- a/components/LinkList.js
+++ b/components/LinkList.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Router } from '../routes';
 
-const LinkList = ({ className, pathname }) =>
+const LinkList = ({ className, pathname, authenticated, logout }) =>
   <nav className={className}>
     <Link prefetch href="/">
       <a className={pathname === '/' && 'is-active'}>Main Page</a>
@@ -11,6 +11,23 @@ const LinkList = ({ className, pathname }) =>
     <Link prefetch route={Router.linkPage('create')}>
       <a className={pathname === '/create_post' && 'is-active'}>Create</a>
     </Link>
+    {!authenticated &&
+      <Link prefetch route={Router.linkPage('signin')}>
+        <a className={pathname === '/sign_in' && 'is-active'}>SignIn</a>
+      </Link>}
+    {!authenticated &&
+      <Link prefetch route={Router.linkPage('signup')}>
+        <a className={pathname === '/sign_up' && 'is-active'}>SignUp</a>
+      </Link>}
+    {authenticated &&
+      <button
+        role="link"
+        href="#"
+        onClick={() => logout()}
+        className={pathname === '/sign_up' && 'is-active'}
+      >
+        LogOut
+      </button>}
     <a
       href="https://github.com/Sly777/ran"
       rel="noopener noreferrer"
@@ -22,7 +39,9 @@ const LinkList = ({ className, pathname }) =>
 
 LinkList.propTypes = {
   pathname: PropTypes.string.isRequired,
-  className: PropTypes.string.isRequired
+  className: PropTypes.string.isRequired,
+  authenticated: PropTypes.bool.isRequired,
+  logout: PropTypes.func.isRequired
 };
 
 export default styled(LinkList)`
@@ -30,9 +49,14 @@ export default styled(LinkList)`
     font-size: 14px;
     margin-right: 15px;
     text-decoration: none;
+    cursor: pointer;
 
     &.is-active {
       text-decoration: underline;
     }
   }
+  button {
+    display: inline-block;
+    margin-right: 15px;
+  }
 `;
diff --git a/components/SignInForm.js b/components/SignInForm.js
new file mode 100644
index 00000000..113c039b
--- /dev/null
+++ b/components/SignInForm.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import { Field, reduxForm } from 'redux-form';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const renderField = ({ input, label, type, meta: { touched, error } }) =>
+  <div>
+    <input {...input} placeholder={label} type={type} />
+    {touched &&
+      error &&
+      <div>
+        {error}
+      </div>}
+  </div>;
+
+const renderErrors = errors =>
+  <div className="alert alert-danger" role="alert">
+    {errors &&
+      errors.map(error =>
+        <span key={error.id}>
+          {error.value}
+        </span>
+      )}
+  </div>;
+
+let AuthForm = props => {
+  const { handleSubmit } = props;
+  const errors = props.errors <= 0 ? null : renderErrors(props.errors);
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        {errors}
+        <Field
+          name="email"
+          type="email"
+          component={renderField}
+          label="Email"
+        />
+        <Field
+          name="password"
+          type="password"
+          component={renderField}
+          label="Password"
+        />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+const validate = values => {
+  const errors = {};
+
+  if (!values.email) {
+    errors.email = 'Required';
+    errors.id = 3;
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+    errors.email = 'Invalid email address';
+    errors.id = 4;
+  }
+
+  if (!values.password) {
+    errors.password = 'Required';
+    errors.id = 5;
+  } else if (values.password.length <= 3) {
+    errors.password = 'Must be at least 4 characters';
+    errors.id = 6;
+  }
+
+  return errors;
+};
+
+renderField.defaultProps = {
+  errors: []
+};
+
+AuthForm.defaultProps = {
+  errors: []
+};
+
+renderField.propTypes = {
+  input: PropTypes.object.isRequired,
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  meta: PropTypes.object.isRequired,
+  errors: PropTypes.array.isRequired
+};
+
+AuthForm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  errors: PropTypes.array.isRequired
+};
+
+AuthForm = styled(AuthForm)`
+  border-bottom: 1px solid #ececec;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+
+  > h1 {
+    font-size: 20px;
+  }
+
+  >input {
+    display: block;
+    margin-bottom: 10px;
+  }
+`;
+
+// Decorate the form component
+export default reduxForm({
+  form: 'AuthForm', // a unique name for this form
+  validate
+})(AuthForm);
diff --git a/components/SignUpForm.js b/components/SignUpForm.js
new file mode 100644
index 00000000..d11b568f
--- /dev/null
+++ b/components/SignUpForm.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import { Field, reduxForm } from 'redux-form';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const renderField = ({ input, label, type, meta: { touched, error } }) =>
+  <div>
+    <input {...input} placeholder={label} type={type} />
+    {touched &&
+      error &&
+      <div>
+        {error}
+      </div>}
+  </div>;
+
+const renderErrors = errors =>
+  <div className="alert alert-danger" role="alert">
+    {errors &&
+      errors.map(error =>
+        <span key={error.id}>
+          {error.value}
+        </span>
+      )}
+  </div>;
+
+let AuthForm = props => {
+  const { handleSubmit } = props;
+  const errors = props.errors <= 0 ? null : renderErrors(props.errors);
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        {errors}
+        <Field
+          name="firstName"
+          type="text"
+          component={renderField}
+          label="First Name"
+        />
+        <Field
+          name="lastName"
+          type="text"
+          component={renderField}
+          label="Last Name"
+        />
+        <Field
+          name="email"
+          type="email"
+          component={renderField}
+          label="Email"
+        />
+        <Field
+          name="password"
+          type="password"
+          component={renderField}
+          label="Password"
+        />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+const validate = values => {
+  const errors = {};
+  if (!values.firstName) {
+    errors.firstName = 'Required';
+    errors.id = 1;
+  }
+
+  if (!values.lastName) {
+    errors.lastName = 'Required';
+    errors.id = 2;
+  }
+
+  if (!values.email) {
+    errors.email = 'Required';
+    errors.id = 3;
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+    errors.email = 'Invalid email address';
+    errors.id = 4;
+  }
+
+  if (!values.password) {
+    errors.password = 'Required';
+    errors.id = 5;
+  } else if (values.password.length <= 3) {
+    errors.password = 'Must be at least 4 characters';
+    errors.id = 6;
+  }
+
+  return errors;
+};
+
+renderField.defaultProps = {
+  errors: []
+};
+
+AuthForm.defaultProps = {
+  errors: []
+};
+
+renderField.propTypes = {
+  input: PropTypes.object.isRequired,
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  meta: PropTypes.object.isRequired,
+  errors: PropTypes.array.isRequired
+};
+
+AuthForm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  errors: PropTypes.array.isRequired
+};
+
+AuthForm = styled(AuthForm)`
+  border-bottom: 1px solid #ececec;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+
+  > h1 {
+    font-size: 20px;
+  }
+
+  >input {
+    display: block;
+    margin-bottom: 10px;
+  }
+`;
+
+// Decorate the form component
+export default reduxForm({
+  form: 'AuthForm', // a unique name for this form
+  validate
+})(AuthForm);
diff --git a/containers/Header.js b/containers/Header.js
new file mode 100644
index 00000000..a8e3dce5
--- /dev/null
+++ b/containers/Header.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+
+import { signOut } from '../actions';
+import Header from '../components/Header';
+
+const mapStateToProps = state => ({
+  authenticated: state.auth.authenticated
+});
+
+const mapDispatchToProps = dispatch => ({
+  logout() {
+    dispatch(signOut());
+  }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/containers/SignInFormContainer.js b/containers/SignInFormContainer.js
new file mode 100644
index 00000000..fafa3a34
--- /dev/null
+++ b/containers/SignInFormContainer.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import persist from '../libraries/persist';
+import SignInForm from '../components/SignInForm';
+import { signIn } from '../actions';
+
+class SignInFormContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errors: [] };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(values) {
+    this.props
+      .Signin({ variables: values })
+      .then(response => {
+        if (response) {
+          this.props.signInDispatcher(response.data.signinUser.token);
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
+
+  render() {
+    return <SignInForm onSubmit={this.handleSubmit} />;
+  }
+}
+
+const signInMutation = gql`
+  mutation Signin($email: String!, $password: String!) {
+    signinUser(email: { email: $email, password: $password }) {
+      token
+    }
+  }
+`;
+
+SignInFormContainer.propTypes = {
+  Signin: PropTypes.func.isRequired,
+  signInDispatcher: PropTypes.func.isRequired
+};
+
+const SignInWithData = graphql(signInMutation)(SignInFormContainer);
+
+const mapDispatchToProps = dispatch => ({
+  signInDispatcher(token) {
+    persist.willSetAccessToken(token);
+    dispatch(signIn(token));
+  }
+});
+
+const SignInWithDataAndState = connect(null, mapDispatchToProps)(
+  SignInWithData
+);
+
+export default SignInWithDataAndState;
diff --git a/containers/SignUpFormContainer.js b/containers/SignUpFormContainer.js
new file mode 100644
index 00000000..c024d98c
--- /dev/null
+++ b/containers/SignUpFormContainer.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import persist from '../libraries/persist';
+import SignUpForm from '../components/SignUpForm';
+import { signIn } from '../actions';
+
+class SignUpFormContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errors: [] };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(values) {
+    this.props
+      .Create(values)
+      .then(response => {
+        if (response) {
+          this.props.signInDispatcher(response.data.signinUser.token);
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }
+
+  render() {
+    return <SignUpForm onSubmit={this.handleSubmit} />;
+  }
+}
+
+const signUpMutation = gql`
+  mutation Create(
+    $firstName: String!
+    $lastName: String!
+    $email: String!
+    $password: String!
+  ) {
+    createUser(
+      firstName: $firstName
+      lastName: $lastName
+      authProvider: { email: { email: $email, password: $password } }
+    ) {
+      id
+    }
+    signinUser(email: { email: $email, password: $password }) {
+      token
+    }
+  }
+`;
+
+SignUpFormContainer.propTypes = {
+  Create: PropTypes.func.isRequired,
+  signInDispatcher: PropTypes.func.isRequired
+};
+
+const SignUpWithData = graphql(signUpMutation, {
+  props: ({ mutate }) => ({
+    Create: ({ firstName, lastName, email, password }) =>
+      mutate({
+        variables: { firstName, lastName, email, password }
+      })
+  })
+})(SignUpFormContainer);
+
+const mapDispatchToProps = dispatch => ({
+  signInDispatcher(token) {
+    persist.willSetAccessToken(token);
+    dispatch(signIn(token));
+  }
+});
+
+const SignUpWithDataAndDispatch = connect(null, mapDispatchToProps)(
+  SignUpWithData
+);
+
+export default SignUpWithDataAndDispatch;
diff --git a/libraries/apolloClient.js b/libraries/apolloClient.js
index f17f387e..8abd2f28 100644
--- a/libraries/apolloClient.js
+++ b/libraries/apolloClient.js
@@ -17,9 +17,8 @@ const initNetworkInterface = graphqlUrl => {
         if (!req.options.headers) {
           req.options.headers = {};
         }
-
         (async () => {
-          const token = await persist.willGetSessionToken();
+          const token = await persist.willGetAccessToken();
           req.options.headers.authorization = token ? `Bearer ${token}` : null;
           next();
         })();
diff --git a/libraries/redirect.js b/libraries/redirect.js
new file mode 100644
index 00000000..0412782a
--- /dev/null
+++ b/libraries/redirect.js
@@ -0,0 +1,13 @@
+import Router from 'next/router';
+
+export default (context, target) => {
+  if (context.res) {
+    // server
+    // 303: "See other"
+    context.res.writeHead(303, { Location: target });
+    context.res.end();
+  } else {
+    // In the browser, we just pretend like this never even happened ;)
+    Router.replace(target);
+  }
+};
diff --git a/libraries/reducer.js b/libraries/reducer.js
index 54e32706..62778388 100644
--- a/libraries/reducer.js
+++ b/libraries/reducer.js
@@ -1,7 +1,11 @@
 import { combineReducers } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+import authReducer from './reducers/authReducer';
 
 export default function getReducer(client) {
   return combineReducers({
-    apollo: client.reducer()
+    apollo: client.reducer(),
+    form: formReducer,
+    auth: authReducer
   });
 }
diff --git a/libraries/reducers/authReducer.js b/libraries/reducers/authReducer.js
new file mode 100644
index 00000000..cfd0f2e4
--- /dev/null
+++ b/libraries/reducers/authReducer.js
@@ -0,0 +1,16 @@
+import { AUTH_SIGNIN, AUTH_SIGNOUT } from '../../actions';
+
+const initialState = {
+  authenticated: false
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case AUTH_SIGNIN:
+      return { ...state, authenticated: true };
+    case AUTH_SIGNOUT:
+      return { ...state, authenticated: false };
+    default:
+      return state;
+  }
+};
diff --git a/libraries/reduxStore.js b/libraries/reduxStore.js
index e56fa091..1d87690a 100644
--- a/libraries/reduxStore.js
+++ b/libraries/reduxStore.js
@@ -1,6 +1,8 @@
 import { createStore } from 'redux';
 import getReducer from './reducer';
 import createMiddleware from './middleware';
+import { AUTH_SIGNIN, AUTH_SIGNOUT } from '../actions';
+import persist from './persist';
 
 let reduxStore = null;
 
@@ -9,6 +11,14 @@ export default (apolloClient, initialState) => {
   if (!process.browser || !reduxStore) {
     const middleware = createMiddleware(apolloClient.middleware());
     store = createStore(getReducer(apolloClient), initialState, middleware);
+    (async () => {
+      const token = await Promise.resolve(persist.willGetAccessToken());
+      if (token) {
+        store.dispatch({ type: AUTH_SIGNIN });
+      } else if (!token) {
+        store.dispatch({ type: AUTH_SIGNOUT });
+      }
+    })();
     if (!process.browser) {
       return store;
     }
diff --git a/package.json b/package.json
index 7e052291..3eb95c48 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "react-helmet": "5.1.3",
     "react-redux": "5.0.5",
     "redux": "3.7.1",
+    "redux-form": "^7.0.0",
     "remote-redux-devtools": "0.5.12",
     "styled-components": "2.1.1"
   },
diff --git a/pages/create.js b/pages/create.js
index 30353e57..57b3d556 100644
--- a/pages/create.js
+++ b/pages/create.js
@@ -1,6 +1,6 @@
 import { Helmet } from 'react-helmet';
 import App from '../components/App';
-import Header from '../components/Header';
+import Header from '../containers/Header';
 import CreatePost from '../components/CreateForm';
 import withData from '../libraries/withData';
 
diff --git a/pages/details.js b/pages/details.js
index 2b5baf76..ac07c6d7 100644
--- a/pages/details.js
+++ b/pages/details.js
@@ -1,6 +1,6 @@
 import { Helmet } from 'react-helmet';
 import App from '../components/App';
-import Header from '../components/Header';
+import Header from '../containers/Header';
 import PostInfo from '../components/PostInfo';
 import withData from '../libraries/withData';
 
diff --git a/pages/index.js b/pages/index.js
index c3a666ad..65b71e54 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,6 @@
 import { Helmet } from 'react-helmet';
 import App from '../components/App';
-import Header from '../components/Header';
+import Header from '../containers/Header';
 import PostList from '../components/PostList';
 import withData from '../libraries/withData';
 
diff --git a/pages/signin.js b/pages/signin.js
new file mode 100644
index 00000000..15146863
--- /dev/null
+++ b/pages/signin.js
@@ -0,0 +1,15 @@
+import { Helmet } from 'react-helmet';
+import App from '../components/App';
+import Header from '../containers/Header';
+import SignInFormContainer from '../containers/SignInFormContainer';
+import withData from '../libraries/withData';
+
+export default withData(props =>
+  <App>
+    <Helmet>
+      <title>SignIn :: RAN! Example</title>
+    </Helmet>
+    <Header pathname={props.url.pathname} />
+    <SignInFormContainer />
+  </App>
+);
diff --git a/pages/signup.js b/pages/signup.js
new file mode 100644
index 00000000..70a42d75
--- /dev/null
+++ b/pages/signup.js
@@ -0,0 +1,15 @@
+import { Helmet } from 'react-helmet';
+import App from '../components/App';
+import Header from '../containers/Header';
+import SignUpFormContainer from '../containers/SignUpFormContainer';
+import withData from '../libraries/withData';
+
+export default withData(props =>
+  <App>
+    <Helmet>
+      <title>SignIn :: RAN! Example</title>
+    </Helmet>
+    <Header pathname={props.url.pathname} />
+    <SignUpFormContainer />
+  </App>
+);
diff --git a/routes.js b/routes.js
index 95784540..c2ded3a8 100644
--- a/routes.js
+++ b/routes.js
@@ -32,6 +32,18 @@ routes.push({
   ]
 });
 
+routes.push({
+  page: 'signin',
+  prettyUrl: () => '/sign_in',
+  prettyUrlPatterns: [{ pattern: '/sign_in', defaultParams: { lang: 'en' } }]
+});
+
+routes.push({
+  page: 'signup',
+  prettyUrl: () => '/sign_up',
+  prettyUrlPatterns: [{ pattern: '/sign_up', defaultParams: { lang: 'en' } }]
+});
+
 // ------------ ROUTES ---------------
 //
 //
diff --git a/yarn.lock b/yarn.lock
index 6a7aa6cb..1bb042a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1646,13 +1646,13 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@2, debug@2.6.8, debug@^2.2.0, debug@^2.6.8:
+debug@2, debug@2.6.8, debug@^2.1.1, debug@^2.2.0, debug@^2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
     ms "2.0.0"
 
-debug@2.6.7, debug@^2.1.1:
+debug@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
   dependencies:
@@ -1935,6 +1935,10 @@ es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
     es6-iterator "2"
     es6-symbol "~3.1"
 
+es6-error@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.2.tgz#eec5c726eacef51b7f6b73c20db6e1b13b069c98"
+
 es6-iterator@2, es6-iterator@^2.0.1, es6-iterator@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.1.tgz#8e319c9f0453bf575d374940a655920e59ca5512"
@@ -3592,7 +3596,7 @@ lock@^0.1.2:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/lock/-/lock-0.1.3.tgz#f66c1caa0c41956e1426608039ed59b71bdf1854"
 
-lodash-es@^4.2.0, lodash-es@^4.2.1:
+lodash-es@^4.17.3, lodash-es@^4.2.0, lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
 
@@ -3686,7 +3690,7 @@ lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
-lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4563,7 +4567,7 @@ promise@^7.0.1, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.5.10, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
+prop-types@15.5.10, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.5.9:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -4886,6 +4890,19 @@ redux-devtools-instrument@^1.3.3:
     lodash "^4.2.0"
     symbol-observable "^1.0.2"
 
+redux-form@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.0.0.tgz#6ef9eb72c1df1ee676139d74b5e7503f9ce0f0cb"
+  dependencies:
+    deep-equal "^1.0.1"
+    es6-error "^4.0.0"
+    hoist-non-react-statics "^2.0.0"
+    invariant "^2.2.2"
+    is-promise "^2.1.0"
+    lodash "^4.17.3"
+    lodash-es "^4.17.3"
+    prop-types "^15.5.9"
+
 redux@3.7.1, redux@^3.4.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.1.tgz#bfc535c757d3849562ead0af18ac52122cd7268e"
@@ -5541,14 +5558,7 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-string-width@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^3.0.0"
-
-string-width@^2.1.0:
+string-width@^2.0.0, string-width@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.0.tgz#030664561fc146c9423ec7d978fe2457437fe6d0"
   dependencies:

From ea8186b1722d5f786bb76dff91ea61f181ebe6b8 Mon Sep 17 00:00:00 2001
From: Asten Mies <sebastien@qualitsy.com>
Date: Thu, 13 Jul 2017 01:47:56 +0200
Subject: [PATCH 02/10] Disable eslint for mutations

---
 containers/SignInFormContainer.js | 12 ++++++------
 containers/SignUpFormContainer.js | 11 ++++++-----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/containers/SignInFormContainer.js b/containers/SignInFormContainer.js
index fafa3a34..7bd1ecb9 100644
--- a/containers/SignInFormContainer.js
+++ b/containers/SignInFormContainer.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { graphql } from 'react-apollo';
 import gql from 'graphql-tag';
@@ -16,7 +17,7 @@ class SignInFormContainer extends React.Component {
 
   handleSubmit(values) {
     this.props
-      .Signin({ variables: values })
+      .mutate({ variables: values })
       .then(response => {
         if (response) {
           this.props.signInDispatcher(response.data.signinUser.token);
@@ -40,11 +41,6 @@ const signInMutation = gql`
   }
 `;
 
-SignInFormContainer.propTypes = {
-  Signin: PropTypes.func.isRequired,
-  signInDispatcher: PropTypes.func.isRequired
-};
-
 const SignInWithData = graphql(signInMutation)(SignInFormContainer);
 
 const mapDispatchToProps = dispatch => ({
@@ -58,4 +54,8 @@ const SignInWithDataAndState = connect(null, mapDispatchToProps)(
   SignInWithData
 );
 
+SignInFormContainer.propTypes = {
+  mutate: PropTypes.func
+}
+
 export default SignInWithDataAndState;
diff --git a/containers/SignUpFormContainer.js b/containers/SignUpFormContainer.js
index c024d98c..b00cedea 100644
--- a/containers/SignUpFormContainer.js
+++ b/containers/SignUpFormContainer.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import { graphql } from 'react-apollo';
 import gql from 'graphql-tag';
@@ -52,11 +53,6 @@ const signUpMutation = gql`
   }
 `;
 
-SignUpFormContainer.propTypes = {
-  Create: PropTypes.func.isRequired,
-  signInDispatcher: PropTypes.func.isRequired
-};
-
 const SignUpWithData = graphql(signUpMutation, {
   props: ({ mutate }) => ({
     Create: ({ firstName, lastName, email, password }) =>
@@ -77,4 +73,9 @@ const SignUpWithDataAndDispatch = connect(null, mapDispatchToProps)(
   SignUpWithData
 );
 
+SignUpFormContainer.propTypes = {
+  Create: PropTypes.func,
+  signInDispatcher: PropTypes.func.isRequired
+};
+
 export default SignUpWithDataAndDispatch;

From 5a1c6f37055d7b5d662d59f54d2ce9ceb63b0c30 Mon Sep 17 00:00:00 2001
From: Asten Mies <sebastien@qualitsy.com>
Date: Thu, 13 Jul 2017 12:15:09 +0200
Subject: [PATCH 03/10] Error states added

---
 components/SignInForm.js          | 15 ++++++---------
 components/SignUpForm.js          | 16 ++++++----------
 containers/SignInFormContainer.js | 21 ++++++++++++++-------
 containers/SignUpFormContainer.js | 23 +++++++++++------------
 libraries/withData.js             |  1 -
 package.json                      |  1 +
 yarn.lock                         |  2 +-
 7 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/components/SignInForm.js b/components/SignInForm.js
index 113c039b..80d91544 100644
--- a/components/SignInForm.js
+++ b/components/SignInForm.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Field, reduxForm } from 'redux-form';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import shortid from 'shortid';
 
 const renderField = ({ input, label, type, meta: { touched, error } }) =>
   <div>
@@ -16,9 +17,9 @@ const renderField = ({ input, label, type, meta: { touched, error } }) =>
 const renderErrors = errors =>
   <div className="alert alert-danger" role="alert">
     {errors &&
-      errors.map(error =>
-        <span key={error.id}>
-          {error.value}
+      errors.map(err =>
+        <span key={shortid.generate()}>
+          {err.message}
         </span>
       )}
   </div>;
@@ -53,18 +54,14 @@ const validate = values => {
 
   if (!values.email) {
     errors.email = 'Required';
-    errors.id = 3;
   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
     errors.email = 'Invalid email address';
-    errors.id = 4;
   }
 
   if (!values.password) {
     errors.password = 'Required';
-    errors.id = 5;
   } else if (values.password.length <= 3) {
     errors.password = 'Must be at least 4 characters';
-    errors.id = 6;
   }
 
   return errors;
@@ -83,12 +80,12 @@ renderField.propTypes = {
   label: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
   meta: PropTypes.object.isRequired,
-  errors: PropTypes.array.isRequired
+  errors: PropTypes.array
 };
 
 AuthForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
-  errors: PropTypes.array.isRequired
+  errors: PropTypes.array
 };
 
 AuthForm = styled(AuthForm)`
diff --git a/components/SignUpForm.js b/components/SignUpForm.js
index d11b568f..fe460fef 100644
--- a/components/SignUpForm.js
+++ b/components/SignUpForm.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Field, reduxForm } from 'redux-form';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import shortid from 'shortid';
 
 const renderField = ({ input, label, type, meta: { touched, error } }) =>
   <div>
@@ -16,9 +17,9 @@ const renderField = ({ input, label, type, meta: { touched, error } }) =>
 const renderErrors = errors =>
   <div className="alert alert-danger" role="alert">
     {errors &&
-      errors.map(error =>
-        <span key={error.id}>
-          {error.value}
+      errors.map(err =>
+        <span key={shortid.generate()}>
+          {err.message}
         </span>
       )}
   </div>;
@@ -64,12 +65,10 @@ const validate = values => {
   const errors = {};
   if (!values.firstName) {
     errors.firstName = 'Required';
-    errors.id = 1;
   }
 
   if (!values.lastName) {
     errors.lastName = 'Required';
-    errors.id = 2;
   }
 
   if (!values.email) {
@@ -77,15 +76,12 @@ const validate = values => {
     errors.id = 3;
   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
     errors.email = 'Invalid email address';
-    errors.id = 4;
   }
 
   if (!values.password) {
     errors.password = 'Required';
-    errors.id = 5;
   } else if (values.password.length <= 3) {
     errors.password = 'Must be at least 4 characters';
-    errors.id = 6;
   }
 
   return errors;
@@ -104,12 +100,12 @@ renderField.propTypes = {
   label: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
   meta: PropTypes.object.isRequired,
-  errors: PropTypes.array.isRequired
+  errors: PropTypes.array
 };
 
 AuthForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
-  errors: PropTypes.array.isRequired
+  errors: PropTypes.array
 };
 
 AuthForm = styled(AuthForm)`
diff --git a/containers/SignInFormContainer.js b/containers/SignInFormContainer.js
index 7bd1ecb9..6800bc2b 100644
--- a/containers/SignInFormContainer.js
+++ b/containers/SignInFormContainer.js
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import persist from '../libraries/persist';
 import SignInForm from '../components/SignInForm';
 import { signIn } from '../actions';
+import redirect from '../libraries/redirect';
 
 class SignInFormContainer extends React.Component {
   constructor(props) {
@@ -17,19 +18,18 @@ class SignInFormContainer extends React.Component {
 
   handleSubmit(values) {
     this.props
-      .mutate({ variables: values })
+      .Signin(values)
       .then(response => {
-        if (response) {
+        if (response.data) {
           this.props.signInDispatcher(response.data.signinUser.token);
         }
+      }).catch(err => {
+        this.setState({errors: [err.graphQLErrors[0]]})
       })
-      .catch(err => {
-        console.error(err);
-      });
   }
 
   render() {
-    return <SignInForm onSubmit={this.handleSubmit} />;
+    return <SignInForm onSubmit={this.handleSubmit} errors={this.state.errors} />;
   }
 }
 
@@ -41,7 +41,14 @@ const signInMutation = gql`
   }
 `;
 
-const SignInWithData = graphql(signInMutation)(SignInFormContainer);
+const SignInWithData = graphql(signInMutation, {
+  props: ({ mutate }) => ({
+    Signin: ({ email, password }) =>
+      mutate({
+        variables: { email, password }
+      })
+  })
+  })(SignInFormContainer);
 
 const mapDispatchToProps = dispatch => ({
   signInDispatcher(token) {
diff --git a/containers/SignUpFormContainer.js b/containers/SignUpFormContainer.js
index b00cedea..487a5de2 100644
--- a/containers/SignUpFormContainer.js
+++ b/containers/SignUpFormContainer.js
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import persist from '../libraries/persist';
 import SignUpForm from '../components/SignUpForm';
 import { signIn } from '../actions';
+import redirect from '../libraries/redirect';
 
 class SignUpFormContainer extends React.Component {
   constructor(props) {
@@ -17,24 +18,23 @@ class SignUpFormContainer extends React.Component {
 
   handleSubmit(values) {
     this.props
-      .Create(values)
+      .NewUser(values)
       .then(response => {
-        if (response) {
-          this.props.signInDispatcher(response.data.signinUser.token);
+        if (response.data) {
+          this.props.signUpDispatcher(response.data.signinUser.token);
         }
+      }).catch(err => {
+        this.setState({errors: [err.graphQLErrors[0]]})
       })
-      .catch(err => {
-        console.error(err);
-      });
   }
 
   render() {
-    return <SignUpForm onSubmit={this.handleSubmit} />;
+    return <SignUpForm onSubmit={this.handleSubmit} errors={this.state.errors} />;
   }
 }
 
 const signUpMutation = gql`
-  mutation Create(
+  mutation NewUser(
     $firstName: String!
     $lastName: String!
     $email: String!
@@ -55,7 +55,7 @@ const signUpMutation = gql`
 
 const SignUpWithData = graphql(signUpMutation, {
   props: ({ mutate }) => ({
-    Create: ({ firstName, lastName, email, password }) =>
+    NewUser: ({ firstName, lastName, email, password }) =>
       mutate({
         variables: { firstName, lastName, email, password }
       })
@@ -63,7 +63,7 @@ const SignUpWithData = graphql(signUpMutation, {
 })(SignUpFormContainer);
 
 const mapDispatchToProps = dispatch => ({
-  signInDispatcher(token) {
+  signUpDispatcher(token) {
     persist.willSetAccessToken(token);
     dispatch(signIn(token));
   }
@@ -74,8 +74,7 @@ const SignUpWithDataAndDispatch = connect(null, mapDispatchToProps)(
 );
 
 SignUpFormContainer.propTypes = {
-  Create: PropTypes.func,
-  signInDispatcher: PropTypes.func.isRequired
+  NewUser: PropTypes.func,
 };
 
 export default SignUpWithDataAndDispatch;
diff --git a/libraries/withData.js b/libraries/withData.js
index 2f6c393f..fa7e35f4 100644
--- a/libraries/withData.js
+++ b/libraries/withData.js
@@ -17,7 +17,6 @@ export default Component =>
       const headers = ctx.req ? ctx.req.headers : {};
       const client = apolloClient(headers);
       const store = reduxStore(client, client.initialState);
-
       const props = {
         url: { query: ctx.query, pathname: ctx.pathname },
         ...(await (Component.getInitialProps
diff --git a/package.json b/package.json
index 3eb95c48..b7e88d79 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "redux": "3.7.1",
     "redux-form": "^7.0.0",
     "remote-redux-devtools": "0.5.12",
+    "shortid": "^2.2.8",
     "styled-components": "2.1.1"
   },
   "description": "React . Apollo (GraphQL) . Next.js Boilerplate",
diff --git a/yarn.lock b/yarn.lock
index 1bb042a8..cffeb4c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5331,7 +5331,7 @@ shelljs@0.7.8, shelljs@^0.7.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-shortid@^2.2.6:
+shortid@^2.2.6, shortid@^2.2.8:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.8.tgz#033b117d6a2e975804f6f0969dbe7d3d0b355131"
 

From 0676dfb757bf79b8f930be3485a58973bfe097c5 Mon Sep 17 00:00:00 2001
From: Sly777 <ilker.guller.777@gmail.com>
Date: Fri, 14 Jul 2017 15:55:24 +0200
Subject: [PATCH 04/10] Added new container: Default Updated all pages because
 of DRY

---
 containers/Default.js | 27 +++++++++++++++++++++++++++
 pages/create.js       | 12 +++---------
 pages/details.js      | 14 +++-----------
 pages/index.js        | 12 +++---------
 pages/signin.js       | 12 +++---------
 pages/signup.js       | 12 +++---------
 6 files changed, 42 insertions(+), 47 deletions(-)
 create mode 100644 containers/Default.js

diff --git a/containers/Default.js b/containers/Default.js
new file mode 100644
index 00000000..3e10a511
--- /dev/null
+++ b/containers/Default.js
@@ -0,0 +1,27 @@
+import { Helmet } from 'react-helmet';
+import PropTypes from 'prop-types';
+import App from '../components/App';
+import Header from '../containers/Header';
+
+const Default = props =>
+  <App>
+    <Helmet>
+      <title>
+        {props.title !== '' ? `${props.title} :: RAN! Example` : 'RAN! Example'}
+      </title>
+    </Helmet>
+    <Header pathname={props.url.pathname} />
+    {props.children}
+  </App>;
+
+Default.propTypes = {
+  title: PropTypes.string,
+  url: PropTypes.object.isRequired,
+  children: PropTypes.element.isRequired
+};
+
+Default.defaultProps = {
+  title: ''
+};
+
+export default Default;
diff --git a/pages/create.js b/pages/create.js
index 57b3d556..5a4bcf05 100644
--- a/pages/create.js
+++ b/pages/create.js
@@ -1,15 +1,9 @@
-import { Helmet } from 'react-helmet';
-import App from '../components/App';
-import Header from '../containers/Header';
 import CreatePost from '../components/CreateForm';
 import withData from '../libraries/withData';
+import DefaultCon from '../containers/Default';
 
 export default withData(props =>
-  <App>
-    <Helmet>
-      <title>Create Post :: RAN! Example</title>
-    </Helmet>
-    <Header pathname={props.url.pathname} />
+  <DefaultCon title="Create Post" {...props}>
     <CreatePost />
-  </App>
+  </DefaultCon>
 );
diff --git a/pages/details.js b/pages/details.js
index ac07c6d7..16a6629c 100644
--- a/pages/details.js
+++ b/pages/details.js
@@ -1,20 +1,12 @@
-import { Helmet } from 'react-helmet';
-import App from '../components/App';
-import Header from '../containers/Header';
 import PostInfo from '../components/PostInfo';
 import withData from '../libraries/withData';
+import DefaultCon from '../containers/Default';
 
 export default withData(props =>
-  <App>
-    <Helmet>
-      <title>
-        {decodeURIComponent(props.url.query.postTitle)} :: RAN! Example
-      </title>
-    </Helmet>
-    <Header pathname={props.url.pathname} />
+  <DefaultCon title={decodeURIComponent(props.url.query.postTitle)} {...props}>
     <PostInfo
       postId={props.url.query.postId}
       postTitle={props.url.query.postTitle}
     />
-  </App>
+  </DefaultCon>
 );
diff --git a/pages/index.js b/pages/index.js
index 65b71e54..922e954c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,15 +1,9 @@
-import { Helmet } from 'react-helmet';
-import App from '../components/App';
-import Header from '../containers/Header';
 import PostList from '../components/PostList';
 import withData from '../libraries/withData';
+import DefaultCon from '../containers/Default';
 
 export default withData(props =>
-  <App>
-    <Helmet>
-      <title>RAN! Example</title>
-    </Helmet>
-    <Header pathname={props.url.pathname} />
+  <DefaultCon {...props}>
     <PostList />
-  </App>
+  </DefaultCon>
 );
diff --git a/pages/signin.js b/pages/signin.js
index 15146863..cc7191e4 100644
--- a/pages/signin.js
+++ b/pages/signin.js
@@ -1,15 +1,9 @@
-import { Helmet } from 'react-helmet';
-import App from '../components/App';
-import Header from '../containers/Header';
 import SignInFormContainer from '../containers/SignInFormContainer';
 import withData from '../libraries/withData';
+import DefaultCon from '../containers/Default';
 
 export default withData(props =>
-  <App>
-    <Helmet>
-      <title>SignIn :: RAN! Example</title>
-    </Helmet>
-    <Header pathname={props.url.pathname} />
+  <DefaultCon title="Sign In" {...props}>
     <SignInFormContainer />
-  </App>
+  </DefaultCon>
 );
diff --git a/pages/signup.js b/pages/signup.js
index 70a42d75..c786e5dd 100644
--- a/pages/signup.js
+++ b/pages/signup.js
@@ -1,15 +1,9 @@
-import { Helmet } from 'react-helmet';
-import App from '../components/App';
-import Header from '../containers/Header';
 import SignUpFormContainer from '../containers/SignUpFormContainer';
 import withData from '../libraries/withData';
+import DefaultCon from '../containers/Default';
 
 export default withData(props =>
-  <App>
-    <Helmet>
-      <title>SignIn :: RAN! Example</title>
-    </Helmet>
-    <Header pathname={props.url.pathname} />
+  <DefaultCon title="Sign Up" {...props}>
     <SignUpFormContainer />
-  </App>
+  </DefaultCon>
 );

From 06ecdb8981c230cb0b116df5ea52d87a841fd89f Mon Sep 17 00:00:00 2001
From: Asten Mies <sebastien@qualitsy.com>
Date: Sat, 15 Jul 2017 05:01:27 +0200
Subject: [PATCH 05/10] Compact form

---
 .gitignore                               |   1 -
 actions/index.js                         |   7 +-
 components/AuthFields.js                 |  57 ++++++++
 components/SignUpForm.js                 | 130 ------------------
 containers/AuthForm.js                   | 167 +++++++++++++++++++++++
 containers/Header.js                     |   5 +-
 containers/SignInFormContainer.js        |  68 ---------
 containers/SignUpFormContainer.js        |  80 -----------
 libraries/mutations/createUserWrapper.js |  49 +++++++
 libraries/mutations/signinUserWrapper.js |  37 +++++
 libraries/persist.js                     |   1 +
 package.json                             |   1 -
 pages/signin.js                          |   6 +-
 pages/signup.js                          |   6 +-
 yarn.lock                                |   8 +-
 15 files changed, 327 insertions(+), 296 deletions(-)
 create mode 100644 components/AuthFields.js
 delete mode 100644 components/SignUpForm.js
 create mode 100644 containers/AuthForm.js
 delete mode 100644 containers/SignInFormContainer.js
 delete mode 100644 containers/SignUpFormContainer.js
 create mode 100644 libraries/mutations/createUserWrapper.js
 create mode 100644 libraries/mutations/signinUserWrapper.js

diff --git a/.gitignore b/.gitignore
index b7487c39..2fe34731 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,6 @@
 .next/
 config.js
 .env
-yarn.lock
 coverage/
 
 # Created by https://www.gitignore.io/api/node,macos,linux,windows,webstorm,sublimetext,visualstudiocode
diff --git a/actions/index.js b/actions/index.js
index ef1cc078..011375df 100644
--- a/actions/index.js
+++ b/actions/index.js
@@ -2,12 +2,13 @@ export const AUTH_SIGNIN = 'AUTH_SIGNIN';
 export const AUTH_SIGNOUT = 'AUTH_SIGNOUT';
 const localForage = require('localforage');
 
-export const signIn = token => {
-  localForage.setItem('accessToken', token);
+export const signinAction = token => {
+  console.log('TO', token);
+  localForage.setItem('accessToken', token).then(console.log('TOKEN', token));
   return { type: AUTH_SIGNIN };
 };
 
-export const signOut = () => {
+export const signoutAction = () => {
   localForage.removeItem('accessToken');
   return { type: AUTH_SIGNOUT };
 };
diff --git a/components/AuthFields.js b/components/AuthFields.js
new file mode 100644
index 00000000..0e8473cc
--- /dev/null
+++ b/components/AuthFields.js
@@ -0,0 +1,57 @@
+/* eslint-disable */
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const AuthFields = props => {
+  const { handleChange, handleSubmit, handleTouch, content, fields, touched, errors } = props;
+  const mapFields = fields.map(field =>
+    <div key={field.key}>
+      <input
+        name={field.attr.name}
+        type={field.attr.type}
+        placeholder={field.attr.label}
+        onChange={handleChange}
+        onFocus={handleTouch}
+      />
+    {errors &&
+        <div>
+          {errors[field.attr.name]}
+        </div>}
+    </div>
+  );
+  return (
+    <div>
+      <form>
+        {mapFields}
+        <br/>
+        <button onClick={handleSubmit} className={!touched && "buttonDisabled"} disabled={!touched}>Submit</button>
+      </form>
+    </div>
+  );
+};
+
+AuthFields.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  handleChange: PropTypes.func,
+  errors: PropTypes.object
+};
+
+export default styled(AuthFields)`
+  border-bottom: 1px solid #ececec;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+
+  > h1 {
+    font-size: 20px;
+  }
+
+  >input {
+    display: block;
+    margin-bottom: 10px;
+  }
+  >button {
+      backgroundColor: red !important;
+    }
+`;
+
diff --git a/components/SignUpForm.js b/components/SignUpForm.js
deleted file mode 100644
index fe460fef..00000000
--- a/components/SignUpForm.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react';
-import { Field, reduxForm } from 'redux-form';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import shortid from 'shortid';
-
-const renderField = ({ input, label, type, meta: { touched, error } }) =>
-  <div>
-    <input {...input} placeholder={label} type={type} />
-    {touched &&
-      error &&
-      <div>
-        {error}
-      </div>}
-  </div>;
-
-const renderErrors = errors =>
-  <div className="alert alert-danger" role="alert">
-    {errors &&
-      errors.map(err =>
-        <span key={shortid.generate()}>
-          {err.message}
-        </span>
-      )}
-  </div>;
-
-let AuthForm = props => {
-  const { handleSubmit } = props;
-  const errors = props.errors <= 0 ? null : renderErrors(props.errors);
-  return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        {errors}
-        <Field
-          name="firstName"
-          type="text"
-          component={renderField}
-          label="First Name"
-        />
-        <Field
-          name="lastName"
-          type="text"
-          component={renderField}
-          label="Last Name"
-        />
-        <Field
-          name="email"
-          type="email"
-          component={renderField}
-          label="Email"
-        />
-        <Field
-          name="password"
-          type="password"
-          component={renderField}
-          label="Password"
-        />
-        <button type="submit">Submit</button>
-      </form>
-    </div>
-  );
-};
-
-const validate = values => {
-  const errors = {};
-  if (!values.firstName) {
-    errors.firstName = 'Required';
-  }
-
-  if (!values.lastName) {
-    errors.lastName = 'Required';
-  }
-
-  if (!values.email) {
-    errors.email = 'Required';
-    errors.id = 3;
-  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
-    errors.email = 'Invalid email address';
-  }
-
-  if (!values.password) {
-    errors.password = 'Required';
-  } else if (values.password.length <= 3) {
-    errors.password = 'Must be at least 4 characters';
-  }
-
-  return errors;
-};
-
-renderField.defaultProps = {
-  errors: []
-};
-
-AuthForm.defaultProps = {
-  errors: []
-};
-
-renderField.propTypes = {
-  input: PropTypes.object.isRequired,
-  label: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  meta: PropTypes.object.isRequired,
-  errors: PropTypes.array
-};
-
-AuthForm.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
-  errors: PropTypes.array
-};
-
-AuthForm = styled(AuthForm)`
-  border-bottom: 1px solid #ececec;
-  padding-bottom: 20px;
-  margin-bottom: 20px;
-
-  > h1 {
-    font-size: 20px;
-  }
-
-  >input {
-    display: block;
-    margin-bottom: 10px;
-  }
-`;
-
-// Decorate the form component
-export default reduxForm({
-  form: 'AuthForm', // a unique name for this form
-  validate
-})(AuthForm);
diff --git a/containers/AuthForm.js b/containers/AuthForm.js
new file mode 100644
index 00000000..ca39f02b
--- /dev/null
+++ b/containers/AuthForm.js
@@ -0,0 +1,167 @@
+/* eslint-disable */
+import React from 'react';
+import { gql, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import persist from '../libraries/persist';
+import AuthFields from '../components/AuthFields';
+import { signinAction } from '../actions';
+import createUserWrapper from '../libraries/mutations/createUserWrapper';
+import signinUserWrapper from '../libraries/mutations/signinUserWrapper';
+const renderErrors = errors => {
+  return (
+      <div className="alert alert-danger" role="alert">
+        {errors &&
+          errors.map(err =>
+            <span key={shortid.generate()}>
+              {err.message}
+            </span>
+          )}
+      </div>
+  )
+}
+
+
+
+const validate = values => {
+  const errors = {};
+  const touched = true;
+  if (!values.firstName) {
+    errors.firstName = 'Required';
+  }
+
+  if (!values.lastName) {
+    errors.lastName = 'Required';
+  }
+
+  if (!values.email) {
+    errors.email = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+    errors.email = 'Invalid email address';
+  }
+
+  if (!values.password) {
+    errors.password = 'Required';
+  } else if (values.password.length <= 3) {
+    errors.password = 'Must be at least 4 characters';
+  }
+  return {errors, touched};
+};
+
+const formFields = {
+  signupFields: [
+      {key: 1, attr: {name: 'firstName', type: 'text',     label: 'First Name'}},
+      {key: 2, attr: {name: 'lastName',  type: 'text',     label: 'Last Name'}},
+      {key: 3, attr: {name: 'email',     type: 'email',    label: 'Email'}},
+      {key: 4, attr: {name: 'password',  type: 'password', label: 'Password'}}
+  ],
+  signinFields: [
+      {key: 1, attr: {name: 'email',     type: 'email',    label: 'Email'}},
+      {key: 2, attr: {name: 'password',  type: 'password', label: 'Password'}}
+  ]
+}
+
+class AuthForm extends React.Component {
+    constructor(props){
+      super(props);
+      let formValues;
+      this.state = {
+        errors: {},
+        serverErrors: {},
+        touched: false
+      };
+      this.handleChange = this.handleChange.bind(this);
+      this.handleTouch = this.handleTouch.bind(this)
+    }
+
+    handleChange(e){
+      const fieldValue = e.target.value;
+      const fieldName = e.target.name;
+      let obj = {};
+      obj[fieldName] = fieldValue;
+      this.setState(obj);
+    }
+
+    handleTouch(){
+      this.setState({touched: true})
+    }
+
+    handleSubmit(e, valuesPack) {
+      e.preventDefault();
+      const handleValidate = validate(valuesPack);
+      if(handleValidate.touched) {
+        this.setState({touched: handleValidate.touched})
+      }
+      if(handleValidate.errors) {
+        this.setState({errors: handleValidate.errors})
+      }
+      if(this.props.selectFields === 'signupFields'){
+        this.props.createUser(valuesPack)
+        .then((response) => {
+          // !response.data.signinUser.errors
+          if (response.data) {
+            this.props.signinDispatcher(response.data.signinUser.token);
+          } else {
+            this.setState({
+              errors: response.data.createUser.errors
+            });
+          }
+        })
+        .catch((err) => {
+          if(err.graphQLErrors){
+            let obj = {};
+            obj['message'] = err.graphQLErrors[0].message
+            this.setState({
+              serverErrors: obj
+            })
+          } else console.log(err)
+        });
+      }
+      if(this.props.selectFields === 'signinFields'){
+        this.props.signinUser(valuesPack)
+          .then(response => {
+            console.log('RES', response)
+            if (response.data) {
+              this.props.signinUserDispatcher(response.data.signinUser.token);
+            }
+          }).catch((err) => {
+            if(err.graphQLErrors){
+              let obj = {};
+              obj['message'] = err.graphQLErrors[0].message
+              this.setState({
+                serverErrors: obj
+              })
+            } else console.log(err)
+          });
+      }
+    }
+
+    render(){
+      const { selectFields } = this.props;
+      const fields = formFields[selectFields];
+      const valuesPack = {}
+      const formValues = fields.map(x => {
+        const y = x.attr.name;
+        valuesPack[y] = this.state[y];
+      })
+      return (
+          <div>
+            {this.state.serverErrors &&
+                <div>
+                  {this.state.serverErrors.message}
+                </div>}
+            <AuthFields
+              handleSubmit={(e)=> {this.handleSubmit(e, valuesPack)}}
+              handleChange={this.handleChange}
+              fields={fields}
+              errors={this.state.errors}
+              touched={this.state.touched}
+              handleTouch={this.handleTouch}
+            />
+          <br />
+          </div>
+      );
+    }
+};
+
+exports.SignupContainer = createUserWrapper(AuthForm);
+exports.SigninContainer = signinUserWrapper(AuthForm);
diff --git a/containers/Header.js b/containers/Header.js
index a8e3dce5..58f35541 100644
--- a/containers/Header.js
+++ b/containers/Header.js
@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
-
-import { signOut } from '../actions';
+import { signoutAction } from '../actions';
 import Header from '../components/Header';
 
 const mapStateToProps = state => ({
@@ -9,7 +8,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   logout() {
-    dispatch(signOut());
+    dispatch(signoutAction());
   }
 });
 
diff --git a/containers/SignInFormContainer.js b/containers/SignInFormContainer.js
deleted file mode 100644
index 6800bc2b..00000000
--- a/containers/SignInFormContainer.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import { graphql } from 'react-apollo';
-import gql from 'graphql-tag';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import persist from '../libraries/persist';
-import SignInForm from '../components/SignInForm';
-import { signIn } from '../actions';
-import redirect from '../libraries/redirect';
-
-class SignInFormContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { errors: [] };
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleSubmit(values) {
-    this.props
-      .Signin(values)
-      .then(response => {
-        if (response.data) {
-          this.props.signInDispatcher(response.data.signinUser.token);
-        }
-      }).catch(err => {
-        this.setState({errors: [err.graphQLErrors[0]]})
-      })
-  }
-
-  render() {
-    return <SignInForm onSubmit={this.handleSubmit} errors={this.state.errors} />;
-  }
-}
-
-const signInMutation = gql`
-  mutation Signin($email: String!, $password: String!) {
-    signinUser(email: { email: $email, password: $password }) {
-      token
-    }
-  }
-`;
-
-const SignInWithData = graphql(signInMutation, {
-  props: ({ mutate }) => ({
-    Signin: ({ email, password }) =>
-      mutate({
-        variables: { email, password }
-      })
-  })
-  })(SignInFormContainer);
-
-const mapDispatchToProps = dispatch => ({
-  signInDispatcher(token) {
-    persist.willSetAccessToken(token);
-    dispatch(signIn(token));
-  }
-});
-
-const SignInWithDataAndState = connect(null, mapDispatchToProps)(
-  SignInWithData
-);
-
-SignInFormContainer.propTypes = {
-  mutate: PropTypes.func
-}
-
-export default SignInWithDataAndState;
diff --git a/containers/SignUpFormContainer.js b/containers/SignUpFormContainer.js
deleted file mode 100644
index 487a5de2..00000000
--- a/containers/SignUpFormContainer.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import { graphql } from 'react-apollo';
-import gql from 'graphql-tag';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import persist from '../libraries/persist';
-import SignUpForm from '../components/SignUpForm';
-import { signIn } from '../actions';
-import redirect from '../libraries/redirect';
-
-class SignUpFormContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { errors: [] };
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleSubmit(values) {
-    this.props
-      .NewUser(values)
-      .then(response => {
-        if (response.data) {
-          this.props.signUpDispatcher(response.data.signinUser.token);
-        }
-      }).catch(err => {
-        this.setState({errors: [err.graphQLErrors[0]]})
-      })
-  }
-
-  render() {
-    return <SignUpForm onSubmit={this.handleSubmit} errors={this.state.errors} />;
-  }
-}
-
-const signUpMutation = gql`
-  mutation NewUser(
-    $firstName: String!
-    $lastName: String!
-    $email: String!
-    $password: String!
-  ) {
-    createUser(
-      firstName: $firstName
-      lastName: $lastName
-      authProvider: { email: { email: $email, password: $password } }
-    ) {
-      id
-    }
-    signinUser(email: { email: $email, password: $password }) {
-      token
-    }
-  }
-`;
-
-const SignUpWithData = graphql(signUpMutation, {
-  props: ({ mutate }) => ({
-    NewUser: ({ firstName, lastName, email, password }) =>
-      mutate({
-        variables: { firstName, lastName, email, password }
-      })
-  })
-})(SignUpFormContainer);
-
-const mapDispatchToProps = dispatch => ({
-  signUpDispatcher(token) {
-    persist.willSetAccessToken(token);
-    dispatch(signIn(token));
-  }
-});
-
-const SignUpWithDataAndDispatch = connect(null, mapDispatchToProps)(
-  SignUpWithData
-);
-
-SignUpFormContainer.propTypes = {
-  NewUser: PropTypes.func,
-};
-
-export default SignUpWithDataAndDispatch;
diff --git a/libraries/mutations/createUserWrapper.js b/libraries/mutations/createUserWrapper.js
new file mode 100644
index 00000000..9f4e49f3
--- /dev/null
+++ b/libraries/mutations/createUserWrapper.js
@@ -0,0 +1,49 @@
+import { gql, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import persist from '../persist';
+import { signinAction } from '../../actions';
+
+function createUserWrapper(AuthForm) {
+  const createUserMutation = gql`
+    mutation createUser(
+      $firstName: String!
+      $lastName: String!
+      $email: String!
+      $password: String!
+    ) {
+      createUser(
+        firstName: $firstName
+        lastName: $lastName
+        authProvider: { email: { email: $email, password: $password } }
+      ) {
+        id
+      }
+      signinUser(email: { email: $email, password: $password }) {
+        token
+      }
+    }
+  `;
+
+  const createUserWithData = graphql(createUserMutation, {
+    props: ({ mutate }) => ({
+      createUser: ({ firstName, lastName, email, password }) =>
+        mutate({
+          variables: { firstName, lastName, email, password }
+        })
+    })
+  })(AuthForm);
+
+  const mapDispatchToProps = dispatch => ({
+    signinDispatcher(token) {
+      persist.willSetAccessToken(token);
+      dispatch(signinAction(token));
+    }
+  });
+
+  const createUserWithDataAndDispatch = connect(null, mapDispatchToProps)(
+    createUserWithData
+  );
+  return createUserWithDataAndDispatch;
+}
+
+export default createUserWrapper;
diff --git a/libraries/mutations/signinUserWrapper.js b/libraries/mutations/signinUserWrapper.js
new file mode 100644
index 00000000..45fa8d98
--- /dev/null
+++ b/libraries/mutations/signinUserWrapper.js
@@ -0,0 +1,37 @@
+import { gql, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import persist from '../persist';
+import { signinAction } from '../../actions';
+
+function signinUserWrapper(AuthForm) {
+  const signinUserMutation = gql`
+    mutation Signin($email: String!, $password: String!) {
+      signinUser(email: { email: $email, password: $password }) {
+        token
+      }
+    }
+  `;
+
+  const signinUserWithData = graphql(signinUserMutation, {
+    props: ({ mutate }) => ({
+      signinUser: ({ email, password }) =>
+        mutate({
+          variables: { email, password }
+        })
+    })
+  })(AuthForm);
+
+  const mapDispatchToProps = dispatch => ({
+    signinUserDispatcher(token) {
+      persist.willSetAccessToken(token);
+      dispatch(signinAction(token));
+    }
+  });
+
+  const signinUserWithDataAndDispatch = connect(null, mapDispatchToProps)(
+    signinUserWithData
+  );
+  return signinUserWithDataAndDispatch;
+}
+
+export default signinUserWrapper;
diff --git a/libraries/persist.js b/libraries/persist.js
index c8baa9fe..080bd98a 100644
--- a/libraries/persist.js
+++ b/libraries/persist.js
@@ -27,6 +27,7 @@ class persist {
   }
 
   static async willSetAccessToken(value) {
+    console.log('willSetAccessToken', value);
     return localForage
       .setItem(persist.ACCESS_TOKEN_KEY, value)
       .catch(err => err);
diff --git a/package.json b/package.json
index fac7874c..8240f18e 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
     "redux": "3.7.1",
     "redux-form": "^7.0.0",
     "remote-redux-devtools": "0.5.12",
-    "shortid": "^2.2.8",
     "styled-components": "2.1.1"
   },
   "description": "React . Apollo (GraphQL) . Next.js Boilerplate",
diff --git a/pages/signin.js b/pages/signin.js
index cc7191e4..692f55ed 100644
--- a/pages/signin.js
+++ b/pages/signin.js
@@ -1,9 +1,11 @@
-import SignInFormContainer from '../containers/SignInFormContainer';
 import withData from '../libraries/withData';
+import AuthForm from '../containers/AuthForm';
 import DefaultCon from '../containers/Default';
 
+const SigninContainer = AuthForm.SigninContainer;
+
 export default withData(props =>
   <DefaultCon title="Sign In" {...props}>
-    <SignInFormContainer />
+    <SigninContainer selectFields={'signinFields'} />
   </DefaultCon>
 );
diff --git a/pages/signup.js b/pages/signup.js
index c786e5dd..e5f38574 100644
--- a/pages/signup.js
+++ b/pages/signup.js
@@ -1,9 +1,11 @@
-import SignUpFormContainer from '../containers/SignUpFormContainer';
+import AuthForm from '../containers/AuthForm';
 import withData from '../libraries/withData';
 import DefaultCon from '../containers/Default';
 
+const SignupContainer = AuthForm.SignupContainer;
+
 export default withData(props =>
   <DefaultCon title="Sign Up" {...props}>
-    <SignUpFormContainer />
+    <SignupContainer selectFields={'signupFields'} />
   </DefaultCon>
 );
diff --git a/yarn.lock b/yarn.lock
index 3ca76437..b361abf6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -53,11 +53,7 @@ acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.0.1:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
-
-acorn@^5.1.1:
+acorn@^5.0.0, acorn@^5.0.1, acorn@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75"
 
@@ -5447,7 +5443,7 @@ shelljs@0.7.8, shelljs@^0.7.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-shortid@^2.2.6, shortid@^2.2.8:
+shortid@^2.2.6:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.8.tgz#033b117d6a2e975804f6f0969dbe7d3d0b355131"
 

From af8598aa2e886423024042380c04934d9444e0a2 Mon Sep 17 00:00:00 2001
From: Asten Mies <sebastien@qualitsy.com>
Date: Sat, 15 Jul 2017 18:08:21 +0200
Subject: [PATCH 06/10] Cleaner code & removed redux-form

---
 components/AuthFields.js                      |  37 ++-
 components/SignInForm.js                      | 110 --------
 containers/AuthForm.js                        | 254 ++++++++----------
 containers/Header.js                          |   2 +-
 .../index.js => libraries/auth/authActions.js |   3 +-
 libraries/{reducers => auth}/authReducer.js   |   2 +-
 libraries/auth/authValidation.js              |  26 ++
 .../{mutations => auth}/createUserWrapper.js  |   2 +-
 .../{mutations => auth}/signinUserWrapper.js  |   4 +-
 libraries/persist.js                          |   1 -
 libraries/reducer.js                          |   4 +-
 libraries/reduxStore.js                       |   2 +-
 package.json                                  |   1 -
 yarn.lock                                     |  23 +-
 14 files changed, 179 insertions(+), 292 deletions(-)
 delete mode 100644 components/SignInForm.js
 rename actions/index.js => libraries/auth/authActions.js (74%)
 rename libraries/{reducers => auth}/authReducer.js (83%)
 create mode 100644 libraries/auth/authValidation.js
 rename libraries/{mutations => auth}/createUserWrapper.js (96%)
 rename libraries/{mutations => auth}/signinUserWrapper.js (88%)

diff --git a/components/AuthFields.js b/components/AuthFields.js
index 0e8473cc..2198a6c1 100644
--- a/components/AuthFields.js
+++ b/components/AuthFields.js
@@ -1,10 +1,17 @@
-/* eslint-disable */
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 const AuthFields = props => {
-  const { handleChange, handleSubmit, handleTouch, content, fields, touched, errors } = props;
+  const {
+    selectFields,
+    fields,
+    handleTouch,
+    handleChange,
+    handleSubmit,
+    touched,
+    errors
+  } = props;
   const mapFields = fields.map(field =>
     <div key={field.key}>
       <input
@@ -14,7 +21,7 @@ const AuthFields = props => {
         onChange={handleChange}
         onFocus={handleTouch}
       />
-    {errors &&
+      {errors &&
         <div>
           {errors[field.attr.name]}
         </div>}
@@ -22,19 +29,31 @@ const AuthFields = props => {
   );
   return (
     <div>
+      {selectFields === 'signinFields' && <h1>Sign In</h1>}
+      {selectFields === 'signupFields' && <h1>Sign Up</h1>}
       <form>
         {mapFields}
-        <br/>
-        <button onClick={handleSubmit} className={!touched && "buttonDisabled"} disabled={!touched}>Submit</button>
+        <br />
+        <button
+          onClick={handleSubmit}
+          className={!touched && 'buttonDisabled'}
+          disabled={!touched}
+        >
+          Submit
+        </button>
       </form>
     </div>
   );
 };
 
 AuthFields.propTypes = {
+  selectFields: PropTypes.string.isRequired,
+  fields: PropTypes.array.isRequired,
+  handleTouch: PropTypes.func.isRequired,
+  handleChange: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  handleChange: PropTypes.func,
-  errors: PropTypes.object
+  touched: PropTypes.bool.isRequired,
+  errors: PropTypes.object.isRequired
 };
 
 export default styled(AuthFields)`
@@ -50,8 +69,4 @@ export default styled(AuthFields)`
     display: block;
     margin-bottom: 10px;
   }
-  >button {
-      backgroundColor: red !important;
-    }
 `;
-
diff --git a/components/SignInForm.js b/components/SignInForm.js
deleted file mode 100644
index 80d91544..00000000
--- a/components/SignInForm.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-import { Field, reduxForm } from 'redux-form';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import shortid from 'shortid';
-
-const renderField = ({ input, label, type, meta: { touched, error } }) =>
-  <div>
-    <input {...input} placeholder={label} type={type} />
-    {touched &&
-      error &&
-      <div>
-        {error}
-      </div>}
-  </div>;
-
-const renderErrors = errors =>
-  <div className="alert alert-danger" role="alert">
-    {errors &&
-      errors.map(err =>
-        <span key={shortid.generate()}>
-          {err.message}
-        </span>
-      )}
-  </div>;
-
-let AuthForm = props => {
-  const { handleSubmit } = props;
-  const errors = props.errors <= 0 ? null : renderErrors(props.errors);
-  return (
-    <div>
-      <form onSubmit={handleSubmit}>
-        {errors}
-        <Field
-          name="email"
-          type="email"
-          component={renderField}
-          label="Email"
-        />
-        <Field
-          name="password"
-          type="password"
-          component={renderField}
-          label="Password"
-        />
-        <button type="submit">Submit</button>
-      </form>
-    </div>
-  );
-};
-
-const validate = values => {
-  const errors = {};
-
-  if (!values.email) {
-    errors.email = 'Required';
-  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
-    errors.email = 'Invalid email address';
-  }
-
-  if (!values.password) {
-    errors.password = 'Required';
-  } else if (values.password.length <= 3) {
-    errors.password = 'Must be at least 4 characters';
-  }
-
-  return errors;
-};
-
-renderField.defaultProps = {
-  errors: []
-};
-
-AuthForm.defaultProps = {
-  errors: []
-};
-
-renderField.propTypes = {
-  input: PropTypes.object.isRequired,
-  label: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  meta: PropTypes.object.isRequired,
-  errors: PropTypes.array
-};
-
-AuthForm.propTypes = {
-  handleSubmit: PropTypes.func.isRequired,
-  errors: PropTypes.array
-};
-
-AuthForm = styled(AuthForm)`
-  border-bottom: 1px solid #ececec;
-  padding-bottom: 20px;
-  margin-bottom: 20px;
-
-  > h1 {
-    font-size: 20px;
-  }
-
-  >input {
-    display: block;
-    margin-bottom: 10px;
-  }
-`;
-
-// Decorate the form component
-export default reduxForm({
-  form: 'AuthForm', // a unique name for this form
-  validate
-})(AuthForm);
diff --git a/containers/AuthForm.js b/containers/AuthForm.js
index ca39f02b..4d3f6e85 100644
--- a/containers/AuthForm.js
+++ b/containers/AuthForm.js
@@ -1,103 +1,70 @@
-/* eslint-disable */
 import React from 'react';
-import { gql, graphql } from 'react-apollo';
-import { connect } from 'react-redux';
-import persist from '../libraries/persist';
+import PropTypes from 'prop-types';
 import AuthFields from '../components/AuthFields';
-import { signinAction } from '../actions';
-import createUserWrapper from '../libraries/mutations/createUserWrapper';
-import signinUserWrapper from '../libraries/mutations/signinUserWrapper';
-const renderErrors = errors => {
-  return (
-      <div className="alert alert-danger" role="alert">
-        {errors &&
-          errors.map(err =>
-            <span key={shortid.generate()}>
-              {err.message}
-            </span>
-          )}
-      </div>
-  )
-}
-
-
-
-const validate = values => {
-  const errors = {};
-  const touched = true;
-  if (!values.firstName) {
-    errors.firstName = 'Required';
-  }
-
-  if (!values.lastName) {
-    errors.lastName = 'Required';
-  }
-
-  if (!values.email) {
-    errors.email = 'Required';
-  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
-    errors.email = 'Invalid email address';
-  }
-
-  if (!values.password) {
-    errors.password = 'Required';
-  } else if (values.password.length <= 3) {
-    errors.password = 'Must be at least 4 characters';
-  }
-  return {errors, touched};
-};
+import validate from '../libraries/auth/authValidation';
+import createUserWrapper from '../libraries/auth/createUserWrapper';
+import signinUserWrapper from '../libraries/auth/signinUserWrapper';
 
 const formFields = {
   signupFields: [
-      {key: 1, attr: {name: 'firstName', type: 'text',     label: 'First Name'}},
-      {key: 2, attr: {name: 'lastName',  type: 'text',     label: 'Last Name'}},
-      {key: 3, attr: {name: 'email',     type: 'email',    label: 'Email'}},
-      {key: 4, attr: {name: 'password',  type: 'password', label: 'Password'}}
+    { key: 1, attr: { name: 'firstName', type: 'text', label: 'First Name' } },
+    { key: 2, attr: { name: 'lastName', type: 'text', label: 'Last Name' } },
+    { key: 3, attr: { name: 'email', type: 'email', label: 'Email' } },
+    { key: 4, attr: { name: 'password', type: 'password', label: 'Password' } }
   ],
   signinFields: [
-      {key: 1, attr: {name: 'email',     type: 'email',    label: 'Email'}},
-      {key: 2, attr: {name: 'password',  type: 'password', label: 'Password'}}
+    { key: 1, attr: { name: 'email', type: 'email', label: 'Email' } },
+    { key: 2, attr: { name: 'password', type: 'password', label: 'Password' } }
   ]
-}
+};
 
 class AuthForm extends React.Component {
-    constructor(props){
-      super(props);
-      let formValues;
-      this.state = {
-        errors: {},
-        serverErrors: {},
-        touched: false
-      };
-      this.handleChange = this.handleChange.bind(this);
-      this.handleTouch = this.handleTouch.bind(this)
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      errors: {},
+      serverErrors: {},
+      touched: false
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleTouch = this.handleTouch.bind(this);
+  }
 
-    handleChange(e){
-      const fieldValue = e.target.value;
-      const fieldName = e.target.name;
-      let obj = {};
-      obj[fieldName] = fieldValue;
-      this.setState(obj);
+  getServerErrors(err) {
+    if (err.graphQLErrors) {
+      const obj = {};
+      obj.message = err.graphQLErrors[0].message;
+      this.setState({
+        serverErrors: obj
+      });
     }
+  }
 
-    handleTouch(){
-      this.setState({touched: true})
-    }
+  handleTouch() {
+    this.setState({ touched: true });
+  }
 
-    handleSubmit(e, valuesPack) {
-      e.preventDefault();
-      const handleValidate = validate(valuesPack);
-      if(handleValidate.touched) {
-        this.setState({touched: handleValidate.touched})
-      }
-      if(handleValidate.errors) {
-        this.setState({errors: handleValidate.errors})
-      }
-      if(this.props.selectFields === 'signupFields'){
-        this.props.createUser(valuesPack)
-        .then((response) => {
-          // !response.data.signinUser.errors
+  handleChange(e) {
+    const fieldValue = e.target.value;
+    const fieldName = e.target.name;
+    const obj = {};
+    obj[fieldName] = fieldValue;
+    this.setState(obj);
+  }
+
+  handleSubmit(e, valuesPack) {
+    e.preventDefault();
+    const handleValidate = validate(valuesPack);
+    if (handleValidate.touched) {
+      this.setState({ touched: handleValidate.touched });
+    }
+    if (handleValidate.errors) {
+      this.setState({ errors: handleValidate.errors });
+    }
+    if (this.props.selectFields === 'signupFields') {
+      this.props
+        .createUser(valuesPack)
+        .then(response => {
           if (response.data) {
             this.props.signinDispatcher(response.data.signinUser.token);
           } else {
@@ -106,61 +73,72 @@ class AuthForm extends React.Component {
             });
           }
         })
-        .catch((err) => {
-          if(err.graphQLErrors){
-            let obj = {};
-            obj['message'] = err.graphQLErrors[0].message
-            this.setState({
-              serverErrors: obj
-            })
-          } else console.log(err)
+        .catch(err => {
+          this.getServerErrors(err);
         });
-      }
-      if(this.props.selectFields === 'signinFields'){
-        this.props.signinUser(valuesPack)
-          .then(response => {
-            console.log('RES', response)
-            if (response.data) {
-              this.props.signinUserDispatcher(response.data.signinUser.token);
-            }
-          }).catch((err) => {
-            if(err.graphQLErrors){
-              let obj = {};
-              obj['message'] = err.graphQLErrors[0].message
-              this.setState({
-                serverErrors: obj
-              })
-            } else console.log(err)
-          });
-      }
     }
-
-    render(){
-      const { selectFields } = this.props;
-      const fields = formFields[selectFields];
-      const valuesPack = {}
-      const formValues = fields.map(x => {
-        const y = x.attr.name;
-        valuesPack[y] = this.state[y];
-      })
-      return (
-          <div>
-            {this.state.serverErrors &&
-                <div>
-                  {this.state.serverErrors.message}
-                </div>}
-            <AuthFields
-              handleSubmit={(e)=> {this.handleSubmit(e, valuesPack)}}
-              handleChange={this.handleChange}
-              fields={fields}
-              errors={this.state.errors}
-              touched={this.state.touched}
-              handleTouch={this.handleTouch}
-            />
-          <br />
-          </div>
-      );
+    if (this.props.selectFields === 'signinFields') {
+      this.props
+        .signinUser(valuesPack)
+        .then(response => {
+          if (response.data) {
+            this.props.signinUserDispatcher(response.data.signinUser.token);
+          }
+        })
+        .catch(err => {
+          this.getServerErrors(err);
+        });
     }
+  }
+
+  render() {
+    const { selectFields } = this.props;
+    const fields = formFields[selectFields];
+    // Packing all the necessary auth field states
+    const valuesPack = {};
+    fields.map(x => {
+      const y = x.attr.name;
+      valuesPack[y] = this.state[y];
+      return valuesPack;
+    });
+    return (
+      <div>
+        <AuthFields
+          handleSubmit={e => {
+            this.handleSubmit(e, valuesPack);
+          }}
+          handleChange={this.handleChange}
+          fields={fields}
+          selectFields={selectFields}
+          errors={this.state.errors}
+          touched={this.state.touched}
+          handleTouch={this.handleTouch}
+        />
+        <br />
+        <div>
+          {Object.keys(this.state.errors).length === 0 &&
+            this.state.serverErrors.message}
+        </div>
+      </div>
+    );
+  }
+}
+
+const defaultFunction = function defFunc() {};
+
+AuthForm.defaultProps = {
+  createUser: defaultFunction,
+  signinDispatcher: defaultFunction,
+  signinUser: defaultFunction,
+  signinUserDispatcher: defaultFunction
+};
+
+AuthForm.propTypes = {
+  selectFields: PropTypes.string.isRequired,
+  createUser: PropTypes.func,
+  signinDispatcher: PropTypes.func,
+  signinUser: PropTypes.func,
+  signinUserDispatcher: PropTypes.func
 };
 
 exports.SignupContainer = createUserWrapper(AuthForm);
diff --git a/containers/Header.js b/containers/Header.js
index 58f35541..523efa60 100644
--- a/containers/Header.js
+++ b/containers/Header.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { signoutAction } from '../actions';
+import { signoutAction } from '../libraries/auth/authActions';
 import Header from '../components/Header';
 
 const mapStateToProps = state => ({
diff --git a/actions/index.js b/libraries/auth/authActions.js
similarity index 74%
rename from actions/index.js
rename to libraries/auth/authActions.js
index 011375df..d3d0054b 100644
--- a/actions/index.js
+++ b/libraries/auth/authActions.js
@@ -3,8 +3,7 @@ export const AUTH_SIGNOUT = 'AUTH_SIGNOUT';
 const localForage = require('localforage');
 
 export const signinAction = token => {
-  console.log('TO', token);
-  localForage.setItem('accessToken', token).then(console.log('TOKEN', token));
+  localForage.setItem('accessToken', token);
   return { type: AUTH_SIGNIN };
 };
 
diff --git a/libraries/reducers/authReducer.js b/libraries/auth/authReducer.js
similarity index 83%
rename from libraries/reducers/authReducer.js
rename to libraries/auth/authReducer.js
index cfd0f2e4..e1fc66db 100644
--- a/libraries/reducers/authReducer.js
+++ b/libraries/auth/authReducer.js
@@ -1,4 +1,4 @@
-import { AUTH_SIGNIN, AUTH_SIGNOUT } from '../../actions';
+import { AUTH_SIGNIN, AUTH_SIGNOUT } from './authActions';
 
 const initialState = {
   authenticated: false
diff --git a/libraries/auth/authValidation.js b/libraries/auth/authValidation.js
new file mode 100644
index 00000000..d83dc62a
--- /dev/null
+++ b/libraries/auth/authValidation.js
@@ -0,0 +1,26 @@
+const validate = values => {
+  const errors = {};
+  const touched = true;
+  if (!values.firstName) {
+    errors.firstName = 'Required';
+  }
+
+  if (!values.lastName) {
+    errors.lastName = 'Required';
+  }
+
+  if (!values.email) {
+    errors.email = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+    errors.email = 'Invalid email address';
+  }
+
+  if (!values.password) {
+    errors.password = 'Required';
+  } else if (values.password.length <= 3) {
+    errors.password = 'Must be at least 4 characters';
+  }
+  return { errors, touched };
+};
+
+export default validate;
diff --git a/libraries/mutations/createUserWrapper.js b/libraries/auth/createUserWrapper.js
similarity index 96%
rename from libraries/mutations/createUserWrapper.js
rename to libraries/auth/createUserWrapper.js
index 9f4e49f3..7a18bad9 100644
--- a/libraries/mutations/createUserWrapper.js
+++ b/libraries/auth/createUserWrapper.js
@@ -1,7 +1,7 @@
 import { gql, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import persist from '../persist';
-import { signinAction } from '../../actions';
+import { signinAction } from './authActions';
 
 function createUserWrapper(AuthForm) {
   const createUserMutation = gql`
diff --git a/libraries/mutations/signinUserWrapper.js b/libraries/auth/signinUserWrapper.js
similarity index 88%
rename from libraries/mutations/signinUserWrapper.js
rename to libraries/auth/signinUserWrapper.js
index 45fa8d98..1b08a2ee 100644
--- a/libraries/mutations/signinUserWrapper.js
+++ b/libraries/auth/signinUserWrapper.js
@@ -1,11 +1,11 @@
 import { gql, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import persist from '../persist';
-import { signinAction } from '../../actions';
+import { signinAction } from './authActions';
 
 function signinUserWrapper(AuthForm) {
   const signinUserMutation = gql`
-    mutation Signin($email: String!, $password: String!) {
+    mutation signinUser($email: String!, $password: String!) {
       signinUser(email: { email: $email, password: $password }) {
         token
       }
diff --git a/libraries/persist.js b/libraries/persist.js
index 080bd98a..c8baa9fe 100644
--- a/libraries/persist.js
+++ b/libraries/persist.js
@@ -27,7 +27,6 @@ class persist {
   }
 
   static async willSetAccessToken(value) {
-    console.log('willSetAccessToken', value);
     return localForage
       .setItem(persist.ACCESS_TOKEN_KEY, value)
       .catch(err => err);
diff --git a/libraries/reducer.js b/libraries/reducer.js
index 62778388..6d59708d 100644
--- a/libraries/reducer.js
+++ b/libraries/reducer.js
@@ -1,11 +1,9 @@
 import { combineReducers } from 'redux';
-import { reducer as formReducer } from 'redux-form';
-import authReducer from './reducers/authReducer';
+import authReducer from './auth/authReducer';
 
 export default function getReducer(client) {
   return combineReducers({
     apollo: client.reducer(),
-    form: formReducer,
     auth: authReducer
   });
 }
diff --git a/libraries/reduxStore.js b/libraries/reduxStore.js
index 1d87690a..3e125147 100644
--- a/libraries/reduxStore.js
+++ b/libraries/reduxStore.js
@@ -1,8 +1,8 @@
 import { createStore } from 'redux';
 import getReducer from './reducer';
 import createMiddleware from './middleware';
-import { AUTH_SIGNIN, AUTH_SIGNOUT } from '../actions';
 import persist from './persist';
+import { AUTH_SIGNIN, AUTH_SIGNOUT } from './auth/authActions';
 
 let reduxStore = null;
 
diff --git a/package.json b/package.json
index 8240f18e..c404ab9f 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
     "react-helmet": "5.1.3",
     "react-redux": "5.0.5",
     "redux": "3.7.1",
-    "redux-form": "^7.0.0",
     "remote-redux-devtools": "0.5.12",
     "styled-components": "2.1.1"
   },
diff --git a/yarn.lock b/yarn.lock
index b361abf6..cc608b9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1977,10 +1977,6 @@ es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
     es6-iterator "2"
     es6-symbol "~3.1"
 
-es6-error@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.2.tgz#eec5c726eacef51b7f6b73c20db6e1b13b069c98"
-
 es6-iterator@2, es6-iterator@^2.0.1, es6-iterator@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.1.tgz#8e319c9f0453bf575d374940a655920e59ca5512"
@@ -3692,7 +3688,7 @@ lock@^0.1.2:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/lock/-/lock-0.1.3.tgz#f66c1caa0c41956e1426608039ed59b71bdf1854"
 
-lodash-es@^4.17.3, lodash-es@^4.2.0, lodash-es@^4.2.1:
+lodash-es@^4.2.0, lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
 
@@ -3790,7 +3786,7 @@ lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
-lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4675,7 +4671,7 @@ promise@^7.0.1, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.5.10, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.5.9:
+prop-types@15.5.10, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -4998,19 +4994,6 @@ redux-devtools-instrument@^1.3.3:
     lodash "^4.2.0"
     symbol-observable "^1.0.2"
 
-redux-form@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.0.0.tgz#6ef9eb72c1df1ee676139d74b5e7503f9ce0f0cb"
-  dependencies:
-    deep-equal "^1.0.1"
-    es6-error "^4.0.0"
-    hoist-non-react-statics "^2.0.0"
-    invariant "^2.2.2"
-    is-promise "^2.1.0"
-    lodash "^4.17.3"
-    lodash-es "^4.17.3"
-    prop-types "^15.5.9"
-
 redux@3.7.1, redux@^3.4.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.1.tgz#bfc535c757d3849562ead0af18ac52122cd7268e"

From e74601994f33308cca8e2949d5b83ae747e0d101 Mon Sep 17 00:00:00 2001
From: Asten Mies <sebastien@qualitsy.com>
Date: Sat, 15 Jul 2017 19:52:48 +0200
Subject: [PATCH 07/10] Small styling changes

---
 components/AuthFields.js | 11 +++++++----
 components/LinkList.js   |  1 +
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/AuthFields.js b/components/AuthFields.js
index 2198a6c1..bdfd3ba9 100644
--- a/components/AuthFields.js
+++ b/components/AuthFields.js
@@ -27,19 +27,22 @@ const AuthFields = props => {
         </div>}
     </div>
   );
+  const authMethod =
+    (selectFields === 'signinFields' && 'Sign In') || 'Sign Up';
   return (
     <div>
-      {selectFields === 'signinFields' && <h1>Sign In</h1>}
-      {selectFields === 'signupFields' && <h1>Sign Up</h1>}
+      <h1>
+        {authMethod}
+      </h1>
       <form>
         {mapFields}
         <br />
         <button
           onClick={handleSubmit}
-          className={!touched && 'buttonDisabled'}
+          style={!touched ? { opacity: 0.5 } : { opacity: 1 }}
           disabled={!touched}
         >
-          Submit
+          {authMethod}
         </button>
       </form>
     </div>
diff --git a/components/LinkList.js b/components/LinkList.js
index 496f60a8..b0aed5ac 100644
--- a/components/LinkList.js
+++ b/components/LinkList.js
@@ -58,5 +58,6 @@ export default styled(LinkList)`
   button {
     display: inline-block;
     margin-right: 15px;
+    cursor: pointer;
   }
 `;

From 508076b9a00a6d0b8eb034a2a7edac69ef36500b Mon Sep 17 00:00:00 2001
From: Sly777 <ilker.guller.777@gmail.com>
Date: Tue, 18 Jul 2017 16:46:19 +0200
Subject: [PATCH 08/10] - Updated Babel for decorators
 (https://babeljs.io/docs/plugins/transform-decorators/) - Updated codeclimate
 settings for parsed & built files - Updated Yarn and Package.json - Updated
 folder structures - Updated Auth Components

---
 .babelrc                                      |   1 +
 .codeclimate.yml                              |   2 +
 components/AuthFields/index.data.js           |  53 +++++++
 components/AuthFields/index.gql.js            |  31 ++++
 .../{AuthFields.js => AuthFields/index.js}    |   0
 .../AuthFields/index.validation.js            |  18 ++-
 components/Header/index.data.js               |  14 ++
 components/{Header.js => Header/index.js}     |   7 +-
 components/SignInForm/index.data.js           |  29 ++++
 components/SignInForm/index.js                | 117 ++++++++++++++
 components/SignUpForm/index.data.js           |  29 ++++
 components/SignUpForm/index.js                | 123 +++++++++++++++
 containers/AuthForm.js                        | 145 ------------------
 containers/Default.js                         |   2 +-
 containers/Header.js                          |  15 --
 libraries/auth/authActions.js                 |  13 --
 libraries/auth/authReducer.js                 |  16 --
 libraries/auth/createUserWrapper.js           |  49 ------
 libraries/auth/signinUserWrapper.js           |  37 -----
 libraries/reducer.js                          |   2 +-
 libraries/reduxStore.js                       |   9 +-
 libraries/validations.js                      |  14 ++
 package.json                                  |   2 +
 pages/signin.js                               |   6 +-
 pages/signup.js                               |   6 +-
 yarn.lock                                     |  20 ++-
 26 files changed, 459 insertions(+), 301 deletions(-)
 create mode 100644 components/AuthFields/index.data.js
 create mode 100644 components/AuthFields/index.gql.js
 rename components/{AuthFields.js => AuthFields/index.js} (100%)
 rename libraries/auth/authValidation.js => components/AuthFields/index.validation.js (55%)
 create mode 100644 components/Header/index.data.js
 rename components/{Header.js => Header/index.js} (82%)
 create mode 100644 components/SignInForm/index.data.js
 create mode 100644 components/SignInForm/index.js
 create mode 100644 components/SignUpForm/index.data.js
 create mode 100644 components/SignUpForm/index.js
 delete mode 100644 containers/AuthForm.js
 delete mode 100644 containers/Header.js
 delete mode 100644 libraries/auth/authActions.js
 delete mode 100644 libraries/auth/authReducer.js
 delete mode 100644 libraries/auth/createUserWrapper.js
 delete mode 100644 libraries/auth/signinUserWrapper.js
 create mode 100644 libraries/validations.js

diff --git a/.babelrc b/.babelrc
index 8a084f55..ce596c5c 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,6 +3,7 @@
     "next/babel"
   ],
   "plugins": [
+    "transform-decorators-legacy",
     ["styled-components", {
       "ssr": true,
       "displayName": true,
diff --git a/.codeclimate.yml b/.codeclimate.yml
index 90ec5722..6dc0ff57 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -22,3 +22,5 @@ ratings:
   - "**.jsx"
 exclude_paths:
 - node_modules/
+- .next/
+- .gitattributes
diff --git a/components/AuthFields/index.data.js b/components/AuthFields/index.data.js
new file mode 100644
index 00000000..e34b5b8c
--- /dev/null
+++ b/components/AuthFields/index.data.js
@@ -0,0 +1,53 @@
+import persist from '../../libraries/persist';
+
+// Actions Naming
+export const AUTH_SIGNIN = 'AUTH_SIGNIN';
+export const AUTH_SIGNOUT = 'AUTH_SIGNOUT';
+export const AUTH_SERVERERROR = 'AUTH_SERVERERROR';
+
+// Initial State
+const initialState = {
+  authenticated: false,
+  token: null,
+  error: null
+};
+
+// Reducer
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case AUTH_SIGNIN:
+      return {
+        ...state,
+        authenticated: true,
+        token: action.token,
+        error: null
+      };
+    case AUTH_SIGNOUT:
+      return { ...state, authenticated: false, token: null, error: null };
+    case AUTH_SERVERERROR:
+      return { ...state, authenticated: false, error: action.error };
+    default:
+      return state;
+  }
+};
+
+// Actions
+const actions = {};
+
+actions.signIn = token => ({ type: AUTH_SIGNIN, token });
+actions.signOut = () => ({ type: AUTH_SIGNOUT });
+
+// Discpatchers
+const dispatchers = {};
+
+dispatchers.signIn = token => {
+  persist.willSetAccessToken(token);
+  return actions.signIn(token);
+};
+
+dispatchers.signOut = () => {
+  persist.willRemoveAccessToken();
+  return actions.signOut();
+};
+
+export { actions, reducer, dispatchers };
diff --git a/components/AuthFields/index.gql.js b/components/AuthFields/index.gql.js
new file mode 100644
index 00000000..928d4bf4
--- /dev/null
+++ b/components/AuthFields/index.gql.js
@@ -0,0 +1,31 @@
+import { gql } from 'react-apollo';
+
+export default {};
+
+export const signIn = gql`
+  mutation signinUser($email: String!, $password: String!) {
+    signinUser(email: { email: $email, password: $password }) {
+      token
+    }
+  }
+`;
+
+export const createUser = gql`
+  mutation createUser(
+    $firstName: String!
+    $lastName: String!
+    $email: String!
+    $password: String!
+  ) {
+    createUser(
+      firstName: $firstName
+      lastName: $lastName
+      authProvider: { email: { email: $email, password: $password } }
+    ) {
+      id
+    }
+    signinUser(email: { email: $email, password: $password }) {
+      token
+    }
+  }
+`;
diff --git a/components/AuthFields.js b/components/AuthFields/index.js
similarity index 100%
rename from components/AuthFields.js
rename to components/AuthFields/index.js
diff --git a/libraries/auth/authValidation.js b/components/AuthFields/index.validation.js
similarity index 55%
rename from libraries/auth/authValidation.js
rename to components/AuthFields/index.validation.js
index d83dc62a..0ece39cd 100644
--- a/libraries/auth/authValidation.js
+++ b/components/AuthFields/index.validation.js
@@ -1,26 +1,28 @@
-const validate = values => {
+import { isStringEmpty, isEmail } from '../../libraries/validations';
+
+export default values => {
   const errors = {};
   const touched = true;
-  if (!values.firstName) {
+
+  if (isStringEmpty(values.firstName)) {
     errors.firstName = 'Required';
   }
 
-  if (!values.lastName) {
+  if (isStringEmpty(values.lastName)) {
     errors.lastName = 'Required';
   }
 
-  if (!values.email) {
+  if (isStringEmpty(values.email)) {
     errors.email = 'Required';
-  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+  } else if (!isEmail(values.email)) {
     errors.email = 'Invalid email address';
   }
 
-  if (!values.password) {
+  if (isStringEmpty(values.password)) {
     errors.password = 'Required';
   } else if (values.password.length <= 3) {
     errors.password = 'Must be at least 4 characters';
   }
+
   return { errors, touched };
 };
-
-export default validate;
diff --git a/components/Header/index.data.js b/components/Header/index.data.js
new file mode 100644
index 00000000..8765d61c
--- /dev/null
+++ b/components/Header/index.data.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { actions } from '../SignInForm/index.data';
+
+const mapStateToProps = state => ({
+  authenticated: state.auth.authenticated
+});
+
+const mapDispatchToProps = dispatch => ({
+  logout() {
+    dispatch(actions.signout());
+  }
+});
+
+export default comp => connect(mapStateToProps, mapDispatchToProps)(comp);
diff --git a/components/Header.js b/components/Header/index.js
similarity index 82%
rename from components/Header.js
rename to components/Header/index.js
index 0519193d..c6092f67 100644
--- a/components/Header.js
+++ b/components/Header/index.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import LinkList from './LinkList';
+import LinkList from '../LinkList';
+import connect from './index.data';
 
 const Header = ({ className, pathname, authenticated, logout }) =>
   <header className={className}>
@@ -22,6 +23,6 @@ Header.propTypes = {
   logout: PropTypes.func.isRequired
 };
 
-export default styled(Header)`
+export default connect(styled(Header)`
   margin-bottom: 25px;
-`;
+`);
diff --git a/components/SignInForm/index.data.js b/components/SignInForm/index.data.js
new file mode 100644
index 00000000..0a71c369
--- /dev/null
+++ b/components/SignInForm/index.data.js
@@ -0,0 +1,29 @@
+import { graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import { dispatchers } from '../AuthFields/index.data';
+import { signIn as signInGql } from '../AuthFields/index.gql';
+
+function signinUserWrapper(AuthForm) {
+  const signinUserWithData = graphql(signInGql, {
+    props: ({ mutate }) => ({
+      signinUser: ({ email, password }) =>
+        mutate({
+          variables: { email, password }
+        })
+    })
+  })(AuthForm);
+
+  const mapDispatchToProps = dispatch => ({
+    signIn(token) {
+      dispatch(dispatchers.signIn(token));
+    }
+  });
+
+  const signinUserWithDataAndDispatch = connect(null, mapDispatchToProps)(
+    signinUserWithData
+  );
+
+  return signinUserWithDataAndDispatch;
+}
+
+export default signinUserWrapper;
diff --git a/components/SignInForm/index.js b/components/SignInForm/index.js
new file mode 100644
index 00000000..ac2ca8c9
--- /dev/null
+++ b/components/SignInForm/index.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { autobind } from 'core-decorators';
+import AuthFields from '../AuthFields';
+import validate from '../AuthFields/index.validation';
+import connect from './index.data';
+
+const defaultFunction = function defFunc() {};
+
+class SignInForm extends React.Component {
+  static defaultProps = {
+    createUser: defaultFunction,
+    signinDispatcher: defaultFunction,
+    signinUser: defaultFunction,
+    signinUserDispatcher: defaultFunction
+  };
+
+  static propTypes = {
+    createUser: PropTypes.func,
+    signinDispatcher: PropTypes.func,
+    signinUser: PropTypes.func,
+    signinUserDispatcher: PropTypes.func
+  };
+
+  state = {
+    errors: {},
+    serverErrors: {},
+    touched: false
+  };
+
+  getServerErrors(err) {
+    if (err.graphQLErrors) {
+      const obj = {};
+      obj.message = err.graphQLErrors[0].message;
+      this.setState({
+        serverErrors: obj
+      });
+    }
+  }
+
+  formFields = [
+    { key: 1, attr: { name: 'email', type: 'email', label: 'Email' } },
+    { key: 2, attr: { name: 'password', type: 'password', label: 'Password' } }
+  ];
+
+  @autobind
+  handleTouch() {
+    this.setState({ touched: true });
+  }
+
+  @autobind
+  handleChange(e) {
+    const fieldValue = e.target.value;
+    const fieldName = e.target.name;
+    const obj = {};
+    obj[fieldName] = fieldValue;
+    this.setState(obj);
+  }
+
+  handleSubmit(e, valuesPack) {
+    e.preventDefault();
+    const handleValidate = validate(valuesPack);
+
+    if (handleValidate.touched) {
+      this.setState({ touched: handleValidate.touched });
+    }
+    if (handleValidate.errors) {
+      this.setState({ errors: handleValidate.errors });
+    }
+
+    this.props
+      .signinUser(valuesPack)
+      .then(response => {
+        if (response.data) {
+          this.props.signinUserDispatcher(response.data.signinUser.token);
+        }
+      })
+      .catch(err => {
+        this.getServerErrors(err);
+      });
+  }
+
+  render() {
+    const fields = this.formFields;
+    // Packing all the necessary auth field states
+    const valuesPack = {};
+
+    fields.map(x => {
+      const y = x.attr.name;
+      valuesPack[y] = this.state[y];
+      return valuesPack;
+    });
+
+    return (
+      <div>
+        <AuthFields
+          handleSubmit={e => {
+            this.handleSubmit(e, valuesPack);
+          }}
+          handleChange={this.handleChange}
+          fields={fields}
+          errors={this.state.errors}
+          touched={this.state.touched}
+          handleTouch={this.handleTouch}
+          selectFields="signinFields"
+        />
+        <br />
+        <div>
+          {Object.keys(this.state.errors).length === 0 &&
+            this.state.serverErrors.message}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(SignInForm);
diff --git a/components/SignUpForm/index.data.js b/components/SignUpForm/index.data.js
new file mode 100644
index 00000000..626b04bd
--- /dev/null
+++ b/components/SignUpForm/index.data.js
@@ -0,0 +1,29 @@
+import { graphql } from 'react-apollo';
+import { connect } from 'react-redux';
+import { dispatchers } from '../AuthFields/index.data';
+import { createUser as createUserGql } from '../AuthFields/index.gql';
+
+function createUserWrapper(AuthForm) {
+  const createUserWithData = graphql(createUserGql, {
+    props: ({ mutate }) => ({
+      createUser: ({ firstName, lastName, email, password }) =>
+        mutate({
+          variables: { firstName, lastName, email, password }
+        })
+    })
+  })(AuthForm);
+
+  const mapDispatchToProps = dispatch => ({
+    signIn(token) {
+      dispatch(dispatchers.signIn(token));
+    }
+  });
+
+  const createUserWithDataAndDispatch = connect(null, mapDispatchToProps)(
+    createUserWithData
+  );
+
+  return createUserWithDataAndDispatch;
+}
+
+export default createUserWrapper;
diff --git a/components/SignUpForm/index.js b/components/SignUpForm/index.js
new file mode 100644
index 00000000..1da31de3
--- /dev/null
+++ b/components/SignUpForm/index.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { autobind } from 'core-decorators';
+import AuthFields from '../AuthFields';
+import validate from '../AuthFields/index.validation';
+import connect from './index.data';
+
+const defaultFunction = function defFunc() {};
+
+class SignUpForm extends React.Component {
+  static defaultProps = {
+    createUser: defaultFunction,
+    signinDispatcher: defaultFunction,
+    signinUser: defaultFunction,
+    signinUserDispatcher: defaultFunction
+  };
+
+  static propTypes = {
+    createUser: PropTypes.func,
+    signinDispatcher: PropTypes.func,
+    signinUser: PropTypes.func,
+    signinUserDispatcher: PropTypes.func
+  };
+
+  state = {
+    errors: {},
+    serverErrors: {},
+    touched: false
+  };
+
+  getServerErrors(err) {
+    if (err.graphQLErrors) {
+      const obj = {};
+      obj.message = err.graphQLErrors[0].message;
+      this.setState({
+        serverErrors: obj
+      });
+    }
+  }
+
+  formFields = [
+    { key: 1, attr: { name: 'firstName', type: 'text', label: 'First Name' } },
+    { key: 2, attr: { name: 'lastName', type: 'text', label: 'Last Name' } },
+    { key: 3, attr: { name: 'email', type: 'email', label: 'Email' } },
+    { key: 4, attr: { name: 'password', type: 'password', label: 'Password' } }
+  ];
+
+  @autobind
+  handleTouch() {
+    this.setState({ touched: true });
+  }
+
+  @autobind
+  handleChange(e) {
+    const fieldValue = e.target.value;
+    const fieldName = e.target.name;
+    const obj = {};
+    obj[fieldName] = fieldValue;
+    this.setState(obj);
+  }
+
+  handleSubmit(e, valuesPack) {
+    e.preventDefault();
+    const handleValidate = validate(valuesPack);
+
+    if (handleValidate.touched) {
+      this.setState({ touched: handleValidate.touched });
+    }
+    if (handleValidate.errors) {
+      this.setState({ errors: handleValidate.errors });
+    }
+
+    this.props
+      .createUser(valuesPack)
+      .then(response => {
+        if (response.data) {
+          this.props.signinDispatcher(response.data.signinUser.token);
+        } else {
+          this.setState({
+            errors: response.data.createUser.errors
+          });
+        }
+      })
+      .catch(err => {
+        this.getServerErrors(err);
+      });
+  }
+
+  render() {
+    const fields = this.formFields;
+    // Packing all the necessary auth field states
+    const valuesPack = {};
+
+    fields.map(x => {
+      const y = x.attr.name;
+      valuesPack[y] = this.state[y];
+      return valuesPack;
+    });
+
+    return (
+      <div>
+        <AuthFields
+          handleSubmit={e => {
+            this.handleSubmit(e, valuesPack);
+          }}
+          handleChange={this.handleChange}
+          fields={fields}
+          selectFields="signUpFields"
+          errors={this.state.errors}
+          touched={this.state.touched}
+          handleTouch={this.handleTouch}
+        />
+        <br />
+        <div>
+          {Object.keys(this.state.errors).length === 0 &&
+            this.state.serverErrors.message}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(SignUpForm);
diff --git a/containers/AuthForm.js b/containers/AuthForm.js
deleted file mode 100644
index 4d3f6e85..00000000
--- a/containers/AuthForm.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import AuthFields from '../components/AuthFields';
-import validate from '../libraries/auth/authValidation';
-import createUserWrapper from '../libraries/auth/createUserWrapper';
-import signinUserWrapper from '../libraries/auth/signinUserWrapper';
-
-const formFields = {
-  signupFields: [
-    { key: 1, attr: { name: 'firstName', type: 'text', label: 'First Name' } },
-    { key: 2, attr: { name: 'lastName', type: 'text', label: 'Last Name' } },
-    { key: 3, attr: { name: 'email', type: 'email', label: 'Email' } },
-    { key: 4, attr: { name: 'password', type: 'password', label: 'Password' } }
-  ],
-  signinFields: [
-    { key: 1, attr: { name: 'email', type: 'email', label: 'Email' } },
-    { key: 2, attr: { name: 'password', type: 'password', label: 'Password' } }
-  ]
-};
-
-class AuthForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      errors: {},
-      serverErrors: {},
-      touched: false
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleTouch = this.handleTouch.bind(this);
-  }
-
-  getServerErrors(err) {
-    if (err.graphQLErrors) {
-      const obj = {};
-      obj.message = err.graphQLErrors[0].message;
-      this.setState({
-        serverErrors: obj
-      });
-    }
-  }
-
-  handleTouch() {
-    this.setState({ touched: true });
-  }
-
-  handleChange(e) {
-    const fieldValue = e.target.value;
-    const fieldName = e.target.name;
-    const obj = {};
-    obj[fieldName] = fieldValue;
-    this.setState(obj);
-  }
-
-  handleSubmit(e, valuesPack) {
-    e.preventDefault();
-    const handleValidate = validate(valuesPack);
-    if (handleValidate.touched) {
-      this.setState({ touched: handleValidate.touched });
-    }
-    if (handleValidate.errors) {
-      this.setState({ errors: handleValidate.errors });
-    }
-    if (this.props.selectFields === 'signupFields') {
-      this.props
-        .createUser(valuesPack)
-        .then(response => {
-          if (response.data) {
-            this.props.signinDispatcher(response.data.signinUser.token);
-          } else {
-            this.setState({
-              errors: response.data.createUser.errors
-            });
-          }
-        })
-        .catch(err => {
-          this.getServerErrors(err);
-        });
-    }
-    if (this.props.selectFields === 'signinFields') {
-      this.props
-        .signinUser(valuesPack)
-        .then(response => {
-          if (response.data) {
-            this.props.signinUserDispatcher(response.data.signinUser.token);
-          }
-        })
-        .catch(err => {
-          this.getServerErrors(err);
-        });
-    }
-  }
-
-  render() {
-    const { selectFields } = this.props;
-    const fields = formFields[selectFields];
-    // Packing all the necessary auth field states
-    const valuesPack = {};
-    fields.map(x => {
-      const y = x.attr.name;
-      valuesPack[y] = this.state[y];
-      return valuesPack;
-    });
-    return (
-      <div>
-        <AuthFields
-          handleSubmit={e => {
-            this.handleSubmit(e, valuesPack);
-          }}
-          handleChange={this.handleChange}
-          fields={fields}
-          selectFields={selectFields}
-          errors={this.state.errors}
-          touched={this.state.touched}
-          handleTouch={this.handleTouch}
-        />
-        <br />
-        <div>
-          {Object.keys(this.state.errors).length === 0 &&
-            this.state.serverErrors.message}
-        </div>
-      </div>
-    );
-  }
-}
-
-const defaultFunction = function defFunc() {};
-
-AuthForm.defaultProps = {
-  createUser: defaultFunction,
-  signinDispatcher: defaultFunction,
-  signinUser: defaultFunction,
-  signinUserDispatcher: defaultFunction
-};
-
-AuthForm.propTypes = {
-  selectFields: PropTypes.string.isRequired,
-  createUser: PropTypes.func,
-  signinDispatcher: PropTypes.func,
-  signinUser: PropTypes.func,
-  signinUserDispatcher: PropTypes.func
-};
-
-exports.SignupContainer = createUserWrapper(AuthForm);
-exports.SigninContainer = signinUserWrapper(AuthForm);
diff --git a/containers/Default.js b/containers/Default.js
index 3e10a511..fa5fcc1d 100644
--- a/containers/Default.js
+++ b/containers/Default.js
@@ -1,7 +1,7 @@
 import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
 import App from '../components/App';
-import Header from '../containers/Header';
+import Header from '../components/Header';
 
 const Default = props =>
   <App>
diff --git a/containers/Header.js b/containers/Header.js
deleted file mode 100644
index 523efa60..00000000
--- a/containers/Header.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-import { signoutAction } from '../libraries/auth/authActions';
-import Header from '../components/Header';
-
-const mapStateToProps = state => ({
-  authenticated: state.auth.authenticated
-});
-
-const mapDispatchToProps = dispatch => ({
-  logout() {
-    dispatch(signoutAction());
-  }
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/libraries/auth/authActions.js b/libraries/auth/authActions.js
deleted file mode 100644
index d3d0054b..00000000
--- a/libraries/auth/authActions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const AUTH_SIGNIN = 'AUTH_SIGNIN';
-export const AUTH_SIGNOUT = 'AUTH_SIGNOUT';
-const localForage = require('localforage');
-
-export const signinAction = token => {
-  localForage.setItem('accessToken', token);
-  return { type: AUTH_SIGNIN };
-};
-
-export const signoutAction = () => {
-  localForage.removeItem('accessToken');
-  return { type: AUTH_SIGNOUT };
-};
diff --git a/libraries/auth/authReducer.js b/libraries/auth/authReducer.js
deleted file mode 100644
index e1fc66db..00000000
--- a/libraries/auth/authReducer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { AUTH_SIGNIN, AUTH_SIGNOUT } from './authActions';
-
-const initialState = {
-  authenticated: false
-};
-
-export default (state = initialState, action) => {
-  switch (action.type) {
-    case AUTH_SIGNIN:
-      return { ...state, authenticated: true };
-    case AUTH_SIGNOUT:
-      return { ...state, authenticated: false };
-    default:
-      return state;
-  }
-};
diff --git a/libraries/auth/createUserWrapper.js b/libraries/auth/createUserWrapper.js
deleted file mode 100644
index 7a18bad9..00000000
--- a/libraries/auth/createUserWrapper.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { gql, graphql } from 'react-apollo';
-import { connect } from 'react-redux';
-import persist from '../persist';
-import { signinAction } from './authActions';
-
-function createUserWrapper(AuthForm) {
-  const createUserMutation = gql`
-    mutation createUser(
-      $firstName: String!
-      $lastName: String!
-      $email: String!
-      $password: String!
-    ) {
-      createUser(
-        firstName: $firstName
-        lastName: $lastName
-        authProvider: { email: { email: $email, password: $password } }
-      ) {
-        id
-      }
-      signinUser(email: { email: $email, password: $password }) {
-        token
-      }
-    }
-  `;
-
-  const createUserWithData = graphql(createUserMutation, {
-    props: ({ mutate }) => ({
-      createUser: ({ firstName, lastName, email, password }) =>
-        mutate({
-          variables: { firstName, lastName, email, password }
-        })
-    })
-  })(AuthForm);
-
-  const mapDispatchToProps = dispatch => ({
-    signinDispatcher(token) {
-      persist.willSetAccessToken(token);
-      dispatch(signinAction(token));
-    }
-  });
-
-  const createUserWithDataAndDispatch = connect(null, mapDispatchToProps)(
-    createUserWithData
-  );
-  return createUserWithDataAndDispatch;
-}
-
-export default createUserWrapper;
diff --git a/libraries/auth/signinUserWrapper.js b/libraries/auth/signinUserWrapper.js
deleted file mode 100644
index 1b08a2ee..00000000
--- a/libraries/auth/signinUserWrapper.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { gql, graphql } from 'react-apollo';
-import { connect } from 'react-redux';
-import persist from '../persist';
-import { signinAction } from './authActions';
-
-function signinUserWrapper(AuthForm) {
-  const signinUserMutation = gql`
-    mutation signinUser($email: String!, $password: String!) {
-      signinUser(email: { email: $email, password: $password }) {
-        token
-      }
-    }
-  `;
-
-  const signinUserWithData = graphql(signinUserMutation, {
-    props: ({ mutate }) => ({
-      signinUser: ({ email, password }) =>
-        mutate({
-          variables: { email, password }
-        })
-    })
-  })(AuthForm);
-
-  const mapDispatchToProps = dispatch => ({
-    signinUserDispatcher(token) {
-      persist.willSetAccessToken(token);
-      dispatch(signinAction(token));
-    }
-  });
-
-  const signinUserWithDataAndDispatch = connect(null, mapDispatchToProps)(
-    signinUserWithData
-  );
-  return signinUserWithDataAndDispatch;
-}
-
-export default signinUserWrapper;
diff --git a/libraries/reducer.js b/libraries/reducer.js
index 6d59708d..efd95af5 100644
--- a/libraries/reducer.js
+++ b/libraries/reducer.js
@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
-import authReducer from './auth/authReducer';
+import { reducer as authReducer } from '../components/AuthFields/index.data';
 
 export default function getReducer(client) {
   return combineReducers({
diff --git a/libraries/reduxStore.js b/libraries/reduxStore.js
index 3e125147..47e34be6 100644
--- a/libraries/reduxStore.js
+++ b/libraries/reduxStore.js
@@ -2,7 +2,7 @@ import { createStore } from 'redux';
 import getReducer from './reducer';
 import createMiddleware from './middleware';
 import persist from './persist';
-import { AUTH_SIGNIN, AUTH_SIGNOUT } from './auth/authActions';
+import { dispatchers } from '../components/AuthFields/index.data';
 
 let reduxStore = null;
 
@@ -11,17 +11,20 @@ export default (apolloClient, initialState) => {
   if (!process.browser || !reduxStore) {
     const middleware = createMiddleware(apolloClient.middleware());
     store = createStore(getReducer(apolloClient), initialState, middleware);
+
     (async () => {
       const token = await Promise.resolve(persist.willGetAccessToken());
       if (token) {
-        store.dispatch({ type: AUTH_SIGNIN });
+        dispatchers.signIn(token);
       } else if (!token) {
-        store.dispatch({ type: AUTH_SIGNOUT });
+        dispatchers.signOut();
       }
     })();
+
     if (!process.browser) {
       return store;
     }
+
     reduxStore = store;
   }
   return reduxStore;
diff --git a/libraries/validations.js b/libraries/validations.js
new file mode 100644
index 00000000..b19f3b41
--- /dev/null
+++ b/libraries/validations.js
@@ -0,0 +1,14 @@
+/* eslint-disable no-useless-escape */
+
+export default () => {};
+
+export function isStringEmpty(text) {
+  return !text || text === '' || text.trim() === '';
+}
+
+export function isEmail(email) {
+  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(email);
+}
+
+/* eslint-enable no-useless-escape */
diff --git a/package.json b/package.json
index c404ab9f..9893fea4 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "chalk": "2.0.1",
     "color": "2.0.0",
     "compression": "1.7.0",
+    "core-decorators": "0.19.0",
     "cors": "2.8.3",
     "express": "4.15.3",
     "graphql": "0.10.3",
@@ -79,6 +80,7 @@
   },
   "devDependencies": {
     "babel-eslint": "7.2.3",
+    "babel-plugin-transform-decorators-legacy": "1.3.4",
     "cli-clear": "1.0.4",
     "eslint": "3.19.0",
     "eslint-config-airbnb": "15.0.1",
diff --git a/pages/signin.js b/pages/signin.js
index 692f55ed..220fa2ed 100644
--- a/pages/signin.js
+++ b/pages/signin.js
@@ -1,11 +1,9 @@
 import withData from '../libraries/withData';
-import AuthForm from '../containers/AuthForm';
+import SignInForm from '../components/SignInForm';
 import DefaultCon from '../containers/Default';
 
-const SigninContainer = AuthForm.SigninContainer;
-
 export default withData(props =>
   <DefaultCon title="Sign In" {...props}>
-    <SigninContainer selectFields={'signinFields'} />
+    <SignInForm />
   </DefaultCon>
 );
diff --git a/pages/signup.js b/pages/signup.js
index e5f38574..35911376 100644
--- a/pages/signup.js
+++ b/pages/signup.js
@@ -1,11 +1,9 @@
-import AuthForm from '../containers/AuthForm';
+import SignUpForm from '../components/SignUpForm';
 import withData from '../libraries/withData';
 import DefaultCon from '../containers/Default';
 
-const SignupContainer = AuthForm.SignupContainer;
-
 export default withData(props =>
   <DefaultCon title="Sign Up" {...props}>
-    <SignupContainer selectFields={'signupFields'} />
+    <SignUpForm />
   </DefaultCon>
 );
diff --git a/yarn.lock b/yarn.lock
index cc608b9f..64398f8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -532,6 +532,10 @@ babel-plugin-syntax-class-properties@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
 
+babel-plugin-syntax-decorators@^6.1.18:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+
 babel-plugin-syntax-dynamic-import@6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
@@ -573,6 +577,14 @@ babel-plugin-transform-class-properties@6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
+babel-plugin-transform-decorators-legacy@1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.4.tgz#741b58f6c5bce9e6027e0882d9c994f04f366925"
+  dependencies:
+    babel-plugin-syntax-decorators "^6.1.18"
+    babel-runtime "^6.2.0"
+    babel-template "^6.3.0"
+
 babel-plugin-transform-es2015-arrow-functions@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -909,14 +921,14 @@ babel-register@^6.24.1:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@6.23.0, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
+babel-runtime@6.23.0, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-template@6.25.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.7.0:
+babel-template@6.25.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.3.0, babel-template@^6.7.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
   dependencies:
@@ -1504,6 +1516,10 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
+core-decorators@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/core-decorators/-/core-decorators-0.19.0.tgz#28c9b44aa6208902934627a28f4f5950bd5b463e"
+
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"

From 9163c69a38aa81cbd69ad78f41bda0a14b393e44 Mon Sep 17 00:00:00 2001
From: Sly777 <ilker.guller.777@gmail.com>
Date: Sat, 22 Jul 2017 02:57:42 +0200
Subject: [PATCH 09/10] Added .yarnclean Removed decorators solution Removed
 unused packages

---
 .babelrc                       |  1 -
 .yarnclean                     | 42 ++++++++++++++++++++++++++++++++++
 components/SignInForm/index.js | 11 ++++-----
 components/SignUpForm/index.js | 11 ++++-----
 package.json                   |  2 --
 5 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 .yarnclean

diff --git a/.babelrc b/.babelrc
index ce596c5c..8a084f55 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,7 +3,6 @@
     "next/babel"
   ],
   "plugins": [
-    "transform-decorators-legacy",
     ["styled-components", {
       "ssr": true,
       "displayName": true,
diff --git a/.yarnclean b/.yarnclean
new file mode 100644
index 00000000..25bdd148
--- /dev/null
+++ b/.yarnclean
@@ -0,0 +1,42 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.*.yml
+*.yml
+
+# misc
+*.gz
+*.md
diff --git a/components/SignInForm/index.js b/components/SignInForm/index.js
index ac2ca8c9..1b39ffd5 100644
--- a/components/SignInForm/index.js
+++ b/components/SignInForm/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { autobind } from 'core-decorators';
 import AuthFields from '../AuthFields';
 import validate from '../AuthFields/index.validation';
 import connect from './index.data';
@@ -43,19 +42,17 @@ class SignInForm extends React.Component {
     { key: 2, attr: { name: 'password', type: 'password', label: 'Password' } }
   ];
 
-  @autobind
-  handleTouch() {
+  handleTouch = () => {
     this.setState({ touched: true });
-  }
+  };
 
-  @autobind
-  handleChange(e) {
+  handleChange = e => {
     const fieldValue = e.target.value;
     const fieldName = e.target.name;
     const obj = {};
     obj[fieldName] = fieldValue;
     this.setState(obj);
-  }
+  };
 
   handleSubmit(e, valuesPack) {
     e.preventDefault();
diff --git a/components/SignUpForm/index.js b/components/SignUpForm/index.js
index 1da31de3..ebd2f87c 100644
--- a/components/SignUpForm/index.js
+++ b/components/SignUpForm/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { autobind } from 'core-decorators';
 import AuthFields from '../AuthFields';
 import validate from '../AuthFields/index.validation';
 import connect from './index.data';
@@ -45,19 +44,17 @@ class SignUpForm extends React.Component {
     { key: 4, attr: { name: 'password', type: 'password', label: 'Password' } }
   ];
 
-  @autobind
-  handleTouch() {
+  handleTouch = () => {
     this.setState({ touched: true });
-  }
+  };
 
-  @autobind
-  handleChange(e) {
+  handleChange = e => {
     const fieldValue = e.target.value;
     const fieldName = e.target.name;
     const obj = {};
     obj[fieldName] = fieldValue;
     this.setState(obj);
-  }
+  };
 
   handleSubmit(e, valuesPack) {
     e.preventDefault();
diff --git a/package.json b/package.json
index 9893fea4..c404ab9f 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "chalk": "2.0.1",
     "color": "2.0.0",
     "compression": "1.7.0",
-    "core-decorators": "0.19.0",
     "cors": "2.8.3",
     "express": "4.15.3",
     "graphql": "0.10.3",
@@ -80,7 +79,6 @@
   },
   "devDependencies": {
     "babel-eslint": "7.2.3",
-    "babel-plugin-transform-decorators-legacy": "1.3.4",
     "cli-clear": "1.0.4",
     "eslint": "3.19.0",
     "eslint-config-airbnb": "15.0.1",

From 8e1096fa31e0f4a74d6ea869135facf0f9e90084 Mon Sep 17 00:00:00 2001
From: Sly777 <ilker.guller.777@gmail.com>
Date: Sat, 22 Jul 2017 21:53:17 +0200
Subject: [PATCH 10/10] Added Environment Variables Doc Updated Architecture
 Doc

---
 docs/Architecture.md                       | 5 -----
 docs/Architecture/environment-variables.md | 7 +++++++
 docs/Architecture/readme.md                | 5 +++++
 docs/README.md                             | 4 +++-
 4 files changed, 15 insertions(+), 6 deletions(-)
 delete mode 100644 docs/Architecture.md
 create mode 100644 docs/Architecture/environment-variables.md
 create mode 100644 docs/Architecture/readme.md

diff --git a/docs/Architecture.md b/docs/Architecture.md
deleted file mode 100644
index a4cd1a12..00000000
--- a/docs/Architecture.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# RAN! Documentation
-
-## Architecture
-
-WIP
diff --git a/docs/Architecture/environment-variables.md b/docs/Architecture/environment-variables.md
new file mode 100644
index 00000000..37c7046e
--- /dev/null
+++ b/docs/Architecture/environment-variables.md
@@ -0,0 +1,7 @@
+# RAN!
+
+## Environment Variables (WIP)
+
+- Why should we use?
+- How can we use?
+- Tips
diff --git a/docs/Architecture/readme.md b/docs/Architecture/readme.md
new file mode 100644
index 00000000..3a48a7e6
--- /dev/null
+++ b/docs/Architecture/readme.md
@@ -0,0 +1,5 @@
+# RAN!
+
+## Architecture (WIP)
+
+- [Environment Variables](environment-variables.md)
diff --git a/docs/README.md b/docs/README.md
index 6a35f1a9..34be0980 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -13,7 +13,9 @@
 
   - [Digital Ocean](Deployment/digital-ocean.md)
 
-- [Architecture](Architecture.md)
+- [Architecture](Architecture)
+
+  - [Environment Variables](Architecture/environment-variables.md)
 
 - [Packages](Packages.md)