Browse Source

fetch data!

pull/1/head
Angelo DiNardi 3 years ago
parent
commit
90c0634d95
  1. 2
      .env.development
  2. 64
      app.jsx
  3. 2
      app.py
  4. 1
      requirements.txt

2
.env.development

@ -1 +1 @@ @@ -1 +1 @@
API_HOST="localhost:5000"
API_HOST="//localhost:5000"

64
app.jsx

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
// @flow
import React from "react";
import * as React from "react";
import ReactDOM from "react-dom";
import { StyleSheet, css } from "aphrodite";
import "bootstrap/dist/css/bootstrap.css";
@ -7,6 +7,9 @@ import Form from "react-bootstrap/Form"; @@ -7,6 +7,9 @@ import Form from "react-bootstrap/Form";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "whatwg-fetch";
const API_HOST = process.env.API_HOST || "";
const species = [
{
@ -69,19 +72,49 @@ const species = [ @@ -69,19 +72,49 @@ const species = [
},
];
const Cell = props => (
const Cell = (props: {styles?: StyleSheet, children: React.Node}) => (
<div className={css([styles.cell, props.styles])}>
{props.children}
</div>
);
const HeaderInfoCell = props => (
const HeaderInfoCell = (props: {styles?: {}, children: React.Node}) => (
<div className={css([styles.headerInfoCell, props.styles])}>
{props.children}
</div>
);
class App extends React.Component {
type State = {|
colonies: Array<{
id: number,
name: string,
}>,
|};
class App extends React.Component<{}, State> {
constructor(props) {
super(props);
this.state = {
colonies: [],
};
}
async loadColonies() {
const response = await fetch(`${API_HOST}/data/colonies`);
console.log(response);
const data = await response.json();
console.log(data);
this.setState({
colonies: data.colonies,
});
}
componentDidMount() {
this.loadColonies();
}
render() {
let speciesCounter = 3;
@ -109,6 +142,10 @@ class App extends React.Component { @@ -109,6 +142,10 @@ class App extends React.Component {
return locations;
})();
const {
colonies,
} = this.state;
return (
<Container>
<div className="text-center">
@ -125,13 +162,17 @@ class App extends React.Component { @@ -125,13 +162,17 @@ class App extends React.Component {
Colony ID:
</Form.Label>
<Col>
<Form.Control inline type="text" id="colony-id" />
<Form.Control as="select" id="colony-id">
{colonies.map(colony => (
<option key={colony.id} value={colony.id}>{colony.name}</option>
))}
</Form.Control>
</Col>
<Form.Label column sm="auto" htmlFor="datasheet-date">
Date:
</Form.Label>
<Col>
<Form.Control inline type="date" id="datasheet-date" />
<Form.Control type="date" id="datasheet-date" />
</Col>
</Form.Group>
@ -290,6 +331,7 @@ class App extends React.Component { @@ -290,6 +331,7 @@ class App extends React.Component {
{hepNests.map(item =>
<HepNestRow
key={`hep-nest-row-${item}`}
number={item}
/>,
)}
@ -336,7 +378,7 @@ class App extends React.Component { @@ -336,7 +378,7 @@ class App extends React.Component {
<Cell>Comments</Cell>
{guteNests.map(item =>
<GuteNestRow />,
<GuteNestRow key={`gite-nest-row${item}`}/>,
)}
</div>
@ -349,7 +391,7 @@ class App extends React.Component { @@ -349,7 +391,7 @@ class App extends React.Component {
<Cell>Location: provide description for all subcolonies listed above.</Cell>
<Cell>Included on map?</Cell>
{guteNestLocations.map(item => <GuteNestLocationRow />)}
{guteNestLocations.map(item => <GuteNestLocationRow key={`gute-nest-location-row-${item}`}/>)}
</div>
</Container>
);
@ -545,4 +587,8 @@ const styles = StyleSheet.create({ @@ -545,4 +587,8 @@ const styles = StyleSheet.create({
});
var mountNode = document.getElementById("app");
ReactDOM.render(<App />, mountNode);
if (!mountNode) {
console.error("missing mount node");
} else {
ReactDOM.render(<App />, mountNode);
}

2
app.py

@ -1,4 +1,5 @@ @@ -1,4 +1,5 @@
from flask import Flask, redirect, render_template
from flask_cors import cross_origin, CORS
import os
from pathlib import Path
import psycopg2
@ -11,6 +12,7 @@ app = Flask(__name__, template_folder='dist/') @@ -11,6 +12,7 @@ app = Flask(__name__, template_folder='dist/')
app.config['SECRET_KEY'] = SECRET_KEY
if app.debug:
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
CORS(app)
csrf = CSRFProtect(app)
conn = psycopg2.connect(DATABASE_URL, sslmode='require')

1
requirements.txt

@ -1,5 +1,6 @@ @@ -1,5 +1,6 @@
Click==7.0
Flask==1.1.1
Flask-Cors==3.0.8
Flask-WTF==0.14.2
gunicorn==19.9.0
itsdangerous==1.1.0

Loading…
Cancel
Save