From 47ab9d1fc50822adcd184d90c0d7d75664f6cead Mon Sep 17 00:00:00 2001 From: Daniel Duque Date: Tue, 5 Nov 2019 16:20:54 +0100 Subject: [PATCH 1/7] Iteration 1 done --- src/App.js | 21 ++++++--------------- src/components/Contact.js | 13 +++++++++++++ src/components/ContactList.js | 22 ++++++++++++++++++++++ src/components/ContactTable.js | 18 ++++++++++++++++++ 4 files changed, 59 insertions(+), 15 deletions(-) create mode 100644 src/components/Contact.js create mode 100644 src/components/ContactList.js create mode 100644 src/components/ContactTable.js diff --git a/src/App.js b/src/App.js index 7e261ca47..bfe6c8e77 100755 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,16 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +import ContactList from './components/ContactList'; +import ContactTable from './components/ContactTable'; class App extends Component { render() { return (
-
- logo -

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

- - Learn React - -
+

IronContacts

+ + +
); } diff --git a/src/components/Contact.js b/src/components/Contact.js new file mode 100644 index 000000000..2fcc01e9b --- /dev/null +++ b/src/components/Contact.js @@ -0,0 +1,13 @@ +import React from 'react' + +const Contact = ({ pictureUrl, name, popularity }) => { + return ( + + {name} + {name} + {popularity} + + ) +} + +export default Contact; diff --git a/src/components/ContactList.js b/src/components/ContactList.js new file mode 100644 index 000000000..78b742c3d --- /dev/null +++ b/src/components/ContactList.js @@ -0,0 +1,22 @@ +import React from 'react' +import contacts from '../data/contacts.json'; +import Contact from './Contact'; + +const ContactList = () => { + return ( + + { + contacts.map((contact, index) => + + ) + } + + ) +} + +export default ContactList; diff --git a/src/components/ContactTable.js b/src/components/ContactTable.js new file mode 100644 index 000000000..200b6e33d --- /dev/null +++ b/src/components/ContactTable.js @@ -0,0 +1,18 @@ +import React from 'react' + +const ContactList = (props) => { + return ( + + + + + + + + + {props.children} +
PictureNamePopularity
+ ) +} + +export default ContactList; \ No newline at end of file From c73178e5ea124697cd16edc683987e5d7316e02b Mon Sep 17 00:00:00 2001 From: Daniel Duque Date: Tue, 5 Nov 2019 16:23:40 +0100 Subject: [PATCH 2/7] Iteration 1 done --- src/components/ContactList.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ContactList.js b/src/components/ContactList.js index 78b742c3d..8ba108382 100644 --- a/src/components/ContactList.js +++ b/src/components/ContactList.js @@ -3,10 +3,11 @@ import contacts from '../data/contacts.json'; import Contact from './Contact'; const ContactList = () => { + const shortContacts = contacts.slice(0,5); return ( { - contacts.map((contact, index) => + shortContacts.map((contact, index) => Date: Tue, 5 Nov 2019 16:40:47 +0100 Subject: [PATCH 3/7] Converted to a class --- src/App.js | 5 +-- src/components/ContactList.js | 63 ++++++++++++++++++++++++---------- src/components/ContactTable.js | 18 ---------- 3 files changed, 45 insertions(+), 41 deletions(-) delete mode 100644 src/components/ContactTable.js diff --git a/src/App.js b/src/App.js index bfe6c8e77..e03a985a7 100755 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,13 @@ import React, { Component } from 'react'; import './App.css'; import ContactList from './components/ContactList'; -import ContactTable from './components/ContactTable'; class App extends Component { render() { return (

IronContacts

- - - +
); } diff --git a/src/components/ContactList.js b/src/components/ContactList.js index 8ba108382..6d17840c6 100644 --- a/src/components/ContactList.js +++ b/src/components/ContactList.js @@ -1,23 +1,48 @@ -import React from 'react' +import React, { + Component +} from 'react'; import contacts from '../data/contacts.json'; import Contact from './Contact'; -const ContactList = () => { - const shortContacts = contacts.slice(0,5); - return ( - - { - shortContacts.map((contact, index) => - - ) - } - - ) -} +export default class ContactList extends Component { + + // Get first 5 contacts + shortContacts = (contacts) => { + return contacts.slice(0,5); + } + + // Get a random contact + getRandom = () => { + let randomIndex = Math.floor((Math.random() * contacts.length) + 0); + return contacts[randomIndex]; + } -export default ContactList; + render () { + return ( +
+ + + + + + + + + + + { + this.shortContacts(contacts).map((contact, index) => + + ) + } + +
PictureNamePopularity
+
+ ) + } +} diff --git a/src/components/ContactTable.js b/src/components/ContactTable.js deleted file mode 100644 index 200b6e33d..000000000 --- a/src/components/ContactTable.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' - -const ContactList = (props) => { - return ( - - - - - - - - - {props.children} -
PictureNamePopularity
- ) -} - -export default ContactList; \ No newline at end of file From 005e6dac9876355a2db18a5d02d92ec94a36bc59 Mon Sep 17 00:00:00 2001 From: Daniel Duque Date: Tue, 5 Nov 2019 17:12:16 +0100 Subject: [PATCH 4/7] Iteration 2 done --- src/components/ContactList.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/ContactList.js b/src/components/ContactList.js index 6d17840c6..1a941a60c 100644 --- a/src/components/ContactList.js +++ b/src/components/ContactList.js @@ -1,26 +1,31 @@ import React, { Component } from 'react'; -import contacts from '../data/contacts.json'; +import contactsJSON from '../data/contacts.json'; import Contact from './Contact'; export default class ContactList extends Component { - - // Get first 5 contacts - shortContacts = (contacts) => { - return contacts.slice(0,5); - } + constructor() { + super(); + this.state = { + contacts: contactsJSON.slice(0, 5) + } + } + // Get a random contact - getRandom = () => { - let randomIndex = Math.floor((Math.random() * contacts.length) + 0); - return contacts[randomIndex]; + addRandom = () => { + let randomIndex = Math.floor((Math.random() * contactsJSON.length) + 0); + this.state.contacts.push(contactsJSON[randomIndex]); + this.setState({ + contacts: this.state.contacts + }) } render () { return (
- + @@ -31,7 +36,7 @@ export default class ContactList extends Component { { - this.shortContacts(contacts).map((contact, index) => + this.state.contacts.map((contact, index) => Date: Tue, 5 Nov 2019 17:38:37 +0100 Subject: [PATCH 5/7] Iteration 3 done --- src/components/ContactList.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/ContactList.js b/src/components/ContactList.js index 1a941a60c..b1df379f0 100644 --- a/src/components/ContactList.js +++ b/src/components/ContactList.js @@ -9,6 +9,7 @@ export default class ContactList extends Component { constructor() { super(); this.state = { + // Start with only 5 contacts contacts: contactsJSON.slice(0, 5) } } @@ -17,15 +18,31 @@ export default class ContactList extends Component { addRandom = () => { let randomIndex = Math.floor((Math.random() * contactsJSON.length) + 0); this.state.contacts.push(contactsJSON[randomIndex]); - this.setState({ + this.setState({ contacts: this.state.contacts }) } + // Sort by name + sortName = () => { + this.setState({ + contacts: this.state.contacts.sort((a, b) => a.name.localeCompare(b.name)) + }) + } + + // Sort by popularity + sortPopularity = () => { + this.setState({ + contacts: this.state.contacts.sort((a, b) => b.popularity - a.popularity) + }) + } + render () { return (
+ +
From 2cbf7ef343c9474228d26a4cdde5659ac7b5071f Mon Sep 17 00:00:00 2001 From: Daniel Duque Date: Tue, 5 Nov 2019 17:59:22 +0100 Subject: [PATCH 6/7] Iteration 4 done --- src/components/Contact.js | 3 ++- src/components/ContactList.js | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/Contact.js b/src/components/Contact.js index 2fcc01e9b..04d67f34c 100644 --- a/src/components/Contact.js +++ b/src/components/Contact.js @@ -1,11 +1,12 @@ import React from 'react' -const Contact = ({ pictureUrl, name, popularity }) => { +const Contact = ({ pictureUrl, name, popularity, deleteContact }) => { return ( + ) } diff --git a/src/components/ContactList.js b/src/components/ContactList.js index b1df379f0..37aeaab0a 100644 --- a/src/components/ContactList.js +++ b/src/components/ContactList.js @@ -37,6 +37,17 @@ export default class ContactList extends Component { }) } + // Delete contact + deleteContact = (name) => { + let newContacts = [...this.state.contacts]; + this.setState({ + contacts: newContacts.filter((contact) => { + return contact.name !== name + }) + }) + console.log('!') + } + render () { return (
@@ -59,6 +70,7 @@ export default class ContactList extends Component { pictureUrl={contact.pictureUrl} name={contact.name} popularity={contact.popularity} + deleteContact={this.deleteContact} /> ) } From 9487fe1393eec2df98e46f70506b4418c5a9c182 Mon Sep 17 00:00:00 2001 From: Daniel Duque Date: Tue, 5 Nov 2019 18:02:27 +0100 Subject: [PATCH 7/7] Iteration 5 done --- src/App.css | 6 ++++++ src/components/ContactList.js | 1 + 2 files changed, 7 insertions(+) diff --git a/src/App.css b/src/App.css index b41d297ca..9bfc759c3 100755 --- a/src/App.css +++ b/src/App.css @@ -31,3 +31,9 @@ transform: rotate(360deg); } } + +img { + width: auto; + max-height: 300px; + border-radius: 5px; +} diff --git a/src/components/ContactList.js b/src/components/ContactList.js index 37aeaab0a..84b3d8a2c 100644 --- a/src/components/ContactList.js +++ b/src/components/ContactList.js @@ -60,6 +60,7 @@ export default class ContactList extends Component {
+
{name} {name} {popularity}
Picture Name PopularityAction