submitting ticket 1, 2, 3 in progress

src/App.js

@@ -1,22 +1,67 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Favourites from "./components/Favourites";
 import RandomDog from "./components/RandomDog";
+import Dog from "./components/Dog";
 import DogBattle from "./components/DogBattle";
 import Breeds from "./components/Breeds";
 import "./App.css";
 
 export default function App() {
   const [favouriteBreeds, setFavouriteBreeds] = useState([]);
   const [savedPhotos, setSavedPhotos] = useState([]);
+  const [randomDogImage, setRandomDogImage] = useState("");
+  const [bestDogImage, setBestDogImage] = useState([]);
+  const [image, setImage] = useState([]);
+
+
+  const getNewDogImage = () => {
+    fetch("https://dog.ceo/api/breeds/image/random")
+       .then((response) => response.json())
+      // .then(response => console.log(response.json()))
+      .then((data) => {
+        // console.log("THIS TEXT"message, data.message);
+        setRandomDogImage(data.message);
+      });
+  };
+
+  useEffect(() => {
+    getNewDogImage();
+  }, []);
+
+  const saveDogImage = () => {
+    setSavedPhotos([...savedPhotos, randomDogImage]);
+    console.log(savedPhotos);
+  };
+
+// const randomImage = 
+  const chooseBestDog = () => {
+    fetch(`https://dog.ceo/api/breed/${bestDogImage}/images/random`)
+      // .then((response) => response.json())
+      .then((response) => console.log(response.json()))
+      .then((bestDogImagedata) => {
+        setBestDogImage(bestDogImagedata.message);
+      });
+
+  }
+useEffect(()=>{
+  chooseBestDog()
+}, []);
 
   return (
     <div className="App">
       <header className="App-header">
         <h1 className="App-title">Dogs!</h1>
       </header>
-      <Favourites />
-      <RandomDog />
-      <DogBattle />
+      <Favourites savedPhotos={savedPhotos} />
+      <RandomDog
+        randomDogImage={randomDogImage}
+        savePhotos={saveDogImage}
+        handleNextImage={getNewDogImage}
+      />
+      <Dog 
+      dogImage={image}
+      handleBestDogImage={chooseBestDog} />
+      <DogBattle bestDogImage={bestDogImage} />
       <Breeds />
     </div>
   );

src/components/Dog.js

@@ -6,7 +6,9 @@ function Dog(props) {
     <div className="Dog">
       <img className="Dog-image" src={props.image} />
       <p>
-        <button className="Dog-button">Best Dog</button>
+        <button onClick={props.handleBestDogImage()} className="Dog-button">
+          Best Dog
+        </button>
       </p>
     </div>
   );

src/components/DogBattle.js

@@ -2,13 +2,13 @@ import React from "react";
 import Dog from "./Dog.js";
 import "./DogBattle.css";
 
-export default function DogBattle() {
+export default function DogBattle(props) {
   return (
     <div className="DogBattle">
       <h2 className="DogBattle-title">Choose the best dog</h2>
       <div className="DogBattle-images">
-        <Dog image="http://via.placeholder.com/300x300" />
-        <Dog image="http://via.placeholder.com/300x300" />
+        <Dog image={props.bestDogImage[0]} />
+        <Dog image={props.bestDogImage[1]} />
       </div>
     </div>
   );

src/components/Favourites.js

@@ -1,7 +1,8 @@
 import React from "react";
 import "./Favourites.css";
 
-export default function Favourites() {
+export default function Favourites(props) {
+//  console.log("props",props) 
   return (
     <div className="Favourites">
       <div className="Favourites-breeds">
@@ -12,8 +13,8 @@ export default function Favourites() {
       <div className="Favourites-saved">
         <h2>Saved Photos</h2>
         <div className="Favourites-photos">
-          <img src="http://via.placeholder.com/80x80" />
-          <img src="http://via.placeholder.com/80x80" />
+          <img src={props.savedPhotos[0]}/>
+          <img src={props.savedPhotos[1]} />
         </div>
       </div>
     </div>

src/components/RandomDog.js

@@ -1,15 +1,29 @@
 import React from "react";
 import "./RandomDog.css";
 
-export default function RandomDog() {
+function RandomDog(props) {
+
+  // {
+  //     "message": "https://images.dog.ceo/breeds/hound-ibizan/n02091244_4281.jpg",
+  //     "status": "success"
+  // }
+
+console.log("props",props)
+
   return (
     <div className="RandomDog">
       <h2 className="RandomDog-title">Random Dogs</h2>
-      <img className="RandomDog-image" src="http://via.placeholder.com/300x300" />
+      <img className="RandomDog-image" src={props.randomDogImage} />
       <p>
-        <button className="RandomDog-button">Save Image</button>
-        <button className="RandomDog-button">Next Dog</button>
+        <button onClick={props.savePhotos} className="RandomDog-button">
+          Save Image
+        </button>
+        <button onClick={() => props.handleNextImage()} className="RandomDog-button">
+          Next Dog
+        </button>
       </p>
     </div>
   );
 }
+
+export default RandomDog;