Smotrova Lilit Ht5

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

@@ -5,6 +5,7 @@ import { List } from 'react-virtualized'
 import PersonCard from './person-card'
 
 import 'react-virtualized/styles.css'
+import { TransitionMotion, spring } from 'react-motion'
 
 class PeopleList extends Component {
   componentDidMount() {
@@ -13,24 +14,42 @@ class PeopleList extends Component {
 
   render() {
     return (
-      <List
-        rowRenderer={this.rowRenderer}
-        rowCount={this.props.people.length}
-        rowHeight={150}
-        height={400}
-        width={400}
-      />
+      <TransitionMotion styles={this.styles} willEnter={this.willEnter}>
+        {(interpolated) => (
+          <List
+            rowCount={interpolated.length}
+            width={400}
+            height={400}
+            rowHeight={150}
+            rowRenderer={this.rowRenderer(interpolated)}
+          />
+        )}
+      </TransitionMotion>
     )
   }
 
-  rowRenderer = ({ style, index, key }) => {
-    const person = this.props.people[index]
+  rowRenderer = (interpolated) => ({ style, index, key }) => {
+    const rowCtx = interpolated[index]
     return (
-      <div style={style} key={key}>
-        <PersonCard person={person} />
+      <div style={{ ...style, ...rowCtx.style }} key={key}>
+        <PersonCard person={rowCtx.data} />
       </div>
     )
   }
+
+  willEnter = () => ({
+    opacity: 0
+  })
+
+  get styles() {
+    return this.props.people.map((person) => ({
+      key: person.uid,
+      style: {
+        opacity: spring(1, { stiffness: 150, damping: 30 })
+      },
+      data: person
+    }))
+  }
 }
 
 export default connect(

admin/src/config.js

@@ -2,15 +2,15 @@ import { initializeApp } from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
 
-export const appName = 'adv-react-25-06'
+export const appName = 'advreact2506'
 
 const config = {
-  apiKey: 'AIzaSyDzqwnZ_39QyqhxYZVPjVH8eBww7DUBmVc',
+  apiKey: 'AIzaSyASXmuELKMXGJMQYvkdcuVCsYRTpzjED8U',
   authDomain: `${appName}.firebaseapp.com`,
   databaseURL: `https://${appName}.firebaseio.com`,
   projectId: appName,
   storageBucket: '',
-  messagingSenderId: '874599443389'
+  messagingSenderId: '983731384962'
 }
 
 initializeApp(config)

admin/src/ducks/auth.js

@@ -2,7 +2,16 @@ import { appName } from '../config'
 import { Record } from 'immutable'
 import firebase from 'firebase/app'
 import { createSelector } from 'reselect'
-import { takeEvery, put, call, apply, take, all } from 'redux-saga/effects'
+import {
+  put,
+  call,
+  apply,
+  take,
+  all,
+  actionChannel,
+  fork
+} from 'redux-saga/effects'
+import { buffers } from 'redux-saga'
 
 /**
  * Constants
@@ -69,31 +78,35 @@ export function signUp(email, password) {
  * Sagas
  */
 
-export function* signUpSaga({ payload }) {
+export function* signUpSaga() {
   const auth = firebase.auth()
+  const channel = yield actionChannel(SIGN_UP_REQUEST)
+  while (true) {
+    const { payload } = yield take(channel)
+    try {
+      const user = yield call(
+        [auth, auth.createUserWithEmailAndPassword],
+        payload.email,
+        payload.password
+      )
 
-  try {
-    const user = yield call(
-      [auth, auth.createUserWithEmailAndPassword],
-      payload.email,
-      payload.password
-    )
-
-    yield put({
-      type: SIGN_UP_SUCCESS,
-      payload: { user }
-    })
-  } catch (error) {
-    yield put({
-      type: SIGN_UP_ERROR,
-      error
-    })
+      yield put({
+        type: SIGN_UP_SUCCESS,
+        payload: { user }
+      })
+    } catch (error) {
+      yield put({
+        type: SIGN_UP_ERROR,
+        error
+      })
+    }
   }
 }
 
 export function* signInSaga() {
+  const channel = yield actionChannel(SIGN_IN_REQUEST, yield buffers.sliding(1))
   for (let i = 0; i < 3; i++) {
-    const { payload } = yield take(SIGN_IN_REQUEST)
+    const { payload } = yield take(channel)
 
     const auth = firebase.auth()
 
@@ -116,7 +129,8 @@ export function* signInSaga() {
 }
 
 export function* saga() {
-  yield all([takeEvery(SIGN_UP_REQUEST, signUpSaga), signInSaga()])
+  yield fork(signUpSaga())
+  yield fork(signInSaga())
 }
 
 firebase.auth().onAuthStateChanged((user) => {

admin/src/ducks/auth.test.js

@@ -9,7 +9,8 @@ import reducer, {
   SIGN_IN_REQUESTS_LIMIT,
   ReducerRecord
 } from './auth'
-import { take, call, apply, put } from 'redux-saga/effects'
+import { take, call, apply, put, actionChannel } from 'redux-saga/effects'
+import { channel, buffers } from 'redux-saga'
 
 /**
  * Saga tests
@@ -31,10 +32,15 @@ it('should sign up', () => {
     payload: authData
   }
 
-  const saga = signUpSaga(requestAction)
+  const saga = signUpSaga()
   const auth = firebase.auth()
 
-  expect(saga.next().value).toEqual(
+  const mockChan = channel()
+  expect(saga.next().value).toEqual(actionChannel(SIGN_UP_REQUEST))
+
+  expect(saga.next(mockChan).value).toEqual(take(mockChan))
+
+  expect(saga.next(requestAction).value).toEqual(
     call(
       [auth, auth.createUserWithEmailAndPassword],
       authData.email,
@@ -66,7 +72,16 @@ it('should sign in', () => {
 
   const saga = signInSaga()
 
-  expect(saga.next().value).toEqual(take(SIGN_IN_REQUEST))
+  const mockChan = channel()
+  const mockBuffer = buffers.sliding(1)
+
+  //запрашивает буфер
+  saga.next()
+
+  expect(saga.next(mockBuffer).value).toEqual(
+    actionChannel(SIGN_IN_REQUEST, mockBuffer)
+  )
+  expect(saga.next(mockChan).value).toEqual(take(mockChan))
 
   expect(saga.next(requestAction).value).toEqual(
     apply(auth, auth.signInWithEmailAndPassword, [
@@ -95,8 +110,18 @@ it('should not allow to sign in more then 3 times', () => {
 
   const saga = signInSaga()
 
+  const mockChan = channel()
+  const mockBuffer = buffers.sliding(1)
+
+  //запрашивает буфер
+  saga.next()
+
+  expect(saga.next(mockBuffer).value).toEqual(
+    actionChannel(SIGN_IN_REQUEST, mockBuffer)
+  )
+
   for (let i = 0; i < 3; i++) {
-    expect(saga.next().value).toEqual(take(SIGN_IN_REQUEST))
+    expect(saga.next(mockChan).value).toEqual(take(mockChan))
 
     saga.next(requestAction)
     saga.throw(new Error('invalid password'))