-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Generalise the contents editor #5
Changes from 8 commits
002de34
f17ca33
365665d
ed87a3e
4b15a09
7b57687
dfb081d
2303339
d04baab
7ef41fb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import fixIt from 'react-fix-it'; | ||
import { Link } from 'react-router'; | ||
import ProjectContentsContainer from '../containers/ProjectContentsContainer'; | ||
import ProjectContents from './ProjectContents'; | ||
|
||
const propTypes = { | ||
project: PropTypes.object.isRequired, | ||
}; | ||
|
||
function ProjectDashboard(props) { | ||
const { project } = props; | ||
return ( | ||
<div> | ||
<ProjectContentsContainer {...props}> | ||
<ProjectContents /> | ||
</ProjectContentsContainer> | ||
<h3>Workflows</h3> | ||
<ul> | ||
{project.workflows.map((workflow) => { | ||
return ( | ||
<li key={workflow.id}> | ||
<Link to={`/project/${project.id}/workflows/${workflow.id}`}>{workflow.display_name}</Link> | ||
</li> | ||
); | ||
})} | ||
</ul> | ||
<h3>Tutorials</h3> | ||
<ul> | ||
{project.tutorials.map((tutorial) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This throws if There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should be fixed now. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
return ( | ||
<li key={tutorial.id}> | ||
<Link to={`/project/${project.id}/tutorials/${tutorial.id}`}>{tutorial.id}: {tutorial.display_name}</Link> | ||
</li> | ||
); | ||
})} | ||
</ul> | ||
</div> | ||
); | ||
} | ||
|
||
ProjectDashboard.propTypes = propTypes; | ||
|
||
ProjectDashboard.defaultProps = { | ||
project: { | ||
tutorials: [], | ||
workflows: [] | ||
} | ||
}; | ||
|
||
export default fixIt(ProjectDashboard); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import fixIt, { options } from 'react-fix-it'; | ||
import Tutorial from './Tutorial'; | ||
import WorkflowContents from './WorkflowContents'; | ||
|
||
const resources = { | ||
tutorials: Tutorial, | ||
workflows: WorkflowContents | ||
}; | ||
|
||
const propTypes = { | ||
contents: PropTypes.object.isRequired, | ||
params: PropTypes.shape({ | ||
resource_type: PropTypes.string | ||
}) | ||
}; | ||
|
||
options.log = (test) => { | ||
console.warn(test); | ||
}; | ||
|
||
function Resource(props) { | ||
const { contents } = props; | ||
const ResourceViewer = resources[props.params.resource_type]; | ||
return (<ResourceViewer contents={contents} />); | ||
} | ||
|
||
Resource.propTypes = propTypes; | ||
export default fixIt(Resource); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React 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); | ||
}; | ||
|
||
function Tutorial(props) { | ||
const { contents } = props; | ||
const tutorial = contents.original.length ? contents.original[0] : { steps: [] }; | ||
const steps = []; | ||
tutorial.steps && tutorial.steps.map((step, key) => { | ||
steps.push(<p key={key}><b>{key}</b> {step.content}</p>); | ||
}); | ||
return ( | ||
<div> | ||
<h2>Tutorial</h2> | ||
{steps} | ||
</div> | ||
); | ||
} | ||
|
||
Tutorial.propTypes = propTypes; | ||
export default fixIt(Tutorial); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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.original.length ? contents.original[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); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,14 +2,17 @@ import React, { Component } from 'react'; | |
import PropTypes from 'prop-types'; | ||
import { connect } from 'react-redux'; | ||
import { bindActionCreators } from 'redux'; | ||
import * as contentsActions from '../ducks/contents'; | ||
import ProjectContents from '../components/ProjectContents'; | ||
import * as contentsActions from '../ducks/resource'; | ||
import { BaseModal, ModalBody, ModalFooter } from 'pui-react-modals'; | ||
import { DefaultButton } from 'pui-react-buttons'; | ||
|
||
const propTypes = { | ||
actions: PropTypes.object.isRequired, | ||
contents: PropTypes.object.isRequired, | ||
children: PropTypes.node, | ||
contents: PropTypes.object, | ||
params: PropTypes.shape({ | ||
project_id: PropTypes.string | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Missing |
||
}) | ||
}; | ||
|
||
class ProjectContentsContainer extends Component { | ||
|
@@ -24,7 +27,9 @@ class ProjectContentsContainer extends Component { | |
|
||
componentDidMount() { | ||
const { actions } = this.props; | ||
return actions.fetchProjectContents(this.props.params.project_id); | ||
const type = this.props.params.resource_type; | ||
const id = type ? this.props.params.resource_id : this.props.params.project_id; | ||
return actions.fetchResource(id, type); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why are we returning a value from There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sorry, just some cruft. However, I have experienced problems in triggering actions when |
||
} | ||
|
||
handleClick(event) { | ||
|
@@ -35,7 +40,7 @@ class ProjectContentsContainer extends Component { | |
} | ||
|
||
render() { | ||
const { contents } = this.props; | ||
const { resource } = this.props; | ||
return ( | ||
<div> | ||
<BaseModal | ||
|
@@ -55,15 +60,15 @@ class ProjectContentsContainer extends Component { | |
</ModalFooter> | ||
</BaseModal> | ||
<div onClick={this.handleClick}> | ||
<ProjectContents contents={contents} /> | ||
{React.cloneElement(this.props.children, { contents: resource })} | ||
</div> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
const mapStateToProps = (state) => ({ | ||
contents: state.contents, | ||
resource: state.resource, | ||
}); | ||
const mapDispatchToProps = (dispatch) => ({ | ||
actions: bindActionCreators(contentsActions, dispatch), | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import React, { Component } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { connect } from 'react-redux'; | ||
import { bindActionCreators } from 'redux'; | ||
import * as projectActions from '../ducks/project'; | ||
|
||
const propTypes = { | ||
actions: PropTypes.object.isRequired, | ||
children: PropTypes.node, | ||
contents: PropTypes.object, | ||
params: PropTypes.shape({ | ||
project_id: PropTypes.string | ||
}) | ||
}; | ||
|
||
class ProjectDashboardContainer extends Component { | ||
|
||
componentDidMount() { | ||
const { actions } = this.props; | ||
actions.fetchProject(this.props.params.project_id); | ||
} | ||
|
||
render() { | ||
const project = this.props.project.data; | ||
return ( | ||
<div> | ||
<h2>Project Dashboard</h2> | ||
{React.cloneElement(this.props.children, { project })} | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
const mapStateToProps = (state) => ({ | ||
project: state.project | ||
}); | ||
const mapDispatchToProps = (dispatch) => ({ | ||
actions: bindActionCreators(projectActions, dispatch), | ||
}); | ||
|
||
ProjectDashboardContainer.propTypes = propTypes; | ||
export default connect( | ||
mapStateToProps, | ||
mapDispatchToProps, | ||
)(ProjectDashboardContainer); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
import apiClient from 'panoptes-client/lib/api-client'; | ||
|
||
// Action Types | ||
export const FETCH_PROJECT = 'FETCH_PROJECT'; | ||
export const FETCH_PROJECT_SUCCESS = 'FETCH_PROJECT_SUCCESS'; | ||
export const FETCH_PROJECT_ERROR = 'FETCH_PROJECT_ERROR'; | ||
export const FETCH_WORKFLOWS = 'FETCH_WORKFLOWS'; | ||
export const FETCH_WORKFLOWS_SUCCESS = 'FETCH_WORKFLOWS_SUCCESS'; | ||
export const FETCH_WORKFLOWS_ERROR = 'FETCH_WORKFLOWS_ERROR'; | ||
export const FETCH_TUTORIALS = 'FETCH_TUTORIALS'; | ||
export const FETCH_TUTORIALS_SUCCESS = 'FETCH_TUTORIALS_SUCCESS'; | ||
export const FETCH_TUTORIALS_ERROR = 'FETCH_TUTORIALS_ERROR'; | ||
|
||
// Reducer | ||
const initialState = { | ||
data: { | ||
tutorials: [], | ||
workflows: [] | ||
}, | ||
error: false, | ||
loading: false, | ||
}; | ||
|
||
const projectReducer = (state = initialState, action) => { | ||
switch (action.type) { | ||
case FETCH_PROJECT: | ||
return Object.assign({}, initialState, { loading: true }); | ||
case FETCH_PROJECT_SUCCESS: | ||
return Object.assign({}, state, { data: action.payload, loading: false }); | ||
case FETCH_PROJECT_ERROR: | ||
return Object.assign({}, state, { error: action.payload, loading: false }); | ||
case FETCH_WORKFLOWS: | ||
return Object.assign({}, state, { loading: true }); | ||
case FETCH_WORKFLOWS_SUCCESS: | ||
return Object.assign({}, state, { | ||
data: Object.assign(state.data, { workflows: action.payload }), | ||
loading: false | ||
}); | ||
case FETCH_TUTORIALS: | ||
return Object.assign({}, state, { loading: true }); | ||
case FETCH_TUTORIALS_SUCCESS: | ||
return Object.assign({}, state, { | ||
data: Object.assign(state.data, { tutorials: action.payload }), | ||
loading: false | ||
}); | ||
default: | ||
return state; | ||
} | ||
}; | ||
|
||
// Action Creators | ||
const fetchProject = (id) => { | ||
return (dispatch) => { | ||
dispatch({ | ||
type: FETCH_PROJECT, | ||
}); | ||
const query = { | ||
id, | ||
current_user_roles: ['owner', 'translator'], | ||
include: ['workflows'] | ||
}; | ||
apiClient.type('projects').get(query) | ||
.then(([project]) => { | ||
project.workflows = []; | ||
dispatch(fetchWorkflows(project)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think dispatching multiple actions within a dispatch call isn't recommended. That might lead to unnecessary calls to store.dispatch. There are ways for batching actions I'm reading up about. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Actually, we're using a middleware, whose point is to accommodate dispatching actions with actions. Only the readability concern remains, but no biggie. |
||
dispatch(fetchTutorials(project)) | ||
dispatch({ | ||
type: FETCH_PROJECT_SUCCESS, | ||
payload: project, | ||
}); | ||
}); | ||
}; | ||
}; | ||
|
||
function fetchWorkflows(project) { | ||
return (dispatch) => { | ||
dispatch({ | ||
type: FETCH_WORKFLOWS, | ||
}); | ||
apiClient.type('workflows').get(project.links.workflows) | ||
.then((workflows) => { | ||
dispatch({ | ||
type: FETCH_WORKFLOWS_SUCCESS, | ||
payload: workflows, | ||
}); | ||
}); | ||
}; | ||
} | ||
|
||
function fetchTutorials(project) { | ||
return (dispatch) => { | ||
dispatch({ | ||
type: FETCH_TUTORIALS, | ||
}); | ||
apiClient.type('tutorials').get({project_id: project.id}) | ||
.then((tutorials) => { | ||
dispatch({ | ||
type: FETCH_TUTORIALS_SUCCESS, | ||
payload: tutorials, | ||
}); | ||
}); | ||
}; | ||
} | ||
|
||
// Exports | ||
export default projectReducer; | ||
|
||
export { | ||
fetchProject | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This throws if
workflows
isundefined
.