Implemented the first version of filtering.

joaoluizmagalhaes · Feb 22, 2024 · aa190ee · aa190ee
1 parent ac6da6b
commit aa190ee
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/app/components/Filter.js b/src/app/components/Filter.js
@@ -28,7 +28,7 @@ export default function FilterSelect({ options, onChange }) {
       <p className="flex min-w-[70px]">Filter By:</p>
       <select name="filterPlanet" ref={selectRef} className="flex border-0 border-b text-textBlue border-b-filterGray w-full md:w-48 ml-3 py-2 md:py-3 ">
         {options.map(option => (
-          <option key={option.label} value={option.label}>{option.label}</option>
+          <option value={option.label}>{option.label}</option>
         ))}
       </select>
     </div>

diff --git a/src/app/page.js b/src/app/page.js
@@ -16,6 +16,7 @@ export default function Home() {
   const [isFetchingMore, setIsFetchingMore] = useState(false)
   const [planetsLoaded, setPlanetsLoaded] = useState(false)
   const [disabledLoadMore, setDisabledLoadMore] = useState(true)
+  const [filteredPeople, setFilteredPeople] = useState([])
 
   useEffect(() => {
     setIsLoading(true)
@@ -162,6 +163,14 @@ export default function Home() {
 
   const handleFilterChange = (selected) => {
     setSelectedFilter(selected.label)
+
+    // Filtra a lista de pessoas com base no filtro selecionado
+    const filteredPeople = selected.label === 'All' 
+      ? people 
+      : people.filter(person => selected.value.includes(person.url))
+
+    setPeople(filteredPeople) // Atualiza a lista de pessoas com o resultado filtrado
+    setDisplayCount(Math.min(filteredPeople.length, 8)) // Reinicia displayCount ou ajusta baseado no resultado filtrado
   }
 
   return (