Permalink
Browse files

Add ability to select categories

  • Loading branch information...
dusty-phillips committed Aug 27, 2018
1 parent 50ccac6 commit f98c15f37bb841c8a5327e80ae672fcf6a459448
Showing with 37 additions and 7 deletions.
  1. +24 −5 src/components/CategoryList.js
  2. +8 −0 src/redux/categories.js
  3. +5 −2 src/redux/reducers.js
@@ -9,13 +9,27 @@ import AddCategory from './AddCategory'
class CategoryList extends Component {
static propTypes = {
uid: PropTypes.string,
categories: PropTypes.arrayOf(PropTypes.string)
categories: PropTypes.arrayOf(PropTypes.string),
selectedCategory: PropTypes.string,
selectCategory: PropTypes.func.isRequired,
}
renderCategory(category) {
return <div key={category}>
{category}
</div>
const styles = {
padding: '1rem',
cursor: 'pointer'
}
if (category === this.props.selectedCategory) {
styles.backgroundColor = '#988afe'
}
return (
<div
key={category}
style={styles}
onClick={() => this.props.selectCategory(category)}>
{category}
</div >
)
}
render() {
@@ -37,10 +51,15 @@ const mapStateToProps = state => {
return {
uid: state.firebase.auth.uid,
categories: state.firestore.ordered.categories ? state.firestore.ordered.categories.map(c => c.name) : [],
selectedCategory: state.categories.selectedCategory
}
}
const mapDispatchToProps = {}
const mapDispatchToProps = dispatch => {
return {
selectCategory: category => dispatch({ type: 'selectCategory', category })
}
}
export default compose(
connect(mapStateToProps, mapDispatchToProps),
@@ -0,0 +1,8 @@
export const initialState = { selectedCategory: null }
export function reducer(state = initialState, action) {
if (action.type === "selectCategory") {
return { ...state, selectedCategory: action.category }
}
return state
}
@@ -1,11 +1,14 @@
import { combineReducers } from 'redux'
import { firebaseReducer } from 'react-redux-firebase'
import { firestoreReducer } from 'redux-firestore'
import { reducer as categoriesReducer, initialState as categoriesInitial } from './categories'
export const initialState = {}
export const initialState = {
categories: categoriesInitial
}
export const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer,
categories: categoriesReducer
})

0 comments on commit f98c15f

Please sign in to comment.