Merge pull request #6 from the-smooth-operator/filter-by-any-trait

feat: filter by any trait using a generic filter function

app/src/App.js

@@ -2,19 +2,34 @@ import React, { useState } from 'react';
 import './App.css';
 import content from './content/content.json';
 import FilterMenuNames from './components/FilterMenuNames';
-import FilterMenuTraits from './components/FilterMenuTraits';
+import FilterSubMenuGeneric from './components/FilterSubMenuGeneric';
 import Card from './components/Card';
 import Pagination from './components/Pagination';
 
-let PageSize = 30;
+const PageSize = 30;
+const traits = [ "Accessories",
+"Background",
+"Clothes",
+"Club",
+"Ear",
+"Fourth Club",
+"Hair",
+"Legend",
+"Second Club",
+"Special Club Item",
+"Special Edition",
+"Special Legend Item",
+"Special Vibes",
+"Tattoos",
+"Third Club",
+"Vibes"]
 
 function App() {
   const [cards, setCards] = useState(content);
   const [resetFilter, setResetFilter] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
   const [currentName, setCurrentName] = useState("");
-  const [filteredDataTrait, setFilterDataTrade] = useState(content);
-
+
   const firstPageIndex = (currentPage - 1) * PageSize;
   const lastPageIndex = firstPageIndex + PageSize;
   const currentTableData = cards.slice(firstPageIndex, lastPageIndex);
@@ -28,25 +43,35 @@ function App() {
 
   const handleChangeTrait = (val) => {
     setResetFilter(false);
-    const filteredDataName = filteredDataTrait.filter(x => x.traits.some(y => y.value === currentName));
-    console.log("filteredDataName",filteredDataName)
-    const updatedFilteredDataTrait = filteredDataName.filter(x => x.traits.some(y => y.value === val));
-    console.log("updatedFilteredDataTrait",updatedFilteredDataTrait);
-    setCards(updatedFilteredDataTrait);
-    setFilterDataTrade(content)
+    let filteredDataName = [];
+    if (currentName !== "") {
+      filteredDataName = content.filter(x => x.traits.some(y => y.value === currentName));
+    } else {
+      filteredDataName = content;
+    }
+    const filteredTraits = filteredDataName.filter(x => x.traits.some(y => y.value === val));
+    setCards(filteredTraits);  
   };
 
   const showAllHandler = () => {
     setCards(content);
     setResetFilter(true);
   };
-  console.log("filteredDataTrait", filteredDataTrait);
+
   return (
     <div className='layout'>
       <div className='header'>
         <button className='button' onClick={showAllHandler}>Show all</button>
         <FilterMenuNames content={content} changeOption={handleChangeName} resetFilter={resetFilter} />
-        <FilterMenuTraits content={content} changeOption={handleChangeTrait} currentName={currentName} resetFilter={resetFilter} />
+        {traits.map((trait) => (
+          <FilterSubMenuGeneric
+            content={content}
+            changeOption={handleChangeTrait}
+            currentName={currentName}
+            resetFilter={resetFilter}
+            traitName={trait}
+          />
+        ))}
       </div>
       <div className='cardWrap'>
         <Card cards={currentTableData} />  

app/src/components/Card.jsx

@@ -8,7 +8,7 @@ const Card = ({ cards }) => (
               <img src={item.image_preview_url} alt="legendImage" width="100%" />
               {item.traits.map((trait, id) => {
                 if (trait.trait_type === "Legend")
-                  return <p key={id}>{trait.value}</p>;
+                  return <p key={id}>{item.token_id} - {trait.value}</p>;
                 return null;
               })}
             </div>)

app/src/components/FilterSubMenuGeneric.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+const FilterSubMenuGeneric = ({ content, changeOption, currentName, resetFilter, traitName }) => {
+    const [cardSelected, selectCard] = useState([]);
+
+    const handleChange = (e) => {
+        const selectedValue = e.target.value;
+        selectCard(selectedValue);
+        changeOption(selectedValue);
+    };
+
+    const getCardsUniqueValues = () => {
+      let values = []
+      if ( currentName === "") {
+        values = content.map((item) => (
+          item.traits.map((a) => {if (a['trait_type'] === traitName) {return a['value']} else {return null}})
+        ))
+      }
+      else{
+        const filteredDataName = content.filter(x => x.traits.some(y => y.value === currentName));
+        values = filteredDataName.map((item) => (
+          item.traits.map((a) => {if (a['trait_type'] === traitName) {return a['value']} else {return null}})
+        ))
+      }
+
+      const valuesFlat = values.flat()
+      const uniqueValues = [...new Set(valuesFlat)]
+      return uniqueValues;
+    };
+
+    const uniqueValues = getCardsUniqueValues()
+    console.log("resetFilterStatus of", traitName, resetFilter)
+    return (
+        <>
+            <select className='filterMenu' id={traitName} value={resetFilter ? "" : cardSelected} onChange={handleChange}>
+            <option value="" disabled hidden>Select a {traitName}</option>
+            { uniqueValues.map((legend => ( <option key={legend} value={legend}>{legend}</option>))) }
+            </select>
+        </>
+    )
+};
+
+export default FilterSubMenuGeneric;