add link functionality

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -1,9 +1,12 @@
 import React from 'react';
+import Router from 'react-router';
 
 import AccordionListItemTable from './accordion_list_item_table';
 
 import { getLangText } from '../../utils/lang_utils';
 
+let Link = Router.Link;
+
 let AccordionListItem = React.createClass({
     propTypes: {
         className: React.PropTypes.string,

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Router from 'react-router';
 
 import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
@@ -18,6 +19,8 @@ import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
 
 import { getLangText } from '../../utils/lang_utils';
 
+let Link = Router.Link;
+
 let AccordionListItemTableEditions = React.createClass({
 
     propTypes: {
@@ -108,7 +111,8 @@ let AccordionListItemTableEditions = React.createClass({
                     '#',
                     TableItemText,
                     1,
-                    true
+                    true,
+                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
             ),
             new TableColumnContentModel(
                 (item) => {
@@ -119,7 +123,8 @@ let AccordionListItemTableEditions = React.createClass({
                     getLangText('Bitcoin Address'),
                     TableItemText,
                     5,
-                    true
+                    true,
+                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
             ),
             new TableColumnContentModel(
                 (item) => { 
@@ -130,7 +135,8 @@ let AccordionListItemTableEditions = React.createClass({
                     getLangText('Actions'),
                     TableItemAclFiltered,
                     4,
-                    false
+                    false,
+                    {to: 'edition', paramsKey: 'editionId', contentKey: 'bitcoin_id'}
             )
         ];
 

js/components/ascribe_media/resource_viewer.js

@@ -25,7 +25,7 @@ let ResourceViewer = React.createClass({
     mixins: [InjectInHeadMixin],
 
     componentDidMount() {
-        this.inject('http://antani.com');
+        //this.inject('http://antani.com');
     },
 
     render() {

js/components/ascribe_table/table_item_wrapper.js

@@ -1,16 +1,31 @@
 import React from 'react';
+import Router from 'react-router';
 
 import TableColumnContentModel from '../../models/table_column_content_model';
 import TableColumnMixin from '../../mixins/table_column_mixin';
 
 let TableItemWrapper = React.createClass({
-    mixins: [TableColumnMixin],
+    mixins: [TableColumnMixin, Router.Navigation],
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
         columnContent: React.PropTypes.object,
         columnWidth: React.PropTypes.number.isRequired
     },
 
+    /**
+     * If a link is defined in columnContent, then we can use
+     * Router.Navigation.transitionTo to redirect the user
+     * programmatically
+     */
+    transition(column) {
+        if(column.link) {
+            let params = {};
+            params[column.link.paramsKey] = this.props.columnContent[column.link.contentKey];
+
+            this.transitionTo(column.link.to, params);
+        }
+    },
+
     render() {
         return (
             <div>
@@ -21,8 +36,13 @@ let TableItemWrapper = React.createClass({
 
                     let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
 
+                    let transition = this.transition.bind(this, column);
+
                     return (
-                        <div className={columnClass + ' ascribe-table-item-column'} key={i}>
+                        <div 
+                            className={columnClass + ' ascribe-table-item-column'} 
+                            key={i}
+                            onClick={transition}>
                             <TypeElement {...typeElementProps} />
                         </div>
                     );

js/models/table_column_content_model.js

@@ -1,12 +1,13 @@
 class TableColumnContentModel {
     // ToDo: Add validation for all passed-in parameters
-    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered) {
+    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, link) {
         this.transformFn = transformFn;
         this.columnName = columnName;
         this.displayName = displayName;
         this.displayType = displayType;
         this.rowWidth = rowWidth;
         this.canBeOrdered = canBeOrdered;
+        this.link = link;
     }
 }