From f0eb473b98f9c717da9df21da430afed7fc58b2b Mon Sep 17 00:00:00 2001
From: "enhopkin@gmail.com" <enhopkin@gmail.com>
Date: Thu, 17 Feb 2022 19:59:01 -0700
Subject: [PATCH 1/5] first commit


From 392bfd0fe019558fd2fba0580686f17f597a18a7 Mon Sep 17 00:00:00 2001
From: "enhopkin@gmail.com" <enhopkin@gmail.com>
Date: Fri, 18 Feb 2022 11:14:39 -0700
Subject: [PATCH 2/5] basic mounts in jsx

---
 package-lock.json           |  1 +
 src/App.css                 |  1 +
 src/App.js                  | 35 ++++++++++++++++++++++++++++++++---
 src/components/Character.js |  1 +
 src/index.css               |  2 +-
 5 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 79208da2a..1ca867df7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "web-sprint-challenge-intro-to-react",
       "version": "0.1.1",
       "dependencies": {
         "@testing-library/jest-dom": "^5.12.0",
diff --git a/src/App.css b/src/App.css
index fab70641c..4b6af1f54 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,3 +6,4 @@
   text-shadow: 1px 1px 5px #fff;
 }
 /* write your parent styles in here for your App.js */
+
diff --git a/src/App.js b/src/App.js
index 5e69e9fdd..69e900be3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,46 @@
-import React from 'react';
-import './App.css';
+import React, {useState, useEffect} from 'react';
+import './App.css'
+import {data} from './mocks/handlers'
+import axios from 'axios'
 
