Ht1

admin/package.json

@@ -32,5 +32,8 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "redux-devtools-extension": "^2.13.8"
+  }
 }

admin/src/App.js

@@ -1,33 +1,58 @@
 import React, { Component } from 'react'
 import { Route, NavLink } from 'react-router-dom'
-import AuthPage from './components/routes/auth'
-import AdminPage from './components/routes/admin'
+import AuthPage from './components/Pages/auth'
+import AdminPage from './components/Pages/admin'
+import UserList from './components/Pages/UserList'
+import { connect } from "react-redux";
+import AuthRoute from "./components/routes/AuthRoute";
+import { checkAuth } from "./ducks/auth";
 
 class App extends Component {
-    static propTypes = {
+    static propTypes = {}
 
+    componentDidMount() {
+        checkAuth();
+    }
+
+
+    getUser() {
+        const result = Boolean(this.props.user) ? '' : '( Private Route )';
+        return result;
     }
 
     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 {this.getUser()}</NavLink>
+                        </li>
+                        <li>
+                            <NavLink to="/user-list" activeStyle={{color: 'red'}}>User list{this.getUser()}</NavLink>
                         </li>
                     </ul>
                 </nav>
                 <section>
                     <Route path="/auth" component={AuthPage}/>
-                    <Route path="/admin" component={AdminPage}/>
+                    <AuthRoute path="/admin" component={AdminPage}/>
+                    <AuthRoute path="/user-list" component={UserList}/>
                 </section>
             </div>
         )
     }
 }
 
-export default App
+const mapStateToProps = state => {
+    console.log('state = ', state.auth)
+    return {
+        user: state.auth.user,
+    }
+};
+
+export default connect(mapStateToProps, {checkAuth})(App)
+

admin/src/components/Pages/UserList/index.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import UsersListForm from '../../forms/UsersListForm'
+import { createUser } from "../../../ducks/users";
+
+class UserList extends Component {
+    render() {
+        return (
+            <div>
+                <UsersListForm onSubmit={this.handleSubmit}/>
+                <h4>Добавьте пользователя</h4>
+                {this.props.users.map(({id, name, other}) => {
+                    return (<div key={id}>
+                        User: {name}, other data {other}
+                    </div>)
+                })
+                }
+            </div>
+        )
+    }
+
+    handleSubmit = ({name, other}) => {
+        this.props.createUser({
+            name,
+            other,
+        })
+    }
+}
+
+const mapStateToProps = (state) => {
+    console.log('state.users = ', state.users.users)
+    return {
+        users: state.users.users
+    }
+}
+export default connect(
+    mapStateToProps,
+    {createUser}
+)(UserList)
+
+

admin/src/components/Pages/admin/index.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { connect } from "react-redux";
+
+class AdminPage extends Component {
+    static propTypes = {}
+
+    render() {
+        return (
+            <div>
+                <h1>Admin</h1>
+                <code>
+                    {JSON.stringify(this.props)}
+                </code>
+            </div>
+        )
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        user: Boolean(state.auth.user)
+    }
+};
+export default connect(mapStateToProps, {})(AdminPage)

admin/src/components/routes/auth/index.js → admin/src/components/Pages/auth/index.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import {Route, NavLink} from 'react-router-dom'
 import {connect} from 'react-redux'
