update

src/components/App.jsx

@@ -1,75 +1,136 @@
-import { useState } from 'react';
+import React, { Component } from 'react';
 import ContactForm from './ContactForm/ContactForm';
 import ContactList from './ContactList/ContactList';
 import Filter from './Filter/Filter';
 import { nanoid } from 'nanoid';
 
-//....
+export class App extends Component {
+  constructor(props) {
+    super(props);
 
-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' },
-];
+    this.state = {
+      contacts: {
+        contacts: [],
+        filter: '',
+        name: '',
+        number: '',
+      },
+    };
+  }
 
-export const App = () => {
-  const [contacts, setContacts] = useState({
-    contacts: initialContacts,
-    filter: '',
-    name: '',
-    number: '',
-  });
+  getInitialContacts() {
+    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' },
+    ];
+    return initialContacts;
+  }
 
-  const handleOnDeleteContact = id => {
-    setContacts(prevContacts => ({
-      ...prevContacts,
-      contacts: prevContacts.contacts.filter(contact => contact.id !== id),
+  componentDidMount() {
+    const key = 'contacts';
+    const dataFromLocalStorage = JSON.parse(localStorage.getItem(key));
+
+    if (dataFromLocalStorage === null || dataFromLocalStorage.length === 0) {
+      this.setState({
+        contacts: {
+          ...this.state.contacts,
+          contacts: [
+            ...this.state.contacts.contacts,
+            //[],
+            ...this.getInitialContacts(),
+          ],
+        },
+      });
+    } else {
+      this.setState({
+        contacts: {
+          ...this.state.contacts,
+          contacts: [...this.state.contacts.contacts, ...dataFromLocalStorage],
+        },
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    const key = 'contacts';
+    console.log('did update');
+    localStorage.setItem(key, JSON.stringify(this.state.contacts.contacts));
+  }
+
+  handleOnDeleteContact = id => {
+    this.setState(prevState => ({
+      contacts: {
+        ...prevState.contacts,
+        contacts: prevState.contacts.contacts.filter(
+          contact => contact.id !== id
+        ),
+      },
     }));
   };
 
-  const handleFilterChange = event => {
+  handleFilterChange = event => {
     const filterValue = event.target.value.toLowerCase();
-    setContacts(prevContacts => ({ ...prevContacts, filter: filterValue }));
+    this.setState(prevState => ({
+      contacts: {
+        ...prevState.contacts,
+        filter: filterValue,
+      },
+    }));
   };
 
-  const filteredContacts = contacts.contacts.filter(contact =>
-    contact.name.toLowerCase().includes(contacts.filter)
-  );
-
-  const handleAddContact = newContact => {
-    const isDuplicate = contacts.contacts.some(
+  handleAddContact = newContact => {
+    const isDuplicate = this.state.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() }],
+      this.setState(prevState => ({
+        contacts: {
+          ...prevState.contacts,
+          contacts: [
+            ...prevState.contacts.contacts,
+            { ...newContact, id: nanoid() },
+          ],
+        },
       }));
     }
   };
 
-  return (
-    <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>
-  );
-};
+  render() {
+    const { contacts } = this.state;
+
+    const filteredContacts = contacts.contacts.filter(contact =>
+      contact.name.toLowerCase().includes(contacts.filter)
+    );
+
+    return (
+      <section>
+        <h1>Phonebook</h1>
+        <div className="AddContacts">
+          <h3>Add a contact</h3>
+          <ContactForm onAddContact={this.handleAddContact} />
+        </div>
+        <div className="SearchContacts">
+          <h3>Search a contact</h3>
+          <Filter
+            value={contacts.filter || ''}
+            onChange={this.handleFilterChange}
+          />
+        </div>
+        <div className="ContactsList">
+          <h3>Contacts list</h3>
+          <ContactList
+            contacts={filteredContacts}
+            onDeleteContact={this.handleOnDeleteContact}
+          />
+        </div>
+      </section>
+    );
+  }
+}
+
+// export default App;

src/components/ContactForm/ContactForm.jsx

@@ -50,7 +50,7 @@ const ContactForm = ({ onAddContact }) => {
           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}"
+          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}
@@ -66,5 +66,3 @@ const ContactForm = ({ onAddContact }) => {
 };
 
 export default ContactForm;
-
-

src/index.css

@@ -79,8 +79,9 @@ h1 {
 }
 
 .SubmitButton {
-  background-color: rgb(160, 167, 165);
+  background-color: rgb(185, 185, 174);
   font-size: 14px;
   font-weight: bold;
   border: 3px solid #333;
+  border-radius: 25px;
 }