Done all iterations

src/App.js

@@ -1,23 +1,46 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import contacts from "./contacts.json";
+import ContactTable from "./components/ContactTable";
+import Buttons from "./components/Buttons";
 
 function App() {
+  const [contactList, setContactList] = useState(contacts.slice(0, 5));
+
+  function addRandomContact() {
+    const remainingContacts = contacts.filter(
+      (contact) => !contactList.includes(contact)
+    );
+    if (remainingContacts.length > 0) {
+      const randomContact =
+        remainingContacts[Math.floor(Math.random() * remainingContacts.length)];
+      setContactList([...contactList, randomContact]);
+    }
+  }
+
+  function sortByName() {
+    const sorted = [...contactList].sort((a, b) => a.name.localeCompare(b.name));
+    setContactList(sorted);
+  }
+
+  function sortByPopularity() {
+    const sorted = [...contactList].sort((a, b) => b.popularity - a.popularity);
+    setContactList(sorted);
+  }
+
+  function deleteContact(id) {
+    const filteredContacts = contactList.filter((contact) => contact.id !== id);
+    setContactList(filteredContacts);
+  }
+
   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 style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
+      <h1>IronContacts</h1>
+      <Buttons
+        onAddRandom={addRandomContact}
+        onSortByName={sortByName}
+        onSortByPopularity={sortByPopularity}
+      />
+      <ContactTable contacts={contactList} onDelete={deleteContact} />
     </div>
   );
 }

src/components/Buttons.js

@@ -0,0 +1,55 @@
+import React from "react";
+
+function Buttons({ onAddRandom, onSortByName, onSortByPopularity }) {
+  return (
+    <div>
+      <button
+        onClick={onAddRandom}
+        style={{
+          padding: "10px",
+          fontSize: "16px",
+          margin: "10px",
+          cursor: "pointer",
+          backgroundColor: "#007BFF",
+          color: "white",
+          border: "none",
+          borderRadius: "4px",
+        }}
+      >
+        Add Random Contact
+      </button>
+      <button
+        onClick={onSortByName}
+        style={{
+          padding: "10px",
+          fontSize: "16px",
+          margin: "10px",
+          cursor: "pointer",
+          backgroundColor: "#28a745",
+          color: "white",
+          border: "none",
+          borderRadius: "4px",
+        }}
+      >
+        Sort by Name
+      </button>
+      <button
+        onClick={onSortByPopularity}
+        style={{
+          padding: "10px",
+          fontSize: "16px",
+          margin: "10px",
+          cursor: "pointer",
+          backgroundColor: "#ffc107",
+          color: "white",
+          border: "none",
+          borderRadius: "4px",
+        }}
+      >
+        Sort by Popularity
+      </button>
+    </div>
+  );
+}
+
+export default Buttons;

src/components/ContactRow.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+function ContactRow({ contact, onDelete }) {
+  return (
+    <tr>
+      <td>
+        <img
+          src={contact.pictureUrl}
+          alt={contact.name}
+          style={{ height: "100px", borderRadius: "5px" }}
+        />
+      </td>
+      <td>{contact.name}</td>
+      <td>{contact.popularity.toFixed(2)}</td>
+      <td>{contact.wonOscar ? "🏆" : ""}</td>
+      <td>{contact.wonEmmy ? "🏆" : ""}</td>
+      <td>
+        <button
+          onClick={() => onDelete(contact.id)}
+          style={{
+            padding: "5px 10px",
+            fontSize: "14px",
+            cursor: "pointer",
+            backgroundColor: "red",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+          }}
+        >
+          Delete
+        </button>
+      </td>
+    </tr>
+  );
+}
+
+export default ContactRow;

src/components/ContactTable.js

@@ -0,0 +1,38 @@
+import React from "react";
+import ContactRow from "./ContactRow";
+
+function ContactTable({ contacts, onDelete }) {
+  return (
+    <table style={{ width: "100%", borderCollapse: "collapse", marginTop: "20px" }}>
+      <thead>
+        <tr>
+          <th style={{ borderBottom: "2px solid black", padding: "10px" }}>
+            Picture
+          </th>
+          <th style={{ borderBottom: "2px solid black", padding: "10px" }}>
+            Name
+          </th>
+          <th style={{ borderBottom: "2px solid black", padding: "10px" }}>
+            Popularity
+          </th>
+          <th style={{ borderBottom: "2px solid black", padding: "10px" }}>
+            Won an Oscar
+          </th>
+          <th style={{ borderBottom: "2px solid black", padding: "10px" }}>
+            Won an Emmy
+          </th>
+          <th style={{ borderBottom: "2px solid black", padding: "10px" }}>
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {contacts.map((contact) => (
+          <ContactRow key={contact.id} contact={contact} onDelete={onDelete} />
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default ContactTable;

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}