update App.jsx

src/components/App.jsx

@@ -1,23 +1,18 @@
-import React, { useState } from 'react';
-import { nanoid } from 'nanoid';
+import React from 'react';
 import ContactForm from './contactForm/ContactForm';
 import ContactList from './contactList/ContactList';
 import SearchFilter from './searchFilter/SearchFilter';
 import styles from './App.module.css';
 
+import { useSelector, useDispatch } from 'react-redux';
+import { nanoid } from '@reduxjs/toolkit';
+import { addContact, deleteContact } from '../redux/slices/contactsSlice';
+import { setFilter } from '../redux/slices/filterSlice';
+
 const App = () => {
-  const [contacts, setContacts] = useState([
-    { id: 'id-0', name: 'Dan Retegan', number: '+40 753 023 616' },
-    { id: 'id-1', name: 'Rosie Simpson', number: '459-123-563' },
-    { id: 'id-2', name: 'Hermione Kant', number: '443 (895) 123' },
-    { id: 'id-3', name: 'Eden Clements', number: '645-177-799' },
-    {
-      id: 'id-4',
-      name: "Charles de-Batz de Castelmore d'Artagnan",
-      number: '+01 227-911-266',
-    },
-  ]);
-  const [filter, setFilter] = useState(''); // Adăugăm un câmp pentru filtrare
+  const contacts = useSelector(state => state.contacts);
+  const filter = useSelector(state => state.filter);
+  const dispatch = useDispatch();
 
   const handleAddContact = (name, number) => {
     if (name.trim() !== '' && number.trim() !== '') {
@@ -27,26 +22,26 @@ const App = () => {
         number: number.trim(),
       };
 
-      setContacts(prevContacts => [...prevContacts, newContact]);
+      dispatch(addContact(newContact));
     }
   };
 
-  const handleFilterChange = event => {
-    const { value } = event.target;
-    setFilter(value);
+  const handleDeleteContact = contactId => {
+    dispatch(deleteContact(contactId));
   };
 
-  const handleDeleteContact = contactId => {
-    setContacts(prevContacts =>
-      prevContacts.filter(contact => contact.id !== contactId)
-    );
+  const handleFilterChange = event => {
+    const { value } = event.target;
+    console.log('New filter value:', value); 
+    dispatch(setFilter(value));
   };
 
   // Filtrăm contactele în funcție de șirul de căutare:
   const filteredContacts = contacts.filter(contact =>
     contact.name.toLowerCase().includes(filter.toLowerCase())
   );
 
+  console.log('filteredContacts:', filteredContacts);
   return (
     <div className={styles.container}>
       <h1>Phonebook</h1>

src/components/contactForm/ContactForm.jsx

@@ -4,7 +4,7 @@ import Button from '../Button';
 import styles from './ContactForm.module.css';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { addContact } from 'redux/slices/contactsSlice';
+import { addContact } from '../../redux/slices/contactsSlice';
 import { nanoid } from '@reduxjs/toolkit';
 
 const ContactForm = () => {

src/components/contactList/ContactList.jsx

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import styles from './ContactList.module.css';
 import ContactItem from '../contactItem/ContactItem';
 
-import { useDispatch, useSelector } from 'react-redux';
-import { deleteContact } from 'redux/slices/contactsSlice';
+import { useDispatch } from 'react-redux';
+import { deleteContact } from '../../redux/slices/contactsSlice';
 
-const ContactList = () => {
-  const dispatch = useDispatch();
-  const contacts = useSelector(state => state.contacts);
+const ContactList = ({ contacts }) => {
+  console.log('Contacts in ContactList:', contacts);
 
+  const dispatch = useDispatch();
   const handleDeleteContact = contactId => {
     dispatch(deleteContact(contactId));
   };

src/components/searchFilter/SearchFilter.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styles from './SearchFilter.module.css';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { setFilter } from 'redux/slices/filterSlice';
+import { setFilter } from '../../redux/slices/filterSlice';
 
 const SearchFilter = () => {
   const dispatch = useDispatch();