From 33710f8dd4713daa17678d9f78e59a2ee2ef9dc2 Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 22 Oct 2017 12:00:53 -0400
Subject: [PATCH 1/8] HT1.2: alter firebase config

---
 src/config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/config.js b/src/config.js
index 2782a0b..6ce5a80 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,12 +1,12 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-1610'
+export const appName = 'advreact-1610-9cb0c'
 
 firebase.initializeApp({
-    apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA",
+    apiKey: "AIzaSyBNaOQkLL75ZGoeaNtqbe63wEjjWLzLOPY",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "397157634637"
+    messagingSenderId: "266748171955"
 })
\ No newline at end of file

From 17a1433566fb7608ed6a0e7b8f3fd7f2395b05a9 Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 22 Oct 2017 12:16:59 -0400
Subject: [PATCH 2/8] HT1.1: complete sign in

---
 src/components/routes/Auth.js |  6 +++---
 src/ducks/auth.js             | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/routes/Auth.js b/src/components/routes/Auth.js
index a183ff9..ec4898e 100644
--- a/src/components/routes/Auth.js
+++ b/src/components/routes/Auth.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {Route, NavLink} from 'react-router-dom'
 import {connect} from 'react-redux'
-import {signUp} from '../../ducks/auth'
+import {signUp, signIn} from '../../ducks/auth'
 import SignIn from '../auth/SignIn'
 import SignUp from '../auth/SignUp'
 
@@ -22,8 +22,8 @@ class AuthPage extends Component {
         )
     }
 
-    handleSignIn = (values) => console.log('---', 'sign in', values)
+    handleSignIn = ({email, password}) => this.props.signIn(email, password)
     handleSignUp = ({email, password}) => this.props.signUp(email, password)
 }
 
-export default connect(null, { signUp })(AuthPage)
\ No newline at end of file
+export default connect(null, { signUp, signIn })(AuthPage)
\ No newline at end of file
diff --git a/src/ducks/auth.js b/src/ducks/auth.js
index 1ab7d1b..5ca5265 100644
--- a/src/ducks/auth.js
+++ b/src/ducks/auth.js
@@ -13,7 +13,10 @@ export const SIGN_UP_START = `${prefix}/SIGN_UP_START`
 export const SIGN_UP_SUCCESS = `${prefix}/SIGN_UP_SUCCESS`
 export const SIGN_UP_ERROR = `${prefix}/SIGN_UP_ERROR`
 
+export const SIGN_IN_START = `${prefix}/SIGN_IN_START`
 export const SIGN_IN_SUCCESS = `${prefix}/SIGN_IN_SUCCESS`
