start implementing localization functionality

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -12,6 +12,8 @@ import TableItemText from '../ascribe_table/table_item_text';
 import TableItemCheckbox from '../ascribe_table/table_item_checkbox';
 import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
 
+import getText from '../../utils/lang_utils';
+
 let AccordionListItemTableEditions = React.createClass({
 
     propTypes: {
@@ -47,8 +49,8 @@ let AccordionListItemTableEditions = React.createClass({
     render() {
         let columnList = [
             new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
-            new TableColumnContentModel((item) => { return { 'content': item.edition_number }}, 'num_editions', 'Nr', TableItemText, 1, false),
-            new TableColumnContentModel((item) => { return { 'content': item.bitcoin_id }}, 'bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
+            new TableColumnContentModel((item) => { return { 'content': item.edition_number }}, 'num_editions', '#', TableItemText, 1, false),
+            new TableColumnContentModel((item) => { return { 'content': item.bitcoin_id }}, 'bitcoin_id', getText('Bitcoin Address'), TableItemText, 5, false),
             new TableColumnContentModel((item) => { return { 'content': item.acl }}, 'acl', 'Actions', TableItemAclFiltered, 4, false)
         ];
 

js/components/header.js

@@ -5,6 +5,12 @@ import AltContainer from 'alt/AltContainer';
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
+import Nav from 'react-bootstrap/lib/Nav';
+import Navbar from 'react-bootstrap/lib/Navbar';
+import NavItem from 'react-bootstrap/lib/NavItem';
+import DropdownButton from 'react-bootstrap/lib/DropdownButton';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+
 let Link = Router.Link;
 
 let Header = React.createClass({
@@ -24,40 +30,24 @@ let Header = React.createClass({
 
     render() {
         return (
-            <nav className="navbar navbar-default">
-                <div className="container">
-                    <div className="navbar-header">
-                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                            <span className="sr-only">Toggle navigation</span>
-                            <span className="icon-bar"></span>
-                            <span className="icon-bar"></span>
-                            <span className="icon-bar"></span>
-                        </button>
-                        <a className="navbar-brand" href="#">
-                            <span>ascribe </span> 
-                            <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
-                        </a>
-                    </div>
-                    
-                    <div id="navbar" className="navbar-collapse collapse">
-                        <ul className="nav navbar-nav navbar-left">
-                        </ul>
-                        <ul className="nav navbar-nav navbar-right">
-                            <li className="dropdown">
-                                <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{this.state.currentUser.username} <span className="caret"></span></a>
-                                <ul className="dropdown-menu" role="menu">
-                                    <li><a href="/art/faq/">Account Settings</a></li>
-                                    <li className="divider"></li>
-                                    <li><a href="/art/faq/">FAQ</a></li>
-                                    <li><a href="/art/terms/">Terms of Service</a></li>
-                                    <li className="divider"></li>
-                                    <li><a href="/api/users/logout/">Log out</a></li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </nav>
+            <Navbar>
+                <Nav>
+                    <a className="navbar-brand" href="#">
+                        <span>ascribe </span>
+                        <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
+                    </a>
+                </Nav>
+                <Nav right>
+                    <DropdownButton eventKey={3} title={this.state.currentUser.username}>
+                        <MenuItem eventKey="1" href="/art/account_settings/">Account Settings</MenuItem>
+                        <li className="divider"></li>
+                        <MenuItem eventKey="2" href="/art/faq/">FAQ</MenuItem>
+                        <MenuItem eventKey="3" href="/art/terms/">Terms of Service</MenuItem>
+                        <MenuItem divider />
+                        <MenuItem eventKey="4" href="/api/users/logout/">Log out</MenuItem>
+                  </DropdownButton>
+                </Nav>
+            </Navbar>
         );
     }
 });

js/constants/languages.js

@@ -0,0 +1,8 @@
+const languages = {
+    'en-US': {
+        'Bitcoin Address': 'Bitcoin Address',
+        'Actions': 'Actions'
+    }
+};
+
+export default languages;

js/stores/edition_store.js

@@ -1,11 +1,11 @@
 import alt from '../alt';
-import EditionAction from '../actions/edition_actions';
+import EditionActions from '../actions/edition_actions';
 
 
 class EditionStore {
     constructor() {
         this.edition = {};
-        this.bindActions(EditionAction);
+        this.bindActions(EditionActions);
     }
 
     onUpdateEdition(edition) {

js/utils/lang_utils.js

@@ -0,0 +1,13 @@
+import languages from '../constants/languages';
+
+let getText = function(s) {
+    let lang = navigator.language || navigator.userLanguage;
+    if(lang in languages && s in languages[lang]) {
+        return languages[lang][s];
+    } else {
+        throw new Error('Your language is not supported.');
+        // How ironic that this error is thrown in the english language...
+    }
+};
+
+export default getText;