Skip to content
Permalink
Browse files

React migration

  • Loading branch information
myhro committed Dec 22, 2019
1 parent b3de0ee commit 4864519472410875609f78387ae2518ee1d8e96b

This file was deleted.

This file was deleted.

This file was deleted.

Some generated files are not rendered by default. Learn more.

@@ -2,18 +2,20 @@
"browserslist": [
"Chrome >= 55"
],
"dependencies": {
"materialize-css": "^1.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"@cloudflare/wrangler": "^1.6.0",
"parcel-bundler": "^1.12.4",
"serve": "^11.2.0"
},
"scripts": {
"build": "parcel build index.html",
"build": "parcel build src/index.html",
"serve": "serve dist/",
"watch": "parcel watch *.html",
"watch": "parcel watch src/index.html",
"wrangler": "wrangler"
},
"dependencies": {
"materialize-css": "^1.0.0"
}
}
File renamed without changes.
BIN +9.25 KB site/src/favicon.png
Binary file not shown.
@@ -0,0 +1,13 @@
import React from 'react';

class Header extends React.Component {
render() {
return (
<h1 className="center light-blue-text">
Tem água hoje?
</h1>
);
}
}

export default Header;
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tem água hoje?</title>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
@@ -0,0 +1,104 @@
import React from 'react';
import ReactDOM from 'react-dom';

import { hasWater, waterStatus } from './backend';
import Header from './header';
import neighborhoods from './neighborhoods';
import Row from './row';
import Search from './search';
import Status from './status';

import '../node_modules/materialize-css/dist/css/materialize.min.css';
import '../node_modules/materialize-css/dist/js/materialize.min.js';

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color: '',
message: '',
query: '',
size: '',
};

this.handleAutocomplete = this.handleAutocomplete.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleFocus = this.handleFocus.bind(this);
}

async handleAutocomplete(value) {
let color = '';
let message = '';
let size = 'big';

this.loading();
let region = neighborhoods[value];
let status = await hasWater(region);
switch (status) {
case waterStatus.AVAILABLE:
color = 'green-text';
message = 'Sim';
break;
case waterStatus.UNAVAILABLE:
color = 'red-text';
message = 'Não';
break;
case waterStatus.OUTDATED:
color = 'orange-text';
message = 'Informações não disponíveis';
size = 'small';
break;
default:
color = 'red-text';
message = 'Erro ao verificar disponibilidade';
size = 'small';
}

this.setState({color, message, size});
}

handleChange(event) {
this.setState({
query: event.target.value,
});
}

handleFocus(event) {
this.setState({
message: '',
query: '',
});
}

loading() {
this.setState({
color: 'blue-text',
message: 'Carregando...',
size: 'small',
});
}

render() {
return (
<div className="container section">
<Header />
<Search
query={this.state.query}
onAutocomplete={this.handleAutocomplete}
onChange={this.handleChange}
onFocus={this.handleFocus}
/>
<Status
color={this.state.color}
message={this.state.message}
size={this.state.size}
/>
</div>
);
}
}

ReactDOM.render(
<App />,
document.getElementById('root')
);
@@ -1,4 +1,4 @@
export const neighborhoods = {
const neighborhoods = {
'Cidade Nova': 0,
'Vila Guilhermina': 0,
'Augusta Mota': 1,
@@ -155,6 +155,4 @@ export const neighborhoods = {
'Distrito Industrial': 5,
}

export function sortNeighborhoods(a, b, inputString) {
return a.localeCompare(b);
}
export default neighborhoods;
@@ -0,0 +1,11 @@
import React from 'react';

function Row(props) {
return (
<div className="row center">
{props.children}
</div>
);
}

export default Row;

0 comments on commit 4864519

Please sign in to comment.
You can’t perform that action at this time.