+export const SIGN_IN_ERROR = `${prefix}/SIGN_IN_ERROR`
+
 
 /**
  * Reducer
@@ -29,6 +32,7 @@ export default function reducer(state = new ReducerRecord(), action) {
 
     switch (type) {
         case SIGN_UP_START:
+        case SIGN_IN_START:
             return state.set('loading', true)
 
         case SIGN_UP_SUCCESS:
@@ -37,6 +41,12 @@ export default function reducer(state = new ReducerRecord(), action) {
                 .set('user', payload.user)
                 .set('loading', false)
 
+        case SIGN_UP_ERROR:
+        case SIGN_IN_ERROR:
+            return state
+                .set('error', payload.error)
+                .set('loading', false)
+
         default:
             return state
     }
@@ -70,6 +80,24 @@ export function signUp(email, password) {
     }
 }
 
+export function signIn(email, password) {
+    return (dispatch) => {
+        dispatch({
+            type: SIGN_IN_START
+        })
+
+        firebase.auth().signInWithEmailAndPassword(email, password)
+            .then(user => dispatch({
+                type: SIGN_IN_SUCCESS,
+                payload: { user }
+            }))
+            .catch(error => dispatch({
+                type: SIGN_IN_ERROR,
+                payload: { error }
+            }))
+    }
+}
+
 firebase.auth().onAuthStateChanged(user => {
     if (!user) return
 

From 160a21b0d7f01abeb9b0800d40ec77b501e5914f Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 22 Oct 2017 12:31:58 -0400
Subject: [PATCH 3/8] HT1.1: add /admin/people nav link and style it

---
 public/index.html                | 15 +++++++++++++++
 src/components/common/Submenu.js | 24 ++++++++++++++++++++++++
 src/components/routes/Admin.js   | 13 +++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 src/components/common/Submenu.js

diff --git a/public/index.html b/public/index.html
index 7bee027..828f249 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,6 +20,21 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <style>
+      nav.submenu {
+        background: #eee;
+        padding: .5rem;
+      }
+
+      nav.submenu a {
+        margin-right: 1rem;
+        color: #333;
+        text-decoration: none;
+      }
+      nav.submenu a.active {
+        font-weight: bold;
+      }
+    </style>
   </head>
   <body>
     <noscript>
diff --git a/src/components/common/Submenu.js b/src/components/common/Submenu.js
new file mode 100644
index 0000000..dc670b2
--- /dev/null
+++ b/src/components/common/Submenu.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { NavLink } from 'react-router-dom'
+
+class Submenu extends Component {
+  render() {
+    return (
+      <nav className="submenu">
+        {this.props.links.map(this.renderSubmenuItem.bind(this))}
+      </nav>
+    )
+  }
+
+  renderSubmenuItem(item) {
+    const { to, title } = item
+
+    return (
+      <NavLink to={to} activeClassName="active">
+        {title}
+      </NavLink>
+    )
+  }
+}
+
+export default Submenu
diff --git a/src/components/routes/Admin.js b/src/components/routes/Admin.js
index 952248e..a360d4a 100644
--- a/src/components/routes/Admin.js
+++ b/src/components/routes/Admin.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import Submenu from '../common/Submenu'
 
 class Admin extends Component {
     static propTypes = {
@@ -6,9 +7,21 @@ class Admin extends Component {
     };
 
     render() {
+        const links = [{
+            to: '/admin/people',
+            title: 'People',
+        }, {
+            to: '/admin/stats',
+            title: 'Stats',
+        }, {
+            to: '/admin/whatever',
+            title: 'Whatever',
+        }]
+
         return (
             <div>
                 <h2>Admin Page</h2>
+                <Submenu links={links} />
             </div>
         )
     }

From 6da7fd5579c29f4da6f346e4b52962af5ea14569 Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 22 Oct 2017 12:36:29 -0400
Subject: [PATCH 4/8] HT1.1: add People component shell and route

---
 src/components/routes/Admin.js  |  3 +++
 src/components/routes/People.js | 13 +++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 src/components/routes/People.js

diff --git a/src/components/routes/Admin.js b/src/components/routes/Admin.js
index a360d4a..7a5ed7c 100644
--- a/src/components/routes/Admin.js
+++ b/src/components/routes/Admin.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 import Submenu from '../common/Submenu'
+import { Route } from 'react-router-dom'
+import People from './People'
 
 class Admin extends Component {
     static propTypes = {
@@ -22,6 +24,7 @@ class Admin extends Component {
             <div>
                 <h2>Admin Page</h2>
                 <Submenu links={links} />
+                <Route path="/admin/people" component={People} />
             </div>
         )
     }
diff --git a/src/components/routes/People.js b/src/components/routes/People.js
new file mode 100644
index 0000000..847b5be
--- /dev/null
+++ b/src/components/routes/People.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+class People extends Component {
+  render() {
+    return (
+      <div>
+        <h1>People</h1>
+      </div>
+    )
+  }
+}
+
+export default People

From da6d503eb805106b38ace47302f0e0257f7d66bd Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 22 Oct 2017 13:12:30 -0400
Subject: [PATCH 5/8] Fix react warning.

---
 src/components/common/Submenu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Submenu.js b/src/components/common/Submenu.js
index dc670b2..466ed9b 100644
--- a/src/components/common/Submenu.js
+++ b/src/components/common/Submenu.js
@@ -10,11 +10,11 @@ class Submenu extends Component {
     )
   }
 
-  renderSubmenuItem(item) {
+  renderSubmenuItem(item, index) {
     const { to, title } = item
 
     return (
-      <NavLink to={to} activeClassName="active">
+      <NavLink key={index} to={to} activeClassName="active">
         {title}
       </NavLink>
     )

From 253bb15c2b1158753ff3fb9948ece6114b0c3c98 Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 22 Oct 2017 13:26:59 -0400
Subject: [PATCH 6/8] HT1.1: member form (binded to react form) added

---
 public/index.html                   |  3 ++
 src/components/admin/MemberForm.js  | 44 +++++++++++++++++++++++++++++
 src/components/common/ErrorField.js |  8 ++++--
 src/components/routes/People.js     | 32 ++++++++++++++++-----
 4 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 src/components/admin/MemberForm.js

diff --git a/public/index.html b/public/index.html
index 828f249..3501497 100644
--- a/public/index.html
+++ b/public/index.html
@@ -34,6 +34,9 @@
       nav.submenu a.active {
         font-weight: bold;
       }
+      .error-field {
+        margin-bottom: 1rem;
+      }
     </style>
   </head>
   <body>
diff --git a/src/components/admin/MemberForm.js b/src/components/admin/MemberForm.js
new file mode 100644
index 0000000..de0bbd7
--- /dev/null
+++ b/src/components/admin/MemberForm.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { reduxForm, Field } from 'redux-form'
+import emailValidator from 'email-validator'
+import ErrorField from '../common/ErrorField'
+
+class MemberForm extends Component {
+  render() {
+    return (
+      <form onSubmit={this.props.handleSubmit}>
+          <Field component={ErrorField} label="First name" name="firstName" />
+          <Field component={ErrorField} label="Last name" name="lastName" />
+          <Field component={ErrorField} label="E-mail" name="email" type="email" />
+          <button>Add member</button>
+      </form>
+    )
+  }
+}
+
+const validate = values => {
+    const { firstName, lastName, email } = values
+    const errors = {}
+
+    if (!firstName) {
+        errors.firstName = 'First name is required.'
+    }
+
+    if (!lastName) {
+        errors.lastName = 'Last name is required.'
+    }
+
+    if (!email) {
+        errors.email = 'Email is required.'
+    }
+    else if (!emailValidator.validate(email)) {
+        errors.email = 'Email is invalid.'
+    }
+
+    return errors
+}
+
+export default reduxForm({
+    form: 'member',
+    validate,
+})(MemberForm)
diff --git a/src/components/common/ErrorField.js b/src/components/common/ErrorField.js
index e4cf28c..dac498c 100644
--- a/src/components/common/ErrorField.js
+++ b/src/components/common/ErrorField.js
@@ -6,11 +6,13 @@ class ErrorField extends Component {
     };
 
     render() {
-        const {input, meta: {error, touched}, type, label} = this.props
+        const {input, meta, type, label} = this.props
+        const {error, touched} = meta || {}
         const errorText = touched && error && <div style = {{color: 'red'}}>{error}</div>
         return (
-            <div>
-                {label} <input {...input} type = {type} />
+            <div className="error-field">
+                {label}<br/>
+                <input {...input} type = {type} />
                 {errorText}
             </div>
         )
diff --git a/src/components/routes/People.js b/src/components/routes/People.js
index 847b5be..9f0e9b1 100644
--- a/src/components/routes/People.js
+++ b/src/components/routes/People.js
@@ -1,13 +1,31 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import MemberForm from '../admin/MemberForm'
 
 class People extends Component {
-  render() {
-    return (
-      <div>
-        <h1>People</h1>
-      </div>
-    )
-  }
+    curryAddMember() {
+        return values => {
+            console.log('--- values:', values)
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <h1>People</h1>
+                {this.renderExistingPeople()}
+                {this.renderAddForm()}
+            </div>
+        )
+    }
+
+    renderExistingPeople() {
+        return null
+    }
+
+    renderAddForm() {
+        return <MemberForm onSubmit={this.curryAddMember()} />
+    }
 }
 
 export default People

From 8c147644ee8dbef154e3d72e23b184a5b209e855 Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 22 Oct 2017 14:22:52 -0400
Subject: [PATCH 7/8] HT1.1: add people ducks, store members in state

---
 src/components/admin/MemberForm.js |  5 ++++
 src/components/routes/People.js    |  9 +++++--
 src/ducks/people.js                | 42 ++++++++++++++++++++++++++++++
 src/redux/reducer.js               |  6 +++--
 4 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/ducks/people.js

diff --git a/src/components/admin/MemberForm.js b/src/components/admin/MemberForm.js
index de0bbd7..c124455 100644
--- a/src/components/admin/MemberForm.js
+++ b/src/components/admin/MemberForm.js
@@ -41,4 +41,9 @@ const validate = values => {
 export default reduxForm({
     form: 'member',
     validate,
+    initialValues: {
+        firstName: '',
+        lastName: 'ln',
+        email: 'ev@sdlfl.ru',
+    },
 })(MemberForm)
diff --git a/src/components/routes/People.js b/src/components/routes/People.js
index 9f0e9b1..940343d 100644
--- a/src/components/routes/People.js
+++ b/src/components/routes/People.js
@@ -1,11 +1,14 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import MemberForm from '../admin/MemberForm'
+import { addMember } from '../../ducks/people'
 
 class People extends Component {
     curryAddMember() {
         return values => {
-            console.log('--- values:', values)
+            const { firstName, lastName, email } = values
+
+            this.props.addMember(firstName, lastName, email)
         }
     }
 
@@ -28,4 +31,6 @@ class People extends Component {
     }
 }
 
-export default People
+export default connect(null, {
+    addMember,
+})(People)
diff --git a/src/ducks/people.js b/src/ducks/people.js
new file mode 100644
index 0000000..6978c70
--- /dev/null
+++ b/src/ducks/people.js
@@ -0,0 +1,42 @@
+import {Record} from 'immutable'
+import {reset} from 'redux-form';
+import {appName} from '../config'
+
+export const moduleName = 'people'
+
+const prefix = `${appName}/${moduleName}`
+
+/* constants */
+export const ADD_MEMBER = `${prefix}/ADD_MEMBER`
+
+/* reducer */
+const ReducerRecord = Record({
+    items: [],
+})
+
+export default function reducer(state = new ReducerRecord(), action) {
+    const { type, payload } = action
+
+    switch (type) {
+        case ADD_MEMBER:
+            return state
+                .set('items', state.get('items').concat(payload.user))
+
+        default:
+            return state
+    }
+}
+
+/* action creators */
+export function addMember(firstName, lastName, email) {
+    const user = {firstName, lastName, email}
+
+    return dispatch => {
+        dispatch({
+            type: ADD_MEMBER,
+            payload: {user},
+        })
+
+        dispatch(reset('member'))
+    }
+}
diff --git a/src/redux/reducer.js b/src/redux/reducer.js
index 34143fe..6f671f0 100644
--- a/src/redux/reducer.js
+++ b/src/redux/reducer.js
@@ -2,8 +2,10 @@ import {combineReducers} from 'redux'
 import {routerReducer as router} from 'react-router-redux'
 import {reducer as form} from 'redux-form'
 import authReducer, {moduleName as authModule} from '../ducks/auth'
