Renamed Pokemon component to PokemonCard

README.md

@@ -1,6 +1,6 @@
 # Getting Started with Create React App
 
-A simple Pokemon catalogue app, build with React, Redux-Toolkit, Material-UI and PokeAPI. 
+A simple PokemonCard catalogue app, build with React, Redux-Toolkit, Material-UI and PokeAPI. 
 
 It's a learning project following [pokedex](https://github.com/s1varam/pokedex). In this project, I practised following skills:
 * Use React to create View for FE

src/features/Pokedex/Pokedex.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Pokemon from './Pokemon';
+import PokemonCard from './PokemonCard';
 import Filters from './Filters';
 import Loading from 'components/Loading';
 
@@ -54,7 +54,7 @@ const Pokedex = () => {
         <Loading />
       ) : (
         sortedFilteredPokemonList.map(pokemon => (
-          <Pokemon
+          <PokemonCard
             key={pokemon.id}
             name={pokemon.name}
             number={pokemon.id}

src/features/Pokedex/Pokemon/index.ts

@@ -1,2 +0,0 @@
-export * from './Pokemon';
-export { default } from './Pokemon';

src/features/Pokedex/PokemonCard/PokemonCard.stories.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import Pokemon, { PokemonCardProps } from './Pokemon';
+import PokemonCard, { PokemonCardProps } from './PokemonCard';
 
 import charizard_svg from './assets/stories/charizard.svg';
 import charizard_info from './assets/stories/charizard.json';
 
 export default {
   title: 'Pokedex/PokemonCard',
-  component: Pokemon,
-} as ComponentMeta<typeof Pokemon>;
+  component: PokemonCard,
+} as ComponentMeta<typeof PokemonCard>;
 
-const Template: ComponentStory<typeof Pokemon> = (args: PokemonCardProps) => (
-  <Pokemon {...args} />
-);
+const Template: ComponentStory<typeof PokemonCard> = (
+  args: PokemonCardProps,
+) => <PokemonCard {...args} />;
 
 export const Primary = Template.bind({});
 

src/features/Pokedex/PokemonCard/PokemonCard.test.ts

@@ -1,4 +1,4 @@
-import { formatNumber } from './Pokemon';
+import { formatNumber } from './PokemonCard';
 
 describe('Test Functions', () => {
   describe('formatNumber', () => {

src/features/Pokedex/PokemonCard/PokemonCard.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Tooltip, Zoom } from '@mui/material';
 
-import './Pokemon.css';
+import './PokemonCard.css';
 import * as pokeTypeAsset from './assets';
 import { colorTypeGradients } from './utils';
 
-export interface PokemonProps {
+export interface PokemonCardProps {
   name: string;
   number: number;
   image: string;
@@ -59,7 +59,12 @@ function findPokeTypeAsset(pokeType: string) {
   }
 }
 
-export default function Pokemon({ name, number, image, types }: PokemonProps) {
+export default function PokemonCard({
+  name,
+  number,
+  image,
+  types,
+}: PokemonCardProps) {
   let finalColor;
 
   if (types.length === 2) {

src/features/Pokedex/PokemonCard/index.ts

@@ -0,0 +1,2 @@
+export * from './PokemonCard';
+export { default } from './PokemonCard';

src/features/Pokedex/__test__/pokedex.test.ts

@@ -34,13 +34,13 @@ describe('pokedex Component', () => {
       pokemon4_Charmander,
     ];
 
-    it('should return all Pokemon if the selected type is "All Types"', () => {
+    it('should return all PokemonCard if the selected type is "All Types"', () => {
       const selectedType = 'All Types';
       const filteredList = filterPokemonByType(pokemonList, selectedType);
       expect(filteredList).toEqual(pokemonList);
     });
 
-    it('should return only Pokemon of the selected type', () => {
+    it('should return only PokemonCard of the selected type', () => {
       const selectedType = 'fire';
       const filteredList = filterPokemonByType(pokemonList, selectedType);
       const allPokemonAreOfTypeFire = filteredList.every(pokemon =>