From b56eae4e404d43544224c127ff3ffbc28da058de Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 19 Apr 2023 00:14:45 +1000
Subject: [PATCH] Addd searchInput selector & remove redundant css

---
 src/features/Pokedex/Filters/Filters.css |  1 +
 src/features/Pokedex/Filters/Filters.tsx |  2 ++
 src/index.css                            | 15 ---------------
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/features/Pokedex/Filters/Filters.css b/src/features/Pokedex/Filters/Filters.css
index c553212..5c9e47b 100644
--- a/src/features/Pokedex/Filters/Filters.css
+++ b/src/features/Pokedex/Filters/Filters.css
@@ -27,6 +27,7 @@ html {
   font-size: 12px;
 }
 
+/* TODO: Fix incorrect render of input */
 .filter__items > input {
   width: 10vw;
   margin-top: 5px;
diff --git a/src/features/Pokedex/Filters/Filters.tsx b/src/features/Pokedex/Filters/Filters.tsx
index 93a93a1..abdc808 100644
--- a/src/features/Pokedex/Filters/Filters.tsx
+++ b/src/features/Pokedex/Filters/Filters.tsx
@@ -58,6 +58,7 @@ const Filters = () => {
   const selectedRegion = useAppSelector(state => state.pokedex.selectedRegion);
   const selectedType = useAppSelector(state => state.pokedex.selectedType);
   const selectedSort = useAppSelector(state => state.pokedex.selectedSort);
+  const searchInput = useAppSelector(state => state.pokedex.searchInput);
 
   const regionPokemonList = useAppSelector(
     state => state.pokedex.regionOptions,
@@ -149,6 +150,7 @@ const Filters = () => {
             <input
               type="text"
               onChange={e => dispatch(setSearchInput(e.target.value))}
+              value={searchInput}
             />
           </div>
         </div>
diff --git a/src/index.css b/src/index.css
index 27a2bfe..6057827 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,21 +23,6 @@ code {
     monospace;
 }
 
-.filter__container {
-  display: flex;
-  flex-direction: row;
-  margin: 7vh 0 5vh 0;
-  gap: 0 2vw;
-}
-
-.filter__items {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-family: 'barcadebrawl';
-  font-size: 12px;
-}
-
 .pokemon__container {
   display: flex;
   flex-direction: column;