Merge branch 'master' of bitbucket.org:ascribe/onion

js/actions/piece_list_actions.js

@@ -1,6 +1,7 @@
 import alt from '../alt';
 import PieceListFetcher from '../fetchers/piece_list_fetcher';
 
+
 class PieceListActions {
     constructor() {
         this.generateActions(

js/actions/user_actions.js

@@ -0,0 +1,23 @@
+import alt from '../alt';
+import UserFetcher from '../fetchers/user_fetcher';
+
+
+class UserActions {
+    constructor() {
+        this.generateActions(
+            'updateCurrentUser'
+        );
+    }
+
+    fetchCurrentUser() {
+        UserFetcher.fetchOne()
+            .then((res) => {
+                this.actions.updateCurrentUser(res['users'][0]);
+            })
+            .catch((err) => {
+                console.log(err);           
+            });
+    }
+};
+
+export default alt.createActions(UserActions);

js/components/ascribe_app.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Router from 'react-router';
-
+import Header from '../components/header';
 
 let Link = Router.Link;
 let RouteHandler = Router.RouteHandler;
@@ -10,7 +10,7 @@ let AscribeApp = React.createClass({
     render() {
         return (
             <div>
-                <header>ascribe</header>
+                <Header />
                 <navigation>
                     <Link to="pieces">pieces</Link>
                 </navigation>

js/components/header.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import AltContainer from 'alt/AltContainer';
+import UserActions from '../actions/user_actions';
+import UserStore from '../stores/user_store';
+
+
+let Header = React.createClass({
+
+    getInitialState() {
+        return UserStore.getState();
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange)
+        UserActions.fetchCurrentUser();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        return (
+            <div>hello {this.state.currentUser.username}</div>
+        )
+    }
+});
+
+export default Header;

js/components/piece.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+
 let Piece = React.createClass({
     render() {
         return (

js/components/piece_list.js

@@ -11,6 +11,7 @@ import TableItemText from './table_item_text';
 
 let Link = Router.Link;
 
+
 let PieceList = React.createClass({
     
     componentDidMount() {

js/components/table.js

@@ -3,6 +3,7 @@ import React from 'react';
 import TableItem from './table_item';
 import TableHeader from './table_header';
 
+
 let Table = React.createClass({
     propTypes: {
         columnMap: React.PropTypes.object.isRequired

js/components/table_header.js

@@ -3,6 +3,7 @@ import React from 'react';
 import TableColumnMixin from '../mixins/table_column_mixin';
 import GeneralUtils from '../utils/general_utils';
 
+
 let TableHeader = React.createClass({
     mixins: [TableColumnMixin],
     propTypes: {

js/components/table_item.js

@@ -4,6 +4,7 @@ import TableColumnMixin from '../mixins/table_column_mixin';
 import TableItemImg from './table_item_img';
 import TableItemText from './table_item_text';
 
+
 let TableItem = React.createClass({
     mixins: [TableColumnMixin],
 

js/components/table_item_text.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+
 let TableItemText = React.createClass({
     propTypes: {
         content: React.PropTypes.string.isRequired

js/fetchers/piece_list_fetcher.js

@@ -3,6 +3,7 @@ import fetch from 'isomorphic-fetch';
 import AppConstants from '../constants/application_constants';
 import FetchApiUtils from '../utils/fetch_api_utils';
 
+
 let PieceListFetcher = {
     /**
      * Fetches a list of pieces from the API.

js/fetchers/user_fetcher.js

@@ -0,0 +1,22 @@
+import fetch from 'isomorphic-fetch';
+
+import AppConstants from '../constants/application_constants';
+import FetchApiUtils from '../utils/fetch_api_utils';
+
+
+let UserFetcher = {
+    /**
+     * Fetch one user from the API.
+     * If no arg is supplied, load the current user
+     * 
+     */
+    fetchOne() {
+        return fetch(AppConstants.baseUrl + 'users/', {
+            headers: {
+                'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
+            }
+        }).then((res) => res.json());
+    }
+};
+
+export default UserFetcher;

js/mixins/table_column_mixin.js

@@ -1,5 +1,6 @@
 import GeneralUtils from '../utils/general_utils';
 
+
 let TableColumnMixin = {
     /**
      * Generates the bootstrap grid column declarations automatically using

js/routes.js

@@ -7,6 +7,7 @@ import Piece from './components/piece';
 
 let Route = Router.Route;
 
+
 let routes = (
     <Route name="app" path="/" handler={AscribeApp}>
         <Route name="pieces" handler={PieceList}>

js/stores/piece_list_store.js

@@ -1,6 +1,7 @@
 import alt from '../alt';
 import PieceListActions from '../actions/piece_list_actions';
 
+
 class PieceListStore {
     constructor() {
         this.itemList = []; // rename this to pieceList after figuring out AltContainer transform

js/stores/user_store.js

@@ -0,0 +1,16 @@
+import alt from '../alt';
+import UserAction from '../actions/user_actions';
+
+
+class UserStore{
+    constructor() {
+        this.currentUser = {}
+        this.bindActions(UserAction);
+    }
+
+    onUpdateCurrentUser(user) {
+        this.currentUser = user;
+    }
+};
+
+export default alt.createStore(UserStore);

js/utils/fetch_api_utils.js

@@ -1,5 +1,6 @@
 import GeneralUtils from './general_utils';
 
+
 // TODO: Create Unittests that test all functions
 let FetchApiUtils = {