zhangmyihua/lesson-26-complete

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

Lesson-26-complete

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

How to fork and clone

One quick note about cloning this project. If you wish to make commits and push the code up after cloning this repo, you should fork the project first. In order to own your own copy of this repository, you have to fork it so you get your own copy on your own profile!

You can see the fork button in the top right corner of every GitHub project; click it and a copy of the project will be added to your GitHub profile under the same name as the original project.

After forking the project, simply clone it the way you would from the new forked project in your own GitHub repository and you can commit and push to it freely!

After you fork and clone:

Install dependencies

In your terminal after you clone your project down, remember to run either yarn or npm install to build all the dependencies in the project.

Set your firebase config

Remember to replace the config variable in your firebase.utils.js with your own config object from the firebase dashboard! Navigate to the project settings and scroll down to the config code. Copy the object in the code and replace the variable in your cloned code.

Set your stripe publishable key

Set the publishableKey variable in the stripe-button.component.jsx with your own publishable key from the stripe dashboard.

Things to set before you deploy

You will also need to connect your existing Heroku app to this new forked and cloned repo, or you have to create a new Heroku app and push to it. A quick refresher on how to do either of these:

Set to an existing Heroku app

To set to an existing Heroku app you already have deployed, you need to know the name of the app you want to deploy to. To see a list of all the apps you currently have on Heroku:

heroku apps

Copy the name of the app you want to connect the project to, then run:

heroku git:remote -a <PASTE_YOUR_APP_NAME_HERE>

And now you'll have your repo connected to the heroku app under the git remote name heroku.

Then skip to the bottom of this article to see what to do next!

To create a new Heroku app

Create a new Heroku project by typing in your terminal:

heroku create

This will create a new Heroku project for you. Then run:

git remote -v

You should see heroku https://git.heroku.com/<RANDOMLY_GENERATED_NAME_OF_YOUR_APP> in the list. This means you have successfully connected your project to the newly created Heroku app under the git remote of heroku.

Deploying to Heroku

Add the mars/create-react-app-buildpack to your heroku project by typing:

heroku buildpacks:set mars/create-react-app-buildpack

You can then deploy to heroku by running:

git push heroku master

You will see this warning message if you are pushing to an existing app:

! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://git.heroku.com/hasura-crwn-clothing.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

This is because we are pushing to an existing app that was deploying an entirely different repository from what we have now. Simply run:

git push heroku master --force

This will overwrite the existing Heroku app with our new code.

Open our Heroku project

After heroku finishes building our project, we can simply run:

heroku open

This will open up our browser and take us to our newly deployed Heroku project!

lesson-26-complete's Issues

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.

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

import correction

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

should be:

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