From 496611fc6ef6fb2b56cf6f0e45adadebdcc5b721 Mon Sep 17 00:00:00 2001
From: pluvio72 <maksjl01@gmail.com>
Date: Sat, 6 Aug 2022 15:10:44 +0100
Subject: [PATCH] filtered pokemons

---
 src/index.scss                 | 16 ++++++++++++++++
 src/views/Pokedex/pokedex.jsx  | 15 +++++++++++----
 src/views/Pokedex/pokedex.scss |  2 +-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 1a4c7cb..abbc0ab 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,19 @@
+// Bootstrap customization to make it
+// more pokemon-esc looking
+
+.form-control, .form-select{
+  border: 3px solid black!important;
+  font-weight: 600!important;
+}
+.form-control{
+  background-color:black!important;
+  color: white!important;
+}
+.form-control:focus, .form-control:active,
+.form-select:focus, .form-select:active{
+  box-shadow: 0px 0px 0px 4px #d6d6d6!important;
+}
+
 @import "~bootstrap/scss/bootstrap";
 
 body {
diff --git a/src/views/Pokedex/pokedex.jsx b/src/views/Pokedex/pokedex.jsx
index 89cf821..da5a03e 100644
--- a/src/views/Pokedex/pokedex.jsx
+++ b/src/views/Pokedex/pokedex.jsx
@@ -20,8 +20,8 @@ import "./pokedex.scss";
 function Pokedex() {
   const { addPokemonToList, getAllPokemon } = useContext(Pokemon);
 
+  const [filter, setFilter] = useState('');
   const [pokemon, setPokemon] = useState({});
-  const [loading, setLoading] = useState(true);
 
   // cache first 20 pokemon for index page
   useEffect(() => {
@@ -45,9 +45,15 @@ function Pokedex() {
     } else setPokemon(getAllPokemon());
   }, []);
 
+  const onChangeFilter = (event) => {
+      // all data in lower case for case insensitive filtering
+      setFilter(event.target.value.toLowerCase());
+  }
+
   const onSelectGeneration = (event) => {
     const newGenerationValue = event.target.value;
-
+    
+    setPokemon({});
     getPokemonByGeneration(newGenerationValue).then(async (data) => {
         const allFetchedPokemon = getAllPokemon();
         const allFetchedPokemonNames = Object.keys(allFetchedPokemon);
@@ -95,7 +101,8 @@ function Pokedex() {
                 <FormControl
                   type="text"
                   placeholder="Search by pokemon name..."
-                  />
+                  onChange={onChangeFilter}
+                />
               </div>
               <div className="flex-shrink-1">
                 <FormSelect onChange={onSelectGeneration}>
@@ -113,7 +120,7 @@ function Pokedex() {
             </div>
             {Object.keys(pokemon).length > 0 ? (
                 <Row className="gx-2 gy-2">
-                    {Object.keys(pokemon).map((_name) => (
+                    {Object.keys(pokemon).filter(e => e.toLowerCase().indexOf(filter) > -1).map((_name) => (
                         <Col className="col-3" key={_name}>
                             <div className="pokemon-card py-2 px-3">
                                 <span className="lead">{formatName(_name)}</span>
diff --git a/src/views/Pokedex/pokedex.scss b/src/views/Pokedex/pokedex.scss
index 5b94020..1e5ef4b 100644
--- a/src/views/Pokedex/pokedex.scss
+++ b/src/views/Pokedex/pokedex.scss
@@ -1,5 +1,5 @@
 .pokemon-card{
-    border: 2px solid rgb(90,90,90);
+    border: 3px solid rgb(0, 0, 0);
     background-color: rgb(240,241,242);
     border-radius: .5rem;
     display: flex;