<file_sep>const initialState = {
  cartContents: [],
}

export default (state = initialState, action) => {
  
  const {type, payload} = action;

  switch(type){

    case 'addToCart':
      let updatedState = state.cartContents.push(payload);
      return {...state, updatedState};
      
    default:
      return state;

  }

}

export const addToCart = (chosenProduct) => {
  return{
    type: 'addToCart',
    payload: chosenProduct
  }
}<file_sep>import reducer, {swapActive} from './store/categories';

it('should have initial state', () => {
  const state = reducer(undefined, {});
  expect (state.activeCategory.displayName).toBe('Electronic Products');
})

it('should have be able to swap categories', () => {
  const state = reducer(undefined, swapActive('food'));
  expect (state.activeCategory.displayName).toBe('Artisanal Eats');
})<file_sep>import React from 'react'

export default props => (

  <header>
    <p>Our Store</p>
  </header>

)<file_sep>// A <Products> component
// Displays a list of products associated with the selected category


import React, {useEffect} from 'react'
import {connect} from 'react-redux'
import {getProducts} from '../../store/products'
import {addToCart} from '../../store/cart';


const Products = props => {

  useEffect(() => {
    props.getProducts();
  }, [])

  return (
    <section className="products">
      {props.products.displayedProducts.map(product => {
        console.log('Product for Cart', product);
        return <li onClick={() => props.addToCart(product)}>{product.name}</li>
      })}
    </section>
  )
}

const mapDispatchToProps = {addToCart, getProducts}

const mapStateToProps = state => ({
  products: state.products,
  cartContents: state.cart.cartContents,
})

export default connect(mapStateToProps, mapDispatchToProps)(Products);<file_sep>// State should contain a list of categories as well as the active category
// Each category should have a normalized name, display name, and a description
// Create an action that will trigger the reducer to change the active category
// Update the active category in the reducer when this action is dispatched
import axios from 'axios';


// Define initial state

const initialState = {
  categories: {
    // electronics: {displayName: 'Electronic Products', description: 'Devices to keep you connected'},
    // food: {displayName: 'Artisanal Eats', description: 'Healthy, locally sourced ingredients'},
  },
  activeCategory: {
    // displayName: '', description: ''
  },

}


// Define reducer
export default (state = initialState, action) => {

  const {type, payload} = action;

  switch(type) {

    case 'ChangeCategory':
      return{...state, activeCategory: payload}
    
    case 'GetCategories':
      return {...state, categories: payload};
      
    default:
      return state;

  }
}


// Define action creators

export const swapActive = (active) => {
  return {
    type: 'ChangeCategory',
    payload: active
  }
}

export function getCategories() {

  return async function (dispatch){
    const response = await axios.get('https://api-js401.herokuapp.com/api/v1/categories');
    dispatch({
      type: 'GetCategories',
      payload: response.data.results
    })
  }

}<file_sep>import React from 'react'

export default props => (

  <footer>
    <p>&#169; Our Store - 1(800)OUR-STORE</p>
  </footer>

)<file_sep>// A <Categories> component
// Shows a list of all categories
// Dispatches an action when one is clicked to “activate” it

import React, {useEffect} from 'react'
import {connect} from 'react-redux'
import {swapActive, getCategories} from '../../store/categories'

const Categories = props => {

  useEffect(() => {
    props.getCategories();
  }, [])

  return (

      <section className="category">
        {console.log('Props at Category:', props)}
        <h3>Current Category: {props.category.activeCategory.name}</h3>
        <ul>
          {Object.keys(props.category.categories).map(category => {
            return <li onClick={() => props.swapActive(props.category.categories[category])}>{props.category.categories[category].name}</li>
          })}
        </ul>
      </section>

    )
}

const mapStateToProps = state => ({
  category: state.categories,
})

const mapDispatchToProps = {swapActive, getCategories}

export default connect(mapStateToProps, mapDispatchToProps)(Categories);