37 | {!isLoading && (
38 | {
40 | const dispatchPage = page + (data.length > page ? 6 : 0);
41 | setPage(dispatchPage);
42 | dispatch(paginationHandler(dispatchPage));
43 | }}
44 | />
45 | )}
46 |
47 | );
48 | };
49 |
50 | const Button = () => {
51 | const { isLoading, setPage, page } = useContext(InfiniteScrollContext);
52 | return (
53 |
54 | {isLoading ? null : (
55 |
64 | );
65 | };
66 |
67 | type ContainerProps = {
68 | children: React.ReactNode;
69 | };
70 | const Container = ({ children }: ContainerProps) => {
71 | return (
72 |
56 | {
58 | setPage(page + PAGINATE_SIZE);
59 | }}
60 | />
61 |
62 | )}
63 |
73 | {children}
74 |
75 | );
76 | };
77 |
78 | type InfiniteScrollProps = {
79 | children: ({
80 | mutatePage: resetPage,
81 | }: {
82 | mutatePage: React.Dispatch{children}
23 |
24 | );
25 | };
26 | export default Layout;
27 |
--------------------------------------------------------------------------------
/src/components/LoadButton.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "@testing-library/react";
3 | import LoadButton from "./LoadButton";
4 |
5 | it("renders LoadButton successfully", () => {
6 | const { container, getByText } = render(
7 |
44 |
84 |
85 |
86 | ) : null;
87 | };
88 |
89 | type ModalProps = {
90 | children: React.ReactNode;
91 | };
92 | const Modal = ({ children }: ModalProps) => {
93 | const [showModal, setShowModal] = useState
45 | {/* Content */}
46 |
83 |
47 | {/* Header */}
48 |
82 |
49 |
53 | {/* Body */}
54 | 50 | {title || "Title"} 51 |
52 |
55 | {children}
56 |
57 | {/* Footer */}
58 |
59 |
66 |
80 |
81 |
34 | ![Pokeball]({importImages("pokeball")})
scroll.scrollToTop()}
39 | />
40 |
41 | );
42 | };
43 | export default Navbar;
44 |
--------------------------------------------------------------------------------
/src/components/PokemonCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Pokemon } from "../features/pokemonSlice";
3 | import { PokemonTypeColors, PokemonTypePlaceholders } from "../globals";
4 | import { leftPad } from "../utils/leftPad";
5 | import Trail from "./Trail";
6 | import ProgressiveImage from "react-progressive-image-loading";
7 | import { useHistory } from "react-router-dom";
8 |
9 | const MaskStyling = {
10 | width: 130,
11 | height: 130,
12 | zIndex: -10,
13 | bottom: 8,
14 | left: 16,
15 | };
16 | const ImageContainerStyling = {
17 | width: 175,
18 | height: 175,
19 | };
20 |
21 | type Props = Pokemon;
22 |
23 | const PokemonCard = ({ id, name, sprites, types }: Props) => {
24 | const history = useHistory();
25 |
26 | const backgroundColors = types.map(({ type }) => {
27 | const [[, backgroundColor]] = Object.entries(PokemonTypeColors).filter(
28 | ([key, _]) => key === type.name
29 | );
30 |
31 | return backgroundColor;
32 | });
33 | const imagePlaceholder = types.map(({ type }) => {
34 | const [[, image]] = Object.entries(PokemonTypePlaceholders).filter(
35 | ([key, _]) => key === type.name
36 | );
37 |
38 | return image;
39 | });
40 |
41 | return (
42 | history.push(`/pokemons/${id}`)}
49 | >
50 |
101 |
56 |
80 |
81 | 57 | #{leftPad(id, 3)} 58 |
59 | 60 |
64 |
71 | (
75 | 
76 | )}
77 | />
78 |
79 |
82 |
100 | {name}
83 |
84 | {types.map(({ type }, index) => {
85 | return (
86 |
99 | 94 | {type.name} 95 |
96 | ); 97 | })} 98 |
22 |
90 | Pokémon Data
23 |24 | { 25 | species.flavorTextEntries.find( 26 | (text) => text.language.name === "en" 27 | )?.flavorText 28 | } 29 |
30 |-
31 |
- 54 | {index + 1}. {ability.ability.name}{" "} 55 | {ability.isHidden && "(Hidden Ability)"} 56 | 57 | ))} 58 | /> 59 |
68 | ![male]({importImages("male")})
73 | {100 - genderPercentage}%
74 |
75 |
76 | ![female]({importImages("female")})
81 | {genderPercentage}%
82 |
83 |
84 | )}
85 |
86 | }
87 | />
88 |
91 |
113 |
114 | );
115 | };
116 |
117 | export default PokemonDetailsBiography;
118 |
--------------------------------------------------------------------------------
/src/components/PokemonDetailsEvolutions.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useSelector } from "react-redux";
3 | import { ChainLink } from "../features/evolutionChainSlice";
4 | import { pokemonsSelector } from "../features/pokemonSlice";
5 |
6 | import PokemonEvolution from "./PokemonEvolution";
7 |
8 | type Props = {
9 | selectedIds: number[];
10 | chainLinks: ChainLink[];
11 | selectedBackgroundColor: { light: string; medium: string };
12 | };
13 |
14 | const PokemonDetailsEvolutions = ({
15 | selectedBackgroundColor,
16 | selectedIds,
17 | chainLinks,
18 | }: Props) => {
19 | const pokemons = useSelector(pokemonsSelector);
20 |
21 | return (
22 | Training
92 |-
93 |
23 |
45 | );
46 | };
47 |
48 | export default PokemonDetailsEvolutions;
49 |
--------------------------------------------------------------------------------
/src/components/PokemonDetailsHeader.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import ProgressiveImage from "react-progressive-image-loading";
3 | import { useSpring, animated } from "react-spring";
4 | import { Pokemon } from "../features/pokemonSlice";
5 | import { Species } from "../features/speciesSlice";
6 | import { PokemonTypePlaceholders } from "../globals";
7 | import { useResize } from "../hooks/useResize";
8 | import { leftPad } from "../utils/leftPad";
9 |
10 | const calc = (x: number, y: number, width: number, height: number) => [
11 | x - width / 2,
12 | y - height / 2,
13 | ];
14 |
15 | const trans1 = (x: number, y: number) =>
16 | `translate3d(-${x / 30}px,-${y / 30}px,0)`;
17 |
18 | const trans2 = (x: number, y: number) =>
19 | `translate3d(${x / 20}px,${y / 20}px,0)`;
20 |
21 | const MaskSize = 225;
22 | const ImageSize = 325;
23 |
24 | const MaskStyling = {
25 | width: MaskSize,
26 | height: MaskSize,
27 | bottom: 55,
28 | };
29 |
30 | const PokemonImageStyling = {
31 | width: ImageSize,
32 | height: ImageSize,
33 | display: "block",
34 | left: 0,
35 | right: 0,
36 | bottom: 5,
37 | margin: "auto",
38 | };
39 |
40 | type Props = {
41 | pokemon: Pokemon;
42 | species: Species;
43 | selectedBackgroundColor: { light: string; medium: string };
44 | };
45 |
46 | const PokemonDetailsHeader = ({
47 | pokemon,
48 | species,
49 | selectedBackgroundColor,
50 | }: Props) => {
51 | const containerRef = useRef
24 | {selectedIds.map((id) => {
25 | const pokemon = pokemons.data.find((p) => p !== null && id === p.id);
26 | const chain = chainLinks.find(
27 | ({ species }) =>
28 | Number(species.url.split("/").splice(-2)[0]) === pokemon?.id
29 | );
30 |
31 | return (
32 | <>
33 | {pokemon && (
34 |
44 |
75 | set({
76 | xy: calc(clientX - left, clientY - top, width + left, height + top),
77 | })
78 | }
79 | >
80 |
122 |
123 |
124 | );
125 | };
126 |
127 | export default PokemonDetailsHeader;
128 |
--------------------------------------------------------------------------------
/src/components/PokemonDetailsStats.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Pokemon } from "../features/pokemonSlice";
3 | import PokemonStats from "./PokemonStats";
4 |
5 | type Props = {
6 | pokemon: Pokemon;
7 | };
8 |
9 | const transformStatNames = (statName: string) => {
10 | const map: string[][] = [
11 | ["special-attack", "Sp. Atk"],
12 | ["special-defense", "Sp. Def"],
13 | ];
14 | let transformed = statName;
15 | map.forEach(([a, b]) => {
16 | if (a === statName) {
17 | transformed = b;
18 | }
19 | });
20 |
21 | return transformed;
22 | };
23 |
24 | const PokemonDetailsStats = ({ pokemon }: Props) => {
25 | const stats = pokemon.stats.map((resource) => ({
26 | name: transformStatNames(resource.stat.name),
27 | min: resource.baseStat,
28 | max:
29 | resource.stat.name === "hp"
30 | ? Number(resource.baseStat) * 2 + 204
31 | : (Number(resource.baseStat) * 2 + 99) * 1.1,
32 | }));
33 |
34 | return (
35 | <>
36 |
81 |
88 |
89 | 82 | #{leftPad(pokemon.id, 3)} 83 |
84 |85 | {pokemon.name} 86 |
87 |
90 |
112 | (
116 |
117 | )}
118 | />
119 |
120 |
121 | 91 | {kanjiName && kanjiName.name} 92 |
93 | 94 |Base Stats
37 |-
38 | {stats.map((st) => (
39 |
47 | Total
48 |
49 | {stats.reduce((sum, { min }) => sum + min, 0)}
50 |
51 |
52 | Max
53 |
54 | 56 | Min & Max values are calculated for level 100 Pokemon. Minimum values 57 | are based on 0 EVs & 0 IVs, meanwhile Maximum values are based on 252 58 | EVs & 31 IVs. 59 |
60 | 61 | ); 62 | }; 63 | 64 | export default PokemonDetailsStats; 65 | -------------------------------------------------------------------------------- /src/components/PokemonEvolution.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ProgressiveImage from "react-progressive-image-loading"; 3 | import { Pokemon } from "../features/pokemonSlice"; 4 | import { PokemonTypePlaceholders } from "../globals"; 5 | import { leftPad } from "../utils/leftPad"; 6 | 7 | import { AiOutlineCaretDown, AiOutlineCaretRight } from "react-icons/ai"; 8 | import { ChainLink } from "../features/evolutionChainSlice"; 9 | import { useHistory } from "react-router-dom"; 10 | 11 | const MaskSize = 200; 12 | const ImageSize = 150; 13 | 14 | const MaskStyling = { 15 | width: MaskSize, 16 | height: MaskSize, 17 | bottom: 0, 18 | }; 19 | const ImageContainerStyling = { 20 | width: ImageSize, 21 | height: ImageSize, 22 | display: "block", 23 | left: 0, 24 | right: 0, 25 | bottom: 25, 26 | margin: "auto", 27 | }; 28 | 29 | type Props = { 30 | pokemon: Pokemon; 31 | chain: ChainLink | undefined; 32 | selectedBackgroundColor: { light: string; medium: string }; 33 | }; 34 | 35 | const PokemonEvolution = ({ 36 | pokemon, 37 | chain, 38 | selectedBackgroundColor, 39 | }: Props) => { 40 | const history = useHistory(); 41 | const imagePlaceholder = pokemon.types.map(({ type }) => { 42 | const [[, image]] = Object.entries(PokemonTypePlaceholders).filter( 43 | ([key, _]) => key === type.name 44 | ); 45 | 46 | return image; 47 | }); 48 | const minLevel = chain?.evolutionDetails[0]?.minLevel; 49 | 50 | return ( 51 |
52 |
101 | );
102 | };
103 |
104 | export default PokemonEvolution;
105 |
--------------------------------------------------------------------------------
/src/components/PokemonForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 | import { GoSearch } from "react-icons/go";
3 | import { useDispatch, useSelector } from "react-redux";
4 | import {
5 | PokemonGenerationsEnum,
6 | searchPokemonsByNameReducer,
7 | filterPokemonsByGenerationReducer,
8 | randomizePokemonsReducer,
9 | } from "../features/cachedPokemonsSlice";
10 | import {
11 | pokemonsSelector,
12 | resetPokemonsReducer,
13 | } from "../features/pokemonSlice";
14 | import { SliceStatus } from "../globals";
15 | import PokemonGenerations from "./PokemonGenerations";
16 |
17 | type Props = {
18 | mutatePage: React.Dispatch
53 |
86 |
54 |
61 |
78 | history.push(`/pokemons/${pokemon.id}`)}
63 | className="cursor-pointer transform hover:-translate-y-2 transition-all duration-300"
64 | style={{
65 | ...ImageContainerStyling,
66 | position: "absolute",
67 | }}
68 | >
69 | (
73 |
74 | )}
75 | />
76 |
77 | 79 | #{leftPad(pokemon.id, 3)} 80 |
81 |{pokemon.name}
82 |83 | {minLevel && `Level ${minLevel}`} 84 |
85 |
87 | {chain?.evolvesTo.length !== 0 && (
88 | <>
89 |
73 |
116 | );
117 | };
118 |
119 | export default PokemonForm;
120 |
--------------------------------------------------------------------------------
/src/components/PokemonGenerationCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { romanize } from "../utils/romanize";
3 |
4 | type Props = {
5 | images: string[];
6 | generation: number;
7 | isSelected: boolean;
8 | handleClick: () => void;
9 | };
10 |
11 | const PokemonGenerationCard = ({
12 | images,
13 | generation,
14 | isSelected,
15 | handleClick,
16 | }: Props) => {
17 | return (
18 |
74 |
75 | ) =>
90 | setValue(e.currentTarget.value)
91 | }
92 | />
93 |
94 |
95 |
76 |
78 |
79 |
80 | {
85 | if (e.key === "Enter") {
86 | submitFormHandler();
87 | }
88 | }}
89 | onChange={(e: React.FormEvent
96 |
103 |
104 |
115 | handleClick()}
20 | // className="w-full tracking-wide text-center text-black bg-primaryGray mx-auto px-8 py-5 rounded-lg hover:bg-primarySecondary hover:text-white hover:font-medium transition-all duration-200 ease-in-out cursor-pointer"
21 | className={
22 | "w-full tracking-wide text-center mx-auto px-8 py-5 rounded-lg hover:font-medium transition-all duration-200 ease-in-out cursor-pointer " +
23 | (isSelected
24 | ? "bg-primarySecondary text-white transform hover:-translate-y-2 hover:shadow-md"
25 | : "bg-primaryGray text-black hover:bg-primarySecondary hover:text-white")
26 | }
27 | >
28 |
35 | );
36 | };
37 | export default PokemonGenerationCard;
38 |
--------------------------------------------------------------------------------
/src/components/PokemonGenerations.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 |
3 | import Modal from "./Modal";
4 | import PokemonGenerationCard from "./PokemonGenerationCard";
5 | import PokemonIcon from "./PokemonIcon";
6 |
7 | import { importPokemonImage } from "../globals";
8 | import { PokemonGenerationsEnum } from "../features/cachedPokemonsSlice";
9 |
10 | const generations = [
11 | [
12 | importPokemonImage("bulbasaur"),
13 | importPokemonImage("charmander"),
14 | importPokemonImage("squirtle"),
15 | ],
16 | [
17 | importPokemonImage("chikorita"),
18 | importPokemonImage("cyndaquil"),
19 | importPokemonImage("totodile"),
20 | ],
21 | [
22 | importPokemonImage("treecko"),
23 | importPokemonImage("torchic"),
24 | importPokemonImage("mudkip"),
25 | ],
26 | [
27 | importPokemonImage("turtwig"),
28 | importPokemonImage("chimcar"),
29 | importPokemonImage("piplup"),
30 | ],
31 | [
32 | importPokemonImage("snivy"),
33 | importPokemonImage("tepig"),
34 | importPokemonImage("oshawott"),
35 | ],
36 | [
37 | importPokemonImage("chespin"),
38 | importPokemonImage("fennekin"),
39 | importPokemonImage("froakie"),
40 | ],
41 | [
42 | importPokemonImage("rowlet"),
43 | importPokemonImage("litten"),
44 | importPokemonImage("popplio"),
45 | ],
46 | ];
47 |
48 | type Props = {
49 | selectedGeneration: PokemonGenerationsEnum | null;
50 | setSelectedGeneration: React.Dispatch<
51 | React.SetStateAction
29 | {images.map((image) => (
30 | 
31 | ))}
32 |
33 | Generation {romanize(generation)}
34 |
107 | {selectedGeneration !== null ? (
108 | <>
109 | {generations[pokemonGenerationsToIndex(selectedGeneration)].map(
110 | (image, index) => (
111 |
136 |
142 | {generations.map((images, index) => (
143 | {
152 | setSelectedGeneration((previousGeneration) => {
153 | const pickedGeneration = indexToPokemonGenerations(index);
154 | return previousGeneration === pickedGeneration
155 | ? null
156 | : pickedGeneration;
157 | });
158 | }}
159 | />
160 | ))}
161 |
162 |
11 |
55 | );
56 | };
57 | export default PokemonSkeleton;
58 |
--------------------------------------------------------------------------------
/src/components/PokemonStats.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | type Props = {
3 | title: string;
4 | min: number;
5 | max: number;
6 | };
7 |
8 | const PokemonStats = ({ title, min, max }: Props) => {
9 | return (
10 |
17 |
18 |
19 |
39 |
26 |
37 |
38 |
40 |
54 |
41 |
42 |
43 |
44 |
45 |
53 | 46 | 47 |
48 |
49 |
50 |
51 |
52 |
11 | {title}
12 | {min.toFixed(0)}
13 |
26 | );
27 | };
28 | export default PokemonStats;
29 |
--------------------------------------------------------------------------------
/src/components/SplashScreen.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { ReactComponent as PokeballIcon } from "../svg/pokeball.svg";
3 |
4 | const SplashScreen = () => {
5 | return (
6 |
14 |
24 | {max.toFixed(0)}
25 |
15 |
22 |
23 |
7 |
9 | );
10 | };
11 | export default SplashScreen;
12 |
--------------------------------------------------------------------------------
/src/components/Tab.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | type Props = {
4 | children: React.ReactNode;
5 | handleSelect: () => void;
6 | isSelected: boolean;
7 | };
8 |
9 | const Tab = ({ children, handleSelect, isSelected }: Props) => {
10 | return (
11 |
20 | );
21 | };
22 | export default Tab;
23 |
--------------------------------------------------------------------------------
/src/components/Trail.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useTrail, animated } from "react-spring";
3 |
4 | type Props = {
5 | children: React.ReactNode;
6 | open: boolean;
7 | className?: string;
8 | };
9 |
10 | const Trail = ({ open, children, className, ...props }: Props) => {
11 | const items = React.Children.toArray(children);
12 | const trail = useTrail(items.length, {
13 | config: { mass: 5, tension: 2000, friction: 200 },
14 | opacity: open ? 1 : 0,
15 | x: open ? 0 : 20,
16 | height: open ? 110 : 0,
17 | from: { opacity: 0, x: 20, height: 0 },
18 | });
19 | return (
20 |
21 |
36 | );
37 | };
38 |
39 | export default Trail;
40 |
--------------------------------------------------------------------------------
/src/components/__snapshots__/LoadButton.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders LoadButton successfully 1`] = `
4 |
22 | {trail.map(({ x, height, ...rest }, index) => (
23 | `translate3d(0,${x}px,0)`),
29 | }}
30 | >
31 | {items[index]}
32 |
33 | ))}
34 |
35 |
5 |
23 |
24 | `;
25 |
--------------------------------------------------------------------------------
/src/features/cachedPokemonsSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2 | import fromApi from "../api/fromApi";
3 | import { SliceStatus } from "../globals";
4 | import { RootState } from "./store";
5 | import { NamedAPIResource } from "./types";
6 | import { statusHandlerReducer, wrapReduxAsyncHandler } from "./utilities";
7 | import Levenshtein from "fast-levenshtein";
8 | import { shuffle } from "../utils/shuffle";
9 | import { camelcaseObject } from "../utils/camelcaseObject";
10 |
11 | export enum PokemonGenerationsEnum {
12 | GENERATION_1 = "151",
13 | GENERATION_2 = "251",
14 | GENERATION_3 = "386",
15 | GENERATION_4 = "494",
16 | GENERATION_5 = "649",
17 | GENERATION_6 = "721",
18 | GENERATION_7 = "809",
19 | }
20 |
21 | type SliceState = {
22 | cache: (NamedAPIResource & { distance: number })[];
23 | data: (NamedAPIResource & { distance: number })[];
24 | status: {
25 | state: SliceStatus;
26 | };
27 | };
28 |
29 | const initialState: SliceState = {
30 | cache: [],
31 | data: [],
32 | status: {
33 | state: SliceStatus.IDLE,
34 | },
35 | };
36 |
37 | const cachedPokemonsSlice = createSlice({
38 | name: "cachedPokemons",
39 | initialState,
40 | reducers: {
41 | ...statusHandlerReducer,
42 | getCachedPokemonsReducer(
43 | state,
44 | action: PayloadAction<{
45 | cachedPokemons: (NamedAPIResource & { distance: number })[];
46 | }>
47 | ) {
48 | const { cachedPokemons } = action.payload;
49 | state.cache = cachedPokemons;
50 | state.data = shuffle([...cachedPokemons]);
51 | },
52 | searchPokemonsByNameReducer(
53 | state,
54 | action: PayloadAction<{
55 | pokemonName: string;
56 | }>
57 | ) {
58 | const { pokemonName } = action.payload;
59 |
60 | state.data = state.cache
61 | .map((pokemon) => {
62 | return {
63 | ...pokemon,
64 | distance: Levenshtein.get(pokemon.name, pokemonName),
65 | };
66 | })
67 | .sort((a, b) => a.distance - b.distance);
68 |
69 | console.log(state.data);
70 | },
71 | filterPokemonsByGenerationReducer(
72 | state,
73 | action: PayloadAction<{
74 | selectedGeneration: PokemonGenerationsEnum | null;
75 | }>
76 | ) {
77 | const { selectedGeneration } = action.payload;
78 | let cache: (NamedAPIResource & { distance: number })[] = state.cache;
79 | if (selectedGeneration) {
80 | const generations = Object.entries(PokemonGenerationsEnum);
81 | let startingIndex: number = 0;
82 | generations.forEach(([_, b], index) => {
83 | if (b === selectedGeneration) {
84 | startingIndex = index === 0 ? 0 : Number(generations[index - 1][1]);
85 | }
86 | });
87 | cache = state.cache.slice(startingIndex, Number(selectedGeneration));
88 | }
89 | state.data = cache;
90 | },
91 | randomizePokemonsReducer(state, action) {
92 | state.data = shuffle([...state.cache]);
93 | },
94 | },
95 | });
96 |
97 | export const cachedPokemonsReducer = cachedPokemonsSlice.reducer;
98 | export const {
99 | initialize,
100 | error,
101 | success,
102 | getCachedPokemonsReducer,
103 | searchPokemonsByNameReducer,
104 | filterPokemonsByGenerationReducer,
105 | randomizePokemonsReducer,
106 | } = cachedPokemonsSlice.actions;
107 |
108 | const statusHandler = { initialize, error, success };
109 |
110 | export const cachedPokemonsSelector = (state: RootState) =>
111 | state.cachedPokemons;
112 |
113 | export const getCachedPokemons = wrapReduxAsyncHandler(
114 | statusHandler,
115 | async (dispatch) => {
116 | const {
117 | results,
118 | }: { results: NamedAPIResource[] } = await fromApi.getPokemons(
119 | Number(PokemonGenerationsEnum.GENERATION_7)
120 | );
121 | const transformedPokemons = results.map((res: NamedAPIResource) => ({
122 | ...res,
123 | distance: 0,
124 | }));
125 | dispatch(
126 | getCachedPokemonsReducer({
127 | cachedPokemons: camelcaseObject(transformedPokemons),
128 | })
129 | );
130 | }
131 | );
132 |
--------------------------------------------------------------------------------
/src/features/evolutionChainSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2 | import fromApi from "../api/fromApi";
3 | import { SliceStatus } from "../globals";
4 | import { camelcaseObject } from "../utils/camelcaseObject";
5 | import { RootState } from "./store";
6 | import { NamedAPIResource } from "./types";
7 | import { statusHandlerReducer, wrapReduxAsyncHandler } from "./utilities";
8 |
9 | export type ChainLink = {
10 | isBaby: boolean;
11 | species: NamedAPIResource;
12 | evolutionDetails: {
13 | item: NamedAPIResource;
14 | trigger: NamedAPIResource;
15 | gender: number;
16 | heldItem: NamedAPIResource;
17 | knownMove: NamedAPIResource;
18 | knownMoveType: NamedAPIResource;
19 | location: NamedAPIResource;
20 | minLevel: NamedAPIResource;
21 | minHappiness: NamedAPIResource;
22 | minBeauty: NamedAPIResource;
23 | minAffection: NamedAPIResource;
24 | needsOverworldRain: boolean;
25 | partySpecies: NamedAPIResource;
26 | partyType: NamedAPIResource;
27 | relativePhysicalStats: number;
28 | timeOfDay: string;
29 | tradeSpecies: NamedAPIResource;
30 | turnUpsideDown: boolean;
31 | }[];
32 | evolvesTo: ChainLink[];
33 | };
34 |
35 | export type EvolutionChain = {
36 | id: number;
37 | babyTriggerItem: NamedAPIResource;
38 | chain: ChainLink;
39 | };
40 |
41 | type SliceState = {
42 | data: EvolutionChain[];
43 | status: {
44 | state: SliceStatus;
45 | };
46 | };
47 |
48 | const initialState: SliceState = {
49 | data: [],
50 | status: {
51 | state: SliceStatus.IDLE,
52 | },
53 | };
54 |
55 | const evolutionChainSlice = createSlice({
56 | name: "evolutionChains",
57 | initialState,
58 | reducers: {
59 | ...statusHandlerReducer,
60 | getEvolutionChainReducer(
61 | state,
62 | action: PayloadAction<{ evolutionChain: EvolutionChain }>
63 | ) {
64 | const { evolutionChain } = action.payload;
65 | const isExist = state.data.find((e) => e.id === evolutionChain.id);
66 | if (!isExist) {
67 | state.data.push(evolutionChain);
68 | }
69 | },
70 | },
71 | });
72 |
73 | export const {
74 | initialize,
75 | error,
76 | success,
77 | getEvolutionChainReducer,
78 | } = evolutionChainSlice.actions;
79 | export const statusHandler = { initialize, error, success };
80 |
81 | export const evolutionChainSelector = (state: RootState) =>
82 | state.evolutionChain;
83 | export const evolutionChainReducer = evolutionChainSlice.reducer;
84 |
85 | export const getEvolutionChainByName = wrapReduxAsyncHandler(
86 | statusHandler,
87 | async (dispatch, { name }) => {
88 | const result = await fromApi.getEvolutionChainByNameOrId(name);
89 | dispatch(
90 | getEvolutionChainReducer({ evolutionChain: camelcaseObject(result) })
91 | );
92 | }
93 | );
94 | export const getEvolutionChainById = wrapReduxAsyncHandler(
95 | statusHandler,
96 | async (dispatch, { id }) => {
97 | const result = await fromApi.getEvolutionChainByNameOrId(Number(id));
98 | dispatch(
99 | getEvolutionChainReducer({ evolutionChain: camelcaseObject(result) })
100 | );
101 | }
102 | );
103 |
--------------------------------------------------------------------------------
/src/features/pokemonSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2 | import fromApi from "../api/fromApi";
3 | import { SliceStatus } from "../globals";
4 | import { RootState } from "./store";
5 | import { NamedAPIResource } from "./types";
6 | import { camelcaseObject } from "../utils/camelcaseObject";
7 | import {
8 | statusHandlerReducer,
9 | transformSpriteToBaseImage,
10 | wrapReduxAsyncHandler,
11 | } from "./utilities";
12 | import { baseImageUrl } from "../api/axios";
13 |
14 | export const PAGINATE_SIZE = 6;
15 |
16 | export type Pokemon = {
17 | id: number;
18 | name: string;
19 | baseExperience: number;
20 | height: number;
21 | isDefault: boolean;
22 | order: number;
23 | weight: number;
24 | abilities: {
25 | isHidden: boolean;
26 | slot: number;
27 | ability: NamedAPIResource;
28 | }[];
29 | forms: NamedAPIResource[];
30 | moves: {
31 | move: NamedAPIResource;
32 | }[];
33 | sprites: {
34 | frontDefault: string;
35 | frontShiny: string;
36 | frontFemale: string;
37 | frontShinyFemale: string;
38 | backDefault: string;
39 | backShiny: string;
40 | backFemale: string;
41 | backShinyFemale: string;
42 | };
43 | species: NamedAPIResource[];
44 | stats: {
45 | baseStat: number;
46 | effort: number;
47 | stat: NamedAPIResource;
48 | }[];
49 | types: {
50 | slot: number;
51 | type: NamedAPIResource;
52 | }[];
53 | };
54 |
55 | type SliceState = {
56 | data: (Pokemon | null)[];
57 | status: {
58 | state: SliceStatus;
59 | };
60 | };
61 |
62 | const initialState: SliceState = {
63 | data: [],
64 | status: {
65 | state: SliceStatus.IDLE,
66 | },
67 | };
68 |
69 | const pokemonsSlice = createSlice({
70 | name: "pokemons",
71 | initialState,
72 | reducers: {
73 | ...statusHandlerReducer,
74 | initializePokemonsReducer(state, action: PayloadAction<{ size: number }>) {
75 | const { size } = action.payload;
76 | const nullValues = new Array
130 |
132 | ) : (
133 | <>
134 | <>
135 | {selectedPokemon &&
136 | selectedSpecies &&
137 | selectedBackgroundColor &&
138 | selectedEvolutionChain && (
139 |
140 |
146 |
237 | )}
238 |
239 |
240 | )}
241 |
154 |
236 |
160 |
235 |
161 | setActiveTab("biography")}
163 | isSelected={activeTab === "biography"}
164 | >
165 | Biography
166 |
167 | setActiveTab("stats")}
169 | isSelected={activeTab === "stats"}
170 | >
171 | Stats
172 |
173 | setActiveTab("evolutions")}
175 | isSelected={activeTab === "evolutions"}
176 | >
177 | Evolutions
178 |
179 |
180 |
181 | {transitions.map(({ item, key, props }) => {
182 | let page: JSX.Element = (
183 |
229 | {page}
230 |
231 | );
232 | })}
233 |
234 |
21 |
33 |
34 | 22 | React Pokédex 23 |
24 | 30 |
48 |
53 |
54 | {!(
55 | cachedPokemons.status.state === SliceStatus.LOADING ||
56 | cachedPokemons.status.state === SliceStatus.IDLE
57 | ) && (
58 | <>
59 |
60 | {pokemons.data.map((pokemon, index) =>
61 | pokemon === null ? (
62 |
68 |
72 |
73 | )}
74 |