From 82ce719b545e0facd5b6d8fd34b31475a7d5cb79 Mon Sep 17 00:00:00 2001 From: SerGladkOFF Date: Sun, 27 Aug 2017 17:39:53 +0300 Subject: [PATCH 1/2] add user from arhitecture --- src/components/admin/RegisteredUserForm.js | 46 ++++++++++++++++++++++ src/components/common/ErrorField.js | 3 -- src/components/routes/AdminPage.js | 17 +++++++- src/config.js | 8 ++-- 4 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 src/components/admin/RegisteredUserForm.js diff --git a/src/components/admin/RegisteredUserForm.js b/src/components/admin/RegisteredUserForm.js new file mode 100644 index 0000000..393747a --- /dev/null +++ b/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 { + static propTypes = { + + }; + + render() { + const {handleSubmit} = this.props + return ( +
+

Add user form

+
+ + + + +
+ +
+ +
+ ) + } +} + +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: 'registeredUserForm', + validate +})(RegisteredUserForm) \ No newline at end of file diff --git a/src/components/common/ErrorField.js b/src/components/common/ErrorField.js index a4879c1..925999d 100644 --- a/src/components/common/ErrorField.js +++ b/src/components/common/ErrorField.js @@ -12,7 +12,4 @@ function ErrorField(props) { ) } -ErrorField.propTypes = { -} - export default ErrorField \ No newline at end of file diff --git a/src/components/routes/AdminPage.js b/src/components/routes/AdminPage.js index 1c4cb84..2a064b2 100644 --- a/src/components/routes/AdminPage.js +++ b/src/components/routes/AdminPage.js @@ -1,4 +1,10 @@ import React, { Component } from 'react' +import {Route, NavLink} from 'react-router-dom' +//import {connect} from 'react-redux' +//import {registeredUser} from '../../ducks/registeredUser' +//import Loader from '../common/Loader' +import RegisteredUserForm from '../admin/RegisteredUserForm' + class AdminPage extends Component { static propTypes = { @@ -9,9 +15,18 @@ class AdminPage extends Component { return (

Admin Page

+ Registered user + + }/> +
) } } -export default AdminPage \ No newline at end of file +export default AdminPage +// export default connect(state => ({ +// loading: state[moduleName].loading +// }), {signUp})(AdminPage) +//sign up +// }/> \ No newline at end of file diff --git a/src/config.js b/src/config.js index e8d8d78..6a042e8 100644 --- a/src/config.js +++ b/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) \ No newline at end of file From a576377b61765976141febe760dac3cd0f708b2d Mon Sep 17 00:00:00 2001 From: SerGladkOFF Date: Sun, 27 Aug 2017 21:36:09 +0300 Subject: [PATCH 2/2] home work complete --- src/components/admin/RegisteredUserForm.js | 24 +++++++-------- src/components/admin/UserList.js | 20 +++++++++++++ src/components/routes/AdminPage.js | 24 +++++---------- src/ducks/registeredUser.js | 35 ++++++++++++++++++++++ src/redux/reducer.js | 4 ++- 5 files changed, 78 insertions(+), 29 deletions(-) create mode 100644 src/components/admin/UserList.js create mode 100644 src/ducks/registeredUser.js diff --git a/src/components/admin/RegisteredUserForm.js b/src/components/admin/RegisteredUserForm.js index 393747a..94206ae 100644 --- a/src/components/admin/RegisteredUserForm.js +++ b/src/components/admin/RegisteredUserForm.js @@ -4,10 +4,6 @@ import emailValidator from 'email-validator' import ErrorField from '../common/ErrorField' class RegisteredUserForm extends Component { - static propTypes = { - - }; - render() { const {handleSubmit} = this.props return ( @@ -27,15 +23,19 @@ class RegisteredUserForm extends Component { } } -const validate = ({email, password}) => { - const errors = {} - +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' - - if (!password) errors.password = 'password is required' - else if (password.length < 8) errors.password = 'to short' - + else if (!emailValidator.validate(email)) errors.email = 'invalid email' + + validateName(lastName,'lastName') + validateName(firstName,'firstName') return errors } diff --git a/src/components/admin/UserList.js b/src/components/admin/UserList.js new file mode 100644 index 0000000..c665d45 --- /dev/null +++ b/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=>
  • {user.firstName} /{user.lastName}/ {user.email}
    • ) + return ( +
    +

    User list

    + {_list} +
    + ) +} + +export default connect(store=>({ + users:store[moduleName].users +}))(UserList) \ No newline at end of file diff --git a/src/components/routes/AdminPage.js b/src/components/routes/AdminPage.js index 2a064b2..9e66f79 100644 --- a/src/components/routes/AdminPage.js +++ b/src/components/routes/AdminPage.js @@ -1,32 +1,24 @@ import React, { Component } from 'react' import {Route, NavLink} from 'react-router-dom' -//import {connect} from 'react-redux' -//import {registeredUser} from '../../ducks/registeredUser' -//import Loader from '../common/Loader' +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 (

    Admin Page

    Registered user - - }/> - + User list + }/> + }/>
    ) } + handleAddUser=({email, lastName,firstName}) => this.props.addUser(email, lastName,firstName) } -export default AdminPage -// export default connect(state => ({ -// loading: state[moduleName].loading -// }), {signUp})(AdminPage) -//sign up -// }/> \ No newline at end of file +export default connect(null, {addUser})(AdminPage) \ No newline at end of file diff --git a/src/ducks/registeredUser.js b/src/ducks/registeredUser.js new file mode 100644 index 0000000..7cfbd7e --- /dev/null +++ b/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 + }) + } +} diff --git a/src/redux/reducer.js b/src/redux/reducer.js index 34143fe..adfb338 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 registeredUser, {moduleName as registeredUserModule} from '../ducks/registeredUser' export default combineReducers({ router, form, - [authModule]: authReducer + [authModule]: authReducer, + [registeredUserModule]:registeredUser }) \ No newline at end of file