From db0105ea3d4af6b52147993fbcc64b0fb3b2a59c Mon Sep 17 00:00:00 2001 From: Jim O'Donnell Date: Fri, 26 May 2017 11:32:43 +0100 Subject: [PATCH 1/3] List available projects --- src/components/ProjectList.jsx | 32 +++++++++++++++ src/containers/ProjectListContainer.jsx | 49 +++++++++++++++++++++++ src/ducks/projects.js | 52 +++++++++++++++++++++++++ src/ducks/reducer.js | 2 + src/index.jsx | 4 +- 5 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 src/components/ProjectList.jsx create mode 100644 src/containers/ProjectListContainer.jsx create mode 100644 src/ducks/projects.js diff --git a/src/components/ProjectList.jsx b/src/components/ProjectList.jsx new file mode 100644 index 00000000..a411bc83 --- /dev/null +++ b/src/components/ProjectList.jsx @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import fixIt, { options } from 'react-fix-it'; + +const propTypes = { + projects: PropTypes.object.isRequired, +}; + +class ProjectList extends Component { + + render() { + const { projects } = this.props; + return ( +
+

Projects

+ +
+ ); + } +} + +ProjectList.propTypes = propTypes; + +ProjectList.defaultProps = { + projects: { + data: [] + } +} + +export default fixIt(ProjectList); diff --git a/src/containers/ProjectListContainer.jsx b/src/containers/ProjectListContainer.jsx new file mode 100644 index 00000000..987aeff6 --- /dev/null +++ b/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 ( + + ); + } +} + +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); diff --git a/src/ducks/projects.js b/src/ducks/projects.js new file mode 100644 index 00000000..1c6f6215 --- /dev/null +++ b/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 +}; diff --git a/src/ducks/reducer.js b/src/ducks/reducer.js index 74164fe6..47f6349e 100644 --- a/src/ducks/reducer.js +++ b/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 }); diff --git a/src/index.jsx b/src/index.jsx index 7f8f6794..e79de5c3 100644 --- a/src/index.jsx +++ b/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) - + + From 3d7f0c6d7c1daf06dfa905b959776e37cac2f4cc Mon Sep 17 00:00:00 2001 From: Jim O'Donnell Date: Fri, 26 May 2017 12:18:30 +0100 Subject: [PATCH 2/3] Link up projects to project contents --- src/components/ProjectList.jsx | 10 +++++++++- src/containers/ProjectContentsContainer.jsx | 2 +- src/ducks/contents.js | 4 ++-- src/index.jsx | 2 +- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/ProjectList.jsx b/src/components/ProjectList.jsx index a411bc83..e1ff54e5 100644 --- a/src/components/ProjectList.jsx +++ b/src/components/ProjectList.jsx @@ -1,11 +1,19 @@ 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( +
  • + {props.project.display_name} +
    • + ); +} class ProjectList extends Component { render() { @@ -14,7 +22,7 @@ class ProjectList extends Component {

    Projects

      - {projects.data.map(project =>
    • {project.display_name}
      • )} + {projects.data.map(project => )}
    ); diff --git a/src/containers/ProjectContentsContainer.jsx b/src/containers/ProjectContentsContainer.jsx index 8c55bffe..03b0b210 100644 --- a/src/containers/ProjectContentsContainer.jsx +++ b/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) { diff --git a/src/ducks/contents.js b/src/ducks/contents.js index 0c786505..db43c14e 100644 --- a/src/ducks/contents.js +++ b/src/ducks/contents.js @@ -26,12 +26,12 @@ 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') + apiClient.type('project_contents').get(project_id) .then((projectContents) => { dispatch({ type: FETCH_PROJECT_CONTENTS_SUCCESS, diff --git a/src/index.jsx b/src/index.jsx index e79de5c3..c7a47806 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -24,7 +24,7 @@ oauth.init(config.panoptesAppId) - + From 519aec7c92651d6c909e612a8ca6893510de6958 Mon Sep 17 00:00:00 2001 From: Jim O'Donnell Date: Fri, 26 May 2017 15:54:08 +0100 Subject: [PATCH 3/3] Get all ProjectContents for a project Only display the first for now. --- src/components/ProjectContents.jsx | 10 +++++----- src/ducks/contents.js | 3 ++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/ProjectContents.jsx b/src/components/ProjectContents.jsx index b98bc97d..f9a215a7 100644 --- a/src/components/ProjectContents.jsx +++ b/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 (

    Project Contents

    -

    Title: { data.title }

    -

    Description: { data.description }

    -

    Introduction: { data.introduction }

    -

    Language: { data.language}

    +

    Title: { project_contents.title }

    +

    Description: { project_contents.description }

    +

    Introduction: { project_contents.introduction }

    +

    Language: { project_contents.language}

    ); } diff --git a/src/ducks/contents.js b/src/ducks/contents.js index db43c14e..a6696e07 100644 --- a/src/ducks/contents.js +++ b/src/ducks/contents.js @@ -31,7 +31,8 @@ const fetchProjectContents = (project_id) => { dispatch({ type: FETCH_PROJECT_CONTENTS, }); - apiClient.type('project_contents').get(project_id) + const query = { project_id }; + apiClient.type('project_contents').get(query) .then((projectContents) => { dispatch({ type: FETCH_PROJECT_CONTENTS_SUCCESS,