Added a better demo displaying how our app communicates with Flamelink Schemas and displays schema details in the right order.

This commit is contained in:
ajmaley 2018-10-08 15:41:05 -04:00
parent e427e3f702
commit e7052dfb5b
3 changed files with 76 additions and 9 deletions

View File

@ -1,14 +1,31 @@
import { Component } from 'react';
import React, { Component, Fragment } from 'react';
import Grid from '@material-ui/core/Grid';
import flamelinkApp from '../flamelink.js';
import Layout from './Layout';
class Flamelink extends Component {
constructor() {
super();
this.state = {
schemaDetails: ''
}
}
componentDidMount() {
// fetch the project name, once it retrieves resolve the promsie and update the state.
flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key' ] })
.then(result => this.setState({
schemaDetails: result
}))
}
render() {
//Grabs data from text field in entry from the martenSchemaDemo
flamelinkApp.content.get('martenSchemaDemo')
.then(flameData => document.getElementById("flamelinkDemo").innerHTML = flameData.field_1538162314419);
return(null);
return(
<Fragment>
<Layout schemaDetails = {this.state.schemaDetails}/>
</Fragment>
);
}
}

49
src/components/Layout.js Normal file
View File

@ -0,0 +1,49 @@
import React, { Component, Fragment } from 'react';
import flamelinkApp from '../flamelink.js';
class Layout extends Component {
constructor() {
super();
this.state = {
contentDetails: ''
}
}
getData(schemaData){
for (var val in this.props.schemaDetails){
this.getMoreData(this.props.schemaDetails[val]);
}
}
getMoreData(moreData){
var tArray = document.createElement("H1");
var kArray = document.createElement("P");
this.getTitle(moreData.title, tArray);
this.getKey(moreData.key, kArray);
}
getTitle(title, arr){
var t = document.createTextNode(title);
arr.appendChild(t);
document.getElementById("demo").appendChild(arr);
}
getKey(key, arr){
var k = document.createTextNode(key);
arr.appendChild(k);
document.getElementById("demo").appendChild(arr);
}
render() {
return(
<div>
<p id="demo">{this.getData(this.props)}</p>
</div>
);
}
}
export default Layout;

View File

@ -2,16 +2,17 @@ import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
import Flamelink from '../components/Flamelink';
class Info extends Component {
render() {
return (
<div>
<Flamelink flamelinkApp={this.props.flamelinkApp}/>
<Typography variant='display1' align='center' gutterBottom>
Info
</Typography>
<p id="flamelinkDemo"></p>
<Flamelink/>
</div>
);