romabelka · evpozdniakov · Oct 25, 2017 · Nov 12, 2017 · Nov 13, 2017 · romabelka
diff --git a/public/index.html b/public/index.html
@@ -20,6 +20,23 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <style>
+      nav.submenu {
+        background: #eee;
+        padding: .5rem;
+      }
+      nav.submenu a {
+        margin-right: 1rem;
+        color: #333;
+        text-decoration: none;
+      }
+      nav.submenu a.active {
+        font-weight: bold;
+      }
+      .error-field {
+        margin-bottom: 1rem;
+      }
+    </style>
   </head>
   <body>
     <noscript>

diff --git a/src/components/App.js b/src/components/App.js
@@ -1,11 +1,14 @@
 import React, { Component } from 'react'
-import {Route, NavLink} from 'react-router-dom'
+import {Route} from 'react-router-dom'
+import {connect} from 'react-redux'
 import ProtectedRoute from './common/ProtectedRoute'
 import AdminPage from './routes/Admin'
 import AuthPage from './routes/Auth'
 import PersonPage from './routes/PersonPage'
 import EventsPage from './routes/EventsPage'
 import CustomDragLayer from './CustomDragLayer'
+import Submenu from './common/Submenu'
+import {userAuthorizedSelector} from '../ducks/auth'
 
 class App extends Component {
     static propTypes = {
@@ -16,11 +19,7 @@ class App extends Component {
         return (
             <div>
                 <h1>Hello world</h1>
-                <ul>
-                    <li><NavLink to='/admin' activeStyle = {{color: 'red'}}>admin</NavLink></li>
-                    <li><NavLink to='/people' activeStyle = {{color: 'red'}}>people</NavLink></li>
-                    <li><NavLink to='/events' activeStyle = {{color: 'red'}}>events</NavLink></li>
-                </ul>
+                {this.renderSubmenu()}
                 <ProtectedRoute path = '/admin' component = {AdminPage}/>
                 <ProtectedRoute path = '/people' component={PersonPage}/>
                 <ProtectedRoute path = '/events' component={EventsPage}/>
@@ -29,6 +28,43 @@ class App extends Component {
             </div>
         )
     }
+
+    renderSubmenu() {
+        const links = []
+
+        if (this.props.authorized) {
+            links.push({
+                to: '/admin',
+                title: 'Admin',
+            }, {
+                to: '/people',
+                title: 'People',
+            }, {
+                to: '/events',
+                title: 'Events',
+            }, {
+                to: '/logout',
+                title: 'Logout',
+            })
+        }
+        else {
+            links.push({
+                to: '/auth/signin',
+                title: 'Sign in',
+            }, {
+                to: '/auth/signup',
+                title: 'Sign up',
+            })
+        }
+
+        const props = {
+            links,
+        }
+
+        return <Submenu {...props} />
+    }
 }
 
-export default App
+export default connect(state => ({
+    authorized: userAuthorizedSelector(state)
+}), null, null, { pure: false })(App)
diff --git a/src/components/common/ErrorField.js b/src/components/common/ErrorField.js
@@ -4,8 +4,8 @@ function ErrorField(props) {
     const {input, type, meta: {error, touched}} = props
     const errorText = touched && error && <div style={{color: 'red'}}>{error}</div>
     return (
-        <div>
-            <label>{input.name}</label>
+        <div className="error-field">
+            <label>{input.name}<br/></label>
             <input {...input} type={type}/>
             {errorText}
         </div>

diff --git a/src/components/common/ProtectedRoute.js b/src/components/common/ProtectedRoute.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {Route} from 'react-router-dom'
 import {connect} from 'react-redux'
-import {userSelector} from '../../ducks/auth'
+import {userAuthorizedSelector} from '../../ducks/auth'
 
 class ProtectedRoute extends Component {
     static propTypes = {
@@ -21,5 +21,5 @@ class ProtectedRoute extends Component {
 }
 
 export default connect(state => ({
-    authorized: !!userSelector(state)
-}), null, null, { pure: false })(ProtectedRoute)
+    authorized: userAuthorizedSelector(state)
+}), null, null, { pure: false })(ProtectedRoute)
diff --git a/src/components/common/Submenu.js b/src/components/common/Submenu.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import { NavLink } from 'react-router-dom'
+
+class Submenu extends Component {
+  render() {
+    return (
+      <nav className="submenu">
+        {this.props.links.map(this.renderSubmenuItem.bind(this))}
+      </nav>
+    )
+  }
+
+  renderSubmenuItem(item, index) {
+    const { to, title } = item
+
+    const props = {
+      key: index,
+      activeClassName: 'active',
+      to,
+    }
+
+    return (
+      <NavLink {...props}>
+        {title}
+      </NavLink>
+    )
+  }
+}
+
+export default Submenu
diff --git a/src/components/people/PeopleList.js b/src/components/people/PeopleList.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import {connect} from 'react-redux'
-import {List} from 'react-virtualized'
+// import {List} from 'react-virtualized'
+import { TransitionMotion, spring } from 'react-motion'
 import {fetchAll, peopleListSelector} from '../../ducks/people'
 import PersonRow from './PersonRow'
 
@@ -10,24 +11,55 @@ class PeopleList extends Component {
     };
 
     componentDidMount() {
-        this.props.fetchAll()
+        // this.props.fetchAll()
+    }
+
+    getStyles() {
+        return this.props.people.map(person => ({
+            key: person.uid,
+            style: {height: spring(100)},
+            data: person,
+        }))
+    }
+
+    getDefaultStyles() {
+        return this.props.people.map(person => ({
+            key: person.uid,
+            style: {height: 0},
+            data: person,
+        }))
     }
 
     render() {
         return (
-            <List
-                rowCount={this.props.people.length}
-                height={200}
-                width={500}
-                rowHeight={100}
-                rowRenderer={this.rowRenderer}
-            />
+            <div style={{
+                marginTop: '1rem',
+                background: '#eee',
+                height: 300,
+                overflow: 'auto',
+            }}>
+                <TransitionMotion
+                    willEnter={() => ({height: 0})}
+                    styles={this.getStyles()}
+                    defaultStyles={this.getDefaultStyles()}
+                >{
+                    interpolated => (
+                        <div>
+                            {interpolated.map(this.renderPersonRow)}
+                        </div>
+                    )}
+                </TransitionMotion>
+            </div>
         )
     }
 
-    rowRenderer = ({ index, key, style }) => <PersonRow person = {this.props.people[index]} key = {key} style = {style}/>
+    renderPersonRow(element) {
+        const { key, style, data } = element
+
+        return <PersonRow key={key} person={element.data} style={{...style, overflow: 'hidden'}} />
+    }
 }
 
 export default connect(state => ({
-    people: peopleListSelector(state)
-}), { fetchAll })(PeopleList)
+    people: peopleListSelector(state),
+}), { fetchAll })(PeopleList)
diff --git a/src/components/routes/Auth.js b/src/components/routes/Auth.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Route, NavLink} from 'react-router-dom'
+import {Route} from 'react-router-dom'
 import {connect} from 'react-redux'
 import {signUp, signIn} from '../../ducks/auth'
 import SignIn from '../auth/SignIn'
