Hw1

src/components/admin/RegisteredUserForm.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import {reduxForm, Field} 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 validate = ({firstName,lastName, email}) => {
+    //debugger
+    let  errors = {}
+    const validateName = (param,label)=>{
+
+        if (!param) errors[label] = `${label} is required`
+            else if (/^[a-zA-Zа-яА-ЯёЁ]$/.test(param)) errors[label] = `invalid ${label}`
+    }
+    if (!email) errors.email = 'email is required'
+        else if (!emailValidator.validate(email)) errors.email = 'invalid email'
+
+    validateName(lastName,'lastName')
+    validateName(firstName,'firstName')
+    return errors
+}
+
+
+export default reduxForm({
+    form: 'registeredUserForm',
+    validate
+})(RegisteredUserForm)

src/components/admin/UserList.js

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

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 {addUser} from '../../ducks/registeredUser'
+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.addUser(email, lastName,firstName)
 }
 
-export default AdminPage
+export default connect(null, {addUser})(AdminPage)

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/registeredUser.js

@@ -0,0 +1,35 @@
+import {appName} from '../config'
+import {Record} from 'immutable'
+
+const ReducerRecord = Record({
+    users: [],
+    loading: false
+})
+
+export const moduleName = 'registeredUser'
+export const CHANGE_USERS_LIST = `${appName}/${moduleName}/CHANGE_USERS_LIST`
+
+//console.log('---', ReducerRecord)
+export default function reducer(state = new ReducerRecord(), action) {
+    const {type, payload} = action
+
+    switch (type) {
+        case CHANGE_USERS_LIST:
+            return state
+                .set('users', payload)
+        default:
+            return state
+    }
+}
+
+export function addUser(email, lastName,firstName) {
+
+    return (dispatch,getState) => {
+        let _users=[...getState()[moduleName].users]
+        _users.push({email,lastName,firstName})
+        dispatch({
+            type: CHANGE_USERS_LIST,
+            payload:_users
+        })
+    }
+}

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 registeredUser, {moduleName as registeredUserModule} from '../ducks/registeredUser'
 
 export default combineReducers({
     router, form,
-    [authModule]: authReducer
+    [authModule]: authReducer,
+    [registeredUserModule]:registeredUser
 })