added feature to navigate between all pet photos

redxzeta · Oct 27, 2020 · 985526d · 985526d
1 parent 5f5c501
commit 985526d
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/src/components/pets/PetInfo.js b/src/components/pets/PetInfo.js
@@ -20,11 +20,29 @@ export default function PetInfo({ token }) {
       });
   }, [id, token]);
 
+  const [ photoIndex, setPhotoIndex] = useState(0);
+  let index = photoIndex;
+
+  function nextPhoto(){
+    if(pet.photos[index+1] !== undefined){
+      setPhotoIndex(prevState => prevState + 1);
+    }
+  }
+
+  function previousPhoto(){
+    if(pet.photos[index-1] !== undefined){
+      setPhotoIndex(prevState => prevState - 1);
+    }
+  }
+
   return (
     <div className="petInfo">
       <h1>{pet.name}</h1>
-      {pet && <Image src={pet.photos[0].large} style={{}} />}
-
+      {pet && <Image src={pet.photos[index].large} style={{}} />}
+      <button onClick={previousPhoto}>Previous Photo</button>
+      <button onClick={nextPhoto}>Next Photo</button>
+      <br />
+      <br />
       {pet && (
         <Card>
           <Card.Header as="h5">{pet.type}</Card.Header>