+
+console.log('data', data)
+data.map(item =>{
+  console.log(item)
+})
 const App = () => {
+  const [characters, setCharacters] = useState(data)
+  const [character, setCharacter] = useState()
+useEffect(() => {
+  axios.get(`https://swapi.dev/api/people`)
+  .then (res =>{
+    console.log(res)
+    setCharacters(res.data)
+  })
+  .catch (err => console.error(err))
+}, [])
+
+console.log('final', characters)
+
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
 
   // Fetch characters from the API in an effect hook. Remember, anytime you have a 
   // side effect in a component, you want to think about which state and/or props it should
   // sync up with, if any.
-
+// console.log(character)
+// 
   return (
     <div className="App">
       <h1 className="Header">Characters</h1>
+      {
+      data.map(item =>{
+      return <div>
+        <h2>{item.name}</h2>
+          <p>`hailing from {item.homeworld}, {item.name} is a  human with {item.hair_color} hair, and {item.eye_color} eyes.</p>
+          </div>
+    })
+}
     </div>
   );
 }
diff --git a/src/components/Character.js b/src/components/Character.js
index 4083249c0..3d1667ad1 100644
--- a/src/components/Character.js
+++ b/src/components/Character.js
@@ -1 +1,2 @@
 // Write your Character component here
+
diff --git a/src/index.css b/src/index.css
index 5ea3014fb..4b9bd8fc6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,5 +3,5 @@ body {
   padding: 0;
   font-family: sans-serif;
   background-image: url('./images/sw-bg.jpg');
-  background-size: cover;
+  background-size:auto;
 }

From 1e54e491d9d0193d14d7e2f689d2d2764227b60f Mon Sep 17 00:00:00 2001
From: "enhopkin@gmail.com" <enhopkin@gmail.com>
Date: Fri, 18 Feb 2022 13:00:34 -0700
Subject: [PATCH 3/5] working with a component to appear in DOM. tests still
 failing

---
 src/App.js                  | 24 +++++++++++++-----------
 src/components/Character.js | 22 ++++++++++++++++++++++
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 69e900be3..57f2e2dbf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,25 +2,27 @@ import React, {useState, useEffect} from 'react';
 import './App.css'
 import {data} from './mocks/handlers'
 import axios from 'axios'
+import Character from './components/Character'
 
 
 console.log('data', data)
 data.map(item =>{
-  console.log(item)
+  console.log('hello', item)
 })
 const App = () => {
-  const [characters, setCharacters] = useState(data)
-  const [character, setCharacter] = useState()
+  const [character, setCharacter] = useState(data)
+
+ 
 useEffect(() => {
   axios.get(`https://swapi.dev/api/people`)
   .then (res =>{
-    console.log(res)
-    setCharacters(res.data)
+    setCharacter(res.data)
   })
   .catch (err => console.error(err))
 }, [])
 
-console.log('final', characters)
+console.log('final', character)
+
 
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
@@ -33,12 +35,12 @@ console.log('final', characters)
   return (
     <div className="App">
       <h1 className="Header">Characters</h1>
+      {/* <Character character={character}/> */}
       {
-      data.map(item =>{
-      return <div>
-        <h2>{item.name}</h2>
-          <p>`hailing from {item.homeworld}, {item.name} is a  human with {item.hair_color} hair, and {item.eye_color} eyes.</p>
-          </div>
+      character.map(character =>{
+      return (
+        <Character key = {`App-characterMap-character${character.created}`} character= {character} />
+      )
     })
 }
     </div>
diff --git a/src/components/Character.js b/src/components/Character.js
index 3d1667ad1..ba0e8acc9 100644
--- a/src/components/Character.js
+++ b/src/components/Character.js
@@ -1,2 +1,24 @@
 // Write your Character component here
+import React from 'react'
+import style from 'styled-components'
+// const StyledCharacter= style.div`
+// display: flex;
 
+// `
+
+const CharacterItem = (props) => {
+
+    const {character} = props
+    
+
+    return(
+       <div >
+        <h2>{character.name}</h2>
+        <button>Want To Learn More?</button>
+          {/* <p>{`hailing from ${character.homeworld}, ${character.name} is a  human with ${character.hair_color} hair, and ${character.eye_color} eyes.`}</p> */}
+      </div>
+    )
+}
+
+
+export default CharacterItem
\ No newline at end of file

From a2fadd0ce5a1c72eb1fb018317cf5d2df5943255 Mon Sep 17 00:00:00 2001
From: "enhopkin@gmail.com" <enhopkin@gmail.com>
Date: Fri, 18 Feb 2022 13:57:24 -0700
Subject: [PATCH 4/5] no clue when the tests started passing. I have no memory
 of "changing" anything.

---
 src/App.js                  | 28 ++++++++++++++++------------
 src/components/Character.js |  7 ++++++-
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index 57f2e2dbf..0d43a6386 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,27 +1,32 @@
 import React, {useState, useEffect} from 'react';
 import './App.css'
-import {data} from './mocks/handlers'
+
 import axios from 'axios'
 import Character from './components/Character'
 
 
-console.log('data', data)
-data.map(item =>{
-  console.log('hello', item)
-})
+// console.log('data', data)
+// data.map(item =>{
+//   console.log('hello', item)
+// })
 const App = () => {
-  const [character, setCharacter] = useState(data)
+  const [character, setCharacter] = useState([])
+  
+  const info= character.map(info => {
+    return ( info)
+  })
+
 
- 
 useEffect(() => {
   axios.get(`https://swapi.dev/api/people`)
   .then (res =>{
     setCharacter(res.data)
+    
   })
   .catch (err => console.error(err))
 }, [])
 
-console.log('final', character)
+
 
 
   // Try to think through what state you'll need for this app before starting. Then build out
@@ -35,14 +40,13 @@ console.log('final', character)
   return (
     <div className="App">
       <h1 className="Header">Characters</h1>
-      {/* <Character character={character}/> */}
-      {
+     <h2> {
       character.map(character =>{
       return (
-        <Character key = {`App-characterMap-character${character.created}`} character= {character} />
+        <Character key = {`App-characterMap-character${character.created}`} character= {character} info={info} />
       )
     })
-}
+      }</h2>
     </div>
   );
 }
diff --git a/src/components/Character.js b/src/components/Character.js
index ba0e8acc9..615f5e99a 100644
--- a/src/components/Character.js
+++ b/src/components/Character.js
@@ -1,6 +1,8 @@
 // Write your Character component here
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import style from 'styled-components'
+import axios from 'axios'
+import {data} from '../mocks/handlers'
 // const StyledCharacter= style.div`
 // display: flex;
 
@@ -10,7 +12,10 @@ const CharacterItem = (props) => {
 
     const {character} = props
     
+  
+   
 
+   
     return(
        <div >
         <h2>{character.name}</h2>

From 0e25afa89b562519c0800a772c7d9db49121b1cd Mon Sep 17 00:00:00 2001
From: "enhopkin@gmail.com" <enhopkin@gmail.com>
Date: Fri, 18 Feb 2022 15:57:35 -0700
Subject: [PATCH 5/5] the beginnings of styling

---
 src/App.js                  |  6 ++++--
 src/components/Character.js | 30 +++++++++++++++++++-----------
 src/index.css               |  2 +-
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0d43a6386..ac7d571a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,7 @@ const App = () => {
   const info= character.map(info => {
     return ( info)
   })
-
+// console.log('hello', info)
 
 useEffect(() => {
   axios.get(`https://swapi.dev/api/people`)
@@ -27,7 +27,9 @@ useEffect(() => {
 }, [])
 
 
-
+character.map(item => {
+  console.log ('waiting', item)
+})
 
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
diff --git a/src/components/Character.js b/src/components/Character.js
index 615f5e99a..8e628832e 100644
--- a/src/components/Character.js
+++ b/src/components/Character.js
@@ -1,27 +1,35 @@
 // Write your Character component here
 import React, {useState, useEffect} from 'react'
-import style from 'styled-components'
+import styled from 'styled-components'
 import axios from 'axios'
-import {data} from '../mocks/handlers'
-// const StyledCharacter= style.div`
-// display: flex;
 
-// `
+const StyledCharacter= styled.div`
+border: 1px solid lemonchiffon;
+border-radius: 20%;
+margin: 5%
+`
+const StyledButton= styled.button`
+background-color:coral;
+color:white;
 
+`
 const CharacterItem = (props) => {
-
+    const[button, setButton]= useState(true)
+    
     const {character} = props
     
-  
-   
+
+   const buttonClick = () => {
+    setButton(!button)
+   }
 
    
     return(
-       <div >
+       <StyledCharacter >
         <h2>{character.name}</h2>
-        <button>Want To Learn More?</button>
+        <StyledButton >Want To Learn More?</StyledButton>
           {/* <p>{`hailing from ${character.homeworld}, ${character.name} is a  human with ${character.hair_color} hair, and ${character.eye_color} eyes.`}</p> */}
-      </div>
+      </StyledCharacter>
     )
 }
 
diff --git a/src/index.css b/src/index.css
index 4b9bd8fc6..80cbb661b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,5 +3,5 @@ body {
   padding: 0;
   font-family: sans-serif;
   background-image: url('./images/sw-bg.jpg');
-  background-size:auto;
+  background-size:cover;
 }