@@ -14,8 +14,6 @@ class AuthPage extends Component {
         return (
             <div>
                 <h2>Auth page</h2>
-                <NavLink to = '/auth/signin' activeStyle = {{color: 'red'}}>sign in</NavLink>
-                <NavLink to = '/auth/signup' activeStyle = {{color: 'red'}}>sign up</NavLink>
                 <Route path = '/auth/signin' render = {() => <SignIn onSubmit = {this.handleSignIn}/>}/>
                 <Route path = '/auth/signup' render = {() => <SignUp onSubmit = {this.handleSignUp}/>}/>
             </div>
@@ -26,4 +24,4 @@ class AuthPage extends Component {
     handleSignUp = ({email, password}) => this.props.signUp(email, password)
 }
 
-export default connect(null, { signUp, signIn })(AuthPage)
+export default connect(null, { signUp, signIn })(AuthPage)
diff --git a/src/config.js b/src/config.js
@@ -1,12 +1,12 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-1610'
+export const appName = 'advreact-1610-9cb0c'
 
 firebase.initializeApp({
-    apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA",
+    apiKey: "AIzaSyBNaOQkLL75ZGoeaNtqbe63wEjjWLzLOPY",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "397157634637"
+    messagingSenderId: "266748171955"
 })
diff --git a/src/ducks/auth.js b/src/ducks/auth.js
@@ -51,6 +51,7 @@ export default function reducer(state = new ReducerRecord(), action) {
 
 export const stateSelector = state => state[moduleName]
 export const userSelector = createSelector(stateSelector, state => state.user)
+export const userAuthorizedSelector = createSelector(stateSelector, state => !!state.user)
 
 /**
  * Action Creators
@@ -130,14 +131,12 @@ export function * watchStatusChangeSaga() {
     while (true) {
         yield take(SIGN_IN_SUCCESS)
 
-        yield (put(replace('/admin')))
+        yield (put(replace('/people')))
     }
 }
 
-export function * saga() {
-    yield all([
-        signUpSaga(),
-        signInSaga(),
-        watchStatusChangeSaga()
-    ])
-}
+export const sagas = [
+    signUpSaga(),
+    signInSaga(),
+    watchStatusChangeSaga()
+]
diff --git a/src/ducks/events.js b/src/ducks/events.js
@@ -201,10 +201,8 @@ firebase.database().ref('events')
     .startAt(lastUid)
 
 */
-export function* saga() {
-    yield all([
-        takeEvery(FETCH_ALL_REQUEST, fetchAllSaga),
-        fetchLazySaga(),
-        takeEvery(DELETE_EVENT_REQUEST, deleteEventSaga)
-    ])
-}
+export const sagas = [
+    // takeEvery(FETCH_ALL_REQUEST, fetchAllSaga),
+    fetchLazySaga(),
+    takeEvery(DELETE_EVENT_REQUEST, deleteEventSaga),
+]