Not able to change second value of an array in state with conditional statement in reducer — Redux

76
January 10, 2020, at 1:40 PM

I kind of stuck at the moment. I trying to pass in a boolean value into the action that will then be used a case (FILTER_SIZE) within the reducer which either sets the value the displayed_clothing array to elements with the same sizeID or empties the displayed_clothing array which causes my Item page to revert back to display clothing items from the clothing array within stated instead of the filtered items in displayed_clothing.

It seems that the filtered_clothes is not changing its value after the if-else statement based on the console.logs that I have. Note: I made filtered_clothes into a const but got an invalid assignment error during the if-else statement so I used let instead. (To be honest, Im not sure why it didn't work as I did something similar in the BUY ITEMS case using a const instead)

ItemGrid.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { addITEM, addFAVORITE, filterSIZE } from '../actions';
// import Slider from 'react-rangeslider'
import '../styles.css';
// import 'react-rangeslider/lib/index.css'

class ItemGrid extends Component {
  constructor(props){
    super(props);
    this.state = {
      checked: false
    }
    this.openSearchBar = this.openSearchBar.bind(this);
    this.addFavorite = this.addFavorite.bind(this);
    this.addToCart = this.addToCart.bind(this);
    this.filterSize = this.filterSize.bind(this);
  }
  openSearchBar() {
    this.setState({showSearchBar: !this.state.showSearchBar});
  }
  addFavorite = (event, item) => {
    this.props.addFAVORITE(item);
  }
  addToCart = (event, item) => {
    this.props.addITEM(item);
  }
  filterSize = (event, size, checked_status) => {
    checked_status = !checked_status;
    console.log('filterSize');
    this.setState({checked: checked_status});
    event.preventDefault();
    console.log(checked_status)
    this.props.filterSIZE(size, checked_status);
  }
  handleChangeStart = () => {
    console.log('Change event started')
  };
  handleChange = value => {
    this.setState({
      value: value
    })
  };
  handleChangeComplete = () => {
    console.log('Change event completed')
  };
  renderClothing(){
    return this.props.clothing.map((item) => {
      return(
        <div className="item-product" key={item.id}>
          <img className="item" src={item.imgSrc} alt="clothing item" />
          <i className="fa fa-heart fav-icon pointer" aria-hidden="true" onClick={(event) => this.addFavorite(event, item)}></i>
          <p className="item-name">{item.name}</p>
          <p className="item-price">${item.price}</p> <button className="addtoCart_btn" onClick={(event) => this.addToCart(event, item)}>Add</button>
        </div>
      )
    }
  )
}

  render(){
    console.log('props')
    console.log(this.props.clothing)
    return(
      <div id="item-area">
        <div id="side-menu">
          <h3>Filters</h3>
          <div className="size-box">
            <h5>Size:</h5>
            <ul>
              <li className="">
                <a href="/item" onClick={(event) => this.filterSize(event, 1, this.state.checked)}>
                  <label className="container">XS
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">S
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">M
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">L
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">XL
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">XXL
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
            </ul>
          </div>
          <div className="color-box">
            <h5>Color:</h5>
            <ul className="color-list">
              <li className="swatch color-swatch-black pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-blue pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-red pointer">
                <a href="/item">  </a>
              </li>   <br />
              <li className="swatch color-swatch-nude pointer">
                  <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-white pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-grey pointer">
                <a href="/item">  </a>
              </li>   <br />
              <li className="swatch color-swatch-purple pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-brown pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-yellow pointer">
                <a href="/item">  </a>
              </li>  <br />
              <li className="swatch color-swatch-orange pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-pink pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-green pointer">
                <a href="/item">  </a>
              </li>  <br />
            </ul>
          </div>
          <div className="price-range">
            <h5 className="">Price:</h5>
            <ul className="prices">
              <li><a href="/item" className="pointer">$10</a></li>
              <li><a href="/item" className="pointer">$20</a></li>
              <li><a href="/item" className="pointer">$30</a></li>
              <li><a href="/item" className="pointer">$40</a></li>
              <li><a href="/item" className="pointer">$50</a></li>
              <li><a href="/item" className="pointer">$100</a></li>
            </ul>
          </div>
        </div>
        <div id="item-grid">
          {this.renderClothing()}
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  console.log('State in ItemGrid')
  console.log(state)
  console.log(state.apps.clothing)
  console.log(state.apps.displayed_clothing)
  if (state.apps.displayed_clothing === undefined | state.apps.displayed_clothing.length === 0){
    return {clothing: state.apps.clothing}
  };
  return{clothing: state.apps.displayed_clothing}
}
export default connect(mapStateToProps, {addITEM, addFAVORITE, filterSIZE})(ItemGrid);

app.js (Reducer file)

const initialState = {
      search: 'hi',
      act: {
        cart: [],
        history: [],
        favorites: []
      },
      clothing: [ // XS: 1
        {id: 1, name: "Light Blue Dress", price: 20, imgSrc: "/tops/1.jpg", size: 1},
        {id: 2, name: "Nude Dress with Blue Floral Design", price: 20, imgSrc: "/tops/4.jpg"},
        {id: 3, name: "White Dress with Gold Design", price: 15, imgSrc: "/tops/5.jpg"},
        {id: 4, name: "Brown Button Shirt", price: 15, imgSrc: "/tops/6.jpg", size: 1},
        {id: 5, name: "Yellow Dress", price: 27, imgSrc: "/tops/7.jpg"},
        {id: 6, name: "White Dress with Flower Design", price: 40, imgSrc: "/tops/8.jpg"},
        {id: 7, name: "White Blossom Mary shirt", price: 13, imgSrc: "/tops/9.jpg", size: 1},
        {id: 8, name: "White Dress with Black Design", price: 22, imgSrc: "/tops/3.jpg"},
        {id: 9, name: "White Floral Long Sleeve Dress", price: 27, imgSrc: "/tops/10.jpg"}
      ],
      displayed_clothing: [],
};
const appsReducer = (state = initialState, action) => {
  console.log('inside reducer');
  console.log(state.act);

  switch(action.type) {
    case 'ADD_CART':
      console.log('inside add case');
      console.log('Action:');
      console.log(action.payload);
      console.log('State:');
      console.log(state);
      console.log('Cart:');
      console.log(state.act.cart);
      return {
        ...state,
        act: {
          ...state.act,
          cart: state.act.cart.concat(action.payload)
        }
      };
    case 'DELETE_CART_ITEM':
      console.log('inside delete case');
      const delID = action.payload.id;
      return {
        ...state,
        act: {
          ...state.act,
          cart: state.act.cart.filter(state => state.id !== delID)
        }
      };
    case 'BUY_ITEMS':
      console.log('inside buy items case');
      console.log(action.payload);
      const emptyArray = [];
      // Otherwise, this is the one we want - return an updated value
      return {
        ...state,
        act: {
          ...state.act,
          history: state.act.history.concat(action.payload),
          cart: state.act.history.concat(emptyArray)
        }
      };
      case 'ADD_FAVORITE':
        console.log('inside add favorite case');
        console.log('Action:');
        console.log(action.payload);
        console.log('State:');
        console.log(state);
        return {
          ...state,
          act: {
            ...state.act,
            favorites: state.act.favorites.concat(action.payload)
          }
        };
        case 'DELETE_FAVORITE':
          console.log('inside delete case');
          const delFavID = action.payload.id;
          return {
            ...state,
            act: {
              ...state.act,
              favorites: state.act.favorites.filter(state => state.id !== delFavID)
            }
          };
          case 'FILTER_SIZE':
            console.log('inside filter size case');
            const sizeID = action.payload.id;
            let filtered_clothes = [];
            console.log('checked_status');
            console.log(action.payload.checked_status);
            // When checkbox is unchecked
            if (action.payload.checked_status === false){
              console.log('if statement')
               filtered_clothes = state.displayed_clothing.concat(filtered_clothes)
               console.log(filtered_clothes);
            } else {
              console.log('else statement');
              filtered_clothes = state.clothing.filter(item => item.size === sizeID);
            }
            console.log('filtered_clothes')
            console.log(filtered_clothes);

            return {
              ...state,
              displayed_clothing: filtered_clothes
            };


    default:
      return state;
  }
}
export const updateCartPrice = (state) => {
  let final_total = 0;
  state.apps.act.cart.map((cart_item) => {
      console.log('itemPrice');
      console.log(cart_item.price);
      final_total += cart_item.price;
      console.log('final_total')
      console.log(final_total)
      }
    )
  console.log('final_total in updateCartPrice')
  console.log(final_total)
  return final_total
}
export default appsReducer

action.js

import v4 from 'node-uuid';
// Add item to cart
export const addITEM = item => {
  return{
    type: 'ADD_CART',
    payload: {
      id: item.id,
      name: item.name,
      price: item.price,
      imgSrc: item.imgSrc
    }
  };
};
export const deleteCART_ITEM = item => {
  return{
    type: 'DELETE_CART_ITEM',
    payload: {
      id: item.id,
    }
  };
};
// let order_id = 1;
// Add items to history
export const purchaseITEMS = (items, date) => {
  return{
    type: 'BUY_ITEMS',
    payload: {
      id: v4(),
      items: items,
      date: date
    }
  };
};
// Add item to favorite
export const addFAVORITE = item => {
  return{
    type: 'ADD_FAVORITE',
    payload: {
      id: item.id,
      name: item.name,
      price: item.price,
      imgSrc: item.imgSrc
    }
  };
};
export const deleteFAVORITE = item => {
  return{
    type: 'DELETE_FAVORITE',
    payload: {
      id: item.id,
    }
  };
};
export const filterSIZE = (size, checked_status) => {
  return{
    type: 'FILTER_SIZE',
    payload: {
      id: size,
      checked_status: checked_status
    }
  };
};

If you have any suggestions on what I should try, would appreciate it. I've banging my head on the wall with this one trying to figure it out.

Thanks!

READ ALSO
how to save url created from canvas.toBlob() inside PDFJS.getDocument to array?

how to save url created from canvas.toBlob() inside PDFJS.getDocument to array?

I render the pdf page on canvasThen, I want to save url created from canvas blob to array so that I can access outside of this method

110
Enable Button on DropDown Select in Vue?

Enable Button on DropDown Select in Vue?

I am using the vuetify material library and i have a v-select with items assigned to itHow can i make so that only when an item in selected that the button will get enabled?

101
How do I check if an invite link is invalid in discord js?

How do I check if an invite link is invalid in discord js?

I am making a discord bot for my server and I have a self-promotion channel and I want my bot to delete invalid invite links

222
Electron | window.flashFrame(true) and App.dock.bounce(&ldquo;critical&rdquo;) not working after a while

Electron | window.flashFrame(true) and App.dock.bounce(“critical”) not working after a while

Has anyone encountered this issue before? Any help would be appreciated

80