Link up workflow contents

Adds workflow contents, by ID.
Lists all workflow strings.

src/components/ProjectList.jsx

@@ -11,6 +11,19 @@ function ProjectListItem(props) {
   return(
     <li key={props.project.id}>
       <Link to={`/project/${props.project.id}`} >{props.project.display_name}</Link>
+      <h3>Workflows</h3>
+      <ul>
+      {props.project.links.workflows.map(workflow => {
+        return (
+          <li key={workflow}>
+            <Link to={`/project/${props.project.id}/workflow/${workflow}`}>
+              {workflow}
+            </Link>
+          </li>
+        );
+      })}
+      </ul>
+
     </li>
   );
 }
@@ -22,7 +35,7 @@ class ProjectList extends Component {
       <div>
         <h2>Projects</h2>
         <ul>
-          {projects.data.map(project => <ProjectListItem project={project} />)}
+          {projects.data.map(project => <ProjectListItem key={project.id} project={project} />)}
         </ul>
       </div>
     );

src/components/WorkflowContents.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import fixIt, { options } from 'react-fix-it';
+
+const propTypes = {
+  contents: PropTypes.object.isRequired,
+};
+
+options.log = (test) => {
+  console.warn(test);
+};
+
+class WorkflowContents extends Component {
+
+  render() {
+    const { contents } = this.props;
+    const workflow_contents = contents.data.length ? contents.data[0] : {strings: []};
+    console.log(workflow_contents)
+    const strings = [];
+    for (const key in workflow_contents.strings) {
+      strings.push(<p key={key}><b>{key}</b> {workflow_contents.strings[key]}</p>);
+    }
+    return (
+      <div>
+        <h2>Workflow Contents</h2>
+        {strings}
+      </div>
+    );
+  }
+}
+
+WorkflowContents.propTypes = propTypes;
+export default fixIt(WorkflowContents);

src/containers/ProjectContentsContainer.jsx

@@ -27,7 +27,9 @@ class ProjectContentsContainer extends Component {
 
   componentDidMount() {
     const { actions } = this.props;
-    return actions.fetchProjectContents(this.props.params.project_id);
+    const type = this.props.routes[2].path;
+    const id = type ? this.props.params.resource_id : this.props.params.project_id;
+    return actions.fetchProjectContents(id, type);
   }
 
   handleClick(event) {

src/ducks/contents.js

@@ -26,13 +26,16 @@ const projectContentsReducer = (state = initialState, action) => {
 };
 
 // Action Creators
-const fetchProjectContents = (project_id) => {
+const fetchProjectContents = (id, type) => {
+  type = type ? type.split('/')[0] : 'project';
   return (dispatch) => {
     dispatch({
       type: FETCH_PROJECT_CONTENTS,
     });
-    const query = { project_id };
-    apiClient.type('project_contents').get(query)
+    const key = `${type}_id`;
+    const query = {};
+    query[key] = id;
+    apiClient.type(`${type}_contents`).get(query)
     .then((projectContents) => {
       dispatch({
         type: FETCH_PROJECT_CONTENTS_SUCCESS,

src/ducks/projects.js

@@ -32,7 +32,8 @@ const fetchProjects = () => {
       type: FETCH_PROJECTS,
     });
     const query = {
-      current_user_roles: ['owner', 'translator']
+      current_user_roles: ['owner', 'translator'],
+      include: ['workflows']
     }
     apiClient.type('projects').get(query)
     .then((projects) => {

src/index.jsx

@@ -11,6 +11,7 @@ import configureStore from './store';
 import ProjectContentsContainer from './containers/ProjectContentsContainer';
 import ProjectContents from './components/ProjectContents';
 import ProjectList from './containers/ProjectListContainer';
+import WorkflowContents from './components/WorkflowContents';
 
 // Todo: let's find a better way to include Styles,
 // currently Styles looks like an unused var to eslint
@@ -27,6 +28,7 @@ oauth.init(config.panoptesAppId)
             <IndexRoute component={ProjectList} />
             <Route path="/project/:project_id" component={ProjectContentsContainer}>
               <IndexRoute component={ProjectContents} />
+              <Route path="workflow/:resource_id" component={WorkflowContents} />
             </Route>
             <Route path="/about" component={About} />
           </Route>