Project listing

src/components/ProjectContents.jsx

@@ -13,14 +13,14 @@ options.log = (test) => {
 class ProjectContents extends Component {
   render() {
     const { contents } = this.props;
-    const data = contents.data;
+    const project_contents = contents.data.length ? contents.data[0] : {};
     return (
       <div>
         <h2>Project Contents</h2>
-        <p>Title: { data.title }</p>
-        <p>Description: { data.description }</p>
-        <p>Introduction: { data.introduction }</p>
-        <p>Language: { data.language}</p>
+        <p>Title: { project_contents.title }</p>
+        <p>Description: { project_contents.description }</p>
+        <p>Introduction: { project_contents.introduction }</p>
+        <p>Language: { project_contents.language}</p>
       </div>
     );
   }

src/components/ProjectList.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import fixIt, { options } from 'react-fix-it';
+import { Link } from 'react-router';
+
+const propTypes = {
+  projects: PropTypes.object.isRequired,
+};
+
+function ProjectListItem(props) {
+  return(
+    <li key={props.project.id}>
+      <Link to={`/project/${props.project.id}`} >{props.project.display_name}</Link>
+    </li>
+  );
+}
+class ProjectList extends Component {
+
+  render() {
+    const { projects } = this.props;
+    return (
+      <div>
+        <h2>Projects</h2>
+        <ul>
+          {projects.data.map(project => <ProjectListItem project={project} />)}
+        </ul>
+      </div>
+    );
+  }
+}
+
+ProjectList.propTypes = propTypes;
+
+ProjectList.defaultProps = {
+  projects: {
+    data: []
+  }
+}
+
+export default fixIt(ProjectList);

src/containers/ProjectContentsContainer.jsx

@@ -19,7 +19,7 @@ class ProjectContentsContainer extends Component {
   }
   componentDidMount() {
     const { actions } = this.props;
-    return actions.fetchProjectContents();
+    return actions.fetchProjectContents(this.props.params.project_id);
   }
 
   handleClick(event) {

src/containers/ProjectListContainer.jsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import * as projectsActions from '../ducks/projects';
+
+import ProjectList from '../components/ProjectList';
+
+const propTypes = {
+  actions: PropTypes.object.isRequired,
+  projects: PropTypes.object.isRequired,
+};
+
+class ProjectListContainer extends Component {
+
+  componentDidMount() {
+    const { actions } = this.props;
+    actions.fetchProjects();
+  }
+
+  render() {
+    const { projects } = this.props;
+    return (
+        <ProjectList projects={projects} />
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  projects: state.projects,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(projectsActions, dispatch),
+});
+
+ProjectListContainer.propTypes = propTypes;
+
+ProjectListContainer.defaultProps = {
+  projects: {
+    data: []
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ProjectListContainer);

src/ducks/contents.js

@@ -26,12 +26,13 @@ const projectContentsReducer = (state = initialState, action) => {
 };
 
 // Action Creators
-const fetchProjectContents = () => {
+const fetchProjectContents = (project_id) => {
   return (dispatch) => {
     dispatch({
       type: FETCH_PROJECT_CONTENTS,
     });
-    apiClient.type('project_contents').get('1727')
+    const query = { project_id };
+    apiClient.type('project_contents').get(query)
     .then((projectContents) => {
       dispatch({
         type: FETCH_PROJECT_CONTENTS_SUCCESS,

src/ducks/projects.js

@@ -0,0 +1,52 @@
+import apiClient from 'panoptes-client/lib/api-client';
+
+// Action Types
+export const FETCH_PROJECTS = 'FETCH_PROJECTS';
+export const FETCH_PROJECTS_SUCCESS = 'FETCH_PROJECTS_SUCCESS';
+export const FETCH_PROJECTS_ERROR = 'FETCH_PROJECTS_ERROR';
+
+// Reducer
+const initialState = {
+  data: [],
+  error: false,
+  loading: false,
+};
+
+const projectsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_PROJECTS:
+      return Object.assign({}, initialState, { loading: true });
+    case FETCH_PROJECTS_SUCCESS:
+      return Object.assign({}, state, { data: action.payload, loading: false });
+    case FETCH_PROJECTS_ERROR:
+      return Object.assign({}, state, { error: action.payload, loading: false });
+    default:
+      return state;
+  }
+};
+
+// Action Creators
+const fetchProjects = () => {
+  return (dispatch) => {
+    dispatch({
+      type: FETCH_PROJECTS,
+    });
+    const query = {
+      current_user_roles: ['owner', 'translator']
+    }
+    apiClient.type('projects').get(query)
+    .then((projects) => {
+      dispatch({
+        type: FETCH_PROJECTS_SUCCESS,
+        payload: projects,
+      });
+    });
+  };
+};
+
+// Exports
+export default projectsReducer;
+
+export {
+  fetchProjects
+};

src/ducks/reducer.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import contents from './contents';
 import login from './login';
+import projects from './projects';
 
 export default combineReducers({
   contents,
   login,
+  projects
 });

src/index.jsx

@@ -9,6 +9,7 @@ import About from './components/About';
 import config from './config';
 import configureStore from './store';
 import ProjectContents from './containers/ProjectContentsContainer';
+import ProjectList from './containers/ProjectListContainer';
 
 // Todo: let's find a better way to include Styles,
 // currently Styles looks like an unused var to eslint
@@ -22,7 +23,8 @@ oauth.init(config.panoptesAppId)
       <Provider store={store}>
         <Router history={browserHistory}>
           <Route path="/" component={App}>
-            <IndexRoute component={ProjectContents} />
+            <IndexRoute component={ProjectList} />
+            <Route path="/project/:project_id" component={ProjectContents} />
             <Route path="/about" component={About} />
           </Route>
         </Router>