BCN-PT-ElenaPiaggio

src/App.js

@@ -1,25 +1,112 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import ContactCard from './components/ContactCard';
+import contacts from './data/contacts.json';
+import Button from './components/Button';
+
+let firstFiveContacts = contacts.slice(0,5);
+let randomContact = contacts[Math.floor(Math.random() * contacts.length)];
 
 class App extends Component {
+  state = {
+    contacts: firstFiveContacts,
+  } 
+
+  clickAddRandomContact = () => {
+    const { contacts } = this.state;
+    let random = Math.floor(Math.random() * (contacts.length));
+    // console.log(`obtengo el random: ${random}`);
+    this.setState({
+      contacts: [contacts[random], ...contacts]
+    })
+  }
+
+  addContact = () => {
+    const { contacts } = this.state;
+    this.setState({
+      contacts: [randomContact, ...contacts]
+    })
+  }
+
+  sortByNames = () => {
+    const { contacts } = this.state;
+    const sortedContacts = contacts.sort(
+      (a,b) => {
+      if(a.name < b.name){
+        return -1;
+      } else if(a.name > b.name){
+        return 1;
+      } else{
+        return 0;
+      }
+    })
+
+    this.setState({
+      contacts: sortedContacts
+    })
+    };
+
+  sortByPopularity = () => {
+    const { contacts } = this.state;
+    const sortedByPop = contacts.sort((a,b) => a.popularity - b.popularity );
+
+    this.setState({
+      contacts: sortedByPop
+    })
+  };
+
+  removeContact = (contact) => {
+    const {contacts} = this.state;
+
+    // remove the contact 
+    /* exemple with arrow functions
+     let tasks = [
+      {'name': 'write', 'duration': 60},
+      {'name': 'workout', 'duration': 120},
+      {'name': 'duolingo', 'duration': 170}
+    ]; 
+     let dificultad = tasks.filter((task) => task.duration >= 120);
+    */
+
+    const contactFiltered = contacts.filter((contactActtual) => contactActtual.name !== contact.name);
+    console.log("contactos filtrados", contactFiltered);
+
+    this.setState({
+      contacts: contactFiltered
+    })
+  };
+
   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>IronContacts</h1>
+
+        <Button myProp={this.clickAddRandomContact}>
+          Add Random Contact
+        </Button>
+
+        <Button myProp={this.sortByNames}>
+          Sort by name
+        </Button>
+
+        <Button myProp={this.sortByPopularity}>
+          Sort by popularity
+        </Button>
+
+        <div className="wrapper">
+          {this.state.contacts.map((card, index) =>{
+            return (
+              <ContactCard 
+                key={`${card.name}-${index}`} 
+                name={card.name} 
+                pictureUrl={card.pictureUrl}
+                popularity={card.popularity}
+                remove={this.removeContact.bind(this.state, card)}
+              />
+            );
+          })}
+        </div>
+
       </div>
     );
   }

src/components/Button.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Button = ({ children, myProp }) => {
+  return (
+    <button onClick={myProp}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/ContactCard.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Button from './Button';
+
+function ContactCard(props){
+
+    const {name, pictureUrl, popularity, remove} = props;
+    console.log({remove})
+    return (
+        <div className="contact-card">
+            <table className="table-contact-card">
+                <tr>
+                    <th>Picture</th>
+                    <th>Name</th>
+                    <th>Popularity</th>
+                    <th>Action</th>
+                </tr>
+                <tr>
+                    <td>
+                        <img src={pictureUrl} alt="actor"/>
+                    </td>
+                    <td>{name}</td>
+                    <td>{popularity}</td>
+                    <td>
+                        <Button myProp={remove}>
+                            Delete
+                        </Button>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    );
+}
+
+export default ContactCard;

src/index.css

@@ -12,3 +12,31 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+table{
+  display: table;
+  font-size: 2em;
+  width: 50%;
+  margin: auto;
+  margin: 0 auto;
+  text-align: left;
+}
+
+td{
+  width: 33%;
+}
+
+img{
+  max-width: 150px;
+}
+
+button{
+  color: #0099CC;
+  background: transparent;
+  border: 2px solid #0099CC;
+  border-radius: 6px;
+  padding: 15px;
+  margin: 10px;
+  font-size: 1rem;
+
+}