From 7db1852489d06a3f56345a7890252239bdb779aa Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Sun, 4 Jun 2023 15:27:44 +1000
Subject: [PATCH] Revert "Put filter pokemonCard logic into redux" as it was
 overfitting redux way

This reverts commit e7e4e391d503bb0b7ad27308e6ff6833fd1bf686.
---
 src/features/Pokedex/Pokedex.tsx              | 57 ++++++++++++++++---
 .../{pokedexSlice.test.ts => pokedex.test.ts} |  2 +-
 src/features/Pokedex/pokedexSlice.ts          | 55 ------------------
 3 files changed, 51 insertions(+), 63 deletions(-)
 rename src/features/Pokedex/__test__/{pokedexSlice.test.ts => pokedex.test.ts} (98%)

diff --git a/src/features/Pokedex/Pokedex.tsx b/src/features/Pokedex/Pokedex.tsx
index c30965a..eaabed8 100644
--- a/src/features/Pokedex/Pokedex.tsx
+++ b/src/features/Pokedex/Pokedex.tsx
@@ -3,12 +3,44 @@ import PokemonCard, { PokemonCardProps } from 'components/PokemonCard';
 import Loading from 'components/Loading';
 
 import { useAppSelector, useAppDispatch } from 'app/hooks';
-import {
-  fetchPokemonsInTheRegion,
-  searchedSortedFilteredPokemonCardList,
-} from './pokedexSlice';
+import { fetchPokemonsInTheRegion } from './pokedexSlice';
 import { fetchSelectedPokemonInfo } from 'features/InfoDialog/infoDialogSlice';
 
+export const filterPokemonCardsByType = (
+  pokemonList: PokemonCardProps[],
+  selectedType: string,
+) => {
+  return pokemonList.filter(
+    pokemon =>
+      selectedType === 'All Types' ||
+      pokemon.types.some(type => type === selectedType),
+  );
+};
+
+export const sortPokemonCardsByIdOrName = (
+  pokemonList: PokemonCardProps[],
+  selectedSort: string,
+) => {
+  return pokemonList.sort((a, b) => {
+    if (selectedSort === 'id') {
+      return a.id - b.id;
+    } else if (selectedSort === 'name') {
+      return a.name.localeCompare(b.name);
+    } else {
+      return 0;
+    }
+  });
+};
+
+export const searchPokemonCardsByName = (
+  pokemonList: PokemonCardProps[],
+  searchInput: string,
+) => {
+  return pokemonList.filter(pokemon =>
+    pokemon.name.toLowerCase().includes(searchInput.toLowerCase()),
+  );
+};
+
 export interface PokedexProps {
   selectedRegion: string;
   selectedType: string;
@@ -27,8 +59,19 @@ const Pokedex = ({
   const isLoadingPokemons = useAppSelector(
     state => state.pokedex.isLoadingPokemons,
   );
-  const pokemonCardListForRendering = searchedSortedFilteredPokemonCardList(
-    useAppSelector(state => state),
+  const pokemonList = useAppSelector(state => state.pokedex.pokemonCardList);
+
+  const filteredPokemonList = filterPokemonCardsByType(
+    pokemonList,
+    selectedType,
+  );
+  const sortedFilteredPokemonCardList = sortPokemonCardsByIdOrName(
+    filteredPokemonList,
+    selectedSort,
+  );
+  const searchedPokemonCardList = searchPokemonCardsByName(
+    sortedFilteredPokemonCardList,
+    searchInput,
   );
 
   useEffect(() => {
@@ -41,7 +84,7 @@ const Pokedex = ({
         <Loading />
       ) : (
         <div className="all__pokemons">
-          {pokemonCardListForRendering.map(pokemonCard => (
+          {searchedPokemonCardList.map(pokemonCard => (
             <PokemonCard
               key={pokemonCard.id}
               id={pokemonCard.id}
diff --git a/src/features/Pokedex/__test__/pokedexSlice.test.ts b/src/features/Pokedex/__test__/pokedex.test.ts
similarity index 98%
rename from src/features/Pokedex/__test__/pokedexSlice.test.ts
rename to src/features/Pokedex/__test__/pokedex.test.ts
index bd9c500..fda392e 100644
--- a/src/features/Pokedex/__test__/pokedexSlice.test.ts
+++ b/src/features/Pokedex/__test__/pokedex.test.ts
@@ -2,7 +2,7 @@ import {
   filterPokemonCardsByType,
   sortPokemonCardsByIdOrName,
   searchPokemonCardsByName,
-} from 'features/Pokedex/pokedexSlice';
+} from 'features/Pokedex/Pokedex';
 import { PokemonCardProps } from 'components/PokemonCard';
 import pokemon3_venusaur_card from 'features/Pokedex/__test__/pokemon3_venusaur_Card.json';
 import pokemon4_charmander_card from 'features/Pokedex/__test__/pokemon4_charmandar_Card.json';
diff --git a/src/features/Pokedex/pokedexSlice.ts b/src/features/Pokedex/pokedexSlice.ts
index 27dd4cd..6c1008c 100644
--- a/src/features/Pokedex/pokedexSlice.ts
+++ b/src/features/Pokedex/pokedexSlice.ts
@@ -7,7 +7,6 @@ import { getStartAndEndIdsForRegion } from './utils';
 import { PokemonResponseData } from 'types/api';
 import { pokeRestApi } from 'app/services/pokeRestApi';
 import { RootState } from 'app/store';
-import { PokemonCardProps } from 'components/PokemonCard';
 
 export const fetchPokemonsInTheRegion = createAsyncThunk<
   PokemonResponseData[],
@@ -67,57 +66,3 @@ export const pokedexSlice: Slice<PokedexStateProps> = createSlice({
 export const { setIsLoadingPokemons } = pokedexSlice.actions;
 
 export default pokedexSlice.reducer;
-
-/// selectors
-export const filterPokemonCardsByType = (
-  pokemonList: PokemonCardProps[],
-  selectedType: string,
-) => {
-  return pokemonList.filter(
-    pokemon =>
-      selectedType === 'All Types' ||
-      pokemon.types.some(type => type === selectedType),
-  );
-};
-
-export const sortPokemonCardsByIdOrName = (
-  pokemonList: PokemonCardProps[],
-  selectedSort: string,
-) => {
-  return pokemonList.sort((a, b) => {
-    if (selectedSort === 'id') {
-      return a.id - b.id;
-    } else if (selectedSort === 'name') {
-      return a.name.localeCompare(b.name);
-    } else {
-      return 0;
-    }
-  });
-};
-
-export const searchPokemonCardsByName = (
-  pokemonList: PokemonCardProps[],
-  searchInput: string,
-) => {
-  return pokemonList.filter(pokemon =>
-    pokemon.name.toLowerCase().includes(searchInput.toLowerCase()),
-  );
-};
-
-export const filteredPokemonListByType = (state: RootState) =>
-  filterPokemonCardsByType(
-    state.pokedex.pokemonCardList,
-    state.filter.selectedType,
-  );
-
-export const sortedFilteredPokemonCardList = (state: RootState) =>
-  sortPokemonCardsByIdOrName(
-    filteredPokemonListByType(state),
-    state.filter.selectedSort,
-  );
-
-export const searchedSortedFilteredPokemonCardList = (state: RootState) =>
-  searchPokemonCardsByName(
-    sortedFilteredPokemonCardList(state),
-    state.filter.searchInput,
-  );