diff --git a/package-lock.json b/package-lock.json index 130377c..ae2271d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" } diff --git a/package.json b/package.json index af07e07..90499fb 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/flamelink/FlameLinkCollection.js b/src/components/flamelink/FlameLinkCollection.js index afc8312..228839c 100644 --- a/src/components/flamelink/FlameLinkCollection.js +++ b/src/components/flamelink/FlameLinkCollection.js @@ -1,55 +1,61 @@ -import React, { Component} from 'react'; +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 })) } - getCollectionContent(schemaData){ + getCollectionContent(schemaData) { var arr2 = []; var collectionInfo = [schemaData, this.state.schemaContent]; - for (var val in this.state.schemaContent){ - arr2[this.state.schemaContent[val]['order']] = val; + 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); } - getCollectionComponentInfo(num){ + getCollectionComponentInfo(num) { var arr3 = []; - for (var val in this[0]){ + for (var val in this[0]) { arr3.push(val); } + return } countProperties(obj) { - var count = 0; + var count = 0; - for(var prop in obj) { - if(obj.hasOwnProperty(prop)) - ++count; + for (var prop in obj) { + if (obj.hasOwnProperty(prop)) + ++count; + } + + return count; } - return count; -} - render() { - return( -
+ return ( + {this.getCollectionContent(this.props.schemaData)} -
+ ); } } diff --git a/src/components/flamelink/FlameLinkCollectionComponentCreations.js b/src/components/flamelink/FlameLinkCollectionComponentCreations.js index 1611c80..587913d 100644 --- a/src/components/flamelink/FlameLinkCollectionComponentCreations.js +++ b/src/components/flamelink/FlameLinkCollectionComponentCreations.js @@ -1,25 +1,48 @@ -import React, { Component} from 'react'; +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 { - createCollectionEntries(schemaData, schemaContent, arr){ + createCollectionEntries(schemaData, schemaContent, arr) { var collectionInfo = [schemaData, schemaContent]; return arr.map(this.createCollectionComponents, collectionInfo); } - createCollectionComponents(num){ - return + createCollectionComponents(num) { + return ( + + ); } render() { - return( + const { classes } = this.props; + + return ( + {this.createCollectionEntries(this.props.schemaData, this.props.schemaContent, this.props.arr)} + ); } } -export default FlameLinkCollectionComponentCreations; \ No newline at end of file +FlameLinkCollectionComponentCreations.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(FlameLinkCollectionComponentCreations); \ No newline at end of file diff --git a/src/components/flamelink/FlameLinkCollectionStructure.js b/src/components/flamelink/FlameLinkCollectionStructure.js index bed944f..2b5c4a2 100644 --- a/src/components/flamelink/FlameLinkCollectionStructure.js +++ b/src/components/flamelink/FlameLinkCollectionStructure.js @@ -1,4 +1,4 @@ -import React, { Component} from 'react'; +import React, { Component } from 'react'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import { withStyles } from '@material-ui/core/styles'; @@ -7,102 +7,100 @@ import FlameLinkImage from './FlameLinkImage'; import FlameLinkFieldSet from './FlameLinkFieldSet'; const styles = theme => ({ - flamelinkItem: { - paddingRight: 20, - paddingLeft: 20, - paddingTop: 20, - }, - }); + flamelinkItem: { + paddingRight: 20, + paddingLeft: 20, + paddingTop: 20, + }, +}); class FlameLinkCollectionStructure extends Component { - constructor() { - super(); - + state = { + schemaContent: '', + } + + componentDidMount() { global.mediaID = ''; - this.state = { - schemaContent: '', + flamelinkApp.content.get(this.props.schemaName) + .then(result => this.setState({ + schemaContent: result + })) + } + + getContent(content, field, key, type, description) { + if (type === 'text') { + if (description === 'h1') { + return ( + + {content[key]} + + ) + } + if (description === 'h2') { + return ( + + {content[key]} + + ) + } + if (description === 'h3') { + return ( + + {content[key]} + + ) + } + if (description === 'h4') { + return ( + + {content[key]} + + ) + } + if (description === 'h5') { + return ( + + {content[key]} + + ) + } + if (description === 'h6') { + return ( + + {content[key]} + + ) + } + else { + return ( + + {content[key]} + + ) + } } - - flamelinkApp.content.get(global.schemaName) - .then(result => this.setState({ - schemaContent: result - })) - } - - getContent(content, field, key, type, description){ - if (type === 'text'){ - if(description === 'h1'){ - return ( - - {content[key]} - - ) - } - if(description === 'h2'){ - return ( - - {content[key]} - - ) - } - if(description === 'h3'){ - return ( - - {content[key]} - - ) - } - if(description === 'h4'){ - return ( - - {content[key]} - - ) - } - if(description === 'h5'){ - return ( - - {content[key]} - - ) - } - if(description === 'h6'){ - return ( - - {content[key]} - - ) - } - else{ - return ( - - {content[key]} - - ) - } + if (type === 'textarea') { + return ( + + {content[key]} + + ) + } + if (type === 'media') { + for (var val in content[key]) { + global.mediaID = content[key][val]; + return } - if(type === 'textarea'){ - return ( - - {content[key]} - - ) + } + if (type === 'fieldset') { + if (content === '') { + return } - if (type === 'media'){ - for (var val in content[key]){ - global.mediaID = content[key][val]; - return - } - } - if (type === 'fieldset'){ - if(content === ''){ - return - } - else{ - return - } + else { + return } + } } render() { @@ -112,9 +110,9 @@ class FlameLinkCollectionStructure extends Component { const md = this.props.field.gridColumns.md; const sm = this.props.field.gridColumns.sm; const xs = this.props.field.gridColumns.xs; - return( + return ( - {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)} + {this.getContent(this.props.schemaContent, this.props.field, this.props.field.key, this.props.type, this.props.field.description)} ); } diff --git a/src/components/flamelink/FlameLinkComponentCreations.js b/src/components/flamelink/FlameLinkComponentCreations.js index 88ae4bf..d50d05d 100644 --- a/src/components/flamelink/FlameLinkComponentCreations.js +++ b/src/components/flamelink/FlameLinkComponentCreations.js @@ -1,40 +1,40 @@ -import React, { Component} from 'react'; +import React, { Component } from 'react'; import FlameLinkStructure from './FlameLinkStructure'; import FlameLinkCollection from './FlameLinkCollection'; import Grid from '@material-ui/core/Grid'; class FlameLinkComponentCreations extends Component { - - getSchemaFieldData(schemaData, schemaType){ + + getSchemaFieldData(schemaData, schemaType) { var arr = []; - for (var val in schemaData){ + for (var val in schemaData) { arr.push(val); } - if(schemaType === 'single'){ + if (schemaType === 'single') { return arr.map(this.createSingleTypeSchemaComponents, schemaData); } - if(schemaType === 'collection'){ + if (schemaType === 'collection') { return this.createCollectionTypeSchemaComponents(schemaData); } - else{ + else { return } } - createSingleTypeSchemaComponents(num){ + createSingleTypeSchemaComponents(num) { return } - createCollectionTypeSchemaComponents(schemaData){ - return + createCollectionTypeSchemaComponents = schemaData => { + return } render() { - return( - - {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)} - + return ( + + {this.getSchemaFieldData(this.props.schemaDetails, this.props.schemaType)} + ); } } diff --git a/src/pages/About.js b/src/pages/About.js index 88d18da..7010f52 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -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 ( -
- - - -
+ + Introduction + + Researchers + + Developers + + ); } } -export default About; +About.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(About);