From c9efc6dde4417da324585a31fbe32c653c4d2a52 Mon Sep 17 00:00:00 2001
From: kharchenkok <k.v.kharchenko@ukr.net>
Date: Wed, 13 Dec 2023 17:41:01 +0200
Subject: [PATCH] selectors added

---
 src/components/ContactForm/ContactForm.js  |  3 ++-
 src/components/ContactList/ContactList.jsx |  6 ++++--
 src/components/Filter/ColorFilter.js       | 11 ++++++-----
 src/store/contacts/contactsSelectors.js    |  1 +
 src/store/filter/filterSelector.js         |  1 +
 5 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 src/store/contacts/contactsSelectors.js
 create mode 100644 src/store/filter/filterSelector.js

diff --git a/src/components/ContactForm/ContactForm.js b/src/components/ContactForm/ContactForm.js
index 2612df7..4aba92a 100644
--- a/src/components/ContactForm/ContactForm.js
+++ b/src/components/ContactForm/ContactForm.js
@@ -10,11 +10,12 @@ import {
   colorPickerOptions,
   DEFAULT_COLOR,
 } from '../../constans/ColorConstans';
+import { contactsSelector } from '../../store/contacts/contactsSelectors';
 import style from './ContactForm.module.css';
 
 export default function ContactForm() {
   const dispatch = useDispatch();
-  const { contacts } = useSelector(state => state.contacts);
+  const { contacts } = useSelector(contactsSelector);
 
   const handleSubmit = event => {
     event.preventDefault();
diff --git a/src/components/ContactList/ContactList.jsx b/src/components/ContactList/ContactList.jsx
index b205730..2cf4981 100644
--- a/src/components/ContactList/ContactList.jsx
+++ b/src/components/ContactList/ContactList.jsx
@@ -5,12 +5,14 @@ import { BiSolidUserRectangle, BiPhone } from 'react-icons/bi';
 import ColorFilter from '../Filter/ColorFilter';
 import Notification from '../Notification';
 import { showInfo } from '../../utils/ToastNotification';
+import { contactsSelector } from '../../store/contacts/contactsSelectors';
+import { filterSelector } from '../../store/filter/filterSelector';
 import style from './ContactList.module.css';
 
 const ContactList = () => {
   const dispatch = useDispatch();
-  const { contacts } = useSelector(state => state.contacts);
-  const { nameFilter, colorFilter } = useSelector(state => state.filter);
+  const { contacts } = useSelector(contactsSelector);
+  const { nameFilter, colorFilter } = useSelector(filterSelector);
 
   const filteredContacts = contacts.filter(
     contact =>
diff --git a/src/components/Filter/ColorFilter.js b/src/components/Filter/ColorFilter.js
index 692771a..10326a0 100644
--- a/src/components/Filter/ColorFilter.js
+++ b/src/components/Filter/ColorFilter.js
@@ -2,14 +2,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import React, { useState } from 'react';
 import { setColorFilterAction } from '../../store/filter/filterSlice';
 import { DEFAULT_COLOR } from '../../constans/ColorConstans';
+import { contactsSelector } from '../../store/contacts/contactsSelectors';
 
 import style from './Filter.module.css';
 
 const ColorFilter = () => {
   const dispatch = useDispatch();
-  const [activeColor, setActiveColor] = useState('');
+  const { contacts } = useSelector(contactsSelector);
 
-  const { contacts } = useSelector(state => state.contacts);
+  const [activeColor, setActiveColor] = useState('');
 
   const uniqueColors = [...new Set(contacts.map(contact => contact.color))];
 
@@ -35,7 +36,7 @@ const ColorFilter = () => {
         type={'button'}
         value={''}
         className={makeActiveButtonClass('')}
-        onClick={event => handleColorFilter(event)}
+        onClick={handleColorFilter}
       >
         All
         {contacts.length > 0 && <span>({contacts.length})</span>}
@@ -50,7 +51,7 @@ const ColorFilter = () => {
               value={`${color}`}
               style={{ backgroundColor: ` ${color}` }}
               className={makeActiveButtonClass(color)}
-              onClick={event => handleColorFilter(event)}
+              onClick={handleColorFilter}
             ></button>
           )
       )}
@@ -60,7 +61,7 @@ const ColorFilter = () => {
           style={{ backgroundColor: DEFAULT_COLOR }}
           value={DEFAULT_COLOR}
           className={makeActiveButtonClass(DEFAULT_COLOR)}
-          onClick={event => handleColorFilter(event)}
+          onClick={handleColorFilter}
         >
           Other
         </button>
diff --git a/src/store/contacts/contactsSelectors.js b/src/store/contacts/contactsSelectors.js
new file mode 100644
index 0000000..b62f9bf
--- /dev/null
+++ b/src/store/contacts/contactsSelectors.js
@@ -0,0 +1 @@
+export const contactsSelector = state => state.contacts;
diff --git a/src/store/filter/filterSelector.js b/src/store/filter/filterSelector.js
new file mode 100644
index 0000000..87d0bef
--- /dev/null
+++ b/src/store/filter/filterSelector.js
@@ -0,0 +1 @@
+export const filterSelector = state => state.filter;