diff --git a/src/components/ContactList.jsx b/src/components/ContactList.jsx
index dddd93d..5dbd04c 100644
--- a/src/components/ContactList.jsx
+++ b/src/components/ContactList.jsx
@@ -2,8 +2,9 @@ import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { deleteContact, fetchContacts } from '../redux/operations/operations';
import {
- selectContacts,
- selectFilter,
+ selectVisibleContacts,
+ selectIsLoading,
+ selectError,
} from '../redux/selectors/contactsSelectors';
import {
@@ -23,25 +24,22 @@ import { Trash2 } from 'lucide-react';
* @returns {JSX.Element} The JSX element representing the contact list.
*/
const ContactList = () => {
- const filter = useSelector(selectFilter);
const dispatch = useDispatch();
- const { items, isLoading, error } = useSelector(selectContacts);
+ const items = useSelector(selectVisibleContacts);
+ const isLoading = useSelector(selectIsLoading);
+ const error = useSelector(selectError);
useEffect(() => {
dispatch(fetchContacts());
}, [dispatch]);
- const filteredContacts = items.filter(i =>
- i.name.toLowerCase().includes(filter?.toLowerCase())
- );
-
/**
* Sorts contacts alphabetically by name.
* @type {Array}
*/
- const sortedContacts = filteredContacts
- ?.slice()
+ const sortedContacts = items
+ .slice()
.sort((a, b) => a.name.localeCompare(b.name));
/**
@@ -63,7 +61,7 @@ const ContactList = () => {
ACTIONS
- {isLoading && (
+ {isLoading && !error && (
@@ -87,34 +85,35 @@ const ContactList = () => {
)}
- {sortedContacts.map(contact => (
-
- {contact.name}
- {contact.phone}
-
- }
- onClick={() => handleDelete(contact.id)}
- className="hidden md:flex"
- >
- Delete
-
+ {!isLoading &&
+ sortedContacts.map(contact => (
+
+ {contact.name}
+ {contact.phone}
+
+ }
+ onClick={() => handleDelete(contact.id)}
+ className="hidden md:flex"
+ >
+ Delete
+
-
-
-
- ))}
+
+
+
+ ))}
);
diff --git a/src/redux/selectors/contactsSelectors.js b/src/redux/selectors/contactsSelectors.js
index 05928d2..e028cb0 100644
--- a/src/redux/selectors/contactsSelectors.js
+++ b/src/redux/selectors/contactsSelectors.js
@@ -1,7 +1,18 @@
-export const selectContacts = state => state.contacts;
+import { createSelector } from '@reduxjs/toolkit';
-export const selectIsLoading = state => state.tasks.isLoading;
+export const selectContacts = state => state.contacts.items;
-export const seelctError = state => state.tasks.error;
+export const selectIsLoading = state => state.contacts.isLoading;
+
+export const selectError = state => state.contacts.error;
export const selectFilter = state => state.filter;
+
+export const selectVisibleContacts = createSelector(
+ [selectContacts, selectFilter],
+ (contacts, filter) => {
+ return contacts.filter(contact =>
+ contact.name.toLowerCase().includes(filter.toLowerCase())
+ );
+ }
+);