GVSU/marten-application
GVSU
/
marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

Created Flamelink component to grab data from flamelink and sends data to the <p id="flamelinkDemo"> tag. Still need to firgure out how to grab all fields and display without hardcoding. 

Added my Flamelink instance to Main.js and added it as a prop for the Info component.
Info.js calls the Flamelink component and pushes the Flamelink instance to the Flamelink component as a prop.
This commit is contained in:
ajmaley 2018-10-04 18:35:36 -04:00
parent a144e9f805
commit 987c89837f
6 changed files with 2990 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2963
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -4,6 +4,9 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^3.1.0", "@material-ui/core": "^3.1.0",
"firebase": "^5.5.2",
"firebase-admin": "^6.0.0",
"flamelink": "^0.19.2",
"react": "^16.5.1", "react": "^16.5.1",
"react-dom": "^16.5.1", "react-dom": "^16.5.1",
"react-router": "^4.3.1", "react-router": "^4.3.1",

3
public/index.html
View File

@ -20,6 +20,9 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<!--<script>import flamelink from 'flamelink';</script>-->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>

14
src/components/Flamelink.js Normal file
View File

@ -0,0 +1,14 @@
import React, { Component } from 'react';
class Flamelink extends Component {
render() {
//Grabs data from text field in entry from the martenSchemaDemo
this.props.flamelinkApp.content.get('martenSchemaDemo')
.then(flameData => document.getElementById("flamelinkDemo").innerHTML = flameData.field_1538162314419);
return(null);
}
}
export default Flamelink;

12
src/components/Main.js
View File

@ -10,6 +10,7 @@ import Map from '../pages/Map';
import Quiz from '../pages/Quiz'; import Quiz from '../pages/Quiz';
import Sighting from '../pages/Sighting'; import Sighting from '../pages/Sighting';
import Info from '../pages/Info'; import Info from '../pages/Info';
import flamelink from 'flamelink';
function TabContainer(props) { function TabContainer(props) {
return ( return (
@ -30,6 +31,15 @@ const styles = theme => ({
}, },
}); });
const flamelinkApp = flamelink({
apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo",
authDomain: "marten-application.firebaseapp.com",
databaseURL: "https://marten-application.firebaseio.com",
projectId: "marten-application",
storageBucket: "marten-application.appspot.com",
messagingSenderId: "659856510832"
});
class SimpleTabs extends React.Component { class SimpleTabs extends React.Component {
state = { state = {
value: 0, value: 0,
@ -58,7 +68,7 @@ class SimpleTabs extends React.Component {
{value === 1 && <Sighting/>} {value === 1 && <Sighting/>}
{value === 2 && <Quiz/>} {value === 2 && <Quiz/>}
{value === 3 && <Map/>} {value === 3 && <Map/>}
{value === 4 && <Info/>} {value === 4 && <Info flamelinkApp={flamelinkApp}/>}
</div> </div>
); );
} }

7
src/pages/Info.js
View File

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