Home task 5

admin-panel/src/components/App.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 import {Route, NavLink} from 'react-router-dom'
+import { connect } from 'react-redux'
+import { signOut } from '../ducks/auth'
 import AuthPage from './routes/auth'
 import AdminPage from './routes/Admin'
 import ProtectedRoute from './common/ProtectedRoute'
@@ -15,6 +17,7 @@ class App extends Component {
     render() {
         return (
             <div>
+                <button onClick={this.props.signOut}>SignOut</button>
                 <ul>
                     <li><NavLink to = '/admin' activeStyle = {{color: 'red'}}>admin</NavLink></li>
                     <li><NavLink to = '/people' activeStyle = {{color: 'red'}}>people</NavLink></li>
@@ -30,4 +33,4 @@ class App extends Component {
     }
 }
 
-export default App
+export default connect(null, { signOut }, null, { pure: false })(App)

admin-panel/src/components/people/PersonCard.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import {DragSource} from 'react-dnd'
+import {TransitionMotion, spring} from 'react-motion'
 import {getEmptyImage} from 'react-dnd-html5-backend'
 import PersonDragPreview from './PersonDragPreview'
 
@@ -18,12 +19,28 @@ class PersonCard extends Component {
             opacity: isDragging ? 0.2 : 1
         }
         return (
-            <div style={{...dragStyles, ...style}}>
-                {connectDragSource(<h1>{person.firstName} <b>{person.lastName}</b></h1>)}
-                <h3>{person.email}</h3>
-            </div>
+            <TransitionMotion
+                willEnter={this.willEnter}
+                styles={[{
+                  key: this.props.person.uid,
+                  style: {
+                      opacity: spring(1, { stiffness: 60, damping: 40 })
+                  }
+                }]}
+            >
+                {interpolatedData => (
+                    <div style={{...dragStyles, ...style, ...interpolatedData[0].style}} key={interpolatedData[0].key}>
+                        {connectDragSource(<h1>{person.firstName} <b>{person.lastName}</b></h1>)}
+                        <h3>{person.email}</h3>
+                    </div>
+                )}
+            </TransitionMotion>
         )
     }
+
+    willEnter = () => ({
+        opacity: 0
+    })
 }
 
 const spec = {

admin-panel/src/config.js

@@ -1,14 +1,14 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-04-12'
+export const appName = 'advreact-386f6'
 
 const config = {
-    apiKey: "AIzaSyCmDWlgYIhtEr1pWjgKYds3iXKWBl9wbjE",
+    apiKey: "AIzaSyDSPRtistNZnrnNMJXCra5uS9Ugpken3F0",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "95255462276"
+    messagingSenderId: "648901552269"
 }
 
 firebase.initializeApp(config)

admin-panel/src/ducks/auth.js

@@ -1,4 +1,5 @@
 import {all, takeEvery, take, put, apply, call} from 'redux-saga/effects'
+import {eventChannel} from 'redux-saga'
 import {appName} from '../config'
 import {createSelector} from 'reselect'
 import {Record} from 'immutable'
@@ -21,6 +22,8 @@ export const SIGN_UP_START = `${prefix}/SIGN_UP_START`
 export const SIGN_UP_SUCCESS = `${prefix}/SIGN_UP_SUCCESS`
 export const SIGN_UP_ERROR = `${prefix}/SIGN_UP_ERROR`
 
+export const SIGN_OUT = `${prefix}/SIGN_OUT`
+
 /**
  * Reducer
  * */
@@ -52,6 +55,10 @@ export default function reducer(state = new ReducerRecord(), action) {
                 .set('loading', false)
                 .set('error', payload.error.message)
 
+        case SIGN_OUT:
+            return state
+                .set('user', null)
+
         default:
             return state
     }
@@ -85,13 +92,18 @@ export function signIn(email, password) {
     }
 }
 
+export function signOut() {
+  return {
+    type: SIGN_OUT
+  };
+}
 
-firebase.auth().onAuthStateChanged(user => {
-    if (user) window.store.dispatch({
-        type: SIGN_IN_SUCCESS,
-        payload: { user }
-    })
-})
+// firebase.auth().onAuthStateChanged(user => {
+//     if (user) window.store.dispatch({
+//         type: SIGN_IN_SUCCESS,
+//         payload: { user }
+//     })
+// })
 
 /**
  * Sagas
@@ -136,19 +148,46 @@ export const signInSaga = function * (action) {
     }
 }
 
+const createSocket = () => eventChannel(emit => {
+  const callback = user => emit(user || 'null')
+
+  return firebase.auth().onAuthStateChanged(callback)
+})
+
 export function * watchStatusChangeSaga() {
-    while (true) {
-        yield take(SIGN_IN_SUCCESS)
+  const chanel = yield call(createSocket)
+
+  while (true) {
+    const user = yield take(chanel)
 
-//        yield (put(replace('/events')))
+    if (user !== 'null') {
+      yield put({
+        type: SIGN_IN_SUCCESS,
+        payload: { user }
+      })
+
+      yield put(replace('/events'))
+    } else {
+      yield put(replace('/auth/sign-in'))
     }
+  }
 }
 
+export function * singOutSaga() {
+  const auth = firebase.auth();
+
+  try {
+    yield call([auth, auth.signOut])
+  } catch (error) {
+    console.log('SignOut Error -->', error)
+  }
+}
 
 export const saga = function * () {
     yield all([
         takeEvery(SIGN_IN_REQUEST, signInSaga),
         signUpSaga(),
+        takeEvery(SIGN_OUT, singOutSaga),
         watchStatusChangeSaga()
     ])
 }

admin-panel/src/ducks/people.js

@@ -41,10 +41,8 @@ export default function reducer(state = new ReducerState(), action) {
     const {type, payload} = action
 
     switch (type) {
-/*
         case ADD_PERSON_SUCCESS:
             return state.setIn(['entities', payload.uid],new PersonRecord(payload))
-*/
 
         case FETCH_ALL_SUCCESS:
             return state.set('entities', fbToEntities(payload, PersonRecord))