-import SignInForm from '../../auth/sign-in-form'
-import SignUpForm from '../../auth/sign-up-form'
+import SignInForm from '../../forms/auth/sign-in-form'
+import SignUpForm from '../../forms/auth/sign-up-form'
 import { signIn, signUp } from '../../../ducks/auth'
 
 class AuthPage extends Component {

admin/src/components/forms/UsersListForm.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form'
+import ErrorField from '../common/error-field'
+
+let UserListForm = props => {
+    const {handleSubmit} = props
+    return (
+        <form onSubmit={handleSubmit}>
+            <div>
+                <label>Name</label>
+                <div>
+                    <Field name="name" component={ErrorField}/>
+                </div>
+            </div>
+            <div>
+                <label>other data</label>
+                <div>
+                    <Field name="other" component={ErrorField}/>
+                </div>
+            </div>
+            <div>
+                <button type="submit">Submit</button>
+            </div>
+        </form>
+    )
+}
+
+export default reduxForm({
+    form: 'user-list-form',
+})(UserListForm)

admin/src/components/auth/sign-up-form.js → admin/src/components/forms/auth/sign-up-form.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react'
 import {reduxForm, Field} from 'redux-form'
 import validator from 'email-validator'
-import ErrorField from "../common/error-field";
+import ErrorField from "../../common/error-field";
 
 class SignUpForm extends Component {
     static propTypes = {}

admin/src/components/routes/AuthRoute.js

@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import { Route, Redirect } from "react-router-dom";
+import { connect } from "react-redux";
+
+class AuthRoute extends Component {
+    render() {
+        const {component, ...rest} = this.props;
+
+        return <Route {...rest} render={this.renderComponent}/>;
+    }
+
+    renderComponent = props => {
+        const {component: Component, isAuth} = this.props;
+        console.log('isAuth = ',isAuth);
+
+        if (isAuth) {
+            return <Component {...props} />;
+        }
+
+        return <Redirect to="/auth"/>;
+    };
+}
+
+export default connect(({auth}) => ({isAuth: Boolean(auth.user)}))(
+    AuthRoute
+);

admin/src/config.js

@@ -1,15 +1,15 @@
 import firebase from 'firebase/app'
 import 'firebase/auth'
 
-export const appName = 'adv-react-29-01'
+export const appName = 'adv-react-03-02'
 
 const config = {
-    apiKey: "AIzaSyD3RIBQ59em4ZGOdRLQpS1velxhcgImTeI",
+    apiKey: "AIzaSyA1xH6ZKZDJL-OOeo7A2OMf0vimN-5kkEc",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: `${appName}.appspot.com`,
-    messagingSenderId: "832921987414"
+    messagingSenderId: "656401282062"
 }
 
 firebase.initializeApp(config)

admin/src/ducks/auth.js

@@ -1,6 +1,6 @@
-import {Record} from 'immutable'
+import { Record } from 'immutable'
 import firebase from 'firebase/app'
-import {appName} from '../config'
+import { appName } from '../config'
 
 /**
  * Constants
@@ -12,6 +12,7 @@ export const SIGN_IN_START = `${prefix}/SIGN_IN_START`
 export const SIGN_IN_SUCCESS = `${prefix}/SIGN_IN_SUCCESS`
 
 export const SIGN_UP_START = `${prefix}/SIGN_UP_START`
+export const CONTINUE_SESSION = `${prefix}/CONTINUE_SESSION`
 export const SIGN_UP_SUCCESS = `${prefix}/SIGN_UP_SUCCESS`
 
 /**
@@ -27,7 +28,15 @@ export default function reducer(state = new ReducerRecord(), action) {
     switch (type) {
         case SIGN_IN_SUCCESS:
         case SIGN_UP_SUCCESS:
-            return state.set('user', payload.user)
+        case START_SESSION:
+            localStorage.setItem('token', payload.user.email)
+            const obj = {...state, user: payload.user};
+            return obj
+        case CONTINUE_SESSION:
+            return {...state, user: true}
+        case END_SESSION:
+            localStorage.removeItem(`token`)
+            return {...state, user: ''}
         default:
             return state
     }
@@ -47,11 +56,12 @@ export function signIn(email, password) {
             type: SIGN_IN_START
         })
 
-        const user = await firebase.auth().signInWithEmailAndPassword(email, password)
+        const user = await firebase.auth().signInWithEmailAndPassword(email, password);
+        console.log('user = ', user)
 
         dispatch({
             type: SIGN_IN_SUCCESS,
-            payload: { user }
+            payload: {user}
         })
     }
 }
@@ -63,18 +73,40 @@ export function signUp(email, password) {
         })
 
         const user = await firebase.auth().createUserWithEmailAndPassword(email, password)
+        console.log('user signUP = ', user);
 
         dispatch({
             type: SIGN_UP_SUCCESS,
-            payload: { user }
+            payload: {user}
         })
     }
 }
 
-/**
- * Init
- **/
+export const START_SESSION = `${prefix}/START_SESSION`
+export const END_SESSION = `${prefix}/END_SESSION`
+
+export const checkAuth = () => {
+    return (dispatch) => {
+        firebase.auth().onAuthStateChanged((user) => {
+            console.log('--- user', user)
+            if (user) {
+                dispatch({
+                    type: START_SESSION,
+                    payload: {user}
+                })
+            } else if (localStorage.getItem('token') !== undefined) {
+                const user = localStorage.getItem('token');
+                console.log(user);
+                dispatch({
+                    type: CONTINUE_SESSION,
+                    payload: {user}
+                })
+            } else {
+                dispatch({
+                    type: END_SESSION
+                });
+            }
+        })
 
-firebase.auth().onAuthStateChanged((user) => {
-    console.log('--- user', user)
-})
+    }
+}