refactoring

src/components/App.jsx

@@ -1,34 +1,39 @@
 import { useState, useEffect } from 'react';
-import { nanoid } from 'nanoid';
-import contactsTemplate from '../data/contactsTemplate.json';
+import { useDispatch, useSelector } from 'react-redux';
+
 import Filter from './Filter/Filter';
 import ContactList from './ContactList/ContactList';
 import ContactForm from './ContactForm/ContactForm';
 import MainTitle from './MainTitle/MainTitle';
+import { addContact } from 'redux/contacts/contactsSlice';
 
 export const App = () => {
   const CONTACTS = JSON.parse(localStorage.getItem('CONTACTS'));
 
-  const [contacts, setContacts] = useState(CONTACTS ?? []);
-  const [filter, setFilter] = useState('');
+  // const [contacts, setContacts] = useState(CONTACTS ?? []);
   const [isInitializedTemplate, setIsInitializedTemplate] = useState(
     CONTACTS && CONTACTS.length > 0 ? true : false
   );
   const [timer, setTimer] = useState(0);
 
-  useEffect(() => {
-    //якщо в пустий локал сторедж задати таймер 3 (використовується для відображення таймеру зворотнього відліку на сторінці),
-    // і запустити setTimout => завантажить шаблон контактів і виведе на екран
+  const dispatch = useDispatch();
+  const contacts = useSelector(({ contacts }) => contacts);
+  // console.log('contactsSlice', contacts);
 
-    if (!isInitializedTemplate) {
-      setTimer(3);
+  // useEffect(() => {
+  //   //якщо в пустий локал сторедж задати таймер 3 (використовується для відображення таймеру зворотнього відліку на сторінці),
+  //   // і запустити setTimout => завантажить шаблон контактів і виведе на екран
 
-      setTimeout(() => {
-        setContacts(contactsTemplate);
-        setIsInitializedTemplate(true);
-      }, 3000);
-    }
-  }, [isInitializedTemplate]);
+  //   if (!isInitializedTemplate) {
+  //     setTimer(3);
+
+  //     setTimeout(() => {
+  //       // setContacts(contactsTemplate);
+  //       dispatch(addContact(...contactsTemplate));
+  //       setIsInitializedTemplate(true);
+  //     }, 3000);
+  //   }
+  // }, [dispatch, isInitializedTemplate]);
 
   useEffect(() => {
     if (timer > 0) {
@@ -52,36 +57,20 @@ export const App = () => {
       return showAlert;
     }
 
-    setContacts(prevState => [{ id: nanoid(), name, number }, ...prevState]);
-  };
-
-  const handlerInputFilter = e => {
-    const { value } = e.target;
-    setFilter(value);
-  };
-
-  const handlerButtonDelete = id => {
-    setContacts(prevState => prevState.filter(contact => contact.id !== id));
-  };
-
-  const filterContacts = () => {
-    const lowerCaseFilter = filter.toLowerCase();
-    return contacts.filter(contact =>
-      contact.name.toLowerCase().includes(lowerCaseFilter)
-    );
+    // setContacts(prevState => [{ id: nanoid(), name, number }, ...prevState]);
+    dispatch(addContact({ name, number }));
   };
 
   return (
     <div className="container">
       <MainTitle title="Phonebook" />
       <ContactForm addNewContacts={addNewContacts} />
       <MainTitle title="Contacts" />
-      <Filter onChange={handlerInputFilter} filterValue={filter} />
-
-      {isInitializedTemplate ? (
+      <Filter />
+      {true ? (
         <ContactList
-          contacts={filterContacts()}
-          onButtonDelete={handlerButtonDelete}
+        // contacts={filterContacts()}
+        // onButtonDelete={handlerButtonDelete}
         />
       ) : (
         <>

src/components/ContactList/ContactList.jsx

@@ -1,19 +1,33 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import css from './ContactList.module.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { deleteContact } from 'redux/contacts/contactsSlice';
+
+const ContactList = () => {
+  const dispatch = useDispatch();
+
+  const contacts = useSelector(({ contacts }) => contacts);
+  const filter = useSelector(({ filter }) => filter);
+
+  const filterContacts = () => {
+    const lowerCaseFilter = filter.toLowerCase();
+    return contacts.filter(contact =>
+      contact.name.toLowerCase().includes(lowerCaseFilter)
+    );
+  };
+  const contactsList = filterContacts();
 
-const ContactList = ({ contacts, onButtonDelete }) => {
   return (
     <ul className={css.list}>
-      {contacts.map(contact => {
+      {contactsList.map(contact => {
         const { id, name, number } = contact;
         return (
           <li className={css.item} key={id}>
             <p>
               {name}: {number}
             </p>
 
-            <button type="button" onClick={() => onButtonDelete(id)}>
+            <button type="button" onClick={() => dispatch(deleteContact(id))}>
               Delete
             </button>
           </li>
@@ -23,9 +37,4 @@ const ContactList = ({ contacts, onButtonDelete }) => {
   );
 };
 
-ContactList.propTypes = {
-  contacts: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onButtonDelete: PropTypes.func.isRequired,
-};
-
 export default ContactList;

src/components/Filter/Filter.jsx

@@ -1,25 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import css from './Filter.module.css';
+import { useDispatch } from 'react-redux';
+import { inputFilter } from 'redux/filterSlice.js/filterSlice';
+
+const Filter = () => {
+  const dispatch = useDispatch();
+
+  const handlerInputFilter = e => {
+    const { value } = e.target;
+    dispatch(inputFilter(value));
+  };
 
-const Filter = ({ onChange, filterValue }) => {
   return (
     <label className={css.label}>
       Find contacts by name:
       <input
         className={css.input}
         type="text"
         name="filter"
-        value={filterValue}
-        onChange={onChange}
+        onChange={handlerInputFilter}
       />
     </label>
   );
 };
 
-Filter.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  filterValue: PropTypes.string.isRequired,
-};
-
 export default Filter;

src/components/MainTitle/MainTitle.jsx

@@ -1,49 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import css from './MainTitle.module.css';
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  increment,
-  decrement,
-  addContacts,
-  deleteContacts,
-} from 'redux/actions';
 
 const MainTitle = ({ title }) => {
-  const dispatch = useDispatch();
-
-  const value = useSelector(state => state.myValue);
-  console.log('value', value);
-  const contactsValue = useSelector(state => state.contacts);
-
-  console.log(' contactsValue', contactsValue);
-
-  return (
-    <>
-      <h2 className={css.title}>{title}</h2>;
-      <button onClick={() => dispatch(increment(10))}>
-        MyAction Increment
-      </button>
-      <button onClick={() => dispatch(decrement(10))}>
-        MyAction Decrement
-      </button>
-      <button
-        onClick={() =>
-          dispatch(
-            addContacts([
-              { id: '444', name: 'Renni', phone: '099 - 876 - 54 ' },
-              { id: '555', name: 'Jane', phone: '099 - 876 - 54 ' },
-            ])
-          )
-        }
-      >
-        addContacts
-      </button>
-      <button onClick={() => dispatch(deleteContacts('555'))}>
-        Delete Contact
-      </button>
-    </>
-  );
+  return <h2 className={css.title}>{title}</h2>;
 };
 
 MainTitle.propTypes = {

src/redux/contacts/contactsSlice.js

@@ -0,0 +1,18 @@
+import { createSlice, nanoid } from '@reduxjs/toolkit';
+import contactsTemplate from '../../data/contactsTemplate.json';
+
+const contactsSlice = createSlice({
+  name: 'contacts',
+  initialState: [...contactsTemplate],
+  reducers: {
+    addContact(state, { payload }) {
+      return [{ id: nanoid(), ...payload }, ...state];
+    },
+    deleteContact(state, { payload }) {
+      return state.filter(contact => contact.id !== payload);
+    },
+  },
+});
+
+export const { addContact, deleteContact } = contactsSlice.actions;
+export default contactsSlice.reducer;

src/redux/filterSlice.js/filterSlice.js

@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const filterSlice = createSlice({
+  name: 'filter',
+  initialState: '',
+  reducers: {
+    inputFilter(state, { payload }) {
+      return (state = payload);
+    },
+  },
+});
+
+export const { inputFilter } = filterSlice.actions;
+export default filterSlice.reducer;

src/redux/store.js

@@ -1,9 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
-import { myReducer, contactsRed } from './reducer';
+import contactsSliceReducer from './contacts/contactsSlice';
+import filterSliceReducer from './filterSlice.js/filterSlice';
 
 export const store = configureStore({
   reducer: {
-    myValue: myReducer,
-    contacts: contactsRed,
+    contacts: contactsSliceReducer,
+    filter: filterSliceReducer,
   },
 });