commit

src/components/App.jsx

@@ -1,16 +1,73 @@
+import { useState } from 'react';
+import ContactForm from './ContactForm/ContactForm';
+import ContactList from './ContactList/ContactList';
+import Filter from './Filter/Filter';
+import { nanoid } from 'nanoid';
+
+const initialContacts = [
+  { id: 'id-1', name: 'Rosie Simpson', number: '459-12-56' },
+  { id: 'id-2', name: 'Hermione Kline', number: '443-89-12' },
+  { id: 'id-3', name: 'Eden Clements', number: '645-17-79' },
+  { id: 'id-4', name: 'Annie Copeland', number: '227-91-26' },
+];
+
 export const App = () => {
+  const [contacts, setContacts] = useState({
+    contacts: initialContacts,
+    filter: '',
+    name: '',
+    number: '',
+  });
+
+  const handleOnDeleteContact = id => {
+    setContacts(prevContacts => ({
+      ...prevContacts,
+      contacts: prevContacts.contacts.filter(contact => contact.id !== id),
+    }));
+  };
+
+  const handleFilterChange = event => {
+    const filterValue = event.target.value.toLowerCase();
+    setContacts(prevContacts => ({ ...prevContacts, filter: filterValue }));
+  };
+
+  const filteredContacts = contacts.contacts.filter(contact =>
+    contact.name.toLowerCase().includes(contacts.filter)
+  );
+
+  const handleAddContact = newContact => {
+    const isDuplicate = contacts.contacts.some(
+      contact => contact.name.toLowerCase() === newContact.name.toLowerCase()
+    );
+
+    if (isDuplicate) {
+      alert(`${newContact.name} is already in contacts`);
+    } else {
+      setContacts(prevContacts => ({
+        ...prevContacts,
+        contacts: [...prevContacts.contacts, { ...newContact, id: nanoid() }],
+      }));
+    }
+  };
+
   return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 40,
-        color: '#010101',
-      }}
-    >
-      React homework template!!!!!!
-    </div>
+    <section>
+      <h1>Phonebook</h1>
+      <div className="AddContacts">
+        <h3>Add a contact</h3>
+        <ContactForm onAddContact={handleAddContact} />
+      </div>
+      <div className="SearchContacts">
+        <h3>Search a contact</h3>
+        <Filter value={contacts.filter} onChange={handleFilterChange} />
+      </div>
+      <div className="ContactsList">
+        <h3>Contacts list</h3>
+        <ContactList
+          contacts={filteredContacts}
+          onDeleteContact={handleOnDeleteContact}
+        />
+      </div>
+    </section>
   );
 };

src/components/ContactForm/ContactForm.jsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+
+const ContactForm = ({ onAddContact }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    number: '',
+  });
+
+  const handleInputChange = event => {
+    const { name, value } = event.target;
+    setFormData(prevFormData => ({
+      ...prevFormData,
+      [name]: value,
+    }));
+  };
+
+  const handleFormSubmit = event => {
+    event.preventDefault();
+    if (formData.name.trim() === '' || formData.number.trim() === '') {
+      alert('Te rog completează toate câmpurile!');
+      return;
+    }
+    onAddContact(formData);
+
+    setFormData({
+      name: '',
+      number: '',
+    });
+  };
+
+  return (
+    <form onSubmit={handleFormSubmit}>
+      <label>
+        <h4>Name:</h4>
+        <input
+          type="text"
+          placeholder="Add name....."
+          name="name"
+          pattern="^[a-zA-Z]+(([' \-][a-zA-Z ])?[a-zA-Z]*)*$"
+          title="Name may contain only letters, apostrophe, dash and spaces. For example Adrian, Jacob Mercer, Charles de Batz de Castelmore d'Artagnan"
+          required
+          value={formData.name}
+          onChange={handleInputChange}
+        />
+      </label>
+      <br />
+      <label>
+        <h4>Phone number:</h4>
+        <input
+          type="tel"
+          placeholder="Add number....."
+          name="number"
+          pattern="+?\d{1,4}[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}"
+          title="Phone number must be digits and can contain spaces, dashes, parentheses and can start with +"
+          required
+          value={formData.number}
+          onChange={handleInputChange}
+        />
+      </label>
+      <br />
+      <button className="SubmitButton" type="submit">
+        Add contact
+      </button>
+    </form>
+  );
+};
+
+export default ContactForm;
+
+

src/components/ContactList/ContactList.jsx

@@ -0,0 +1,14 @@
+const ContactList = ({ contacts, onDeleteContact }) => {
+  return (
+    <ul>
+      {contacts.map(contact => (
+        <li key={contact.id}>
+          {contact.name} {contact.number}
+          <button onClick={() => onDeleteContact(contact.id)}>Delete</button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default ContactList;

src/components/Filter/Filter.jsx

@@ -0,0 +1,12 @@
+const Filter = ({ value, onChange }) => {
+  return (
+    <input
+      type="text"
+      placeholder="Search by name....."
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
+
+export default Filter;

src/index.css

@@ -1,15 +1,86 @@
-@import-normalize; /* bring in normalize.css styles */
+@import-normalize;
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
 
 body {
   margin: 0;
+  display: flex;
+  place-items: center;
+  /* min-width: 320px;
+  min-height: 100vh; */
+  background-color: rgb(239, 239, 229);
   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;
+  font-size: 24px;
+  border-radius: 25px;
+}
+
+ul {
+  list-style-type: none;
+}
+
+Button,
+input {
+  background-color: rgb(215, 226, 153);
+  font-size: 20px;
+  border-radius: 25px;
+  color: black;
+  padding: 12px 10px;
+  text-align: left;
+  text-decoration: none;
+  margin: 4px 10px;
+  cursor: pointer;
+  border: 2px solid #333;
+}
+
+Button:hover {
+  background-color: rgb(166, 189, 102);
+}
+
+section {
+  background-color: rgb(185, 185, 174);
+  border-radius: 25px;
+  padding: 5px;
+  font-weight: bold;
+  border-style: groove;
+  border: 7px solid #333;
+}
+
+h1 {
+  text-shadow: 4px 2px 0 #000;
+}
+
+.AddContacts {
+  background-color: rgb(243, 241, 219);
+  border-radius: 25px;
+  border: 3px solid #333;
+}
+
+.SearchContacts {
+  background-color: rgb(236, 247, 216);
+  padding: 2px;
+  border-radius: 25px;
+  border: 3px solid #333;
+}
+
+.ContactsList {
+  background-color: rgb(215, 227, 173);
+  padding: 2px;
+  border-radius: 25px;
+  border: 3px solid #333;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.SubmitButton {
+  background-color: rgb(160, 167, 165);
+  font-size: 14px;
+  font-weight: bold;
+  border: 3px solid #333;
 }