From eeabbf35035196220531f8d76969365c2a0e781f Mon Sep 17 00:00:00 2001 From: Edu Cortada Date: Tue, 19 Mar 2019 15:40:12 +0100 Subject: [PATCH 1/6] Iteration 1 | Display 5 Contacts --- package-lock.json | 82 ++++++++++++------------------------------ src/App.css | 40 ++++++++------------- src/App.js | 43 ++++++++++++---------- src/components/Card.js | 15 ++++++++ 4 files changed, 77 insertions(+), 103 deletions(-) create mode 100644 src/components/Card.js diff --git a/package-lock.json b/package-lock.json index 679a99b5a..034d0a0b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2791,8 +2791,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2810,13 +2809,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2829,18 +2826,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -2943,8 +2937,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -2954,7 +2947,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2967,20 +2959,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2997,7 +2986,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3070,8 +3058,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3081,7 +3068,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3157,8 +3143,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3188,7 +3173,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3206,7 +3190,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3245,13 +3228,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -6223,8 +6204,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -6242,13 +6222,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6261,18 +6239,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -6375,8 +6350,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -6386,7 +6360,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6399,20 +6372,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.2.4", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6429,7 +6399,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -6502,8 +6471,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -6513,7 +6481,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6589,8 +6556,7 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -6620,7 +6586,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6638,7 +6603,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6677,13 +6641,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.2", - "bundled": true, - "optional": true + "bundled": true } } }, diff --git a/src/App.css b/src/App.css index b41d297ca..817ba2177 100755 --- a/src/App.css +++ b/src/App.css @@ -1,33 +1,23 @@ -.App { - text-align: center; +section{ + padding: 1rem; } -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; -} - -.App-header { - background-color: #282c34; - min-height: 100vh; +.card{ display: flex; - flex-direction: column; + flex-direction: row; + flex-wrap: wrap; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + padding: 1rem 0; } - -.App-link { - color: #61dafb; +.card-img{ + width: auto; + height: 120px; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.card-title{ + padding: 0 1rem; } + +.card-popularity{ + padding: 0 1rem; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 7e261ca47..1dda7c7f8 100755 --- a/src/App.js +++ b/src/App.js @@ -1,27 +1,34 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +// Components +import Card from './components/Card' + +import contacts from './data/contacts.json' + class App extends Component { + + renderList() { + return contacts.map((contact, index) => { + return ( + + ) + }).slice(0,5) + } + render() { return ( -
-
- logo -

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

- - Learn React - -
-
- ); +
+

IronContacts

