stomg7969

import React, { Component } from "react";

class InputTagCollection extends Component {
  render() {
    console.log(this.props.tags);
    const { search, price, color, gender, material, category } = this.props.tags;
    return (
      <div id="chosen-tags">
        {search.inputTerm.length ? (
          <div className="collection" onClick={this.props.cancelSearchTag}>

stomg7969

state = {
    userInputContainerClicked: false,
    searchTerm: "",
    // tags that render are inside of 'passingTags' object.
    passingTags: {
      search: {
        inputTerm: ""
      },
      price: {
        lowHigh: false,

stomg7969

// **************** UNIVERSAL Filter ****************
  allFilterClickListener = (e, filterProp) => {
    console.log("FILTER clicked", e.target.dataset.name);
    const name = e.target.dataset.name;
    this.setState(prevState => ({
      passingTags: {
        ...prevState.passingTags,
        [filterProp]: {
          ...prevState.passingTags[filterProp],
          [name]: !prevState.passingTags[filterProp][name]

stomg7969

// **************** Collect all keys and Filter ****************
// This function collects ALL keys that have true as a value, then create a new obj to compare to filter.
  filteredCollected = () => {
    const collectedTrueKeys = {
      color: [],
      gender: [],
      material: [],
      category: []
    };
    const { color, gender, material, category } = this.state.passingTags;

stomg7969

const collectedTrueKeys = {
   color: ['white', 'pink'], 
   gender: ['girl'], 
   material: ['cotton'], 
   cateogry: []
}

stomg7969

multiPropsFilter = (products, filters) => {
    const filterKeys = Object.keys(filters);
    return products.filter(product => {
      return filterKeys.every(key => {
        if (!filters[key].length) return true;
        // Loops again if product[key] is an array (for material attribute).
        if (Array.isArray(product[key])) {
          return product[key].some(keyEle => filters[key].includes(keyEle));
        }
        return filters[key].includes(product[key]);