Change number field with phone field.

src/components/contactForm/ContactForm.jsx

@@ -8,49 +8,43 @@ import { selectContacts } from '../../redux/selectors';
 
 const ContactForm = () => {
   const [name, setName] = useState('');
-  const [number, setNumber] = useState('');
+  const [phone, setPhone] = useState('');
 
   const dispatch = useDispatch();
   const contacts = useSelector(selectContacts);
 
   const handleNameChange = evt => {
-    // Restrictionarea la text (litere, spații, apostrof și cratimă):
-
     const newTextValue = evt.target.value.replace(/[^a-zA-Z\s'-]/g, '');
     setName(newTextValue);
   };
 
-  const handleNumberChange = e => {
-    // Restrictionarea la cifre, spații, cratime, paranteze, + la început și puncte:
-    const newNumberValue = e.target.value.replace(
+  const handlePhoneChange = e => {
+    const newPhoneValue = e.target.value.replace(
       /[^+\d\s().-]|^[\s().-]+|(?<=\d)[+]|\b[+]\b/g,
       ''
     );
-    setNumber(newNumberValue);
+    setPhone(newPhoneValue);
   };
-
 
   const handleAddButtonClick = () => {
-    // Verificăm dacă numele sau numărul există deja în lista de contacte:
     const nameExists = contacts.some(
       contact => contact.name.toLowerCase() === name.toLowerCase()
     );
-    const numberExists = contacts.some(contact => contact.number === number);
+    const phoneExists = contacts.some(contact => contact.phone === phone);
 
     if (nameExists) {
       alert(`${name} is already in contacts!`);
-    } else if (numberExists) {
-      alert(`${number} is already in contacts!`);
-    } else if (name.trim() !== '' && number.trim() !== '') {
-      // Adăugăm contactul doar dacă nu există și câmpurile nu sunt goale:
+    } else if (phoneExists) {
+      alert(`${phone} is already in contacts!`);
+    } else if (name.trim() !== '' && phone.trim() !== '') {
       dispatch(
         addContact({
           name: name,
-          number: number,
+          phone: phone,
         })
       );
       setName('');
-      setNumber('');
+      setPhone('');
     }
   };
 
@@ -62,8 +56,7 @@ const ContactForm = () => {
           className={styles.input}
           type="text"
           name="name"
-          placeholder="Name and surname:"
-          // pattern="^[a-zA-Z]+(([' -][a-zA-Z ])?[a-zA-Z]*)*$"
+          placeholder="Name and surname"
           title="Name may contain only letters, apostrophe, dash and spaces. For example Adrian, Jacob Mercer, Charles de Batz de Castelmore d'Artagnan"
           required
           value={name}
@@ -72,17 +65,16 @@ const ContactForm = () => {
       </label>
 
       <label className={styles.label}>
-        Number:
+        Phone:
         <input
           className={styles.input}
           type="tel"
-          name="number"
-          placeholder="Telephone number:"
-          // pattern="\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}"
+          name="phone"
+          placeholder="Telephone number"
           title="Phone number must be digits and can contain spaces, dashes, parentheses and can start with +"
           required
-          value={number}
-          onChange={handleNumberChange}
+          value={phone}
+          onChange={handlePhoneChange}
         />
       </label>
 

src/components/contactItem/ContactItem.jsx

@@ -16,7 +16,7 @@ const ContactItem = ({ contact }) => {
   return (
     <div className={styles.item}>
       <li>
-        <strong>{contact.name}</strong>: <br /> {contact.number}
+        <strong>{contact.name}</strong>: <br /> {contact.phone}
       </li>
       <Button action={handleDeleteContact}>Delete</Button>
     </div>
@@ -27,7 +27,7 @@ ContactItem.propTypes = {
   contact: PropTypes.shape({
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
-    number: PropTypes.string,
+    phone: PropTypes.string,
   }).isRequired,
 };
 

src/components/contactList/ContactList.jsx

@@ -58,7 +58,7 @@ ContactList.propTypes = {
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       name: PropTypes.string.isRequired,
-      number: PropTypes.string.isRequired,
+      phone: PropTypes.string.isRequired,
     })
   ),
 };

src/components/contactList/ContactList.module.css

@@ -9,3 +9,7 @@
 ul {
   padding: 0;
 }
+
+li {
+padding: 10px;
+}

src/redux/operations.js

@@ -8,6 +8,9 @@ export const fetchContacts = createAsyncThunk(
   async (_, thunkAPI) => {
     try {
       const response = await axios.get('/contacts');
+
+      // Afișează datele în consolă:
+      console.log('Datele din API:', response.data);
       return response.data;
     } catch (error) {
       return thunkAPI.rejectWithValue(error.message);