Merge pull request #68 from alDuncanson/feature/developers-in-about

Feature/developers in about
This commit is contained in:
Alex Duncanson 2018-12-10 19:01:56 -05:00 committed by GitHub
commit fa84b6ce71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 237 additions and 164 deletions

12
package-lock.json generated
View File

@ -12513,9 +12513,9 @@
}
},
"react-cookie": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.7.tgz",
"integrity": "sha512-c4lGOqIPC54kUocE7kbuqZNeIdXtZGzXQMA7BSWhaJ/5tWeoW5fJ7mF/pR+rU5fYDF9kktTHCIbovwSsNYblOg==",
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.8.tgz",
"integrity": "sha512-Gdop2Cf2pBFA0r4L9l5DRghKsPVMNKRM3x2aeyJ4JSaENpWWPP4v9LJvvtxXs3AboOGCuMj19oUw04Z9cVQQTg==",
"requires": {
"@types/hoist-non-react-statics": "^3.0.1",
"hoist-non-react-statics": "^3.0.0",
@ -12523,9 +12523,9 @@
},
"dependencies": {
"hoist-non-react-statics": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.0.tgz",
"integrity": "sha512-3IascCRfaEkbmHjJnUxWSspIUE1okLPjGTMVXW8zraUo1t3yg1BadKAxAGILHwgoBzmMnzrgeeaDGBvpuPz6dA==",
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz",
"integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==",
"requires": {
"react-is": "^16.3.2"
}

View File

@ -17,7 +17,7 @@
"material-ui-icons": "^1.0.0-beta.36",
"moment": "^2.22.2",
"react": "^16.5.1",
"react-cookie": "^3.0.7",
"react-cookie": "^3.0.8",
"react-dom": "^16.5.1",
"react-image-gallery": "^0.8.12",
"react-quiz-component": "0.2.0",

View File

@ -1,17 +1,17 @@
import React, { Component } from 'react';
import flamelinkApp from '../../utilities/flamelink.js';
import Grid from '@material-ui/core/Grid';
import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations';
class FlameLinkCollection extends Component {
constructor() {
super();
constructor(props) {
super(props);
this.state = {
schemaContent: '',
}
flamelinkApp.content.get(global.schemaName)
flamelinkApp.content.get(this.props.schemaName)
.then(result => this.setState({
schemaContent: result
}))
@ -21,8 +21,13 @@ class FlameLinkCollection extends Component {
var arr2 = [];
var collectionInfo = [schemaData, this.state.schemaContent];
for (var val in this.state.schemaContent) {
if ( this.state.schemaContent[val].hasOwnProperty('order') ) {
arr2[this.state.schemaContent[val]['order']] = val;
}
else{
arr2.push(val);
}
}
return arr2.map(this.getCollectionComponentInfo, collectionInfo);
}
@ -31,6 +36,7 @@ class FlameLinkCollection extends Component {
for (var val in this[0]) {
arr3.push(val);
}
return <FlameLinkCollectionComponentCreations schemaData={this[0]} schemaContent={this[1][num]} arr={arr3} key={num} />
}
@ -47,9 +53,9 @@ class FlameLinkCollection extends Component {
render() {
return (
<div>
<Grid container>
{this.getCollectionContent(this.props.schemaData)}
</div>
</Grid>
);
}
}

View File

@ -1,6 +1,19 @@
import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import FlameLinkCollectionStructure from './FlameLinkCollectionStructure';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
root: {
...theme.mixins.gutters(),
margin: theme.spacing.unit * 2,
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
width: '100%'
},
});
class FlameLinkCollectionComponentCreations extends Component {
@ -10,16 +23,26 @@ class FlameLinkCollectionComponentCreations extends Component {
}
createCollectionComponents(num) {
return <FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
return (
<FlameLinkCollectionStructure schemaData={this[0]} schemaContent={this[1]} field={this[0][num]} type={this[0][num].type} key={this[0][num].key} />
);
}
render() {
const { classes } = this.props;
return (
<Paper className={classes.root} elevation={4}>
<Grid container>
{this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)}
</Grid>
</Paper>
);
}
}
export default FlameLinkCollectionComponentCreations;
FlameLinkCollectionComponentCreations.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(FlameLinkCollectionComponentCreations);

View File

@ -15,16 +15,14 @@ const styles = theme => ({
});
class FlameLinkCollectionStructure extends Component {
constructor() {
super();
global.mediaID = '';
this.state = {
state = {
schemaContent: '',
}
flamelinkApp.content.get(global.schemaName)
componentDidMount() {
global.mediaID = '';
flamelinkApp.content.get(this.props.schemaName)
.then(result => this.setState({
schemaContent: result
}))

View File

@ -26,8 +26,8 @@ class FlameLinkComponentCreations extends Component {
return <FlameLinkStructure schemaData={this} field={this[num]} type={this[num].type} key={this[num].key} />
}
createCollectionTypeSchemaComponents(schemaData){
return <FlameLinkCollection schemaData={schemaData} />
createCollectionTypeSchemaComponents = schemaData => {
return <FlameLinkCollection schemaName={this.props.schemaName} schemaData={schemaData} />
}
render() {

View File

@ -1,43 +1,89 @@
import React, { Component, Fragment } from 'react';
import FlameLinkComponentCreations from '../components/flamelink/FlameLinkComponentCreations';
import flamelinkApp from '../utilities/flamelink.js';
import PropTypes from 'prop-types';
import { Typography } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const styles = theme => ({
header: {
paddingRight: 20,
paddingLeft: 20,
paddingTop: 20,
},
});
class About extends Component {
constructor() {
super();
global.schemaName = 'martenAbout';
this.state = {
schemaDetails: '',
schemaType: '',
}
flamelinkApp.schemas.getFields(global.schemaName, { fields: [ 'title', 'key', 'type', 'gridColumns', 'description', 'options' ] })
.then(result => this.setState({
schemaDetails: result
}))
flamelinkApp.schemas.get(global.schemaName)
.then(result => this.setState({
schemaType: result.type
}))
state = {
summarySchemaName: 'martenAboutSummary',
researcherSchemaName: 'martenAbout',
developerSchemaName: 'martenAboutDevelopers',
summarySchemaDetails: '',
summarySchemaType: '',
researcherSchemaDetails: '',
researcherSchemaType: '',
developerSchemaDetails: '',
developerSchemaType: ''
}
componentDidMount() {
document.title = 'Marten Tracker | About';
// Pulling in schema details for summary
flamelinkApp.schemas.getFields(this.state.summarySchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
.then(result => this.setState({
summarySchemaDetails: result
}))
flamelinkApp.schemas.get(this.state.summarySchemaName)
.then(result => this.setState({
summarySchemaType: result.type
}))
// Pulling in schema details for researchers
flamelinkApp.schemas.getFields(this.state.researcherSchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
.then(result => this.setState({
researcherSchemaDetails: result
}))
flamelinkApp.schemas.get(this.state.researcherSchemaName)
.then(result => this.setState({
researcherSchemaType: result.type
}))
// Pulling in schema details for developers
flamelinkApp.schemas.getFields(this.state.developerSchemaName, { fields: ['title', 'key', 'type', 'gridColumns', 'description', 'options'] })
.then(result => this.setState({
developerSchemaDetails: result
}))
flamelinkApp.schemas.get(this.state.developerSchemaName)
.then(result => this.setState({
developerSchemaType: result.type
}))
}
render() {
const { classes } = this.props;
return (
<div>
<Fragment>
<FlameLinkComponentCreations schemaDetails = {this.state.schemaDetails} schemaType = {this.state.schemaType}/>
<Typography variant="display1" className={classes.header}>Introduction</Typography>
<FlameLinkComponentCreations schemaDetails={this.state.summarySchemaDetails} schemaType={this.state.summarySchemaType} schemaName={this.state.summarySchemaName} />
<Typography variant="display1" className={classes.header}>Researchers</Typography>
<FlameLinkComponentCreations schemaDetails={this.state.researcherSchemaDetails} schemaType={this.state.researcherSchemaType} schemaName={this.state.researcherSchemaName} />
<Typography variant="display1" className={classes.header}>Developers</Typography>
<FlameLinkComponentCreations schemaDetails={this.state.developerSchemaDetails} schemaType={this.state.developerSchemaType} schemaName={this.state.developerSchemaName} />
</Fragment>
</div>
);
}
}
export default About;
About.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(About);