Skip to content
Permalink
Browse files

Get items from backend

  • Loading branch information...
ilonacodes committed Nov 13, 2018
1 parent 0bbd6f7 commit 5e6b8f31d6ceb0b4042617d3c2355f69bfbdd52c
Showing with 59 additions and 19 deletions.
  1. +7 −1 src/actions/actions.js
  2. +31 −15 src/components/HomePage.js
  3. +5 −1 src/components/api.js
  4. +11 −2 src/reducers/itemsReducer.js
  5. +5 −0 webpack.config.dev.js
@@ -1,10 +1,16 @@
export const t = {
GET_ITEMS_SUCCESS: "GET_ITEMS_SUCCESS",
ADD_ITEM_TO_SHOPPING_CART: "ADD_ITEM_TO_SHOPPING_CART",
REMOVE_ITEM_FROM_SHOPPING_CART: "REMOVE_ITEM_FROM_SHOPPING_CART",
SELECT_CATEGORY: "SELECT_CATEGORY"
SELECT_CATEGORY: "SELECT_CATEGORY",
}

export const actions = {
getItemsSuccess: items => ({
type: t.GET_ITEMS_SUCCESS,
items
}),

addItemToShoppingCart: item => ({
type: t.ADD_ITEM_TO_SHOPPING_CART,
item
@@ -2,7 +2,7 @@ import React from 'react';
import { connect } from 'react-redux';
import { PropTypes } from 'prop-types';
import { actions } from '../actions/actions';
import { createItem } from './api';
import { createItem, getItem } from './api';
import { exampleItems } from '../reducers/initialState';

const Item = ({ item, cart, addItemToShoppingCart, removeItemFromShoppingCart }) => {
@@ -66,22 +66,38 @@ const Cart = ({ items, cart, addItemToShoppingCart, removeItemFromShoppingCart }
);
}

const HomePageComponent = ({ items, addItemToShoppingCart, cart, removeItemFromShoppingCart, selectCategory, selectedCategory }) => {
const filteredItems = items.filter(item => item.category === selectedCategory)

return (
<div>

class HomePageComponent extends React.Component {
constructor(props) {
super(props);

}

componentDidMount() {
getItem()
.then(response => this.props.itemsLoaded(response.data))
console.log(this.props);
}

render() {
const { items, addItemToShoppingCart, cart, removeItemFromShoppingCart, selectCategory, selectedCategory } = this.props
const filteredItems = items.filter(item => item.category === selectedCategory)

return (
<div>
<button onClick={() => exampleItems.forEach(item => createItem(item))}>Create Item</button>
<button onClick={() => selectCategory("food")}>Food</button>
<button onClick={() => selectCategory("fashion")}>Fashion</button>
{filteredItems.map(item =>
<div key={item.id}>
<Item item={item} cart={cart} addItemToShoppingCart={addItemToShoppingCart} removeItemFromShoppingCart={removeItemFromShoppingCart} />
</div>
)}
<Cart items={items} cart={cart} addItemToShoppingCart={addItemToShoppingCart} removeItemFromShoppingCart={removeItemFromShoppingCart} />
</div>
);
<button onClick={() => selectCategory("fashion")}>Fashion</button>
{filteredItems.map(item =>
<div key={item.id}>
<Item item={item} cart={cart} addItemToShoppingCart={addItemToShoppingCart} removeItemFromShoppingCart={removeItemFromShoppingCart} />
</div>
)}
<Cart items={items} cart={cart} addItemToShoppingCart={addItemToShoppingCart} removeItemFromShoppingCart={removeItemFromShoppingCart} />
</div>
);
}
}

Item.propTypes = {
@@ -161,7 +177,7 @@ const mapDispatchToProps = (dispatch) => {
return {
addItemToShoppingCart: id => dispatch(actions.addItemToShoppingCart(id)),
removeItemFromShoppingCart: id => dispatch(actions.removeItemFromShoppingCart(id)),
selectCategory: category => dispatch(actions.selectCategory(category))
itemsLoaded: items => dispatch(actions.getItemsSuccess(items))
}
}

@@ -4,4 +4,8 @@ const baseURL = "https://restapinator.herokuapp.com/api/v1";

export const createItem = (item) => {
axios.post(`${baseURL}/items`, item);
};
};

export const getItem = () => {
return axios.get(`${baseURL}/items`)
}
@@ -1,5 +1,14 @@
import { exampleItems } from "./initialState";
import { t } from "../actions/actions";

const items = [];

export const itemsReducer = (state = items, action) => {
switch (action.type) {
case t.GET_ITEMS_SUCCESS: {
console.log(action);
return action.items;
}
}

export const itemsReducer = (state = exampleItems) => {
return state;
}
@@ -24,6 +24,11 @@ export default {
},
plugins: [
new HardSourceWebpackPlugin(),
new HardSourceWebpackPlugin.ExcludeModulePlugin([
{
test: /.*\.DS_Store/
}
]),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.

0 comments on commit 5e6b8f3

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