From 73867a3573237315f6372e2b3407d2c1223b53c0 Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Mon, 7 Oct 2019 22:35:29 +0200 Subject: [PATCH 1/5] add iteration 1 --- src/App.js | 52 +++++++++++++++++++++++++---------- src/components/ContactCard.js | 27 ++++++++++++++++++ src/index.css | 17 ++++++++++++ 3 files changed, 81 insertions(+), 15 deletions(-) create mode 100644 src/components/ContactCard.js diff --git a/src/App.js b/src/App.js index 7e261ca47..31dbcfac7 100755 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,47 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +import ContactCard from './components/ContactCard'; +import contacts from './data/contacts.json' + +let firstFiveContacts = contacts.slice(0,5); +console.log(firstFiveContacts[3]); class App extends Component { + state = { + initialContacts: firstFiveContacts, + } + + // handleAddContact = () =>{ + // const { firstFiveContacts } = this.state; + // this.setState({ + // gradients: [...firstFiveContacts], + + // }, () => { + // console.log('🤣', this.state.gradients) + // }) + // } + render() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+

IronContacts

+ +
+ {firstFiveContacts.map((card, index) =>{ + return ( + + ); + })} +
+ + {/* + theContacts = {this.state.contacts} + */}
); } diff --git a/src/components/ContactCard.js b/src/components/ContactCard.js new file mode 100644 index 000000000..0d5b889e2 --- /dev/null +++ b/src/components/ContactCard.js @@ -0,0 +1,27 @@ +import React from 'react'; + +function ContactCard(props){ + + const {name, pictureUrl, popularity} = props; + + return ( +
+ + + + + + + + + + + +
PictureNamePopularity
+ actor-picture + {name}{popularity}
+
+ ); +} + +export default ContactCard; \ No newline at end of file diff --git a/src/index.css b/src/index.css index cee5f348f..4573be7d4 100755 --- a/src/index.css +++ b/src/index.css @@ -12,3 +12,20 @@ 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; +} \ No newline at end of file From 76f58445f67f87860567543e1ce9b2a1b6c162e8 Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Tue, 8 Oct 2019 14:56:14 +0200 Subject: [PATCH 2/5] add iteration 2 --- src/App.js | 46 ++++++++++++++++++++++++----------- src/components/Button.js | 11 +++++++++ src/components/ContactCard.js | 2 +- 3 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 src/components/Button.js diff --git a/src/App.js b/src/App.js index 31dbcfac7..857d0c6ec 100755 --- a/src/App.js +++ b/src/App.js @@ -1,33 +1,51 @@ import React, { Component } from 'react'; import './App.css'; import ContactCard from './components/ContactCard'; -import contacts from './data/contacts.json' +import contacts from './data/contacts.json'; +import Button from './components/Button'; let firstFiveContacts = contacts.slice(0,5); -console.log(firstFiveContacts[3]); +let randomContact = contacts[Math.floor(Math.random() * contacts.length)]; + class App extends Component { state = { - initialContacts: firstFiveContacts, + contacts: firstFiveContacts, } + + clickAddRandomContact = () => { + const { contacts } = this.state; + let random = Math.floor(Math.random() * (contacts.length)); + // console.log(`obtengo el random: ${random}`); + // console.log('clickAddRandomContact',this.state.contacts) + // console.log('[contacts[random], ...contacts]', [contacts[random], ...contacts]) + this.setState({ + contacts: [contacts[random], ...contacts] + }) + + } - // handleAddContact = () =>{ - // const { firstFiveContacts } = this.state; - // this.setState({ - // gradients: [...firstFiveContacts], - - // }, () => { - // console.log('🤣', this.state.gradients) - // }) - // } + addContact = () => { + const { contacts } = this.state; + this.setState({ + contacts: [randomContact, ...contacts] + }) + } render() { return (

IronContacts

- + {/* */} + + +
- {firstFiveContacts.map((card, index) =>{ + {this.state.contacts.map((card, index) =>{ return ( { + return ( + + ); +}; + +export default Button; \ No newline at end of file diff --git a/src/components/ContactCard.js b/src/components/ContactCard.js index 0d5b889e2..ab474a261 100644 --- a/src/components/ContactCard.js +++ b/src/components/ContactCard.js @@ -14,7 +14,7 @@ function ContactCard(props){ - actor-picture + actor {name} {popularity} From 07fb9bf6e2b0ec49da74a724e42957cca849e093 Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Tue, 8 Oct 2019 20:46:10 +0200 Subject: [PATCH 3/5] add iteration 3 - sorted --- src/App.js | 34 ++++++++++++++++++++++++++++++++-- src/index.css | 11 +++++++++++ 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 857d0c6ec..dfd0e964a 100755 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,6 @@ 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, @@ -22,7 +21,7 @@ class App extends Component { this.setState({ contacts: [contacts[random], ...contacts] }) - + } addContact = () => { @@ -32,6 +31,29 @@ class App extends Component { }) } + 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(){ + + } + render() { return (
@@ -44,6 +66,14 @@ class App extends Component { Add Random Contact + + + +
{this.state.contacts.map((card, index) =>{ return ( diff --git a/src/index.css b/src/index.css index 4573be7d4..60c727071 100755 --- a/src/index.css +++ b/src/index.css @@ -28,4 +28,15 @@ td{ img{ max-width: 150px; +} + +button{ + color: #0099CC; + background: transparent; + border: 2px solid #0099CC; + border-radius: 6px; + padding: 15px; + margin: 10px; + font-size: 1rem; + } \ No newline at end of file From f31f3996d8256de32c98bdc7a0bd46ecd9ce7e41 Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Tue, 8 Oct 2019 21:15:25 +0200 Subject: [PATCH 4/5] add iteration 3 - sorted by popularity --- src/App.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index dfd0e964a..3ed8a7282 100755 --- a/src/App.js +++ b/src/App.js @@ -33,7 +33,7 @@ class App extends Component { sortByNames = () => { const { contacts } = this.state; - const sortedContacts = contacts.sort( + const sortedContacts = contacts.sort( (a,b) => { if(a.name < b.name){ return -1; @@ -50,9 +50,14 @@ class App extends Component { }; - sortByPopularity(){ + sortByPopularity = () => { + const { contacts } = this.state; + const sortedByPop = contacts.sort((a,b) => a.popularity - b.popularity ); - } + this.setState({ + contacts: sortedByPop + }) + }; render() { return ( From edc672a5e6fd984d5966d2ddb05da560a5c1fcc5 Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Fri, 11 Oct 2019 12:36:35 +0200 Subject: [PATCH 5/5] done --- src/App.js | 32 ++++++++++++++++++++++---------- src/components/ContactCard.js | 11 +++++++++-- 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 3ed8a7282..0bafc6ddd 100755 --- a/src/App.js +++ b/src/App.js @@ -16,12 +16,9 @@ class App extends Component { const { contacts } = this.state; let random = Math.floor(Math.random() * (contacts.length)); // console.log(`obtengo el random: ${random}`); - // console.log('clickAddRandomContact',this.state.contacts) - // console.log('[contacts[random], ...contacts]', [contacts[random], ...contacts]) this.setState({ contacts: [contacts[random], ...contacts] }) - } addContact = () => { @@ -47,7 +44,6 @@ class App extends Component { this.setState({ contacts: sortedContacts }) - }; sortByPopularity = () => { @@ -58,14 +54,32 @@ class App extends Component { 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 (

IronContacts

- {/* */}
- {/* - theContacts = {this.state.contacts} - */}
); } diff --git a/src/components/ContactCard.js b/src/components/ContactCard.js index ab474a261..f37479d0d 100644 --- a/src/components/ContactCard.js +++ b/src/components/ContactCard.js @@ -1,9 +1,10 @@ import React from 'react'; +import Button from './Button'; function ContactCard(props){ - const {name, pictureUrl, popularity} = props; - + const {name, pictureUrl, popularity, remove} = props; + console.log({remove}) return (
@@ -11,6 +12,7 @@ function ContactCard(props){ + +
Picture Name PopularityAction
@@ -18,6 +20,11 @@ function ContactCard(props){ {name} {popularity} + +