+ {this.renderList()} +
+ ) } } diff --git a/src/components/Card.js b/src/components/Card.js new file mode 100644 index 000000000..8f41df783 --- /dev/null +++ b/src/components/Card.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +class Card extends Component { + render(){ + return( +
+ {this.props.imgAlt} +

{this.props.name}

+

{this.props.popularity}

+
+ ) + } +} + +export default Card; \ No newline at end of file From c359c68a8d91df513cf6183008bb7b694b49a737 Mon Sep 17 00:00:00 2001 From: Edu Cortada Date: Tue, 19 Mar 2019 16:42:15 +0100 Subject: [PATCH 2/6] Iteration 2 | Add New Random Contacts --- src/App.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 1dda7c7f8..ef8890f9c 100755 --- a/src/App.js +++ b/src/App.js @@ -8,10 +8,14 @@ import contacts from './data/contacts.json' class App extends Component { + state = { + initialContacts: contacts.slice(0, 5) + } + renderList() { - return contacts.map((contact, index) => { + return this.state.initialContacts.map((contact, index) => { return ( - ) - }).slice(0,5) + }) + } + + handleClick = () => { + const contactRandom = contacts[Math.floor(Math.random() * contacts.length)] + this.setState({ + initialContacts: [...this.state.initialContacts, contactRandom] + }) } render() { return (
-

IronContacts

+

IronContacts

+ {this.renderList()}
) From 9ec393cb6579a1ee865275b56952103b152b44ba Mon Sep 17 00:00:00 2001 From: Edu Cortada Date: Tue, 19 Mar 2019 17:10:25 +0100 Subject: [PATCH 3/6] Iteration 3 | Sort Contacts By Name And Popularity --- src/App.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/App.js b/src/App.js index ef8890f9c..ece2ae0b1 100755 --- a/src/App.js +++ b/src/App.js @@ -33,11 +33,31 @@ class App extends Component { }) } + handleSortByName = () => { + const sortByName = this.state.initialContacts.sort((a,b) => { + return (a.name).localeCompare(b.name); + }) + this.setState({ + initialContacts: [...sortByName] + }) + } + + handleSortByPopularity = () => { + const sortByPopularity = this.state.initialContacts.sort((a,b) => { + return (b.popularity) - (a.popularity) + }) + this.setState({ + initialContacts: [...sortByPopularity] + }) + } + render() { return (

IronContacts

+ + {this.renderList()}
) From 47749b77bc14ea36c11e1e9fba169b4509dd6eb7 Mon Sep 17 00:00:00 2001 From: Edu Cortada Date: Tue, 19 Mar 2019 20:27:00 +0100 Subject: [PATCH 4/6] Refacor --- src/App.js | 35 +++++++++++++++++++++-------------- src/components/Card.js | 10 ++++++---- src/helpers/index.js | 9 +++++++++ 3 files changed, 36 insertions(+), 18 deletions(-) create mode 100644 src/helpers/index.js diff --git a/src/App.js b/src/App.js index ece2ae0b1..402d30c3b 100755 --- a/src/App.js +++ b/src/App.js @@ -5,49 +5,56 @@ import './App.css'; import Card from './components/Card' import contacts from './data/contacts.json' +import randomContact from './helpers/index' class App extends Component { state = { - initialContacts: contacts.slice(0, 5) + contactsList: contacts.slice(0, 5) } renderList() { - return this.state.initialContacts.map((contact, index) => { + return this.state.contactsList.map((contact, index) => { return ( ) }) } handleClick = () => { - const contactRandom = contacts[Math.floor(Math.random() * contacts.length)] this.setState({ - initialContacts: [...this.state.initialContacts, contactRandom] + contactsList: [...this.state.contactsList, randomContact()] }) } handleSortByName = () => { - const sortByName = this.state.initialContacts.sort((a,b) => { - return (a.name).localeCompare(b.name); + const sortByName = this.state.contactsList.sort((contactA, contactB) => { + return (contactA.name).localeCompare(contactB.name); }) this.setState({ - initialContacts: [...sortByName] + contactsList: [...sortByName] }) } handleSortByPopularity = () => { - const sortByPopularity = this.state.initialContacts.sort((a,b) => { - return (b.popularity) - (a.popularity) + const sortByPopularity = this.state.contactsList.sort((contactA, contactB) => { + return (contactB.popularity) - (contactA.popularity) }) this.setState({ - initialContacts: [...sortByPopularity] + contactsList: [...sortByPopularity] + }) + } + + handleDelete = (id) => { + const copyOfContactsList = this.state.contactsList + copyOfContactsList.splice(id, 1); + this.setState({ + contactsList: [...copyOfContactsList] }) } diff --git a/src/components/Card.js b/src/components/Card.js index 8f41df783..368397e93 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -2,14 +2,16 @@ import React, { Component } from 'react'; class Card extends Component { render(){ + const {contact, onDelete, id} = this.props return(
- {this.props.imgAlt} -

{this.props.name}

-

{this.props.popularity}

+ {contact.name} +

{contact.name}

+

{contact.popularity}

+
) } } -export default Card; \ No newline at end of file +export default Card \ No newline at end of file diff --git a/src/helpers/index.js b/src/helpers/index.js new file mode 100644 index 000000000..aefc94c02 --- /dev/null +++ b/src/helpers/index.js @@ -0,0 +1,9 @@ +import contacts from '../data/contacts.json' + +const randomContact = () => { + const randomNumber = Math.random() * contacts.length + return contacts[Math.floor(randomNumber)] +} + +export default randomContact + From 2f18ab688264cdb6bd0dc372ee03e1234047204b Mon Sep 17 00:00:00 2001 From: Edu Cortada Date: Wed, 20 Mar 2019 00:00:20 +0100 Subject: [PATCH 5/6] Don't add if contact is repeated --- src/App.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 402d30c3b..2acb8be1c 100755 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import './App.css'; import Card from './components/Card' import contacts from './data/contacts.json' -import randomContact from './helpers/index' +import generateRandomContact from './helpers/index' class App extends Component { @@ -27,9 +27,19 @@ class App extends Component { } handleClick = () => { - this.setState({ - contactsList: [...this.state.contactsList, randomContact()] + const randomContact = generateRandomContact() + let isRepeated = false + + this.state.contactsList.forEach(contact => { + if (contact.name === randomContact.name) { + isRepeated = true + } }) + if (!isRepeated) { + this.setState({ + contactsList: [...this.state.contactsList, randomContact] + }) + } } handleSortByName = () => { From 98fa9cc1e7c8a9c54372d8864f2777604b001194 Mon Sep 17 00:00:00 2001 From: Edu Cortada Date: Wed, 20 Mar 2019 12:23:00 +0100 Subject: [PATCH 6/6] New feature: add new contact --- src/App.js | 8 ++++++++ src/components/Form.js | 43 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 src/components/Form.js diff --git a/src/App.js b/src/App.js index 2acb8be1c..06e7865fd 100755 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; // Components import Card from './components/Card' +import Form from './components/Form' import contacts from './data/contacts.json' import generateRandomContact from './helpers/index' @@ -68,9 +69,16 @@ class App extends Component { }) } + handleAddUser = (newContact) => { + this.setState({ + contactsList: [...this.state.contactsList, newContact] + }) + } + render() { return (
+

IronContacts

diff --git a/src/components/Form.js b/src/components/Form.js new file mode 100644 index 000000000..9845fb8b7 --- /dev/null +++ b/src/components/Form.js @@ -0,0 +1,43 @@ +import React, { Component } from 'react'; + +class Form extends Component { + + state = { + name: 'name', + popularity: 'popularity', + pictureUrl: 'https://loremflickr.com/640/360' + } + + handleInput = (event) => { + this.setState({ + [event.target.name]: event.target.value + }) + } + + handleSubmit = (event) => { + event.preventDefault() + this.props.addNewContact(this.state) + } + + render() { + return ( + + + + +
+ ) + } +} + +export default Form \ No newline at end of file