Skip to content

Commit

Permalink
display basic item
Browse files Browse the repository at this point in the history
  • Loading branch information
hobofan committed Aug 28, 2016
1 parent a200ff5 commit 33da837
Show file tree
Hide file tree
Showing 8 changed files with 315 additions and 70 deletions.
2 changes: 1 addition & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@
// within webpack helps prevent unexpected errors.
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-runtime"]
"plugins": ["transform-runtime", "transform-async-to-generator"]
}
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
"babel-cli": "^6.5.1",
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"babel-plugin-transform-async-to-generator": "^6.8.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-polyfill": "^6.9.0",
"babel-preset-es2015": "^6.3.13",
Expand All @@ -105,15 +106,17 @@
"koa-convert": "^1.2.0",
"koa-proxy": "^0.6.0",
"koa-static": "^2.0.0",
"material-ui": "^0.15.4",
"node-sass": "^3.7.0",
"normalize.css": "^4.1.1",
"postcss-loader": "^0.9.0",
"react": "^15.0.0",
"react": "^15.3.1",
"react-addons-update": "^15.1.0",
"react-dom": "^15.0.0",
"react-redux": "^4.0.0",
"react-router": "^2.2.0",
"react-router-redux": "^4.0.0",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.0.0",
"redux-thunk": "^2.0.0",
"reselect": "^2.5.0",
Expand Down
56 changes: 56 additions & 0 deletions src/components/Wikidata/Claim.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react'

// import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import LinearProgress from 'material-ui/LinearProgress';

// import classes from './Claim.scss'

export class Claim extends React.Component {
render() {
const entities = this.props.entities;
const main_property = this.props.claims[0].mainsnak.property;

const main_property_fetch_state = this.props.entity_fetch_states[main_property];
const main_property_fetching = (main_property_fetch_state === 'FETCHING');
const main_property_error = (main_property_fetch_state === 'ERROR');

return (
<Card>
<CardTitle
title={(main_property_fetching ?
'Loading...' :
main_property_error ?
'Error while fetching :(' :
entities[main_property].label)}
subtitle={"Property - " + (main_property)} />
{
(( main_property_fetching ) ?
<LinearProgress mode="indeterminate" /> : '' )
}
<CardText>
<label style={{color: '#C3C3C3'}}>
{
(( main_property_fetching ) ?
'Loading...' :
main_property_error ?
'---' :
'TODO: show some claim information' )
}
</label>
</CardText>
</Card>
);
}
}

Claim.propTypes = {
claims: React.PropTypes.array.isRequired,

entities: React.PropTypes.object.isRequired,
entity_fetch_states: React.PropTypes.object.isRequired,
}

export default Claim
110 changes: 69 additions & 41 deletions src/components/Wikidata/Wikidata.js
Original file line number Diff line number Diff line change
@@ -1,54 +1,82 @@
import React from 'react'

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import LinearProgress from 'material-ui/LinearProgress';

import classes from './Wikidata.scss'
import Claim from './Claim'

export const Wikidata = (props) => (
<div>
<h2 className={classes.wikidataContainer}>
Wikidata:
{' '}
<span className={classes['wikidata--green']}>
{props.wikidata}
</span>
</h2>
<select onChange={props.handleLanguageChanged.bind()}>
<option value="en-gb">British English</option>
<option value="de">German</option>
</select>
<br/>
<br/>
<button className='btn btn-default' onClick={props.fetchEntity.bind(this, 'Q42')}>
Douglas Adams
</button>
{' '}
<button className='btn btn-default' onClick={props.fetchEntity.bind(this, 'Q43')}>
Turkey
</button>
<p>
Label: {(props.entities[props.current] || { label: "-"} ).label}.
</p>
<p>Statements:</p>
{
((props.entities[props.current]) ?
(Object.values(props.entities[props.current].claims).map((claim) => (
<div style = {{
"border-style": "solid",
"border-color": "#4FC3F7"
}} >
<p>Property <small>({(claim[0].mainsnak.property)})</small></p>
</div>
)))
: 'No claims'
)
export class Wikidata extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.current !== this.props.current) {
for (var unfetched of nextProps.unfetched_entities) {
this.props.fetchEntity(unfetched)
}
}
</div>
)
}

