Skip to content
Permalink
Browse files

Add the expenselist component.

Don't forget that you need to create an index before this will work.
  • Loading branch information...
dusty-phillips committed Aug 27, 2018
1 parent b1abf4f commit b9a22cd679021470558c6122bce836388a84573b
Showing with 79 additions and 2 deletions.
  1. +2 −2 src/App.js
  2. +77 −0 src/components/ExpenseList.js
@@ -4,7 +4,7 @@ import { Provider } from "react-redux"
import store from "./redux/store"
import AuthButton from "./components/AuthButton"
import CategoryList from "./components/CategoryList"
import AddExpense from "./components/AddExpense"
import ExpenseList from "./components/ExpenseList"

class App extends Component {
render() {
@@ -13,7 +13,7 @@ class App extends Component {
<div>
<AuthButton />
<CategoryList />
<AddExpense />
<ExpenseList />
</div>
</Provider>
)
@@ -0,0 +1,77 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { firestoreConnect } from 'react-redux-firebase'

import AddExpense from './AddExpense'


class ExpenseList extends Component {
static propTypes = {
uid: PropTypes.string,
expenses: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.number.isRequired,
description: PropTypes.string,
cost: PropTypes.string
})),
selectedCategory: PropTypes.string,
}

renderExpense({ key, description, cost }) {
return (
<div key={key}>
<span style={{ display: "inline-block", width: '20rem' }}>{description}</span>
<span>{cost}</span>
</div>
)
}

render() {
const expenseItems = this.props.expenses.map(
(e) => this.renderExpense(e)
)
return (
<div>
<div>
{expenseItems}
</div>
<AddExpense />
</div>
)
}
}

const mapStateToProps = state => {
return {
uid: state.firebase.auth.uid,
expenses: state.firestore.ordered.expenses
? state.firestore.ordered.expenses.map((t, idx) => {
return { key: idx, description: t.description, cost: t.cost }
})
: [],
selectedCategory: state.categories.selectedCategory
}
}

const mapDispatchToProps = {}


export default compose(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect((props) => {
if (!props.uid) return []
if (!props.selectedCategory) return []
return [
{
collection: 'expenses',
where: [
['uid', '==', props.uid],
['category', '==', props.selectedCategory]
],
orderBy: ['cost', 'desc']
}
]
}
)
)(ExpenseList)

0 comments on commit b9a22cd

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