Permalink
Browse files

Hook up the category list to firebase

  • Loading branch information...
dusty-phillips committed Aug 27, 2018
1 parent eb28990 commit 50ccac6bf97f648162452634fd1604f5b5705b74
Showing with 61 additions and 2 deletions.
  1. +2 −2 src/App.js
  2. +59 −0 src/components/CategoryList.js
@@ -3,7 +3,7 @@ import { Provider } from "react-redux"
import store from "./redux/store"
import AuthButton from "./components/AuthButton"
import AddCategory from "./components/AddCategory"
import CategoryList from "./components/CategoryList"
class App extends Component {
@@ -12,7 +12,7 @@ class App extends Component {
<Provider store={store}>
<div>
<AuthButton />
<AddCategory />
<CategoryList />
</div>
</Provider>
)
@@ -0,0 +1,59 @@
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 AddCategory from './AddCategory'
class CategoryList extends Component {
static propTypes = {
uid: PropTypes.string,
categories: PropTypes.arrayOf(PropTypes.string)
}
renderCategory(category) {
return <div key={category}>
{category}
</div>
}
render() {
const categoryItems = this.props.categories.map(
(name) => this.renderCategory(name)
)
return (
<div>
<div>
{categoryItems}
</div>
<AddCategory />
</div>
)
}
}
const mapStateToProps = state => {
return {
uid: state.firebase.auth.uid,
categories: state.firestore.ordered.categories ? state.firestore.ordered.categories.map(c => c.name) : [],
}
}
const mapDispatchToProps = {}
export default compose(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect((props) => {
if (!props.uid) return []
return [
{
collection: 'categories',
where: [
['uid', '==', props.uid]
]
}
]
}
)
)(CategoryList)

0 comments on commit 50ccac6

Please sign in to comment.