Browse Source

Life cycle events and conditional rendering.

Frederic G. MARAND 8 years ago
parent
commit
bde3a2fc0c
5 changed files with 71 additions and 3 deletions
  1. 0 1
      app/index.html
  2. 13 0
      components/ConfirmBattle.js
  3. 2 2
      components/Main.js
  4. 2 0
      config/routes.js
  5. 54 0
      containers/ConfirmBattleContainer.js

+ 0 - 1
app/index.html

@@ -8,6 +8,5 @@
 
   <body>
     <div id="app" class="container"></div>
-
   </body>
 </html>

+ 13 - 0
components/ConfirmBattle.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const ConfirmBattle = (props) => {
+  return props.isLoading ? (
+    <p>
+      Loading
+    </p>
+  ) : (
+    <div>Confirm battle!</div>
+  );
+};
+
+export default ConfirmBattle;

+ 2 - 2
components/Main.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-let Main = React.createClass({
+class Main extends React.Component {
   render() {
     return (
       <div className="name-container">
@@ -8,6 +8,6 @@ let Main = React.createClass({
       </div>
     );
   }
-});
+}
 
 export default Main;

+ 2 - 0
config/routes.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { IndexRoute, Route, Router, hashHistory as history } from "react-router";
+import ConfirmBattleContainer from "../containers/ConfirmBattleContainer";
 import Main from "../components/Main";
 import Home from "../components/Home";
 import PromptContainer from "../containers/PromptContainer";
@@ -10,6 +11,7 @@ const routes = (
       <IndexRoute component={Home} />
       <Route path="playerOne" component={PromptContainer} header="Player One" />
       <Route path="playerTwo/:playerOne" component={PromptContainer} header="Player Two" />
+      <Route path="battle" component={ConfirmBattleContainer} />
     </Route>
   </Router>
 );

+ 54 - 0
containers/ConfirmBattleContainer.js

@@ -0,0 +1,54 @@
+import React from "react";
+import ConfirmBattle from "../components/ConfirmBattle";
+
+class ConfirmBattleContainer extends React.Component {
+  constructor(props) {
+    console.log("Constructor (getInitialState)");
+    super(props);
+    this.state = {
+      isLoading: true,
+      playerInfo: []
+    };
+  }
+
+  componentWillMount() {
+    console.log("componentWillMount");
+  }
+
+  componentDidMount() {
+    console.log("componentDidMount");
+    const query = this.props.location.query;
+    // Fetch info from Github then update state.
+    this.setState({
+      isLoading: true
+    });
+    setTimeout(() => { this.setState({ isLoading: false }); }, 2000);
+  }
+
+  componentWillReceiveProps() {
+    console.log("componentWillReceiveProps");
+  }
+
+  componentWillUnmount() {
+    console.log("componentWillUnmount");
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+    console.log("componentWillUpdate: loading ?", nextState.isLoading);
+  }
+
+  render() {
+    return (
+      <ConfirmBattle
+        isLoading={this.state.isLoading}
+        playerInfo={this.state.playerInfo}
+      />
+    );
+  }
+}
+
+ConfirmBattleContainer.contextTypes = {
+  router: React.PropTypes.object.isRequired
+};
+
+export default ConfirmBattleContainer;