From 0b4ab1870d7e61c69813b4f829db64b9581741b3 Mon Sep 17 00:00:00 2001 From: Ines CV Date: Sat, 23 Mar 2019 14:56:49 +0100 Subject: [PATCH] DONE --- package-lock.json | 82 +++++++------------------ src/App.css | 16 +++++ src/App.js | 112 +++++++++++++++++++++++++++++------ src/Components/AddContact.js | 40 +++++++++++++ src/Components/Contact.js | 23 +++++++ 5 files changed, 196 insertions(+), 77 deletions(-) create mode 100644 src/Components/AddContact.js create mode 100644 src/Components/Contact.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..77aaef37f 100755 --- a/src/App.css +++ b/src/App.css @@ -31,3 +31,19 @@ transform: rotate(360deg); } } + +.flexbox { + display: flex; + list-style: none; + justify-content: space-between; +} + +.container { + margin: 2rem 4rem 0 2rem; +} + +.btn { + padding: 1rem; + background-color: red; + color: white; +} diff --git a/src/App.js b/src/App.js index 7e261ca47..e217af297 100755 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,104 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; +import contacts from './data/contacts.json'; +import Contact from './Components/Contact.js'; +import AddContact from './Components/AddContact.js'; import './App.css'; + class App extends Component { + + state = { + seenContacts: contacts.splice(0, 5), + } + + handleNewContact = () => { + const newContactNumber = Math.floor(Math.random() * contacts.length ); + + this.setState({ + seenContacts: [...this.state.seenContacts, contacts[newContactNumber]] + }) + } + + handleSortByName = () => { + const orderedContacts = this.state.seenContacts; + + function sortByName(a,b) { + if (a.name < b.name) + return -1; + if (a.name > b.name) + return 1; + return 0; + } + + orderedContacts.sort(sortByName); + + this.setState({ + seenContacts: orderedContacts + }) + } + + handleSortByPopularity = () => { + const orderedContacts = this.state.seenContacts; + + function sortByPopularity(a,b) { + if (a.popularity < b.popularity) + return 1; + if (a.popularity > b.popularity) + return -1; + return 0; + } + + orderedContacts.sort(sortByPopularity); + + this.setState({ + seenContacts: orderedContacts + }) + } + + delete = (index) => { + const removedList = this.state.seenContacts; + removedList.splice(index, 1); + + this.setState({ + seenContacts: removedList + }) + } + + handleTask = (contact) => { + const newContactList = this.state.seenContacts; + newContactList.push({ + name: contact, + pictureUrl: "https://image.tmdb.org/t/p/w500/kbWValANhZI8rbWZXximXuMN4UN.jpg", + popularity: 15.656534 + }) + + this.setState({ + seenContacts: newContactList + }) + } + render() { + const { seenContacts } = this.state; + return ( -
-
- logo -

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

- - Learn React - -
-
+
+

IronContacts

+ +

+ + + +
    + {seenContacts.map((contact, index) => { + return < Contact + contact = {contact} + key = {index} + index = {index} + deleteContact = { this.delete } + /> + })} +
+
); } } diff --git a/src/Components/AddContact.js b/src/Components/AddContact.js new file mode 100644 index 000000000..8d57affd6 --- /dev/null +++ b/src/Components/AddContact.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; + +class AddContact extends Component { + + state = { + newContact: '', + } + + handleInput = (e) => { + this.setState({ + newContact: e.target.value, + }) + } + + handleClick = () => { + const { newContact } = this.state + this.props.onClick(newContact); + this.setState({ + newContact: '', + }) + } + + render() { + const { newContact } = this.state; + return ( + <> + + + + ); + } +} + +export default AddContact; \ No newline at end of file diff --git a/src/Components/Contact.js b/src/Components/Contact.js new file mode 100644 index 000000000..7c414f7bf --- /dev/null +++ b/src/Components/Contact.js @@ -0,0 +1,23 @@ +import React from 'react'; + +const Contact = (props) => { + const { name, popularity, pictureUrl } = props.contact; + + const handleDelete = (e) => { + props.deleteContact(props.index); + } + + return ( +
  • + {name} +

    {name}

    +
    {popularity}
    + +
    • + ) +} + + + + +export default Contact;