BCN-FT Gerard Funes

src/App.css

@@ -22,6 +22,24 @@
 .App-link {
   color: #61dafb;
 }
+.container-card{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+}
+.card{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin: 15px auto;
+
+}
+
+.img-card{
+  width: 90px;
+
+}
 
 @keyframes App-logo-spin {
   from {

src/App.js

@@ -1,25 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Table from './components/Table.js';
 
 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>
+      <div  className='container-card'>
+        <Table />
       </div>
     );
   }

src/components/ContactCard.js

@@ -0,0 +1,21 @@
+
+import React from 'react'
+
+
+
+const ContactCard = (props) => {
+    const { img, name, popularity, clickToDelete } = props
+    return (
+
+            <div className='card'>
+                <img className='img-card' src={img} alt="" />
+                <p>{name}</p>
+                <p>{popularity}</p>
+                <button onClick={clickToDelete}>Delete</button>
+            </div>
+
+    )
+}
+
+
+export default ContactCard;

src/components/Table.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import contacts from '../data/contacts.json'
+import ContactCard from './ContactCard'
+
+
+
+
+class Table extends Component {
+    state = {
+        contactlist: contacts.slice(0, 5)
+    };
+
+
+
+
+    deleteContactHandler = (index) => {
+        console.log(index)
+        const contactsCopy = [...this.state.contactlist]
+        const filtered = contactsCopy.filter(contact => contact.name !== index)
+        //console.log(filtered)
+        this.setState({
+            contactlist: filtered
+        })
+    }
+    addRandomContact = () => {
+        const contactsCopy = [...this.state.contactlist]
+        const randomContact = contacts[Math.floor(Math.random() * contacts.length)]
+        contactsCopy.push(randomContact)
+        this.setState({
+            contactlist: contactsCopy
+        })
+
+    }
+
+    sortByName = () => {
+        const contactsCopy = [...this.state.contactlist]
+
+        const sortByName = contactsCopy.sort( (a, b)=> {
+            return a.name < b.name ? -1 :a.name > b.name? 1: 0;
+        })
+        this.setState({
+            contactlist: sortByName
+        })
+        console.log(contactsCopy)
+    }
+
+    sortByPopularity = () => {
+        const contactsCopy = [...this.state.contactlist]
+
+        const sortByPopularity = contactsCopy.sort( (a, b)=> {
+            return a.popularity < b.popularity ? -1 :a.popularity > b.popularity? 1: 0;
+        })
+        this.setState({
+            contactlist: sortByPopularity
+        })
+
+    }
+    render() {
+        return (
+            <div>
+
+                <h2>Picture</h2>
+                <h2>Name</h2>
+                <h2>Popularity</h2>
+                <button onClick={this.addRandomContact}>Add Contact</button>
+                <button onClick={this.sortByName}>Sort by name</button>
+                <button onClick={this.sortByPopularity}>Sort by Popularity</button>
+                <ul>
+                    {
+                        this.state.contactlist.map(oneContact =>
+                            <ContactCard key={oneContact.name} img={oneContact.pictureUrl} name={oneContact.name} popularity={oneContact.popularity} clickToDelete={() => this.deleteContactHandler(oneContact.name)} />)
+                    }
+                </ul>
+            </div>
+        )
+    }
+}
+
+export default Table;