Done with the lab

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -1,38 +1,38 @@
 .App {
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 10px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+.contacts-table {
+  width: 100%;
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.contacts-table thead {
+  background-color: grey;
+  height: 3rem;
+  margin-bottom: 1rem;
+  position: sticky;
+  top: 0;
 }
 
-.App-link {
-  color: #61dafb;
+.contact-row {
+  font-weight: bold;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.btn-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 10px;
 }
+
+.btn {
+  width: 200px;
+  height: 35px;
+}

src/App.js

@@ -1,23 +1,70 @@
-import logo from './logo.svg';
 import './App.css';
+import data from './contacts.json';
+import { useState } from 'react';
+import { FaTrophy, FaTrash } from 'react-icons/fa';
 
 function App() {
+  const [contacts,setContacts] = useState(data.slice(0,5));
+
+  const handleAddContact = ()=>{
+    const randomIndex = Math.floor(Math.random() * data.length) + 4;
+    const newContact = data[randomIndex];
+    setContacts([...contacts,newContact]);
+  }
+
+  const handleSortPopularity = ()=>{
+    const sortedContacts= [...contacts].sort((a,b) => b.popularity - a.popularity);
+    setContacts(sortedContacts);
+  }
+
+  const handleSortName = ()=>{
+    const sortedContacts=[...contacts].sort((a,b) => a.name.localeCompare(b.name));
+    setContacts(sortedContacts);
+  }
+
+
+  const handleDelete = (id)=>{
+    setContacts(contacts.filter((contact)=>(contact.id !== id)));
+  }
   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 className='btn-container'>
+        <button className='add-contact btn' onClick={handleAddContact}>Add Random Contact</button>
+        <button className='sort-popularity btn' onClick={handleSortPopularity}> Sort by popularity</button> 
+        <button className='sort-popularity btn' onClick={handleSortName}> Sort by name</button>           
+
+      </div>
+
+      <table className = 'contacts-table'>
+        <thead>
+          <tr>
+            <th>Picture</th>
+            <th>Name</th>
+            <th>Popularity</th>
+            <th>Won Oscar</th>
+            <th>Won Emmy</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {contacts.map((contact)=>{
+            return (
+              <tr className='contact-row' key={contact.id}>
+                <td className='contact-picture'>
+                  <img src={contact.pictureUrl} alt={contact.name} width={100} height={150} />
+                </td>
+                <td className='contact-name'>{contact.name}</td>
+                <td className='contact-popularity'>{contact.popularity}</td>
+                <td className='contact-oscar'>{contact.wonOscar? <FaTrophy style={{ color: "yellow", fontSize: "2rem"}}/>: ""} </td>
+                <td className='contact-emmy'>{contact.wonEmmy? <FaTrophy style={{ color: "yellow", fontSize: "2rem"}}/>: ""} </td>
+                <td className='delete-contact' onClick={() => handleDelete(contact.id)}><FaTrash style={{ color: "red", fontSize: "2rem" }} /></td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+
+
     </div>
   );
 }

src/contacts.json

@@ -2,29 +2,29 @@
     {
       "name": "Idris Elba",
       "pictureUrl": "https://image.tmdb.org/t/p/w500/d9NkfCwczP0TjgrjpF94jF67SK8.jpg",
-      "popularity": 11.622713,
+      "popularity": 24.622713,
       "id": "11731993-0604-4bee-80d5-67ad845d0a38",
-      "wonOscar": false,
-      "wonEmmy": false
+      "wonOscar": true,
+      "wonEmmy": true
     },
     {
       "name": "Johnny Depp",
       "pictureUrl": "https://image.tmdb.org/t/p/w500/kbWValANhZI8rbWZXximXuMN4UN.jpg",
       "popularity": 15.656534,
       "id": "7dad00f7-3949-477d-a7e2-1467fd2cfc06",
       "wonOscar": false,
-      "wonEmmy": false
+      "wonEmmy": true
     },
     {
       "name": "Monica Bellucci",
       "pictureUrl": "https://image.tmdb.org/t/p/w500/qlT4904d8oi2NIs28RrgnIZDFZB.jpg",
       "popularity": 16.096436,
       "id": "0ad5e441-3084-47a1-9e9b-b917539bba71",
-      "wonOscar": false,
+      "wonOscar": true,
       "wonEmmy": false
     },
     {
-      "name": "Gal Gadot",
+      "name": "Thanos' Grandma",
       "pictureUrl": "https://image.tmdb.org/t/p/w500/34kHAyBaBhq2kUrmhM15paEBuuI.jpg",
       "popularity": 10.049256,
       "id": "b497e3c4-50bb-4ae2-912f-eb36802c5bc2",
@@ -76,8 +76,8 @@
       "pictureUrl": "https://image.tmdb.org/t/p/w500/h1co81QaT2nJA41Sb7eZwmWl1L2.jpg",
       "popularity": 9.457546,
       "id": "56792412-8fda-4e10-b5ec-9cade83b167d",
-      "wonOscar": false,
-      "wonEmmy": false
+      "wonOscar": true,
+      "wonEmmy": true
     },
     {
       "name": "Lauren Cohan",