From 3feec479f2eeb82a05c908ec8071df9310680b70 Mon Sep 17 00:00:00 2001 From: wildscotsmen Date: Mon, 10 Dec 2018 13:58:01 -0500 Subject: [PATCH] Initial feature commit. --- .../flamelink/FlameLinkCollection.js | 47 +++-- .../flamelink/FlameLinkCollectionStructure.js | 180 +++++++++--------- .../flamelink/FlameLinkComponentCreations.js | 28 +-- src/pages/About.js | 81 +++++--- 4 files changed, 180 insertions(+), 156 deletions(-) diff --git a/src/components/flamelink/FlameLinkCollection.js b/src/components/flamelink/FlameLinkCollection.js index afc8312..5ede9a0 100644 --- a/src/components/flamelink/FlameLinkCollection.js +++ b/src/components/flamelink/FlameLinkCollection.js @@ -1,52 +1,49 @@ -import React, { Component} from 'react'; +import React, { Component } from 'react'; import flamelinkApp from '../../utilities/flamelink.js'; import FlameLinkCollectionComponentCreations from './FlameLinkCollectionComponentCreations'; class FlameLinkCollection extends Component { - constructor() { - super(); - + state = { + schemaContent: '', + } - this.state = { - schemaContent: '', - } + componentDidMount() { + flamelinkApp.content.get(this.props.schemaName) + .then(result => this.setState({ + schemaContent: result + })) + } - flamelinkApp.content.get(global.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){ + for (var val in this.state.schemaContent) { arr2[this.state.schemaContent[val]['order']] = 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/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..f565d2e 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -1,43 +1,72 @@ 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 = { + researcherSchemaName: 'martenAbout', + developerSchemaName: 'martenAboutDev', + researcherSchemaDetails: '', + researcherSchemaType: '', + developerSchemaDetails: '', + developerSchemaType: '' } componentDidMount() { document.title = 'Marten Tracker | About'; + + + // 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 ( -
- - - -
+ + Researchers + + Developers + + ); } } -export default About; +About.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(About);