Ht5

admin/package.json

@@ -40,8 +40,8 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "husky": "^1.0.0-rc.6",
-    "lint-staged": "^7.1.0",
-    "prettier": "^1.12.1"
+    "lint-staged": "^7.1.3",
+    "prettier": "^1.13.4"
   },
   "lint-staged": {
     "*.js": [

admin/src/components/people/people-list.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { peopleSelector, fetchAllPeople } from '../../ducks/people'
 import { List } from 'react-virtualized'
+import { TransitionMotion, spring } from 'react-motion'
 import PersonCard from './person-card'
 
 import 'react-virtualized/styles.css'
@@ -13,24 +14,51 @@ class PeopleList extends Component {
 
   render() {
     return (
-      <List
-        rowRenderer={this.rowRenderer}
-        rowCount={this.props.people.length}
-        rowHeight={150}
-        height={400}
-        width={400}
-      />
+      <TransitionMotion
+        styles={this.getStyles()}
+        willEnter={this.willEnter}
+        willLeave={this.willLeave}
+      >
+        {(interpolated) => (
+          <List
+            rowRenderer={this.rowRenderer(interpolated)}
+            rowCount={interpolated.length}
+            rowHeight={150}
+            height={400}
+            width={400}
+          />
+        )}
+      </TransitionMotion>
     )
   }
 
-  rowRenderer = ({ style, index, key }) => {
-    const person = this.props.people[index]
+  rowRenderer = (interpolated) => ({ style, index }) => {
+    const item = interpolated[index]
+
     return (
-      <div style={style} key={key}>
-        <PersonCard person={person} />
+      <div style={{ ...style, ...item.style }} key={item.key}>
+        <PersonCard person={item.data} />
       </div>
     )
   }
+
+  willLeave = () => ({
+    opacity: spring(0, { stiffness: 15, dumping: 40 })
+  })
+
+  willEnter = () => ({
+    opacity: 0
+  })
+
+  getStyles = () => {
+    return this.props.people.map((person) => ({
+      key: person.uid,
+      style: {
+        opacity: spring(1, { stiffness: 20, dumping: 30 })
+      },
+      data: person
+    }))
+  }
 }
 
 export default connect(

admin/src/config.js

@@ -2,15 +2,15 @@ import firebase from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
 
-export const appName = 'advreact-10-05'
+export const appName = 'advancedreactcourse'
 
 export const config = {
-  apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U',
+  apiKey: 'AIzaSyCCtMGA9FTNVds_QTkB1oRTlqF2u07MHuk',
   authDomain: `${appName}.firebaseapp.com`,
   databaseURL: `https://${appName}.firebaseio.com`,
   projectId: appName,
   storageBucket: '',
-  messagingSenderId: '1094825197832'
+  messagingSenderId: '649150663252'
 }
 
 firebase.initializeApp(config)

admin/src/ducks/auth.js

@@ -2,7 +2,21 @@ import { appName } from '../config'
 import { Record } from 'immutable'
 import firebase from 'firebase/app'
 import { createSelector } from 'reselect'
-import { all, call, apply, put, takeEvery, take } from 'redux-saga/effects'
+import {
+  apply,
+  put,
+  call,
+  all,
+  takeEvery,
+  select,
+  take,
+  fork,
+  spawn,
+  cancel,
+  cancelled,
+  race
+} from 'redux-saga/effects'
+import { delay, eventChannel } from 'redux-saga'
 
 /**
  * Constants
@@ -14,10 +28,14 @@ export const SIGN_IN_SUCCESS = `${prefix}/SIGN_IN_SUCCESS`
 export const SIGN_IN_REQUEST = `${prefix}/SIGN_IN_REQUEST`
 export const SIGN_IN_ERROR = `${prefix}/SIGN_IN_ERROR`
 export const SIGN_IN_REQUESTS_LIMIT = `${prefix}/SIGN_IN_REQUESTS_LIMIT`
+
 export const SIGN_UP_REQUEST = `${prefix}/SIGN_UP_REQUEST`
 export const SIGN_UP_SUCCESS = `${prefix}/SIGN_UP_SUCCESS`
 export const SIGN_UP_ERROR = `${prefix}/SIGN_UP_ERROR`
 
+export const SIGN_OUT_REQUEST = `${prefix}/SIGN_OUT_REQUEST`
+export const SIGN_OUT_SUCCESS = `${prefix}/SIGN_OUT_SUCCESS`
+
 /**
  * Reducer
  * */
@@ -33,6 +51,9 @@ export default function reducer(state = new ReducerRecord(), action) {
     case SIGN_UP_SUCCESS:
       return state.set('user', payload.user)
 
+    case SIGN_OUT_SUCCESS:
+      return state.delete('user')
+
     default:
       return state
   }
@@ -61,6 +82,12 @@ export function signIn(email, password) {
     payload: { email, password }
   }
 }
+
+export function signOut() {
+  return {
+    type: SIGN_OUT_REQUEST
+  }
+}
 /*
 export function signIn(email, password) {
   return (dispatch) => {
@@ -114,10 +141,55 @@ export function* signInSaga() {
   yield put({ type: SIGN_IN_REQUESTS_LIMIT })
 }
 
+export function* signOutSaga() {
+  const auth = firebase.auth()
+
+  yield call([auth, auth.signOut])
+
+  yield put({ type: SIGN_OUT_SUCCESS })
+}
+
+const createEventChannel = () =>
+  eventChannel((emit) => {
+    const callback = (user) => emit({ user })
+    const error = (error) => emit({ error })
+
+    return firebase.auth().onAuthStateChanged(callback, error)
+  })
+
+export function* realtimeSyncSaga() {
+  const channel = yield call(createEventChannel)
+  while (true) {
+    const { user, error } = yield take(channel)
+
+    console.log('auth')
+
+    if (!user) {
+      console.log('nouser')
+      yield put({
+        type: SIGN_OUT_SUCCESS
+      })
+      continue
+    }
+
+    yield put({
+      type: SIGN_IN_SUCCESS,
+      payload: { user }
+    })
+  }
+}
+
 export function* saga() {
-  yield all([takeEvery(SIGN_UP_REQUEST, signUpSaga), signInSaga()])
+  yield spawn(realtimeSyncSaga)
+
+  yield all([
+    takeEvery(SIGN_UP_REQUEST, signUpSaga),
+    takeEvery(SIGN_OUT_REQUEST, signOutSaga),
+    signInSaga()
+  ])
 }
 
+/*
 firebase.auth().onAuthStateChanged((user) => {
   if (!user) return
 
@@ -126,3 +198,4 @@ firebase.auth().onAuthStateChanged((user) => {
     payload: { user }
   })
 })
+*/

admin/src/ducks/people.js

@@ -210,6 +210,8 @@ export function* realtimeSyncSaga() {
   while (true) {
     const { data } = yield take(chanel)
 
+    console.log('people fetch')
+
     yield put({
       type: FETCH_ALL_SUCCESS,
       payload: data.val()

admin/src/routes/auth.js

@@ -3,7 +3,7 @@ import { NavLink, Route } from 'react-router-dom'
 import { connect } from 'react-redux'
 import SignInForm from '../components/auth/sign-in'
 import SignUpForm from '../components/auth/sign-up'
-import { signUp, signIn } from '../ducks/auth'
+import { signUp, signIn, signOut } from '../ducks/auth'
 
 class AuthPage extends Component {
   render() {
@@ -17,6 +17,13 @@ class AuthPage extends Component {
           <NavLink to="/auth/sign-up" activeStyle={{ color: 'red' }}>
             Sign Up
           </NavLink>
+          <NavLink
+            to="/auth/sign-out"
+            onClick={this.signOut}
+            activeStyle={{ color: 'red' }}
+          >
+            Sign Out
+          </NavLink>
         </div>
         <Route
           path="/auth/sign-in"
@@ -31,7 +38,11 @@ class AuthPage extends Component {
   }
 
   signUp = ({ email, password }) => this.props.signUp(email, password)
+  signOut = () => this.props.signOut()
   signIn = ({ email, password }) => this.props.signIn(email, password)
 }
 
-export default connect(null, { signUp, signIn })(AuthPage)
+export default connect(
+  null,
+  { signUp, signIn, signOut }
+)(AuthPage)

admin/src/routes/person-page.js

@@ -18,4 +18,7 @@ class PersonPage extends Component {
   }
 }
 
-export default connect(null, { addPerson })(PersonPage)
+export default connect(
+  null,
+  { addPerson }
+)(PersonPage)