BCN-WDFT- LLORENÇ MARTINEZ

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bulma": "^0.7.4",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-scripts": "2.1.5"

src/App.js

@@ -1,25 +1,83 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Ironcontacts from './components/Ironcontacts';
+import contacts from './data/contacts.json';
+import Titles from './components/Titles';
+
+
 
 class App extends Component {
+
+  //Definir estado actuaql
+  state = {
+    arrayContacts : contacts.slice(0,5),
+  }
+
+  // todo lq eu renderizamos de Ironcontacts.js
+  renderList(){
+    return this.state.arrayContacts.map((contact, index) => {
+      return <Ironcontacts 
+                  key={`id-${index}`} 
+                  name={contact.name} 
+                  pictureUrl={contact.pictureUrl} 
+                  popularity={contact.popularity}
+                  index={index}
+                  deleteHandler={this.deleteContact} />
+    })
+  }
+
+  addRandom = () => {
+    const randomContact = contacts[Math.floor(Math.random() * contacts.length)];
+    // estado que queremos crear    ... Array actual
+    this.setState({
+      arrayContacts:[...this.state.arrayContacts, randomContact]
+    })
+  }
+  // Ordenar por nombre utlizando sort
+  sortName = () => {
+    this.setState({
+      arrayContacts: this.state.arrayContacts.sort(function(a, b) {
+        if (a.name < b.name) {
+          return -1;
+        }
+        if (a.name > b.name) {
+          return 1;
+        }
+        return 0;
+      })
+
+    })
+  }
+  // ordenaar por valor utlizando sort
+  sortPopularity = () => {
+    this.setState({
+      arrayContacts: this.state.arrayContacts.sort(function(a, b) {
+        return b.popularity - a.popularity;
+      })
+
+    })
+  }
+  // Eliminar pasando como parametro el contact del array y luego actualizamos estado
+  deleteContact = (contact) => {
+    let { arrayContacts } = this.state
+    arrayContacts.splice(contact, 1)
+    this.setState({
+      arrayContacts
+    })
+  }
+
+
+
+  // Rendetizamos todo
   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> 
+        <button onClick={this.addRandom}>Random</button>
+        <button onClick={this.sortName}>Sort Name</button>
+        <button onClick={this.sortPopularity}>Sort Popularity</button>
+
+        <Titles />
+        {this.renderList()}      
       </div>
     );
   }

src/components/Ironcontacts.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+
+class Ironcontacts extends Component {
+  render() {
+    // Guardamos en una const las props que biene del App.js justamente del renderList()
+    const {deleteHandler, index, name, popularity, pictureUrl} = this.props;
+    return (
+      <div class="containerIroncontacts">
+        <img src={pictureUrl} alt="pic"></img>
+        <p>{name}</p>
+        <p>{popularity}</p>
+        <button onClick={() => deleteHandler(index)}>Delete</button>
+      </div>
+    );
+  }
+}
+
+export default Ironcontacts;

src/components/Titles.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+class Titles extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Iron Contacts</h1>
+        <div class="containerIroncontacts">
+        <h2>Picture</h2>
+        <h2>Name</h2>
+        <h2>Pupularity</h2>
+        </div>
+
+      </div>
+    );
+  }
+}
+
+export default Titles;

src/index.css

@@ -12,3 +12,17 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.containerIroncontacts{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+
+}
+
+.containerIroncontacts img{
+  width: 100px;
+  height: 150px;
+  margin-bottom: 10px;
+
+}

src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change