render() {
return (
<MuiThemeProvider>
<div style={{
"maxWidth": "70%",
"margin": "auto"
}}>
<h2 className={classes.wikidataContainer}>
Wikidata:
{' '}
<span className={classes['wikidata--green']}>
{this.props.wikidata}
</span>
</h2>
<SelectField value={this.props.language} onChange={this.props.handleLanguageChanged.bind()}>
<MenuItem value="en-gb" primaryText="British English" />
<MenuItem value="de" primaryText="German" />
</SelectField>
<br/>
<br/>
<button className='btn btn-default' onClick={this.props.fetchCurrent.bind(this, 'Q42')}>
Douglas Adams
</button>
{' '}
<button className='btn btn-default' onClick={this.props.fetchCurrent.bind(this, 'Q43')}>
Turkey
</button>
<Card>
<CardTitle title={(this.props.entities[this.props.current] || { label: "-"} ).label} subtitle={"Item - " + (this.props.current || "?")} />
{/* TODO: show item description */}
<CardText>
{
((this.props.entities[this.props.current]) ?
(Object.values(this.props.entities[this.props.current].claims).map((claims) => (
<Claim claims={claims} entities={(this.props.entities)} entity_fetch_states={(this.props.entity_fetch_states)} />
)))
: 'No claims'
)
}
</CardText>
</Card>
</div>
</MuiThemeProvider>
);
}
}

Wikidata.propTypes = {
language: React.PropTypes.string,

current: React.PropTypes.string,
entities: React.PropTypes.object.isRequired,
entity_fetch_states: React.PropTypes.object.isRequired,

fetchEntity: React.PropTypes.func.isRequired,
handleLanguageChanged: React.PropTypes.func.isRequired
fetchCurrent: React.PropTypes.func.isRequired,
handleLanguageChanged: React.PropTypes.func.isRequired,

unfetched_entities: React.PropTypes.array,
}

export default Wikidata
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<title>React Redux Starter Kit</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -->
</head>
<body>
<div id="root" style="height: 100%"></div>
Expand Down
5 changes: 5 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { useRouterHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import createStore from './store/createStore'
import AppContainer from './containers/AppContainer'
import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

// ========================================================
// Browser History Setup
Expand Down
37 changes: 30 additions & 7 deletions src/routes/Wikidata/containers/WikidataContainer.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { createSelector } from 'reselect'
import { fetchEntity, handleLanguageChanged } from '../modules/wikidata'
import { fetchEntity, fetchCurrent, handleLanguageChanged } from '../modules/wikidata'
import { entitiesInItem } from '../modules/wikidata'

/* This is a container component. Notice it does not contain any JSX,
nor does it import React. This component is **only** responsible for
Expand All @@ -16,15 +17,18 @@ import Wikidata from 'components/Wikidata'

const mapActionCreators = {
fetchEntity,
fetchCurrent,
handleLanguageChanged
}


const mapStateToProps = (state) => ({
current: state.wikidata.current,
entities: getLocalizedEntities(state)
// entities: state.wikidata.entities
// wikidata: state.wikidata

entities: getContainedEntities(state),
entity_fetch_states: state.wikidata.entity_fetch_states,

unfetched_entities: state.wikidata.unfetched_entities,
})

/* Note: mapStateToProps is where you should use `reselect` to create selectors, ie:
Expand Down Expand Up @@ -55,12 +59,31 @@ export const getLocalizedEntities = createSelector(
var org_entity = org_entities[entity_id];
var entity = Object.assign({}, org_entity);

console.log(language);
entity.labels = undefined;
entity.label = org_entity['labels'][language]['value'];
entity.label = (org_entity['labels'][language] || { value: '<No translation availabe>' })['value'];

entities[entity_id] = entity;
console.log(entity);
}

return entities;
}
)

export const getContainedEntities = createSelector(
[
state => state.wikidata.current,
getLocalizedEntities,
],
(current, org_entities) => {
var contained_entities = entitiesInItem(org_entities[current]);
contained_entities.push(current);
var entities = {};
for(var entity_id in org_entities) {
if (contained_entities.includes(entity_id)) {
var org_entity = org_entities[entity_id];
var entity = Object.assign({}, org_entity);
entities[entity_id] = entity;
}
}

return entities;
Expand Down
Loading

0 comments on commit 33da837

Please sign in to comment.