From 35c96c418142e9b3b6a0794ba7a26e5c55c4f896 Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Tue, 24 Oct 2017 22:25:21 -0400
Subject: [PATCH 1/3] Apply firebase config + few changes of previous homework.

---
 public/index.html                       | 17 +++++++++
 src/components/App.js                   | 50 +++++++++++++++++++++----
 src/components/common/ErrorField.js     |  4 +-
 src/components/common/ProtectedRoute.js |  6 +--
 src/components/common/Submenu.js        | 30 +++++++++++++++
 src/components/routes/Auth.js           |  6 +--
 src/config.js                           |  6 +--
 src/ducks/auth.js                       |  3 +-
 8 files changed, 102 insertions(+), 20 deletions(-)
 create mode 100644 src/components/common/Submenu.js
diff --git a/public/index.html b/public/index.html
index 7bee027..6ffdc56 100644
--- 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
index 808c120..cc4cfff 100644
--- 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
\ No newline at end of file
+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
index 925999d..3accb2d 100644
--- 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
index da53475..5f23add 100644
--- 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)
\ No newline at end of file
+    authorized: userAuthorizedSelector(state)
+}), null, null, { pure: false })(ProtectedRoute)
diff --git a/src/components/common/Submenu.js b/src/components/common/Submenu.js
new file mode 100644
index 0000000..370f97e
--- /dev/null
+++ 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/routes/Auth.js b/src/components/routes/Auth.js
index ec4898e..a8abf42 100644
--- 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)
\ No newline at end of file
+export default connect(null, { signUp, signIn })(AuthPage)
diff --git a/src/config.js b/src/config.js
index 2782a0b..6ce5a80 100644
--- 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"
 })
\ No newline at end of file
diff --git a/src/ducks/auth.js b/src/ducks/auth.js
index 09ebeda..3668c88 100644
--- 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
@@ -140,4 +141,4 @@ export function * saga() {
         signInSaga(),
         watchStatusChangeSaga()
     ])
-}
\ No newline at end of file
+}

From 47593c99dd59190414e651ace6b1bef36c2ad7e9 Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 12 Nov 2017 13:36:20 -0500
Subject: [PATCH 2/3] HT5.1: subscribe/unsubscribe to people sync

---
 src/components/people/PeopleList.js |  2 +-
 src/ducks/auth.js                   | 12 ++---
 src/ducks/events.js                 | 12 ++---
 src/ducks/people.js                 | 80 +++++++++++++++++++++--------
 src/redux/saga.js                   | 12 ++---
 5 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/src/components/people/PeopleList.js b/src/components/people/PeopleList.js
index 17e6fad..efba89c 100644
--- a/src/components/people/PeopleList.js
+++ b/src/components/people/PeopleList.js
@@ -10,7 +10,7 @@ class PeopleList extends Component {
     };
 
     componentDidMount() {
-        this.props.fetchAll()
+        // this.props.fetchAll()
     }
 
     render() {
diff --git a/src/ducks/auth.js b/src/ducks/auth.js
index 3668c88..839b51e 100644
--- a/src/ducks/auth.js
+++ b/src/ducks/auth.js
@@ -135,10 +135,8 @@ export function * watchStatusChangeSaga() {
     }
 }
 
-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
index c4bd721..2e61bc1 100644
--- 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)
-    ])
-}
\ No newline at end of file
+export const sagas = [
+    // takeEvery(FETCH_ALL_REQUEST, fetchAllSaga),
+    fetchLazySaga(),
+    takeEvery(DELETE_EVENT_REQUEST, deleteEventSaga),
+]
diff --git a/src/ducks/people.js b/src/ducks/people.js
index 509323e..07b8448 100644
--- a/src/ducks/people.js
+++ b/src/ducks/people.js
@@ -115,7 +115,7 @@ export function * addPersonSaga(action) {
     yield put(reset('person'))
 }
 
-export function * fetchAllSaga() {
+/*export function * fetchAllSaga() {
     yield put({
         type: FETCH_ALL_START
     })
@@ -129,7 +129,7 @@ export function * fetchAllSaga() {
         payload: snapshot.val()
     })
 
-}
+}*/
 
 export function * addEventToPersonSaga({ payload: { eventId, personId } }) {
     const eventsRef = firebase.database().ref(`people/${personId}/events`)
@@ -145,7 +145,8 @@ export function * addEventToPersonSaga({ payload: { eventId, personId } }) {
     })
 }
 
