FT-BCN-JAVI

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-scripts": "2.1.5"
+    "react-scripts": "^3.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,33 +1,44 @@
-.App {
+*{
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+h2{
+  margin:0;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.card-wrapper{
+  margin:auto;
+  width: 600px;
   display: flex;
-  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  border-bottom: 3px solid rgb(77, 77, 77);
 }
 
-.App-link {
-  color: #61dafb;
+.card-wrapper > *{
+  width: 25%;
+  margin-top: 10px;
+  padding-bottom: 15px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.card-wrapper img{
+  width: 100px;
 }
+
+.button{
+  margin: 5px 5px;
+  padding: 10px 10px;
+  background-color: gray;
+  border: none;
+  color: white;
+  border-radius: 5px;
+  font-size: 1.2em;
+  cursor: pointer;
+}
+
+.delete-button{
+position: relative;
+bottom: 10px;
+background-color: brown;
+}

src/App.js

@@ -1,27 +1,84 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import contacts from './data/contacts.json';
+import Card from "./components/Card";
+import TitleCard from "./components/TitleCard"
 import './App.css';
 
 class App extends Component {
+
+  state = {
+    celebrities: contacts.splice(0, 5),
+    toggleNumberPopularity: 1,
+    toggleNumberName: 1
+  }
+
+  addCelebrity = () => {
+    let randomNumber = Math.floor(Math.random() * contacts.length)
+    let newCelebrities = [...this.state.celebrities, contacts[randomNumber]]
+    contacts.splice(randomNumber, 1)
+    console.log(contacts)
+    this.setState({
+      celebrities: newCelebrities
+    })
+  }
+
+  sortByPopularity = () => {
+    let newCelebrities = [...this.state.celebrities]
+    newCelebrities.sort((a, b) => {
+      return - this.state.toggleNumberPopularity * a.popularity + this.state.toggleNumberPopularity * b.popularity
+    })
+    this.setState({
+      celebrities: newCelebrities,
+      toggleNumberPopularity: this.state.toggleNumberPopularity * (-1)
+    })
+  }
+
+  sortByName = () => {
+
+    let newCelebrities = [...this.state.celebrities]
+    newCelebrities.sort((a, b) => {
+      if (a.name > b.name) {
+        return 1 * this.state.toggleNumberName;
+      }
+      if (a.name < b.name) {
+        return -1 * this.state.toggleNumberName;
+      }
+      return 0;
+    })
+    this.setState({
+      celebrities: newCelebrities,
+      toggleNumberName: this.state.toggleNumberName * (-1)
+    })
+  }
+
+  deleteCelebrity = celebName => {
+    let newCelebrities = [...this.state.celebrities].filter((celebrity) => {
+      if (celebrity.name !== celebName) {
+        return celebrity
+      }
+    })
+
+    this.setState({
+      celebrities: newCelebrities
+    })
+  }
+
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+      <div>
+        <h1>IronContacts</h1>
+        <button className="button" onClick={() => this.addCelebrity()}>Add Random Contact</button>
+        <button className="button" onClick={() => this.sortByPopularity()}>Sort By Popularity</button>
+        <button className="button" onClick={() => this.sortByName()}>Sort By Name</button>
+
+        <TitleCard />
+        {
+          this.state.celebrities.map((celebrity, index) => {
+            return <Card key={index} {...celebrity} toDelete={() => this.deleteCelebrity(celebrity.name)} />
+          })
+        }
       </div>
-    );
+    )
   }
 }
 

src/components/Card.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function Card(props) {
+    return (
+        <div className="card-wrapper" style={cardStyle}>
+            <div>
+                <img width="80" src={props.pictureUrl} />
+            </div>
+            <p>{props.name}</p>
+            <p>{props.popularity.toFixed(2)}</p>
+            <button className="button delete-button" onClick={props.toDelete}>Delete</button>
+        </div>
+    )
+}
+
+const cardStyle = {
+    display: "flex",
+}

src/components/TitleCard.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function TitleCard(props) {
+    return (
+        <div className="card-wrapper" style={cardStyle}>
+            <h2>Picture</h2>
+            <h2>Name</h2>
+            <h2>Popularity</h2>
+            <h2>Action</h2>
+        </div>
+    )
+}
+
+const cardStyle = {
+    display: "flex",
+}