From 3281629dcf1312ec4ab339daaa7555ad58838804 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 17 Apr 2023 22:52:54 +1000
Subject: [PATCH] Implemented search in the filter bar

---
 src/features/Pokedex/Filters/Filters.tsx      | 10 +++++++
 src/features/Pokedex/Pokedex.tsx              | 16 +++++++++-
 src/features/Pokedex/__test__/pokedex.test.ts | 29 +++++++++++++++++++
 src/features/Pokedex/pokedexSlice.ts          |  5 ++++
 src/features/Pokedex/types/slice.ts           |  7 +++--
 5 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/src/features/Pokedex/Filters/Filters.tsx b/src/features/Pokedex/Filters/Filters.tsx
index 0be10bc..ced5313 100644
--- a/src/features/Pokedex/Filters/Filters.tsx
+++ b/src/features/Pokedex/Filters/Filters.tsx
@@ -8,6 +8,7 @@ import {
   setRegionOptions,
   setSortOptions,
   setTypeOptions,
+  setSearchInput,
 } from 'features/Pokedex/pokedexSlice';
 import { RegionPokemonRange } from 'features/Pokedex/types/slice';
 import { useAppDispatch, useAppSelector } from 'app/hooks';
@@ -141,6 +142,15 @@ const Filters = () => {
             </select>
           </div>
         </div>
+        <div className="filter__items">
+          <div>
+            <div>SEARCH</div>
+            <input
+              type="text"
+              onChange={e => dispatch(setSearchInput(e.target.value))}
+            />
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/src/features/Pokedex/Pokedex.tsx b/src/features/Pokedex/Pokedex.tsx
index 921a2f4..fae58c7 100644
--- a/src/features/Pokedex/Pokedex.tsx
+++ b/src/features/Pokedex/Pokedex.tsx
@@ -31,12 +31,22 @@ export const sortPokemonCardsByIdOrName = (
   });
 };
 
+export const searchPokemonCardsByName = (
+  pokemonList: PokemonCardProps[],
+  searchInput: string,
+) => {
+  return pokemonList.filter(pokemon =>
+    pokemon.name.toLowerCase().includes(searchInput.toLowerCase()),
+  );
+};
+
 const Pokedex = () => {
   const isLoadingPokemons = useAppSelector(
     state => state.pokedex.isLoadingPokemons,
   );
   const selectedType = useAppSelector(state => state.pokedex.selectedType);
   const selectedSort = useAppSelector(state => state.pokedex.selectedSort);
+  const searchInput = useAppSelector(state => state.pokedex.searchInput);
 
   const pokemonList = useAppSelector(state => state.pokedex.pokemonCardList);
 
@@ -48,6 +58,10 @@ const Pokedex = () => {
     filteredPokemonList,
     selectedSort,
   );
+  const searchedPokemonCardList = searchPokemonCardsByName(
+    sortedFilteredPokemonCardList,
+    searchInput,
+  );
 
   return (
     <>
@@ -56,7 +70,7 @@ const Pokedex = () => {
         <Loading />
       ) : (
         <div className="all__pokemons">
-          {sortedFilteredPokemonCardList.map(pokemonCard => (
+          {searchedPokemonCardList.map(pokemonCard => (
             <PokemonCard
               key={pokemonCard.id}
               id={pokemonCard.id}
diff --git a/src/features/Pokedex/__test__/pokedex.test.ts b/src/features/Pokedex/__test__/pokedex.test.ts
index 1dba7d5..c43ea3c 100644
--- a/src/features/Pokedex/__test__/pokedex.test.ts
+++ b/src/features/Pokedex/__test__/pokedex.test.ts
@@ -1,6 +1,7 @@
 import {
   filterPokemonCardsByType,
   sortPokemonCardsByIdOrName,
+  searchPokemonCardsByName,
 } from 'features/Pokedex/Pokedex';
 import { PokemonResponseData } from 'features/Pokedex/types/api';
 import pokemon3_Venusaur from 'features/Pokedex/__test__/pokemon3_Venusaur.json';
@@ -81,4 +82,32 @@ describe('pokedex Component', () => {
       expect(sortedList).toEqual([pokemon4_Charmander, pokemon3_Venusaur]);
     });
   });
+
+  describe('searchPokemonByName works correctly', () => {
+    beforeEach(() => {
+      store = configureStore({
+        reducer: {
+          pokedex: pokedexSlice.reducer,
+          [pokedexApi.reducerPath]: pokedexApi.reducer,
+        },
+        middleware: getDefaultMiddleware =>
+          getDefaultMiddleware().concat(
+            pokedexApi.middleware,
+            listenerMiddleware.middleware,
+          ),
+      });
+    });
+
+    const pokemonList: PokemonResponseData[] = [
+      pokemon3_Venusaur,
+      pokemon4_Charmander,
+    ];
+
+    it('should search by name correctly', () => {
+      const searchName = 'char';
+      const searchedList = searchPokemonCardsByName(pokemonList, searchName);
+      expect(searchedList).toHaveLength(1);
+      expect(searchedList[0]).toEqual(pokemon4_Charmander);
+    });
+  });
 });
diff --git a/src/features/Pokedex/pokedexSlice.ts b/src/features/Pokedex/pokedexSlice.ts
index fb42c25..aa345f3 100644
--- a/src/features/Pokedex/pokedexSlice.ts
+++ b/src/features/Pokedex/pokedexSlice.ts
@@ -50,6 +50,7 @@ const initialState: PokedexState = {
   selectedRegion: '',
   selectedType: '',
   selectedSort: '',
+  searchInput: '',
   isLoadingPokemons: true,
   pokemonCardList: [],
 };
@@ -79,6 +80,9 @@ export const pokedexSlice: Slice<PokedexState> = createSlice({
     ) => {
       state.sortOptions = action.payload;
     },
+    setSearchInput: (state, action: PayloadAction<string>) => {
+      state.searchInput = action.payload;
+    },
     setIsLoadingPokemons: (state, action: PayloadAction<boolean>) => {
       state.isLoadingPokemons = action.payload;
     },
@@ -118,6 +122,7 @@ export const {
   setRegionOptions,
   setTypeOptions,
   setSortOptions,
+  setSearchInput,
   setIsLoadingPokemons,
 } = pokedexSlice.actions;
 
diff --git a/src/features/Pokedex/types/slice.ts b/src/features/Pokedex/types/slice.ts
index d4f899c..2782b77 100644
--- a/src/features/Pokedex/types/slice.ts
+++ b/src/features/Pokedex/types/slice.ts
@@ -2,12 +2,13 @@ import { PokemonResponseData } from './api';
 import { PokemonCardProps } from '../PokemonCard';
 
 export type PokedexState = {
-  selectedRegion: string;
   regionOptions: RegionPokemonRange[];
-  selectedType: string;
   typeOptions: string[];
-  selectedSort: string;
   sortOptions: { name: string; value: string }[];
+  selectedRegion: string;
+  selectedType: string;
+  selectedSort: string;
+  searchInput: string;
   isLoadingPokemons: boolean;
   pokemonCardList: PokemonCardProps[];
 };