Homework2

src/components/auth/SignIn.js

@@ -1,16 +1,25 @@
 import React, { Component } from 'react'
 import {reduxForm, Field} from 'redux-form'
+import {connect} from 'react-redux'
+import {Redirect} from 'react-router-dom'
+import {userSelector, loadingSelector} from '../../ducks/auth'
+import Loader from "../common/Loader";
 
 class SignIn extends Component {
     static propTypes = {
 
     };
 
     render() {
+        const {loading, user, handleSubmit} = this.props
+
+        if (loading) return <Loader />
+        console.log('----', user)
+        if (user) return <Redirect to = '/people' />
         return (
             <div>
                 <h3>Sign In</h3>
-                <form onSubmit = {this.props.handleSubmit}>
+                <form onSubmit = {handleSubmit}>
                     <div>
                         email: <Field name = 'email' component = 'input' type = 'text'/>
                     </div>
@@ -26,6 +35,13 @@ class SignIn extends Component {
     }
 }
 
-export default reduxForm({
+const SignInForm = reduxForm({
     form: 'auth'
-})(SignIn)
+})(SignIn)
+
+const mapStateToProps = (state) => ({
+    user: userSelector(state),
+    loading: loadingSelector(state)
+})
+
+export default connect(mapStateToProps)(SignInForm)

src/components/common/Loader.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+class Loader extends Component {
+    static propTypes = {
+
+    }
+
+    render() {
+        return (
+            <div>
+                Loading...
+            </div>
+        )
+    }
+}
+
+export default Loader

src/components/routes/Auth.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {Route, NavLink} from 'react-router-dom'
 import {connect} from 'react-redux'
-import {signUp} from '../../ducks/auth'
+import {signUp, signIn} from '../../ducks/auth'
 import SignIn from '../auth/SignIn'
 import SignUp from '../auth/SignUp'
 
@@ -22,8 +22,8 @@ class AuthPage extends Component {
         )
     }
 
-    handleSignIn = (values) => console.log('---', 'sign in', values)
+    handleSignIn = ({email, password}) => this.props.signIn(email, password)
     handleSignUp = ({email, password}) => this.props.signUp(email, password)
 }
 
-export default connect(null, { signUp })(AuthPage)
+export default connect(null, { signUp, signIn })(AuthPage)

src/config.js

@@ -1,12 +1,12 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-1610'
+export const appName = 'advreact-1610-e107b'
 
 firebase.initializeApp({
-    apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA",
+    apiKey: "AIzaSyBxoVzxv_5uMbGSHc_rpqppejalCO0qy3Y",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "397157634637"
+    messagingSenderId: "250560019576"
 })

src/ducks/auth.js

@@ -14,7 +14,9 @@ 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_IN_REQUEST = `${prefix}/SIGN_IN_REQUEST`
 export const SIGN_IN_SUCCESS = `${prefix}/SIGN_IN_SUCCESS`
+export const SIGN_IN_ERROR = `${prefix}/SIGN_IN_ERROR`
 
 /**
  * Reducer
@@ -29,6 +31,7 @@ export default function reducer(state = new ReducerRecord(), action) {
     const {type, payload} = action
 
     switch (type) {
+        case SIGN_IN_REQUEST:
         case SIGN_UP_START:
             return state.set('loading', true)
 
@@ -49,6 +52,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 loadingSelector = createSelector(stateSelector, state => state.loading)
 
 /**
  * Action Creators
@@ -60,6 +64,13 @@ export function signUp(email, password) {
     }
 }
 
+export function signIn(email, password) {
+    return {
+        type: SIGN_IN_REQUEST,
+        payload: { email, password }
+    }
+}
+
 firebase.auth().onAuthStateChanged(user => {
     if (!user) return
 
@@ -96,8 +107,31 @@ export function * signUpSaga() {
     }
 }
 
+export function * signInSaga() {
+    const auth = firebase.auth()
+
+    while (true) {
+        const {payload} = yield take(SIGN_IN_REQUEST)
+
+        try {
+            const user = yield call([auth, auth.signInWithEmailAndPassword], payload.email, payload.password)
+
+            yield put({
+                type: SIGN_IN_SUCCESS,
+                payload: {user}
+            })
+        } catch (error) {
+            yield put({
+                type: SIGN_IN_ERROR,
+                payload: {error}
+            })
+        }
+    }
+}
+
 export function * saga() {
     yield all([
-        signUpSaga()
+        signUpSaga(),
+        signInSaga()
     ])
 }

src/ducks/auth.test.js

@@ -0,0 +1,78 @@
+import {call, put, take} from 'redux-saga/effects'
+import firebase from 'firebase'
+import {
+    signIn, signUpSaga, signUp, SIGN_UP_START, SIGN_UP_SUCCESS, SIGN_UP_ERROR, signInSaga,
+    SIGN_IN_SUCCESS, SIGN_IN_REQUEST, SIGN_IN_ERROR
+} from "./auth"
+
+const preparingForSignUp = () => {
+    const email = "test@domovenok.su", password = "12345678"
+    const auth = firebase.auth()
+
+    const gen = signUpSaga()
+
+    expect(gen.next().value).toEqual(take(SIGN_UP_START))
+
+    const requestAction = signUp(email, password)
+
+    expect(gen.next(requestAction).value).toEqual(call([auth, auth.createUserWithEmailAndPassword], email, password))
+
+    const user = {something: '...'}
+
+    return {gen, user}
+}
+
+it('should sign up success', () => {
+    const {gen, user} = preparingForSignUp()
+
+    expect(gen.next(user).value).toEqual(put({
+        type: SIGN_UP_SUCCESS,
+        payload: { user }
+    }))
+})
+
+it('should sign up error', () => {
+    const {gen, user} = preparingForSignUp()
+    const error = new Error('error')
+
+    expect(gen.throw(error).value).toEqual(put({
+        type: SIGN_UP_ERROR,
+        payload: { error }
+    }))
+})
+
+const preparingForSignIn = () => {
+    const email = "test@domovenok.su", password = "12345678"
+    const auth = firebase.auth()
+
+    const gen = signInSaga()
+
+    expect(gen.next().value).toEqual(take(SIGN_IN_REQUEST))
+
+    const requestAction = signIn(email, password)
+
+    expect(gen.next(requestAction).value).toEqual(call([auth, auth.signInWithEmailAndPassword], email, password))
+
+    const user = {something: '...'}
+
+    return {gen, user}
+}
+
+it('should sign in success', () => {
+    const { gen, user } = preparingForSignIn()
+
+    expect(gen.next(user).value).toEqual(put({
+        type: SIGN_IN_SUCCESS,
+        payload: { user }
+    }))
+})
+
+it('should sign in error', () => {
+    const { gen, user } = preparingForSignIn()
+    const error = new Error('smth error')
+
+    expect(gen.throw(error).value).toEqual(put({
+        type: SIGN_IN_ERROR,
+        payload: { error }
+    }))
+})

src/ducks/people.js

@@ -1,4 +1,5 @@
 import {appName} from '../config'
+import {reset} from 'redux-form'
 import {Record, List} from 'immutable'
 import {put, call, takeEvery} from 'redux-saga/effects'
 import {generateId} from './utils'
@@ -66,6 +67,8 @@ export function * addPersonSaga(action) {
     console.log('---', effect)
 
     yield effect
+
+    yield put(reset('person'))
 }
 
 export function * saga() {

src/ducks/people.test.js

@@ -21,5 +21,4 @@ it('should add person', () => {
         type: ADD_PERSON,
         payload: { id, ...person }
     }))
-
 })