Hw2

README.md

@@ -4,4 +4,4 @@
 
 ##HT2.1 Реализовать логику signIn
 ##HT2.2 покрыть тестами auth логику
-##HT2.3 при успешной записи человека в стор - чистить форму в /people
+##HT2.3 при успешной записи человека в стор - чистить форму в /people

src/components/admin/RegisteredUserForm.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import {reduxForm, Field,reset} from 'redux-form'
+import emailValidator from 'email-validator'
+import ErrorField from '../common/ErrorField'
+
+class RegisteredUserForm extends Component {
+    render() {
+        const {handleSubmit} = this.props
+        return (
+            <div>
+                <h2>Add user form</h2>
+                <form onSubmit={handleSubmit}>
+                    <Field name="firstName" component={ErrorField}/>
+                    <Field name="lastName" component={ErrorField} />
+                    <Field name="email" component={ErrorField} />
+
+                    <div>
+                        <input type="submit" />
+                    </div>
+                </form>
+            </div>
+        )
+    }
+}
+const validateName = (param,label,errors)=>{
+
+    if (!param) errors[label] = `${label} is required`
+        else if (/^[a-zA-Zа-яА-ЯёЁ]$/.test(param)) errors[label] = `invalid ${label}`
+}
+
+const validate = ({firstName,lastName, email}) => {
+    //debugger
+    let  errors = {}
+
+    if (!email) errors.email = 'email is required'
+        else if (!emailValidator.validate(email)) errors.email = 'invalid email'
+
+    validateName(lastName,'lastName',errors)
+    validateName(firstName,'firstName',errors)
+    return errors
+}
+
+
+const afterSubmit = (result, dispatch) =>{
+    console.log('afterSubmit')
+    return dispatch(reset('RegisteredUserForm'));
+}
+
+
+export default reduxForm({
+    form: 'RegisteredUserForm',
+    onSubmitSuccess: afterSubmit,
+    validate
+})(RegisteredUserForm)
+

src/components/admin/UserList.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {moduleName} from '../../ducks/people'
+
+
+const UserList = (props)=>{
+        const _list = props.people.map(
+            user=><li>{user.firstName} /{user.lastName}/ {user.email}</li>)
+        return (
+            <div>
+                <h1>User list</h1>
+                {_list}
+            </div>
+        )
+}
+
+export default connect(store=>({
+    people:store[moduleName].entities
+}))(UserList)

src/components/auth/SignInForm.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import {reduxForm, Field} from 'redux-form'
+import validate from './validate'
 
 class SignInForm extends Component {
     static propTypes = {
@@ -30,5 +31,6 @@ class SignInForm extends Component {
 }
 
 export default reduxForm({
-    form: 'auth'
+    form: 'auth',
+    validate
 })(SignInForm)

src/components/auth/SignUpForm.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import {reduxForm, Field} from 'redux-form'
-import emailValidator from 'email-validator'
+
 import ErrorField from '../common/ErrorField'
+import validate from './validate'
+
 
 class SignUpForm extends Component {
     static propTypes = {
@@ -25,19 +27,6 @@ class SignUpForm extends Component {
     }
 }
 
-const validate = ({email, password}) => {
-    const errors = {}
-
-    if (!email) errors.email = 'email is required'
-    else if (!emailValidator.validate(email)) errors.email = 'invalid email'
-
-    if (!password) errors.password = 'password is required'
-    else if (password.length < 8) errors.password = 'to short'
-
-    return errors
-}
-
-
 export default reduxForm({
     form: 'auth',
     validate

src/components/auth/validate.js

@@ -0,0 +1,12 @@
+import emailValidator from 'email-validator'
+export default function({email, password}){
+    const errors = {}
+
+    if (!email) errors.email = 'email is required'
+    else if (!emailValidator.validate(email)) errors.email = 'invalid email'
+
+    if (!password) errors.password = 'password is required'
+    else if (password.length < 8) errors.password = 'to short'
+
+    return errors
+}

src/components/common/ErrorField.js

@@ -12,7 +12,4 @@ function ErrorField(props) {
     )
 }
 
-ErrorField.propTypes = {
-}
-
 export default ErrorField

src/components/routes/AdminPage.js

@@ -1,17 +1,24 @@
 import React, { Component } from 'react'
+import {Route, NavLink} from 'react-router-dom'
+import {connect} from 'react-redux'
+import {addPerson} from '../../ducks/people'
+import RegisteredUserForm from '../admin/RegisteredUserForm'
+import UserList from '../admin/UserList'
 
 class AdminPage extends Component {
-    static propTypes = {
-
-    };
 
     render() {
         return (
             <div>
                 <h1>Admin Page</h1>
+                <NavLink to="/admin/people" activeStyle={{color: 'red'}}>Registered user</NavLink>
+                <NavLink to="/admin/users" activeStyle={{color: 'red'}}>User list</NavLink>
+                <Route path="/admin/people" render={() => <RegisteredUserForm onSubmit = {this.handleAddUser}/>}/>
+                <Route path="/admin/users" render={() => <UserList onSubmit = {this.handleAddUser}/>}/>
             </div>
         )
     }
+    handleAddUser=({email, lastName,firstName}) => this.props.addPerson({email, lastName,firstName})
 }
 
-export default AdminPage
+export default connect(null, {addPerson})(AdminPage)

src/components/routes/AuthPage.js

@@ -3,7 +3,7 @@ import SignInForm from '../auth/SignInForm'
 import SignUpForm from '../auth/SignUpForm'
 import {Route, NavLink} from 'react-router-dom'
 import {connect} from 'react-redux'
-import {signUp, moduleName} from '../../ducks/auth'
+import {signUp,signIn, moduleName} from '../../ducks/auth'
 import Loader from '../common/Loader'
 
 class AuthPage extends Component {
@@ -25,10 +25,10 @@ class AuthPage extends Component {
         )
     }
 
-    handleSignIn = (values) => console.log('---', values)
+    handleSignIn = ({email, password}) => this.props.signIn(email, password)
     handleSignUp = ({email, password}) => this.props.signUp(email, password)
 }
 
 export default connect(state => ({
     loading: state[moduleName].loading
-}), {signUp})(AuthPage)
+}), {signUp,signIn})(AuthPage)

