Show date, inflow and outflow in transaction item

- Add styles to the title and subtitle
- Update proptypes (+2 squashed commits)
- Get the date instead of description from firebase

src/components/TransactionList/TransactionList.js

@@ -1,6 +1,7 @@
 import styles from './styles.js'
 
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {
   View,
   ScrollView,
@@ -14,14 +15,8 @@ import {
 import TransactionListItem from '../TransactionListItem'
 
 class TransactionList extends Component {
-  _renderListItem (item) {
-    return (
-      <Text>{item.transaction}</Text>
-    )
-  }
-
   render () {
-    const { transactions, handleEditTransaction, handleDeleteTransaction } = this.props
+    const { transactions } = this.props
 
     return (
       <View>
@@ -45,10 +40,12 @@ class TransactionList extends Component {
 }
 
 TransactionList.propTypes = {
-  transactions: React.PropTypes.arrayOf(
-    React.PropTypes.shape({
-      title: React.PropTypes.string.isRequired,
-      description: React.PropTypes.string
+  transactions: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      date: PropTypes.string.isRequired,
+      inflow: PropTypes.string.isRequired,
+      outflow: PropTypes.string.isRequired
     }).isRequired
   )
 }

src/components/TransactionListItem/TransactionListItem.js

@@ -1,7 +1,8 @@
 import styles from './styles.js'
 
 import React, { Component } from 'react'
-import { View } from 'react-native'
+import PropTypes from 'prop-types'
+import { View, Text } from 'react-native'
 import { ListItem } from 'react-native-elements'
 
 import TransactionListItemOptionsContainer from '../../containers/TransactionListItemOptionsContainer'
@@ -14,7 +15,7 @@ class TransactionListItem extends Component {
     }
   }
 
-  _toggleShowOptions () {
+  _toggleShowOptions() {
     if (this.state.showOptions) {
       this.setState({
         showOptions: false
@@ -26,27 +27,51 @@ class TransactionListItem extends Component {
     }
   }
 
+  renderTitle(title) {
+    return <Text style={styles.title}>{title}</Text>
+  }
+
+  renderSubtitle(date, inflow, outflow) {
+    const dateText = date ? <Text style={styles.date}>{date}</Text> : undefined
+    const inflowText = inflow ? <Text style={styles.inflow}>{inflow}</Text> : undefined
+    const outflowText = outflow ? <Text style={styles.outflow}>{outflow}</Text> : undefined
+
+    return (
+      <View style={styles.subtitle}>
+        {dateText}
+        {inflowText}
+        {outflowText}
+      </View>
+    )
+  }
+
   render() {
     const { item } = this.props
-    const { title, description } = item
+    const { title, date, inflow, outflow } = item
 
     return (
       <View>
         <ListItem
-          title={title}
-          subtitle={description}
-          onPress={this._toggleShowOptions.bind(this)}          
+          title={this.renderTitle(title)}
+          subtitle={this.renderSubtitle(date, inflow, outflow)}
+          onPress={this._toggleShowOptions.bind(this)}
+          hideChevron
         />
-        { this.state.showOptions && 
-        <TransactionListItemOptionsContainer item={item} />
+        {this.state.showOptions &&
+          <TransactionListItemOptionsContainer item={item} />
         }
       </View>
     )
   }
 }
 
 TransactionListItem.propTypes = {
-  title: React.PropTypes.string
+  item: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    date: PropTypes.string.isRequired,
+    inflow: PropTypes.string.isRequired,
+    outflow: PropTypes.string.isRequired
+  }).isRequired
 }
 
 export default TransactionListItem

src/components/TransactionListItem/styles.js

@@ -1,5 +1,27 @@
+import colors from '../../config/colors'
 import { StyleSheet } from 'react-native'
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+  subtitle: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  title: {
+    flex: 1,
+    fontSize: 20
+  },
+  date: {
+    flex: 1,
+    color: '#808080'
+  },
+  inflow: {
+    flex: 1,
+    color: colors.primary,
+  },
+  outflow: {
+    flex: 1,
+    color: '#ff0000',
+  }
+})
 
 export default styles

src/lib/firebase.js

@@ -51,11 +51,11 @@ export const getTransactionsFromFirebase = () => {
   return transactionsRef.once('value').then((snap) => {
     let transactions = []
     snap.forEach((transaction) => {
-      const { title, description, inflow, outflow } = transaction.val()
+      const { title, date, inflow, outflow } = transaction.val()
 
       transactions.push({
         title: title,
-        description: description,
+        date: date,
         inflow: inflow,
         outflow: outflow,
         _key: transaction.key