Hometask for 05.02

admin/src/App.js

@@ -1,23 +1,21 @@
-import React, { Component } from 'react'
-import { Route, NavLink } from 'react-router-dom'
+import React, {Component} from 'react'
+import {NavLink, Route} from 'react-router-dom'
 import AuthPage from './components/routes/auth'
 import AdminPage from './components/routes/admin'
 
 class App extends Component {
-    static propTypes = {
-
-    }
+    static propTypes = {}
 
     render() {
         return (
             <div>
                 <nav>
                     <ul>
                         <li>
-                            <NavLink to="/auth" activeStyle={{ color: 'red'}}>auth</NavLink>
+                            <NavLink to="/auth" activeStyle={{color: 'red'}}>auth</NavLink>
                         </li>
                         <li>
-                            <NavLink to="/admin" activeStyle={{ color: 'red'}}>admin</NavLink>
+                            <NavLink to="/admin" activeStyle={{color: 'red'}}>admin</NavLink>
                         </li>
                     </ul>
                 </nav>

admin/src/components/admin/add-person-form.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import {Field, reduxForm} from 'redux-form'
+import ErrorField from "../common/error-field";
+import validator from 'email-validator'
+
+class AddPersonForm extends React.Component {
+    static propTypes = {}
+
+    render() {
+        return (
+            <div>
+                <h3>Add person</h3>
+                <form onSubmit={this.props.handleSubmit}>
+                    <Field name="firstName" component={ErrorField} label="First name"/>
+                    <Field name="secondName" component={ErrorField} label="Second name"/>
+                    <Field name="email" component={ErrorField} label="Email"/>
+                    <button type="submit">Save</button>
+                </form>
+            </div>
+        )
+    }
+}
+
+const validate = ({firstName, secondName, email}) => {
+    const errors = {}
+
+    if (!firstName) errors.firstName = 'First name is a required field'
+
+    if (!secondName) errors.secondName = 'Second name is a required field'
+
+    if (!email) errors.email = 'email is a required field'
+    else if (!validator.validate(email)) errors.email = 'invalid email'
+
+    return errors
+}
+
+export default reduxForm({
+    form: 'add-person',
+    validate
+})(AddPersonForm)

admin/src/components/common/locked-routes-bounder.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {Redirect} from 'react-router-dom'
+import {getUser, getAuthStatus, AUTH_PENDING} from '../../ducks/auth'
+
+class LockedRoutesBounder extends React.Component {
+
+    render() {
+        if(this.props.authStatus === AUTH_PENDING) return <div>Загрузка...</div>
+
+        if (!this.props.user) return <Redirect to={'/auth'}/>
+
+        return this.props.children;
+    }
+}
+
+export default connect((state) => {
+    return {
+        user: getUser(state),
+        authStatus: getAuthStatus(state)
+    }
+})(LockedRoutesBounder)

admin/src/components/routes/admin/index.js

@@ -1,17 +1,38 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
+import LockedRoutesBounder from '../../common/locked-routes-bounder'
+import AddPersonForm from '../../admin/add-person-form'
+import {getPersons, savePerson} from "../../../ducks/persons";
+import {connect} from 'react-redux'
 
 class AdminPage extends Component {
-    static propTypes = {
-
-    }
+    static propTypes = {}
 
     render() {
         return (
-            <div>
-                <h1>Admin</h1>
-            </div>
+            <LockedRoutesBounder>
+                <div>
+                    <h1>Admin</h1>
+                </div>
+                <AddPersonForm onSubmit={this.handleSavePerson}/>
+                <div>
+                    {this.props.persons.map((person) => <div>
+                        Имя: {person.firstName}
+                        Фамилия: {person.secondName}
+                        Почта: {person.email}
+                        </div>)
+                    }
+                </div>
+            </LockedRoutesBounder>
         )
     }
+
+    handleSavePerson = (personData) => this.props.savePerson(personData)
 }
 
-export default AdminPage
+export default connect(state => {
+    return {
+        persons: getPersons(state)
+    }
+}, {
+    savePerson
+})(AdminPage)

admin/src/ducks/auth.js

@@ -14,20 +14,32 @@ export const SIGN_IN_SUCCESS = `${prefix}/SIGN_IN_SUCCESS`
 export const SIGN_UP_START = `${prefix}/SIGN_UP_START`
 export const SIGN_UP_SUCCESS = `${prefix}/SIGN_UP_SUCCESS`
 
+export const GOT_NO_AUTH = `${prefix}/GOT_NO_AUTH`
+
+export const NO_AUTH = `NO_AUTH`
+export const AUTH_PENDING = `AUTH_PENDING`
+export const AUTH_DONE = `AUTH_DONE`
+
 /**
  * Reducer
  * */
 export const ReducerRecord = Record({
-    user: null
+    user: null,
+    authStatus: AUTH_PENDING
 })
 
 export default function reducer(state = new ReducerRecord(), action) {
     const {type, payload} = action
 
     switch (type) {
+        case SIGN_IN_START:
+        case SIGN_UP_START:
+            return state.merge({authStatus: AUTH_PENDING})
         case SIGN_IN_SUCCESS:
         case SIGN_UP_SUCCESS:
-            return state.set('user', payload.user)
+            return state.merge({user: payload.user, authStatus: AUTH_DONE})
+        case GOT_NO_AUTH:
+            return state.merge({user: null, authStatus: NO_AUTH})
         default:
             return state
     }
@@ -37,10 +49,34 @@ export default function reducer(state = new ReducerRecord(), action) {
  * Selectors
  * */
 
+export const getUser = state => state.auth.user;
+export const getAuthStatus = state => state.auth.authStatus;
+
 /**
  * Action Creators
  * */
 
+export function initAuth() {
+    return function (dispatch) {
+        dispatch({
+            type: SIGN_IN_START
+        })
+
+        firebase.auth().onAuthStateChanged((user) => {
+            if (user) {
+                dispatch({
+                    type: SIGN_IN_SUCCESS,
+                    payload: {user}
+                })
+            } else {
+                dispatch({
+                    type: GOT_NO_AUTH
+                })
+            }
+        })
+    }
+}
+
 export function signIn(email, password) {
     return async (dispatch) => {
         dispatch({
@@ -75,6 +111,3 @@ export function signUp(email, password) {
  * Init
  **/
 
-firebase.auth().onAuthStateChanged((user) => {
-    console.log('--- user', user)
-})

admin/src/ducks/persons.js

@@ -0,0 +1,61 @@
+import {Record, List} from 'immutable'
+import {appName} from '../config'
+import {reset} from 'redux-form';
+
+
+
+/**
+ * Constants
+ * */
+export const moduleName = 'auth'
+const prefix = `${appName}/${moduleName}`
+
+export const PERSON_SAVED = `${prefix}/PERSON_SAVED`
+
+/**
+ * Reducer
+ * */
+
+export const PersonRecord = new Record({
+    id: null,
+    firstName: null,
+    secondName: null,
+    email: null
+})
+
+export const StateRecord = new Record({
+    personsList: new List()
+})
+
+export default function reducer(state = new StateRecord(), action) {
+    const {type, payload} = action;
+
+    switch (type) {
+        case PERSON_SAVED:
+            const personRecord = new PersonRecord({id: state.size + 1, ...payload.personData})
+            return {personsList: state.personsList.push(personRecord)};
+        default:
+            return state
+    }
+}
+
+/**
+ * Selectors
+ * */
+
+export const getPersons = state => state.persons.personsList
+
+
+/**
+ * Action Creators
+ * */
+
+export function savePerson(personData) {
+    return function(dispatch) {
+        dispatch({
+            type: PERSON_SAVED,
+            payload: {personData}
+        })
+        dispatch(reset('add-person'))
+    }
+}

admin/src/index.js

@@ -5,6 +5,9 @@ import {ConnectedRouter} from 'connected-react-router'
 import App from './App'
 import store from './redux'
 import history from './history'
+import {initAuth} from './ducks/auth'
+
+store.dispatch(initAuth())
 
 ReactDOM.render(
     <Provider store={store}>

admin/src/redux/reducer.js

@@ -2,10 +2,12 @@ import { combineReducers } from 'redux'
 import {connectRouter} from 'connected-react-router'
 import {reducer as form} from 'redux-form'
 import authReducer from '../ducks/auth'
+import personsReducer from '../ducks/persons'
 import history from '../history'
 
 export default combineReducers({
     auth: authReducer,
+    persons: personsReducer,
     router: connectRouter(history),
     form
 })