Refactoring the code with useData and adding page navigation to detai…

src/App.js

@@ -66,8 +66,7 @@ const useData = () => {
         setPokemons(data);
         setIsLoading(false);
       })
-      .catch((e) => {
-        console.log(e);
+      .catch(() => {
         setIsLoading(false);
       });
   }, []);

src/Details/components/ImageSection/index.js

@@ -15,12 +15,40 @@ const Wrapper = styled.section`
   padding: 12px;
   margin-right: 24px;
 `;
-
-const ImageSection = ({ alt, src }) => (
+const ArrowLeft = styled.i`
+  align-self: center;
+  border: solid gray;
+  border-width: 0 10px 10px 0;
+  display: inline-block;
+  padding: 10px;
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+    caret-color: transparent;
+    &:hover{
+        border-color: black;
+    }
+`;
+const ArrowRight = styled.i`
+  align-self: center;
+  border: solid gray;
+  border-width: 0 10px 10px 0;
+  display: inline-block;
+  padding: 10px;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    caret-color: transparent;
+    &:hover{
+        border-color: black;
+    }
+`;
+const ImageSection = ({ alt, src, leftClick, rightClick }) => (
   <>
     <Wrapper>
+      <ArrowLeft onClick={leftClick}/>
       <ProductImage alt={alt} src={src} />
+      <ArrowRight onClick={rightClick}/>
     </Wrapper>
   </>
 );
 export { ImageSection };
+

src/Details/index.js

@@ -1,38 +1,57 @@
 /* eslint-disable react/prop-types */
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useHistory } from "react-router-dom";
 import { DetailsLayout } from "./components/DetailsLayout";
 import { ImageSection } from "./components/ImageSection";
 import { ThumbnailSection } from "./components/ThumbnailSection";
 import { MetaSection } from "./components/MetaSection";
+import { Loader } from "../common/Loader";
 
-export function Details() {
+
+const useData = () => {
   const { id } = useParams();
   const [data, setData] = useState(null);
-  const [selectedImage, setSelectedImage] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
       .then((res) => res.json())
       .then((pokemonData) => {
         Promise.all(pokemonData.abilities.map((a) => fetch(a.ability.url)))
           .then((responses) => Promise.all(responses.map((res) => res.json())))
-          .then((abilityData) =>
-            setData({ ...pokemonData, abilities: abilityData })
-          );
+          .then((abilityData) =>{
+            setData({ ...pokemonData, abilities: abilityData });
+            setIsLoading(false);
+          });
       });
   }, [id]);
-
-  if (!data) {
-    return <span>Loading</span>;
+    return {
+      data,
+      isLoading,
+      id,
+    };
+  };
+export function Details() {
+  const { data, isLoading, id } = useData();
+  const [selectedImage, setSelectedImage] = useState(null);
+  const history = useHistory();
+  const handleRouteClick = (Id) => {
+    if(Id>0){
+      history.push(`/pokemon/${Id}`);
+      setSelectedImage(null);
+    }
+  };
+  if (isLoading) {
+    return <Loader/>;
   }
 
   return (
     <DetailsLayout>
       <ImageSection
+        leftClick={()=>handleRouteClick(id-1)}
+        rightClick={()=>handleRouteClick(+id+1)}
         alt={data.name}
-        src={
-          selectedImage || data.sprites.other["official-artwork"].front_default
+        src={selectedImage || data.sprites.other["official-artwork"].front_default
         }
       />
       <ThumbnailSection
@@ -55,3 +74,4 @@ export function Details() {
     </DetailsLayout>
   );
 }
+

src/Overview/Overview.jsx

@@ -102,12 +102,12 @@ export const Overview = ({ data, isLoading }) => {
       </FiltersContainer>
       {filteredPokemons.length ? (
         <CardsWrapper>
-          {filteredPokemons.map((pokemon, index) => (
+          {filteredPokemons.map((pokemon) => (
             <PokemonCard
               key={pokemon.name}
               image={pokemon.sprites.other["official-artwork"].front_default}
               name={pokemon.name}
-              click={() => handlePokemonClick(index + 1)}
+              click={() => handlePokemonClick(pokemon.id)}
               price={pokemon.base_experience}
             />
           ))}

yarn.lock

@@ -1683,7 +1683,7 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
-"@testing-library/jest-dom@^5.11.10":
+"@testing-library/jest-dom@^5.12.0":
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.12.0.tgz#6a5d340b092c44b7bce17a4791b47d9bc2c61443"
   integrity sha512-N9Y82b2Z3j6wzIoAqajlKVF1Zt7sOH0pPee0sUHXHc5cv2Fdn23r+vpWm0MBBoGJtPOly5+Bdx1lnc3CD+A+ow==
@@ -1697,18 +1697,18 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@^11.2.6":
+"@testing-library/react@^11.2.7":
   version "11.2.7"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.7.tgz#b29e2e95c6765c815786c0bc1d5aed9cb2bf7818"
   integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
 
-"@testing-library/user-event@^12.8.3":
-  version "12.8.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.8.3.tgz#1aa3ed4b9f79340a1e1836bc7f57c501e838704a"
-  integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==
+"@testing-library/user-event@^13.1.9":
+  version "13.1.9"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.1.9.tgz#29e49a42659ac3c1023565ff56819e0153a82e99"
+  integrity sha512-NZr0zL2TMOs2qk+dNlqrAdbaRW5dAmYwd1yuQ4r7HpkVEOj0MWuUjDWwKhcLd/atdBy8ZSMHSKp+kXSQe47ezg==
   dependencies:
     "@babel/runtime" "^7.12.5"
 
@@ -4481,7 +4481,7 @@ eslint-config-airbnb@^18.2.1:
     object.assign "^4.1.2"
     object.entries "^1.1.2"
 
-eslint-config-prettier@^8.1.0:
+eslint-config-prettier@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
   integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
@@ -4562,7 +4562,7 @@ eslint-plugin-jsx-a11y@^6.3.1:
     jsx-ast-utils "^3.1.0"
     language-tags "^1.0.5"
 
-eslint-plugin-prettier@^3.3.1:
+eslint-plugin-prettier@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz#cdbad3bf1dbd2b177e9825737fe63b476a08f0c7"
   integrity sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==
@@ -8802,10 +8802,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
-  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+prettier@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
+  integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
 
 pretty-bytes@^5.3.0:
   version "5.6.0"