BER - Jana & Roberta

labs/lab-react-ironcontacts/starter-code/src/index.js

@@ -2,16 +2,90 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import './index.css';
+import contacts from "./contacts.json";
+
 
 class App extends React.Component {
  constructor(props) {
  super(props);
+ this.state = {
+ contacts : contacts,
+ subContacts : contacts.slice(0,5)
+ }
+ }
+
+ handleClick(){
+ let newSubContacts = this.state.subContacts.slice();
+ newSubContacts.push(contacts[Math.floor(Math.random()*(contacts.length-1))]);
+ this.setState({
+ subContacts : newSubContacts
+ })
+ }
+
+ sortName(){
+ let sortedContacts = this.state.subContacts.slice()
+ sortedContacts.sort(function(a,b) {return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0);} ); 
+ console.log(sortedContacts)
+ this.setState({
+ subContacts : sortedContacts
+ })
+ }
+
+ sortPopularity(){
+ let sortedPopContacts = this.state.subContacts.slice()
+ sortedPopContacts.sort(function(b,a) {return (a.popularity > b.popularity) ? 1 : ((b.popularity> a.popularity) ? -1 : 0);} ); 
+ console.log(sortedPopContacts)
+ this.setState({
+ subContacts : sortedPopContacts
+ })
+ }
+
+ deleteContact(i){
+ let reducedContacts = this.state.subContacts.slice()
+ // console.log()
+ reducedContacts.splice(i,1) //change 0 to the key value of the button // or table element
+ this.setState({
+ subContacts : reducedContacts
+ })
  }
 
  render() {
  return (
  <div>
  <h1>IronContacts</h1>
+
+ <button onClick={()=> this.handleClick()}>Add random Contact</button>
+ <button onClick={()=> this.sortName()}>Sort by Name</button>
+ <button onClick={()=> this.sortPopularity()}>Sort by Popularity</button>
+
+
+ <table>
+ <thead>
+ <tr>
+ <th>Picture</th>
+ <th>Name</th> 
+ <th>Popularity</th>
+ <th>Action</th>
+
+ </tr>
+ </thead>
+ <tbody>
+
+ {/* für jeden actor fügen wir picture name popularity ein */}
+ {this.state.subContacts.map((actor,i)=>
+ <tr key={i}>
+ <td><img src={actor.pictureUrl} alt=""/> </td>
+ <td>{actor.name}</td> 
+ <td>{actor.popularity.toFixed(2)}</td>
+ <td><button onClick={()=> this.deleteContact(i)}>Delete</button></td>
+ </tr>
+
+ )}
+ </tbody>
+
+ </table>
+
+
  </div>
  );
  }