Evil

Author: leonardomleitao

my-money-app/frontend/src/billingCycle/billingCycle.jsx

@@ -10,6 +10,7 @@ import TabsContent from '../common/tab/tabsContent'
 import TabHeader from '../common/tab/tabHeader'
 import TabContent from '../common/tab/tabContent'
 import { selectTab, showTabs } from '../common/tab/tabActions'
+import List from './billingCycleList'
 
 class BillingCycle extends Component {
 
@@ -31,7 +32,9 @@ class BillingCycle extends Component {
                             <TabHeader label='Excluir' icon='trash-o' target='tabDelete' />
                         </TabsHeader> 
                         <TabsContent> 
-                            <TabContent id='tabList'><h1>Lista</h1></TabContent>
+                            <TabContent id='tabList'>
+                                <List />
+                            </TabContent>
                             <TabContent id='tabCreate'><h1>Incluir</h1></TabContent>
                             <TabContent id='tabUpdate'><h1>Alterar</h1></TabContent>
                             <TabContent id='tabDelete'><h1>Excluir</h1></TabContent>

my-money-app/frontend/src/billingCycle/billingCycleActions.js

@@ -0,0 +1,10 @@
+import axios from 'axios'
+const BASE_URL = 'http://localhost:3003/api'
+
+export function getList() {
+    const request = axios.get(`${BASE_URL}/billingCycles`)
+    return {
+        type: 'BILLING_CYCLES_FETCHED',
+        payload: request
+    }
+}

my-money-app/frontend/src/billingCycle/billingCycleList.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { getList } from './billingCycleActions'
+
+class BillingCycleList extends Component {
+
+    componentWillMount() {
+        this.props.getList()
+    }
+
+    renderRows() {
+        const list = this.props.list || []
+        return list.map(bc => (
+            <tr key={bc._id}>
+                <td>{bc.name}</td>
+                <td>{bc.month}</td>
+                <td>{bc.year}</td>
+            </tr>
+        ))
+    }
+
+    render() {
+        return (
+            <div>
+                <table className='table'>
+                    <thead>
+                        <tr>
+                            <th>Nome</th>
+                            <th>Mês</th>
+                            <th>Ano</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {this.renderRows()}
+                    </tbody>
+                </table>
+            </div>
+        )
+    }
+}
+
+const mapStateToProps = state => ({list: state.billingCycle.list})
+const mapDispatchToProps = dispatch => bindActionCreators({getList}, dispatch)
+export default connect(mapStateToProps, mapDispatchToProps)(BillingCycleList)

my-money-app/frontend/src/billingCycle/billingCycleReducer.js

@@ -0,0 +1,10 @@
+const INITIAL_STATE = {list: []}
+
+export default (state = INITIAL_STATE, action) => {
+    switch (action.type) {
+        case 'BILLING_CYCLES_FETCHED':
+            return { ...state, list: action.payload.data }
+        default:
+            return state
+    }
+}

my-money-app/frontend/src/main/reducers.js

@@ -2,10 +2,12 @@ import { combineReducers } from 'redux'
 
 import DashboardReducer from '../dashboard/dashboardReducer'
 import TabReducer from '../common/tab/tabReducer'
+import BillingCycleReducer from '../billingCycle/billingCycleReducer'
 
 const rootReducer = combineReducers({
     dashboard: DashboardReducer,
-    tab: TabReducer
+    tab: TabReducer,
+    billingCycle: BillingCycleReducer
 })
 
 export default rootReducer