src/config.js

@@ -1,13 +1,15 @@
 import firebase from 'firebase'
 
-export const appName = "advreact-21-08"
+export const appName = 'advreact-277e8'//"advreact-21-08"
 export const firebaseConfig = {
-    apiKey: "AIzaSyDjA6CeIHuni5lNm4ML1b-TSxJltsYUO8g",
+    //apiKey: "AIzaSyDjA6CeIHuni5lNm4ML1b-TSxJltsYUO8g",
+    apiKey: "AIzaSyCw2LF9saF-AiDhbN464gWERWR35m5qm0Q",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: `${appName}.appspot.com`,
-    messagingSenderId: "789814589283"
+    //messagingSenderId: "789814589283"
+    messagingSenderId: "313050002315"
 }
 
 firebase.initializeApp(firebaseConfig)

src/ducks/auth.js

@@ -15,9 +15,14 @@ export const moduleName = 'auth'
 export const SIGN_UP_REQUEST = `${appName}/${moduleName}/SIGN_UP_REQUEST`
 export const SIGN_UP_SUCCESS = `${appName}/${moduleName}/SIGN_UP_SUCCESS`
 export const SIGN_UP_ERROR = `${appName}/${moduleName}/SIGN_UP_ERROR`
+
 export const SIGN_IN_SUCCESS = `${appName}/${moduleName}/SIGN_IN_SUCCESS`
+export const SIGN_IN_REQUEST = `${appName}/${moduleName}/SIGN_IN_REQUEST`
+export const SIGN_IN_ERROR = `${appName}/${moduleName}/SIGN_IN_ERROR`
+
 export const SIGN_OUT_REQUEST = `${appName}/${moduleName}/SIGN_OUT_REQUEST`
 export const SIGN_OUT_SUCCESS = `${appName}/${moduleName}/SIGN_OUT_SUCCESS`
+export const AUTH = firebase.auth()
 
 //console.log('---', ReducerRecord)
 export default function reducer(state = new ReducerRecord(), action) {
@@ -53,21 +58,28 @@ export function signUp(email, password) {
     }
 }
 
+export function signIn(email, password) {
+    return {
+        type: SIGN_IN_REQUEST,
+        payload: {email, password}
+    }
+}
+
 export function signOut() {
     return {
         type: SIGN_OUT_REQUEST
     }
 }
 
 export const signUpSaga = function * () {
-    const auth = firebase.auth()
+
 
     while (true) {
         const action = yield take(SIGN_UP_REQUEST)
 
         try {
             const user = yield call(
-                [auth, auth.createUserWithEmailAndPassword],
+                [AUTH, AUTH.createUserWithEmailAndPassword],
                 action.payload.email, action.payload.password
             )
             yield put({
@@ -83,30 +95,35 @@ export const signUpSaga = function * () {
     }
 }
 
-/*
-export function signUp(email, password) {
-    return (dispatch) => {
-        dispatch({
-            type: SIGN_UP_REQUEST
-        })
+export const signInSaga = function * () {
 
-        firebase.auth().createUserWithEmailAndPassword(email, password)
-            .then(user => dispatch({
-                type: SIGN_UP_SUCCESS,
+    while (true) {
+        const action = yield take(SIGN_IN_REQUEST)
+        try {
+            const user = yield call(
+                [AUTH, AUTH.signInWithEmailAndPassword],
+                action.payload.email, action.payload.password
+            )
+
+            yield put({
+                type: SIGN_IN_SUCCESS,
                 payload: {user}
-            }))
-            .catch(error => dispatch({
-                type: SIGN_UP_ERROR,
+            })
+            yield put(push('/admin/people'))
+
+        } catch (error) {
+            yield put({
+                type: SIGN_IN_ERROR,
                 error
-            }))
+            })
+        }
     }
 }
-*/
 
 export const watchStatusChange = function * () {
-    const auth = firebase.auth()
+
     try {
-        yield cps([auth, auth.onAuthStateChanged])
+        yield cps([AUTH, AUTH.onAuthStateChanged])
     } catch (user) {
         yield put({
             type: SIGN_IN_SUCCESS,
@@ -115,22 +132,11 @@ export const watchStatusChange = function * () {
     }
 }
 
-/*
-firebase.auth().onAuthStateChanged(user => {
-    const store = require('../redux').default
-    store.dispatch({
-        type: SIGN_IN_SUCCESS,
-        payload: {user}
-    })
-})
-
-*/
-
 export const signOutSaga = function * () {
-    const auth = firebase.auth()
+
 
     try {
-        yield call([auth, auth.signOut])
+        yield call([AUTH, AUTH.signOut])
         yield put({
             type: SIGN_OUT_SUCCESS
         })
@@ -143,7 +149,8 @@ export const signOutSaga = function * () {
 export const saga = function * () {
     yield all([
         signUpSaga(),
+        signInSaga(),
         watchStatusChange(),
-        takeEvery(SIGN_OUT_REQUEST, signOutSaga)
+        takeEvery(SIGN_OUT_REQUEST, signOutSaga),
     ])
 }