fix(memoization): add memo to table, card & update test on fail

package.json

@@ -2,7 +2,7 @@
   "name": "ledesma-app",
   "homepage": "https://faculedesma.github.io/ledesma-app",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/home/Home.tsx

@@ -1,12 +1,17 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import HomeTable from './HomeTable';
 import HomeCard from './HomeCard';
 import './home.scss';
 
 const Home: React.FC = (): JSX.Element => {
   const [selectedPokemonId, setSelectedPokemonId] = useState<string>('');
 
-  const handleSelectPokemonId = (id: string): void => setSelectedPokemonId(id);
+  const handleSelectPokemonId = useMemo(
+    () =>
+      (id: string): void =>
+        setSelectedPokemonId(id),
+    []
+  );
 
   return (
     <div className="home">

src/components/home/HomeCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Card from '@components/card/Card';
 import { useSinglePokemon } from '@components/hooks/useSinglePokemon';
 
@@ -32,7 +32,8 @@ const HomeCard: React.FC<IPokemonCardProps> = ({ pokemonId }): JSX.Element => {
   }
 
   if (isError) {
-    return <div>Error!</div>;
+    console.error('Failed to load pokemon');
+    return <LoadingCard />;
   }
 
   return (
@@ -42,4 +43,4 @@ const HomeCard: React.FC<IPokemonCardProps> = ({ pokemonId }): JSX.Element => {
   );
 };
 
-export default HomeCard;
+export default memo(HomeCard);

src/components/home/HomeTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import {
   Table,
   TableRow,
@@ -37,7 +37,12 @@ const HomeTable: React.FC<IHomeTableProps> = ({
   }
 
   if (isError) {
-    return <div>Error!</div>;
+    console.error('Failed to load pokemons');
+    return (
+      <div className="home-table">
+        <TableLoading />
+      </div>
+    );
   }
 
   const handleSelectRow = (id: string): void => setPokemonId(id);
@@ -96,4 +101,4 @@ const HomeTable: React.FC<IHomeTableProps> = ({
   );
 };
 
-export default HomeTable;
+export default memo(HomeTable);

test/Home/HomeCard.spec.tsx

@@ -27,7 +27,7 @@ const homeCardProps = {
   pokemonId: '1'
 };
 
-describe('<HomeTable />', () => {
+describe('<HomeCard />', () => {
   it('fetches pokemon 1', async () => {
     jest.spyOn(hooks, 'useSinglePokemon').mockImplementation(() => ({
       data: mockedData,
@@ -55,7 +55,9 @@ describe('<HomeTable />', () => {
       isError: true,
       isLoading: false
     }));
-    const { getByText } = await render(<HomeCard {...homeCardProps} />);
-    expect(getByText('Error!')).toBeInTheDocument();
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const { container } = await render(<HomeCard {...homeCardProps} />);
+    expect(container.firstChild).toHaveClass('card-loading');
+    expect(errorSpy).toHaveBeenCalledTimes(1);
   });
 });

test/Home/HomeTable.spec.tsx

@@ -55,7 +55,9 @@ describe('<HomeTable />', () => {
       isError: true,
       isLoading: false
     }));
-    const { getByText } = await render(<HomeTable {...homeTableProps} />);
-    expect(getByText('Error!')).toBeInTheDocument();
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const { container } = await render(<HomeTable {...homeTableProps} />);
+    expect(container.firstChild?.firstChild).toHaveClass('table-skeleton');
+    expect(errorSpy).toHaveBeenCalledTimes(1);
   });
 });