LAB Solution | React IronContacts

App.css

// src/App.css

.App {
  text-align: center;
}

#action-buttons button {
  margin: 0 20px;
}

table {
  margin: 50px auto;
}

App.js

// src/App.js

import React from 'react';
import './App.css';

import ContactsList from './components/ContactsList';

const App = () => {
  return (
    <ContactsList />
  )
}

export default App;

ContactsList.js

// src/component/ContactsList.js

import React, { Component } from 'react';
import contactsFromJSON from './../contacts.json';
import OneContact from './OneContact';

class ContactsList extends Component {
  state = {
    contactsList: contactsFromJSON.splice(0, 5)
  }


  // ITERACIÓN 2 | Add New Random Contacts
  addNewContact = () => {
    // creamos un random contact a partir de contacts.json
    const randomContact = contactsFromJSON[Math.floor(Math.random() * contactsFromJSON.length)];

    // creamos una copia de nuestra lista de contactos, para no modificar directamente el contactsList del state (el metodo push() que usamos luego muta el array... aunque no es absolutamente necesario ya que luego redifiniremos el contenido de contactsList en el state)
    const updatedContactsList = [...this.state.contactsList];

    // si no existe ese randomContact en nuestro lista de contactos, lo añadimos a 'updatedContactsList'
    if(!updatedContactsList.includes(randomContact)) {
      updatedContactsList.push(randomContact);
    }

    // actualizamos la lista de contactos en el state
    this.setState({contactsList: updatedContactsList});
  }


  // ITERACIÓN 3 | Sort Contacts By Name
  sortByName = () => {
    // aplicamos el método sort sobre una copia del array de contactos (el metodo sort() muta el array, asi que mejor hacer una copia, aunque después redifinamos el contenido de contactsList en el state)
    const contactsSortedByName = [...this.state.contactsList].sort( (a,b) => {
      // convertimos los nombres de contactos a mayúsculas para asegurarnos de comparar el mismo string
      var nameA = a.name.toUpperCase();
      var nameB = b.name.toUpperCase();
      return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0;
    });
    
    // Actualizamos contactsList en el state con la copia de contactos ordenada por nombre (ascendiente)
    this.setState({contactsList: contactsSortedByName})
  }


  // ITERACIÓN 3 | Sort Contacts By Popularity
  sortByPopularity = () => {
    // aplicamos el método sort sobre una copia del array de contactos (el metodo sort() muta el array, asi que mejor hacer una copia, aunque después redifinamos el contenido de contactsList en el state)
    const contactsSortedByPopularity = [...this.state.contactsList].sort( (a,b) => b.popularity - a.popularity );
    // se puede hacer directamente 'b - a' ya que popularity es un número
    
    // Actualizamos contactsList en el state con la copia de contactos ordenada por popularidad (descendiente)
    this.setState({contactsList: contactsSortedByPopularity})
  }


  // ITERACIÓN 4 | Remove Contacts
  deleteContact = (id) => {
    // aquí no hace falta hacer una copia del array de contactos, porque filter() no muta (pero hay que guardarlo sí o sí en una nueva variable)
    const listOfContacts = this.state.contactsList.filter(contact => contact.id !== id)

    // Actualizamos contactsList en el state, con la lista que ha sido filtrada
    this.setState({contactsList: listOfContacts})
  }


  render() {
    return (
      <div className="App">
        <h1>IronContacts</h1>
        <div id="action-buttons">
          <button onClick={this.addNewContact}>Add Random Contact</button>
          <button onClick={this.sortByName}>Sort by Name</button>
          <button onClick={this.sortByPopularity}>Sort by Popularity</button>
        </div>

        <table>
          <thead>
            <tr>
              <th>Picture</th>
              <th>Name</th>
              <th>Popularity</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {/* ITERACIÓN 1 | Display 5 Contacts */}
            {this.state.contactsList.map( (oneContact, index) => {
              return <OneContact 
                // id={oneContact.id}
                // pictureUrl={oneContact.pictureUrl}
                // name={oneContact.name}
                // popularity={oneContact.popularity}
                {...oneContact} // lo mismo pero en 1 línea
                key={oneContact.id}
                deleteContact={()=>this.deleteContact(oneContact.id)}
              />
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

export default ContactsList;

DeleteBtn.js

// src/component/DeleteBtn.js

import React from 'react';

const DeleteBtn = (props) => {
  return (
    <td>
      <button onClick={props.deleteContactFnc}>Delete</button>
    </td>
  )
}

export default DeleteBtn;

OneContact.js

// src/component/OneContact.js

import React from 'react';
import DeleteBtn from './DeleteBtn';

const OneContact = (props) => {
  const { pictureUrl, name, popularity, deleteContact } = props;
  
  return (
    <tr>
      <td><img src={pictureUrl} alt="Contact picture" width="150" height="200" /></td>
      <td>{name}</td>
      <td>{popularity.toFixed(2)}</td>
      <DeleteBtn deleteContactFnc={deleteContact} />
    </tr>
  )
}

export default OneContact;