Merge pull request #12 from faergeek/quotes

Show Chuck Norris quotes

Author: mgonto

build/build.js

@@ -0,0 +1,11 @@
+import AppDispatcher from '../dispatchers/AppDispatcher.js';
+import {QUOTE_GET} from '../constants/QuoteConstants.js';
+
+export default {
+  gotQuote: (quote) => {
+    AppDispatcher.dispatch({
+      actionType: QUOTE_GET,
+      quote: quote
+    })
+  }
+}

src/actions/QuoteActions.js

@@ -4,6 +4,7 @@ import AuthenticatedApp from './components/AuthenticatedApp'
 import Login from './components/Login';
 import Signup from './components/Signup';
 import Home from './components/Home';
+import Quote from './components/Quote';
 import RouterContainer from './services/RouterContainer';
 import LoginActions from './actions/LoginActions';
 
@@ -12,6 +13,7 @@ var routes = (
     <Route name="login" handler={Login}/>
     <Route name="signup" handler={Signup}/>
     <Route name="home" path="/" handler={Home}/>
+    <Route name="quote" handler={Quote}/>
   </Route>
 );
 

src/app.jsx

@@ -66,6 +66,9 @@ export default class AuthenticatedApp extends React.Component {
         <li>
           <Link to="home">Home</Link>
         </li>
+        <li>
+          <Link to="quote">Quote</Link>
+        </li>
         <li>
           <a href="" onClick={this.logout}>Logout</a>
         </li>

src/components/AuthenticatedApp.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import AuthenticatedComponent from './AuthenticatedComponent';
+import QuoteStore from '../stores/QuoteStore.js';
+import QuoteService from '../services/QuoteService.js';
+
+export default AuthenticatedComponent(class Quote extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = this.getQuoteState();
+    this._onChange = this._onChange.bind(this);
+  }
+
+  componentDidMount() {
+    if (!this.state.quote) {
+      this.requestNextQuote();
+    }
+
+    QuoteStore.addChangeListener(this._onChange);
+  }
+
+  componentWillUnmount() {
+    QuoteStore.removeChangeListener(this._onChange);
+  }
+
+  _onChange() {
+    this.setState(this.getQuoteState());
+  }
+
+  requestNextQuote() {
+    QuoteService.nextQuote();
+  }
+
+  getQuoteState() {
+    return {
+      quote: QuoteStore.quote
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>{this.state.quote}</h1>
+        <button className="btn btn-primary" type="button" onClick={this.requestNextQuote}>Next Quote</button>
+      </div>
+    );
+  }
+});

src/components/Quote.jsx

@@ -0,0 +1,6 @@
+var BASE_URL = 'http://localhost:3001/';
+export default {
+  BASE_URL: BASE_URL,
+  QUOTE_URL: BASE_URL + 'api/protected/random-quote',
+  QUOTE_GET: 'QUOTE_GET'
+}

src/constants/QuoteConstants.js

@@ -0,0 +1,25 @@
+import request from 'reqwest';
+import when from 'when';
+import {QUOTE_URL} from '../constants/QuoteConstants';
+import QuoteActions from '../actions/QuoteActions';
+import LoginStore from '../stores/LoginStore.js';
+
+class QuoteService {
+
+  nextQuote() {
+    request({
+      url: QUOTE_URL,
+      method: 'GET',
+      crossOrigin: true,
+      headers: {
+        'Authorization': 'Bearer ' + LoginStore.jwt
+      }
+    })
+    .then(function(response) {
+      QuoteActions.gotQuote(response);
+    });
+  }
+
+}
+
+export default new QuoteService()

src/services/QuoteService.js

@@ -0,0 +1,33 @@
+import {QUOTE_GET} from '../constants/QuoteConstants';
+import {LOGOUT_USER} from '../constants/LoginConstants';
+import BaseStore from './BaseStore';
+
+class QuoteStore extends BaseStore {
+
+  constructor() {
+    super();
+    this.subscribe(() => this._registerToActions.bind(this))
+    this._quote = '';
+  }
+
+  _registerToActions(action) {
+    switch(action.actionType) {
+      case QUOTE_GET:
+        this._quote = action.quote;
+        this.emitChange();
+        break;
+      case LOGOUT_USER:
+        this._quote = null;
+        this.emitChange();
+        break;
+      default:
+        break;
+    };
+  }
+
+  get quote() {
+    return this._quote;
+  }
+}
+
+export default new QuoteStore();