From f39f1257cacdc630cd0424f02a91a692cda80f2c Mon Sep 17 00:00:00 2001
From: screeeen <miguel@screenimplosion.com>
Date: Wed, 15 May 2019 00:09:00 +0200
Subject: [PATCH 1/2] nothing works

---
 src/App.js                        | 20 +++++---------------
 src/components/PopularContacts.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 src/components/PopularContacts.js

diff --git a/src/App.js b/src/App.js
index 7e261ca47..cfd098e3e 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,15 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import PopularContacts from './components/PopularContacts.js';
+import contacts from './data/contacts.json';
 import './App.css';
 
+
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <h1>Popular Contacts</h1>
+          <PopularContacts contactsArray={contacts}></PopularContacts>
       </div>
     );
   }
diff --git a/src/components/PopularContacts.js b/src/components/PopularContacts.js
new file mode 100644
index 000000000..c17aaf576
--- /dev/null
+++ b/src/components/PopularContacts.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+
+class PopularContacts extends Component {
+constructor(props){
+  super();
+  this.state = {
+    contacts : props.contactsArray.slice(0,5)
+  }
+}
+
+
+
+  render() {
+    return (
+      <ul>
+      {
+      this.state.contacts.map ((element,index) => {
+        return (
+          <li>{{element}}</li>
+        )
+      })
+
+      }
+      </ul>
+    )
+  }
+}
+export default PopularContacts;
\ No newline at end of file

From 7f9db530d2cb88c31dd4a70dbdbaa15addc7ab03 Mon Sep 17 00:00:00 2001
From: screeeen <miguel@screenimplosion.com>
Date: Wed, 15 May 2019 05:19:18 +0200
Subject: [PATCH 2/2] iteration 1

---
 src/components/Card.css           | 37 +++++++++++++++++++++++++++++++
 src/components/Card.js            | 18 +++++++++++++++
 src/components/PopularContacts.js | 14 ++++++++++--
 3 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Card.css
 create mode 100644 src/components/Card.js

diff --git a/src/components/Card.css b/src/components/Card.css
new file mode 100644
index 000000000..3e9438376
--- /dev/null
+++ b/src/components/Card.css
@@ -0,0 +1,37 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+
+.card{
+  width: 360px;
+  height: 200px;
+  border: 1x solid black;
+  display: flex;
+  flex-direction: row;
+  justify-items: flex-start;
+  align-content: center;
+  /* margin: 20px; */
+  margin: 0 auto;
+
+}
+
+.score{
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-start;
+  margin-left: 20px;
+}
+
+.card h1{
+  font-size: 1.2em;
+} 
+.card h3{
+  font-size: .8em;
+  text-align: left;
+} 
+
+.card img{
+  width: 140px;
+} 
+
diff --git a/src/components/Card.js b/src/components/Card.js
new file mode 100644
index 000000000..645ebd08d
--- /dev/null
+++ b/src/components/Card.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import './Card.css';
+
+const Card = (props) => {
+  return (
+    <li>
+      <div className="card">
+        <img src={props.pic} alt="" />
+        <div className="score">
+          <h1>{props.name}</h1>
+          <h3>{props.popular}</h3>
+        </div>
+      </div>
+    </li>
+  )
+}
+
+export default Card;
diff --git a/src/components/PopularContacts.js b/src/components/PopularContacts.js
index c17aaf576..f68e5ac32 100644
--- a/src/components/PopularContacts.js
+++ b/src/components/PopularContacts.js
@@ -1,4 +1,7 @@
 import React, { Component } from 'react'
+import Card from './Card'
+
+
 
 class PopularContacts extends Component {
 constructor(props){
@@ -13,10 +16,17 @@ constructor(props){
   render() {
     return (
       <ul>
+        {/* <li>
+        Picture Name Popularity
+        </li> */}
       {
-      this.state.contacts.map ((element,index) => {
+      this.state.contacts.map ((oneContact,index) => {
         return (
-          <li>{{element}}</li>
+          <Card key={index}
+          name={oneContact.name}
+          pic={oneContact.pictureUrl}
+          popular={oneContact.popularity}
+            />
         )
       })