zhangmyihua/lesson-26-complete

In this repository, all our components have been converted to styled-components!

lesson-26-complete's Issues

Dispatch a saga in a saga

Hello I'm of your students in udemy

After the course I started my own application, in the same way as the ecommerce we built together, I have users and companies, in the signUp I want to create the user and then the company.
I have two sagas , the userSagas and the companiesSagas.
What I want is to create a company with an actionCompany inside of the onSignUp method in userSagas just after the account creation and before the user is signed In.

CompaniesActions

import CompanyActionTypes from './company.types';

export const createCompanyStart = (user, companyData) => ({
    type: CompanyActionTypes.SIGN_UP_START,
    payload: {user, companyData}
});

export const createCompanySuccess = (createdCompanyData) => ({
    type: CompanyActionTypes.SIGN_UP_SUCCESS,
    payload: createdCompanyData
});

export const createCompanyFailure = error => ({
    type: CompanyActionTypes.SIGN_UP_FAILURE,
    payload: error
});

CompaniesSagas

import { takeLatest, put, all, call } from 'redux-saga/effects';

import CompanyActionTypes from './company.types';

import {
  createCompanySuccess,
  createCompanyFailure,
} from './company.actions';

import {createCompanyDocument} from '../../firebase/firebase.company';

export function* getSnapshotFromUserCompany(userAuth, companyData) {
  try {
    const userRef = yield call(
      createCompanyDocument,
      userAuth,
      companyData
    );
    const userSnapshot = yield userRef.get();
    yield put(createCompanySuccess({ id: userSnapshot.id, ...userSnapshot.data() }));
  } catch (error) {
    yield put(createCompanyFailure(error));
  }
}

export function* onCreateCompanyStart() {
  yield takeLatest(CompanyActionTypes.CREATE_COMPANY_START, getSnapshotFromUserCompany);
}

export function* companySagas() {
  yield all([
    call(onCreateCompanyStart),
  ]);
}

userSagas

import {createCompanyStart} from "../company/company.actions";

export function* getSnapshotFromUserAuth(userAuth, additionalData) {
  try {
    const userRef = yield call(
            createUserProfileDocument,
            userAuth,
            additionalData.userInfos
        )
    ;
    const userSnapshot = yield userRef.get();
    yield put(signInSuccess({ id: userSnapshot.id, ...userSnapshot.data() }));
   /*===  yield put(createCompanyStart(userAuth, additionalData)); ===== this is the part I added but I don't feel it's the good way */ 
  } catch (error) {
    yield put(signInFailure(error));
  }
}

By the way the course is awesome, I feel more knoledgeable on how to work with React and it's tools... thank you for that

createUserProfileDocument in firebase is fired twice

Hello,
Why does createUserProfileDocument funcion in firebase is fired twice whenever a new user signs up?
It looks like a bug to me because this code seems to be in some kind of race condition. Why do we need to update firebase twice just to add displayName?

You will see that snapShot.exists in firebase is always false when the function is called from both App.js and SignUp component simultaneously.

I think both Sign In and Sign Up should have seperate createUserProfileDocument code.

Secondly, this.setState is not fired in handleSubmit to empty the state inside Sign Up component because Sign Up is already unmounted.

import correction

Import { ... } from './collection-styles.styles';

should be:

import { ... } from './collection-item.styles.jsx';