refactor ascribe table and add prizes dashboard boilerplate code

.gitignore

@@ -6,6 +6,8 @@ lib-cov
 *.out
 *.pid
 *.gz
+*.sublime-project
+*.sublime-workspace
  
 pids
 logs

js/actions/prize_list_actions.js

@@ -0,0 +1,34 @@
+'use strict';
+
+import alt from '../alt';
+import Q from 'q';
+
+import PrizeListFetcher from '../fetchers/prize_list_fetcher';
+
+class PrizeListActions {
+    constructor() {
+        this.generateActions(
+            'updatePrizeList'
+        );
+    }
+
+    fetchPrizeList() {
+        return Q.Promise((resolve, reject) => {
+            PrizeListFetcher
+                .fetch()
+                .then((res) => {
+                    this.actions.updatePrizeList({
+                        prizeList: res.prizes,
+                        prizeListCount: res.count
+                    });
+                    resolve(res);
+                })
+                .catch((err) => {
+                    console.logGlobal(err);
+                    reject(err);
+                });
+        });
+    }
+}
+
+export default alt.createActions(PrizeListActions);

js/components/ascribe_prizes_dashboard/prizes_dashboard.js

@@ -0,0 +1,82 @@
+'use strict';
+
+import React from 'react';
+
+import PrizeListActions from '../../actions/prize_list_actions';
+import PrizeListStore from '../../stores/prize_list_store';
+
+import Table from '../ascribe_table/table';
+import TableItem from '../ascribe_table/table_item';
+import TableItemText from '../ascribe_table/table_item_text';
+
+import { ColumnModel} from '../ascribe_table/models/table_models';
+import { getLangText } from '../../utils/lang_utils';
+
+let PrizesDashboard = React.createClass({
+
+    getInitialState() {
+        return PrizeListStore.getState();
+    },
+
+    componentDidMount() {
+        PrizeListStore.listen(this.onChange);
+        PrizeListActions.fetchPrizeList();
+    },
+
+    componentWillUnmount() {
+        PrizeListStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    getColumnList() {
+        return [
+            new ColumnModel(
+                (item) => {
+                    return {
+                        'content': item.name
+                    }; },
+                    'name',
+                    getLangText('Name'),
+                    TableItemText,
+                    6,
+                    false,
+                    null
+            ),
+            new ColumnModel(
+                (item) => {
+                    return {
+                        'content': item.domain
+                    }; },
+                    'domain',
+                    getLangText('Domain'),
+                    TableItemText,
+                    1,
+                    false,
+                    null
+            )
+        ];
+    },
+
+    render() {
+        return (
+            <Table
+                responsive
+                className="ascribe-table"
+                columnList={this.getColumnList()}
+                itemList={this.state.prizeList}>
+                {this.state.prizeList.map((item, i) => {
+                    return (
+                         <TableItem
+                            className="ascribe-table-item-selectable"
+                            key={i}/>
+                    );
+                })}
+            </Table>
+        );
+    }
+});
+
+export default PrizesDashboard;

js/components/ascribe_table/table_header.js

@@ -2,7 +2,6 @@
 
 import React from 'react';
 
-import TableColumnMixin from '../../mixins/table_column_mixin';
 import TableHeaderItem from './table_header_item';
 
 import { ColumnModel } from './models/table_models';
@@ -17,15 +16,12 @@ let TableHeader = React.createClass({
         orderBy: React.PropTypes.string
     },
 
-    mixins: [TableColumnMixin],
-
     render() {
         return (
             <thead>
                 <tr>
                     {this.props.columnList.map((column, i) => {
 
-                        let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
                         let columnName = column.columnName;
                         let canBeOrdered = column.canBeOrdered;
 
@@ -33,7 +29,6 @@ let TableHeader = React.createClass({
                             <TableHeaderItem
                                 className={column.className}
                                 key={i}
-                                columnClasses={columnClasses}
                                 displayName={column.displayName}
                                 columnName={columnName}
                                 canBeOrdered={canBeOrdered}

js/components/ascribe_table/table_header_item.js

@@ -7,7 +7,6 @@ import TableHeaderItemCarret from './table_header_item_carret';
 let TableHeaderItem = React.createClass({
 
     propTypes: {
-        columnClasses: React.PropTypes.string.isRequired,
         displayName: React.PropTypes.oneOfType([
             React.PropTypes.string,
             React.PropTypes.element

js/constants/api_urls.js

@@ -52,7 +52,8 @@ let apiUrls = {
     'users_profile': AppConstants.apiEndpoint + 'users/profile/',
     'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
     'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
-    'delete_s3_file': AppConstants.serverUrl + 's3/delete/'
+    'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
+    'prize_list': AppConstants.apiEndpoint + 'prize/'
 };
 
 

js/fetchers/prize_list_fetcher.js

@@ -0,0 +1,12 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+
+let PrizeListFetcher = {
+    fetch() {
+        return requests.get('prize_list');
+    }
+};
+
+export default PrizeListFetcher;

js/mixins/table_column_mixin.js

@@ -1,24 +0,0 @@
-'use strict';
-
-import { sumNumList } from '../utils/general_utils';
-
-let TableColumnMixin = {
-    /**
-     * Generates the bootstrap grid column declarations automatically using
-     * the columnMap.
-     */
-    calcColumnClasses(list, i, numOfColumns) {
-        let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
-        
-        let listOfRowValues = list.map((column) => column.rowWidth );
-        let numOfUsedColumns = sumNumList(listOfRowValues);
-
-        if(numOfUsedColumns > numOfColumns) {
-            throw new Error('This table has only ' + numOfColumns + ' columns to assign. You defined ' + numOfUsedColumns + '. Change this in the columnMap you\'re passing to the table.');
-        } else {
-            return bootstrapClasses.join( listOfRowValues[i] + ' ') + listOfRowValues[i];
-        }
-    }
-};
-
-export default TableColumnMixin;

js/routes.js

@@ -20,6 +20,8 @@ import CoaVerifyContainer from './components/coa_verify_container';
 
 import RegisterPiece from './components/register_piece';
 
+import PrizesDashboard from './components/ascribe_prizes_dashboard/prizes_dashboard';
+
 let Route = Router.Route;
 
 
@@ -35,6 +37,7 @@ const COMMON_ROUTES = (
         <Route name="register_piece" path="register_piece" handler={RegisterPiece} />
         <Route name="settings" path="settings" handler={SettingsContainer} />
         <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
+        <Route name="prizes" path="prizes" handler={PrizesDashboard} />
     </Route>
 );
 

js/stores/prize_list_store.js

@@ -0,0 +1,20 @@
+'use strict';
+
+import alt from '../alt';
+
+import PrizeListActions from '../actions/prize_list_actions';
+
+class PrizeListStore {
+    constructor() {
+        this.prizeList = [];
+        this.prizeListCount = -1;
+        this.bindActions(PrizeListActions);
+    }
+
+    onUpdatePrizeList({ prizeList, prizeListCount }) {
+        this.prizeList = prizeList;
+        this.prizeListCount = prizeListCount;
+    }
+}
+
+export default alt.createStore(PrizeListStore, 'PrizeListStore');