diff --git a/unbrake/package.json b/unbrake/package.json
index 5a71f144..9aaf3174 100644
--- a/unbrake/package.json
+++ b/unbrake/package.json
@@ -9,7 +9,8 @@
"react-redux": "^6.0.1",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
- "redux": "^4.0.1"
+ "redux": "^4.0.1",
+ "recharts": "^1.5.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/unbrake/src/App.js b/unbrake/src/App.js
index 7e261ca4..893b9355 100644
--- a/unbrake/src/App.js
+++ b/unbrake/src/App.js
@@ -1,28 +1,21 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
+import Sum from './component/Sum';
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import Reducer from './reducers/index';
+import SimpleLineChart from './component/realtimechat'
-class App extends Component {
+
+export default class App extends React.Component {
render() {
return (
-
+
+
+
+
);
}
}
-export default App;
diff --git a/unbrake/src/actions/index.js b/unbrake/src/actions/index.js
new file mode 100644
index 00000000..50da05a1
--- /dev/null
+++ b/unbrake/src/actions/index.js
@@ -0,0 +1,5 @@
+export const add = (n1, n2) => ({
+ type: 'ADD', //Tipo da ação. Eu que escolho
+ n1,
+ n2
+})
\ No newline at end of file
diff --git a/unbrake/src/component/Result.js b/unbrake/src/component/Result.js
new file mode 100644
index 00000000..62e6e349
--- /dev/null
+++ b/unbrake/src/component/Result.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+class Result extends React.Component{
+ constructor(props){
+ super(props)
+ }
+
+
+render(){
+ return (
+ {this.props.sum}
+ )
+}
+}
+
+const mapStateToProps = state => {
+ return state.sum
+}
+
+//export default Result;
+export default connect(
+ mapStateToProps,
+)(Result)
+
+//export default Result;
diff --git a/unbrake/src/component/Sum.js b/unbrake/src/component/Sum.js
new file mode 100644
index 00000000..ae5e6150
--- /dev/null
+++ b/unbrake/src/component/Sum.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import Result from './Result';
+import { connect } from 'react-redux';
+import {add} from '../actions'
+
+
+class Sum extends React.Component {
+ constructor(props){
+ super(props);
+ this.state = {number1: '', number2: '', sum: ''}; //state: Estado interno. Um Json.
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleChange = this.handleChange.bind(this);
+
+ }
+
+ handleChange(event) {
+ if(event.target.name === "number1"){
+ this.setState({number1: event.target.value});
+ }
+ else{
+ this.setState({number2: event.target.value});
+ }
+ }
+
+ handleSubmit(event){
+ this.props.dispatch(add(this.state.number1, this.state.number2)) // Mandar uma ação para algum lugar
+ let sum = +this.state.number1 + +this.state.number2
+ this.setState({sum: sum});
+ event.preventDefault();
+
+ }
+ //connect: conecta meu componente ao reducer
+ render() {
+ return (
+
+
+
+
)
+
+ }
+}
+
+export default connect()(Sum);
+
+//export default Sum
diff --git a/unbrake/src/component/realtimechat.js b/unbrake/src/component/realtimechat.js
new file mode 100644
index 00000000..2e97e794
--- /dev/null
+++ b/unbrake/src/component/realtimechat.js
@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react';
+import {
+ LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+} from 'recharts';
+
+const data = [
+ {
+ A:500, V: 1000, F: 2000, amt: 3000, //Ponto A
+ },
+ {
+ A:600, V: 2000, F: 100, amt: 200,
+ },
+ {
+ A:400, V: 2000, F: 9800, amt: 2290,
+ },
+ /**{
+ cd:400, uv: 2780, pv: 3908, amt: 2000, Outros pontos
+ },
+ {
+ name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
+ },
+ {
+ name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
+ },
+ {
+ name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
+ },*/
+];
+
+export default class Example extends PureComponent {
+ static jsfiddleUrl = 'https://jsfiddle.net/alidingling/xqjtetw0/';
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/unbrake/src/reducers/index.js b/unbrake/src/reducers/index.js
new file mode 100644
index 00000000..dece1893
--- /dev/null
+++ b/unbrake/src/reducers/index.js
@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import sum from './sum'
+
+const Reducer = combineReducers({ //Agrupa os componentes
+ sum,
+})
+
+export default Reducer;
\ No newline at end of file
diff --git a/unbrake/src/reducers/sum.js b/unbrake/src/reducers/sum.js
new file mode 100644
index 00000000..a5efffaf
--- /dev/null
+++ b/unbrake/src/reducers/sum.js
@@ -0,0 +1,12 @@
+const sum = (state = {}, action) => { //Jeito de definir uma função
+ switch (action.type) {
+ case 'ADD':
+ console.log(state, action)
+ return {...state, sum: +action.n1 + +action.n2};
+
+ default:
+ return state
+ }
+}
+
+export default sum