+import peopleReducer, {moduleName as peopleModule} from '../ducks/people'
 
 export default combineReducers({
     router, form,
-    [authModule]: authReducer
-})
\ No newline at end of file
+    [authModule]: authReducer,
+    [peopleModule]: peopleReducer,
+})

From 7aa9be2d1c065151f6b1142cd3ccc6ab4873770f Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 22 Oct 2017 14:52:21 -0400
Subject: [PATCH 8/8] HT1.1: draw member list

---
 public/index.html                  |  8 ++++++
 src/components/admin/MemberForm.js |  5 ----
 src/components/routes/People.js    | 44 ++++++++++++++++++++++++++----
 src/ducks/people.js                |  5 ++++
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3501497..3b95ddf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,6 +37,14 @@
       .error-field {
         margin-bottom: 1rem;
       }
+      .members-ui {
+        display: flex;
+      }
+      .members-ui ul,
+      .members-ui .no-members {
+        width: 300px;
+        margin-right: 1rem;
+      }
     </style>
   </head>
   <body>
diff --git a/src/components/admin/MemberForm.js b/src/components/admin/MemberForm.js
index c124455..de0bbd7 100644
--- a/src/components/admin/MemberForm.js
+++ b/src/components/admin/MemberForm.js
@@ -41,9 +41,4 @@ const validate = values => {
 export default reduxForm({
     form: 'member',
     validate,
-    initialValues: {
-        firstName: '',
-        lastName: 'ln',
-        email: 'ev@sdlfl.ru',
-    },
 })(MemberForm)
diff --git a/src/components/routes/People.js b/src/components/routes/People.js
index 940343d..0e523ed 100644
--- a/src/components/routes/People.js
+++ b/src/components/routes/People.js
@@ -1,9 +1,17 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import MemberForm from '../admin/MemberForm'
-import { addMember } from '../../ducks/people'
+import { addMember, membersSelector } from '../../ducks/people'
 
 class People extends Component {
+    get members() {
+        return this.props.members
+    }
+
+    get hasMembers() {
+        return this.members.length > 0
+    }
+
     curryAddMember() {
         return values => {
             const { firstName, lastName, email } = values
@@ -16,14 +24,34 @@ class People extends Component {
         return (
             <div>
                 <h1>People</h1>
-                {this.renderExistingPeople()}
-                {this.renderAddForm()}
+                <div className="members-ui">
+                    {this.renderMembers()}
+                    {this.renderAddForm()}
+                </div>
             </div>
         )
     }
 
-    renderExistingPeople() {
-        return null
+    renderMembers() {
+        if (!this.hasMembers) {
+            return <p className="no-members">There is no members yet.</p>
+        }
+
+        return (
+            <ul>
+                {this.members.map(this.renderMember.bind(this))}
+            </ul>
+        )
+    }
+
+    renderMember(item) {
+        const { firstName, lastName, email } = item
+
+        return (
+            <li>
+                {firstName} {lastName} <a href={`mailto:${email}`}>{email}</a>
+            </li>
+        )
     }
 
     renderAddForm() {
@@ -31,6 +59,10 @@ class People extends Component {
     }
 }
 
-export default connect(null, {
+export default connect(state => {
+    return {
+        members: membersSelector(state)
+    }
+}, {
     addMember,
 })(People)
diff --git a/src/ducks/people.js b/src/ducks/people.js
index 6978c70..d36813a 100644
--- a/src/ducks/people.js
+++ b/src/ducks/people.js
@@ -1,6 +1,7 @@
 import {Record} from 'immutable'
 import {reset} from 'redux-form';
 import {appName} from '../config'
+import {createSelector} from 'reselect'
 
 export const moduleName = 'people'
 
@@ -40,3 +41,7 @@ export function addMember(firstName, lastName, email) {
         dispatch(reset('member'))
     }
 }
+
+/* selectors */
+export const stateSelector = state => state[moduleName]
+export const membersSelector = createSelector(stateSelector, state => state.items)