-export const syncPeopleWithShortPollingSaga = function * () {
+/*export const syncPeopleWithShortPollingSaga = function * () {
+    debugger
     try {
         while (true) {
             console.log('---', 'fetching users');
@@ -157,19 +158,19 @@ export const syncPeopleWithShortPollingSaga = function * () {
             console.log('---', 123, 'saga was cancelled')
         }
     }
-}
+}*/
 
-export const cancelableSyncSaga = function * () {
+/*export const cancelableSyncSaga = function * () {
     const res = yield race({
         sync: syncPeopleWithShortPollingSaga(),
         timeout: delay(6000)
     })
-/*
-    const task = yield fork(syncPeopleWithShortPollingSaga)
-    yield delay(6000)
-    yield cancel(task)
-*/
-}
+
+    // const task = yield fork(syncPeopleWithShortPollingSaga)
+    // yield delay(6000)
+    // yield cancel(task)
+
+}*/
 
 const createPeopleSocket = () => eventChannel(emit => {
     const ref = firebase.database().ref('people')
@@ -180,11 +181,9 @@ const createPeopleSocket = () => eventChannel(emit => {
     return () => ref.off('value', callback)
 })
 
-export const realtimePeopleSyncSaga = function * () {
-    const chan = yield call(createPeopleSocket)
-
+export function* startRealtimePeopleSyncSaga(chan) {
     while (true) {
-        const { data } = yield take(chan)
+        const {data} = yield take(chan)
 
         yield put({
             type: FETCH_ALL_SUCCESS,
@@ -193,11 +192,48 @@ export const realtimePeopleSyncSaga = function * () {
     }
 }
 
-export function * saga() {
-    yield spawn(realtimePeopleSyncSaga)
+function* stopRealtimePeopleSyncSaga(chan) {
+    yield call(navigateFromPeople)
+    yield call([chan, chan.close])
+}
+
+function* navigateToPeople() {
+    while (true) {
+        const { payload } = yield take('@@router/LOCATION_CHANGE')
+        const { pathname } = payload
+
+        if (pathname === '/people') {
+            break
+        }
+    }
+}
+
+function* navigateFromPeople() {
+    while (true) {
+        const { payload } = yield take('@@router/LOCATION_CHANGE')
+        const { pathname } = payload
+
+        if (pathname !== '/people') {
+            break
+        }
+    }
+}
+
+function* toggleRealtimePeopleSyncSaga() {
+    while (true) {
+        yield call(navigateToPeople)
+        
+        const chan = yield call(createPeopleSocket)
+
+        yield race({
+            task: call(startRealtimePeopleSyncSaga, chan),
+            cancel: call(stopRealtimePeopleSyncSaga, chan),
+        })
+    }
+}
 
-    yield all([
-        takeEvery(ADD_PERSON_REQUEST, addPersonSaga),
-        takeEvery(ADD_EVENT_REQUEST, addEventToPersonSaga)
-    ])
-}
\ No newline at end of file
+export const sagas = [
+    toggleRealtimePeopleSyncSaga(),
+    takeEvery(ADD_PERSON_REQUEST, addPersonSaga),
+    takeEvery(ADD_EVENT_REQUEST, addEventToPersonSaga),
+]
diff --git a/src/redux/saga.js b/src/redux/saga.js
index ee83976..36997b4 100644
--- a/src/redux/saga.js
+++ b/src/redux/saga.js
@@ -1,13 +1,13 @@
 import {all} from 'redux-saga/effects'
-import {saga as peopleSaga} from '../ducks/people'
-import {saga as authSaga} from '../ducks/auth'
-import {saga as eventsSaga} from '../ducks/events'
+import {sagas as peopleSagas} from '../ducks/people'
+import {sagas as authSagas} from '../ducks/auth'
+import {sagas as eventsSagas} from '../ducks/events'
 
 
 export default function * () {
     yield all([
-        peopleSaga(),
-        authSaga(),
-        eventsSaga()
+        ...peopleSagas,
+        ...authSagas,
+        ...eventsSagas,
     ])
 }
\ No newline at end of file

From c4bb8a6ed8c0704f5afaaaef7885a7082cce3f63 Mon Sep 17 00:00:00 2001
From: evpozdniakov <evpozdniakov@gmail.com>
Date: Sun, 12 Nov 2017 22:25:24 -0500
Subject: [PATCH 3/3] HT5.2: animate add person

---
 src/components/people/PeopleList.js | 54 +++++++++++++++++++++++------
 src/ducks/auth.js                   |  2 +-
 src/ducks/people.js                 |  2 +-
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/components/people/PeopleList.js b/src/components/people/PeopleList.js
index efba89c..cb411cc 100644
--- 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'
 
@@ -13,21 +14,52 @@ class PeopleList extends Component {
         // 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)
\ No newline at end of file
+    people: peopleListSelector(state),
+}), { fetchAll })(PeopleList)
diff --git a/src/ducks/auth.js b/src/ducks/auth.js
index 839b51e..909ee60 100644
--- a/src/ducks/auth.js
+++ b/src/ducks/auth.js
@@ -131,7 +131,7 @@ export function * watchStatusChangeSaga() {
     while (true) {
         yield take(SIGN_IN_SUCCESS)
 
-        yield (put(replace('/admin')))
+        yield (put(replace('/people')))
     }
 }
 
diff --git a/src/ducks/people.js b/src/ducks/people.js
index 07b8448..fbb98ad 100644
--- a/src/ducks/people.js
+++ b/src/ducks/people.js
@@ -47,7 +47,7 @@ export default function reducer(state = new ReducerState(), action) {
             return state
                 .set('loading', false)
                 .set('loaded', true)
-                .set('entities', fbToEntities(payload, PersonRecord))
+                .set('entities', fbToEntities(payload, PersonRecord).concat().reverse())
 
         case ADD_PERSON_SUCCESS:
             return state.setIn(['entities', payload.uid], new PersonRecord(payload))
