git clone git@gist.github.com:7ac0d01dc7fdbecaab69.git && cd 7ac0d01dc7fdbecaab69npm installnpm starthttp://localhost:8000 in your browserExpected: models list will have one item
Actual: models list wasn't updated
| export function projects() { | |
| return Promise.resolve([ | |
| { | |
| "id": "55d1e6d2100d2b4ed13079e6", | |
| "projectName": "diabetes", | |
| "fileName": "10kDiabetes.csv", | |
| "created": "2015-08-17T13:51:15.659095Z", | |
| }, | |
| { | |
| "id": "554a0d6f100d2b601be85c93", | |
| "projectName": "good fastiron", | |
| "fileName": "fastiron-sample-500.csv", | |
| "created": "2015-05-06T12:47:45.113661Z", | |
| } | |
| ]); | |
| } | |
| export function models(projectId) { | |
| return Promise.resolve([ | |
| { | |
| "id": "55f7c0ed100d2b516f34d472", | |
| "modelType": "Decision Tree Classifier (Gini)", | |
| "samplePct": 50 | |
| } | |
| ]); | |
| } |
| <!doctype html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <main></main> | |
| <script src="bundle.js"></script> | |
| </body> | |
| </html> |
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import Transmit from 'react-transmit'; | |
| import * as API from './api'; | |
| function ProjectItem({project, onSelect}) { | |
| return ( | |
| <li onClick={() => onSelect(project)}> | |
| <p>{project.projectName}</p> | |
| <p>{project.fileName}</p> | |
| <p>{project.created}</p> | |
| </li> | |
| ); | |
| } | |
| function ModelItem({model, onSelect}) { | |
| return ( | |
| <li onClick={() => onSelect(model)}> | |
| <p>{model.modelType}</p> | |
| <p>{model.samplePct}</p> | |
| </li> | |
| ); | |
| } | |
| function ProjectsList({projects, onSelect}) { | |
| return ( | |
| <ul> | |
| {projects.map(project => <ProjectItem key={project.id} project={project} onSelect={onSelect} />)} | |
| </ul> | |
| ); | |
| } | |
| function ModelsList({models, onSelect}) { | |
| return ( | |
| <ul> | |
| {models.map(model => <ModelItem key={model.id} model={model} onSelect={onSelect} />)} | |
| </ul> | |
| ); | |
| } | |
| var ProjectsContainer = Transmit.createContainer(ProjectsList, { | |
| fragments: { | |
| projects() { | |
| return API.projects(); | |
| } | |
| } | |
| }); | |
| var ModelsContainer = Transmit.createContainer(ModelsList, { | |
| initialVariables: { projectId: null }, | |
| fragments: { | |
| models({projectId}) { | |
| return projectId ? API.models(projectId) : Promise.resolve([]); | |
| } | |
| } | |
| }); | |
| var App = React.createClass({ | |
| getInitialState() { | |
| return { | |
| projectId: null, | |
| modelId: null | |
| }; | |
| }, | |
| selectProject(projectId) { | |
| this.setState({ projectId }); | |
| }, | |
| selectModel(modelId) { | |
| this.setState({ modelId }); | |
| }, | |
| render() { | |
| var {projectId, modelId} = this.state; | |
| return ( | |
| <div> | |
| <section style={{height: '200px', overflow: 'scroll', outline: '1px solid gray'}}> | |
| <h2>Projects</h2> | |
| <ProjectsContainer onSelect={project => this.selectProject(project.id)} /> | |
| </section> | |
| <section style={{height: '200px', overflow: 'scroll', outline: '1px solid gray'}}> | |
| <h2>Models</h2> | |
| <ModelsContainer variables={{projectId}} onSelect={model => this.selectModel(model.id)} /> | |
| </section> | |
| </div> | |
| ); | |
| } | |
| }); | |
| ReactDOM.render(<App />, document.querySelector('main')); |
| { | |
| "name": "transmit-demo", | |
| "scripts": { | |
| "start": "http-server -p 8000 --cors & watchify -e index.js -t babelify -o bundle.js -d -v" | |
| }, | |
| "dependencies": { | |
| "react": "~0.14.0-rc1", | |
| "react-dom": "~0.14.0-rc1", | |
| "react-transmit": "~3.0.6" | |
| }, | |
| "devDependencies": { | |
| "babelify": "~6.3.0", | |
| "http-server": "~0.8.4", | |
| "watchify": "~3.4.0" | |
| } | |
| } |