From 10f74bda5d69a49c1621c4f27ed08f81c32f24e1 Mon Sep 17 00:00:00 2001
From: MikeOliveri <mikeoliveri@MikeOliveris-MacBook-Pro.local>
Date: Wed, 19 Feb 2020 10:26:54 -0500
Subject: [PATCH] successfulchallenge

---
 src/02_starter/App.js    | 15 ++++++++++++++-
 src/02_starter/Img.js    | 12 ++++++++++++
 src/02_starter/Switch.js | 26 ++++++++++++++++++++++++++
 src/02_starter/data.js   | 12 +++++++++---
 src/index.js             |  4 ++--
 5 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/src/02_starter/App.js b/src/02_starter/App.js
index 0196597..e831c2e 100644
--- a/src/02_starter/App.js
+++ b/src/02_starter/App.js
@@ -1,12 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Layout from './Layout'
+import Switch from './Switch'
 import imgSources from './data'
 
 
 //the top-level component for our app. I've added some basic styling and a flexbox layout for you so your gifs make a nice grid :)
 export default function App() {
+  const [count, setCount] = useState(0)
+  const increment = () => {
+    setCount(count + 1)
+  }
+  const decrement = () => {
+    setCount(count - 1)
+  }
+  const imgToGifs = imgSources.map((urls, i) => {
+    return <Switch img={urls.img} gif={urls.gif} alt={i} key={i} increment={increment} decrement={decrement} />
+  })
   return (
     <Layout>
+      {imgToGifs}
+      {count === 3 && <h2> '3 is the MAGIC NUMBER!!!'</h2>}
     </Layout>
   )
 }
diff --git a/src/02_starter/Img.js b/src/02_starter/Img.js
index 98bfceb..2a84323 100644
--- a/src/02_starter/Img.js
+++ b/src/02_starter/Img.js
@@ -1 +1,13 @@
 //a component that displays an image goes here
+import React from 'react'
+import Button from './Button'
+
+export default function Img({ src, onClick, alt }) {
+  return (
+    <div style={{maxHeight: '300px'}}>
+        <Button onClick={onClick}>
+        <img src={src} alt={alt} width='300px' />
+        </Button>
+    </div>
+  )
+}
diff --git a/src/02_starter/Switch.js b/src/02_starter/Switch.js
index 6c51ac7..7ca0412 100644
--- a/src/02_starter/Switch.js
+++ b/src/02_starter/Switch.js
@@ -1 +1,27 @@
 //a component that handles the state of our img/gif button goes here
+import React, { useState } from 'react'
+import Img from './Img'
+
+export default function Switch(props){
+  const { img, gif, alt, increment, decrement } = props
+  const [showImg, setShowImg] = useState(true)
+  if (showImg) {
+    return <Img
+              src={img}
+              alt={alt}
+              onClick={() => {
+                setShowImg(false)
+                increment()
+              }}
+              />
+  } else {
+    return <Img
+            src={gif}
+            alt={alt}
+            onClick={() => {
+              setShowImg(true)
+              decrement()
+            }}
+    />
+  }
+}
diff --git a/src/02_starter/data.js b/src/02_starter/data.js
index 0b7b4e4..08e7122 100644
--- a/src/02_starter/data.js
+++ b/src/02_starter/data.js
@@ -1,9 +1,15 @@
 //the data structure we'll use to build our app
 const urls = [
   {
-    img: '',
-    gif: '',
-  }
+    img: 'https://secure.img1-fg.wfcdn.com/im/30269278/resize-h800-w800%5Ecompr-r85/4307/43074506/Hanging+Golden+Retriever+Puppy+Statue.jpg',
+    gif: 'https://media.giphy.com/media/xNPB9OnYtIGzK/giphy.gif'
+  },
+  {img: 'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313__340.jpg',
+  gif: 'https://media.giphy.com/media/Sr24JqAERSH4YXxQb5/giphy.gif'
+},
+{img: 'https://images-na.ssl-images-amazon.com/images/I/51pn4A4VnML._AC_SX425_.jpg',
+gif: 'https://media.giphy.com/media/yXBqba0Zx8S4/giphy.gif'
+},
 ]
 
 export default urls
diff --git a/src/index.js b/src/index.js
index e8c592b..c88d24a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './01_example/App'
-// import App from './02_starter/App' /*uncomment this import and comment out the one above when you're ready to write your own code*/
+// import App from './01_example/App'
+import App from './02_starter/App' /*uncomment this import and comment out the one above when you're ready to write your own code*/
 
 ReactDOM.render(<App />, document.getElementById('root'))