Notes

firbase操作

確認user及路由設定(index.js)

firebaseApp.auth().onAuthStateChanged(user => {
  if (user) {
    const { email } = user;
    store.dispatch(logUser(email));
    browserHistory.push("/app");
  } 
  else browserHistory.replace("/signin");
});

<Router path="/" history={browserHistory}>
  <Route path="/app" component={App} />
  <Route path="/signin" component={SignIn} />
  <Route path="/signup" component={SignUp} />
</Router>

reducers/index.js

export default combineReducers({})

firebase的ref互動

1. 新增目標

// AddGoal.jsx
goalRef.push({ email, title }); 

2. 目標完成，從待完成清單移除，轉移到已完成清單

// GoalItem.jsx
goalRef.child(serverKey).remove(); 
completeGoalRef.push({ email, title });

3. 已完成清單清空

// CompleteGoalList.jsx
completeGoalRef.set({});

4. 從firebase抓下來做render()

// GoalList.jsx
componentDidMount() {
  goalRef.on("value", snap => {
    let goals = [];
    snap.forEach(goal => {
      ...
      ...
      goals.push({ email, title, serverKey });
    });
    this.props.setGoals(goals);
  });
}

5. 跟第四步驟一樣

// CompleteGoalList.jsx
componentDidMount() {
  completeGoalRef.on("value", snap => {
    let completeGoals = [];
    snap.forEach(completeGoal => {
      ...
      ...
      completeGoals.push({ email, title });
    });
    this.props.setCompleted(completeGoals);
  });
}

登入註冊操作

登入

// SignIn.jsx
signIn() {
  const { email, password } = this.state
  firebaseApp
    .auth()
    .signInWithEmailAndPassword(email, password)
    .catch(error => this.setState({ error: error.message }))
}

註冊

// SignUp.jsx
signUp() {
  const { email, password } = this.state
  firebaseApp
    .auth()
    .createUserAndRetrieveDataWithEmailAndPassword(email, password)
    .catch(error => this.setState({ error }))
}

Bug Fixed

跑了npm run eject之後，爆出一堆看不懂的dependencies以及指令

使用webpack時得到的錯誤訊息

Module build failed: Error: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. 

前往./node_modules/babel-preset-react-app/index.js加入兩個變數

I dont know why but it works.

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

腳本同步執行的方式

$ npm i concurrently -D

前往package.json設定腳本(scripts)

 "watch": "concurrently --killer-others \" node-sass --watch ./src/styling/scss/root.scss ./src/styling/css/root.css\" \"webpack --watch\""

node-sass must go first.