loader

package.json

@@ -13,8 +13,10 @@
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-loading-icons": "^1.1.0",
     "react-redux": "^8.0.5",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.10",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

src/components/App.jsx

@@ -5,11 +5,11 @@ import Filter from './Filter';
 import { useDispatch, useSelector } from 'react-redux';
 import { useEffect } from 'react';
 import { fetchContacts } from 'redux/contactsOperations';
-import { selectError, selectIsLoading } from 'redux/selectors';
+import { selectError } from 'redux/selectors';
 
 export const App = () => {
   const dispatch = useDispatch();
-  const isLoading = useSelector(selectIsLoading);
+  // const isLoading = useSelector(selectIsLoading);
   const error = useSelector(selectError);
 
   useEffect(() => {
@@ -23,15 +23,15 @@ export const App = () => {
 
       <Section title="Contacts">
         <Filter />
-        {isLoading && !error && (
+        {/* {isLoading && !error && (
           <b style={{ marginLeft: 70 }}>Request in progress...</b>
-        )}
+        )} */}
         {error && (
           <b style={{ marginLeft: 70 }}>
             The operation failed with error: ${error}
           </b>
         )}
-        {!isLoading && !error && <ContactList />}
+        {!error && <ContactList />}
       </Section>
     </div>
   );

src/components/Contact/Contact.jsx

@@ -0,0 +1,37 @@
+import { Delete } from 'components/ContactList/ContactList.styled';
+import { Puff } from 'react-loading-icons';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectError } from 'redux/selectors';
+import { useState } from 'react';
+
+import { deleteContact } from 'redux/contactsOperations';
+
+export const Contact = ({ id, name, number }) => {
+  const error = useSelector(selectError);
+  const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loader = () => {
+    setIsLoading(true);
+  };
+
+  return (
+    <p>
+      {name}: {number}
+      {isLoading && !error ? (
+        <Delete>
+          <Puff height={12} stroke="#000" />
+        </Delete>
+      ) : (
+        <Delete
+          onClick={() => {
+            dispatch(deleteContact(id));
+            loader();
+          }}
+        >
+          Delete
+        </Delete>
+      )}
+    </p>
+  );
+};

src/components/ContactForm/ContactForm.jsx

@@ -2,11 +2,17 @@ import { Form, Label, Input, Submit } from './ContactForm.styled';
 import { nanoid } from 'nanoid';
 import { useDispatch, useSelector } from 'react-redux';
 import { addContact } from 'redux/contactsOperations';
-import { selectContacts } from 'redux/selectors';
+import { selectContacts, selectError, selectIsLoading } from 'redux/selectors';
+import { Puff } from 'react-loading-icons';
+import { useState } from 'react';
 
 export default function ContactForm() {
   const dispatch = useDispatch();
   const contacts = useSelector(selectContacts);
+  const isGeneralLoading = useSelector(selectIsLoading);
+  const error = useSelector(selectError);
+
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleSubmit = event => {
     event.preventDefault();
@@ -20,11 +26,21 @@ export default function ContactForm() {
     if (isDuplicate) {
       alert(`${name} is already in contacts`);
     } else {
+      setIsLoading(true);
       dispatch(addContact({ name, number }));
       form.reset();
     }
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
   };
 
+  // const setLoaderFalse = () => {
+  //   setIsLoading(false);
+  // };
+
+  // setLoaderFalse();
+
   const nameInputId = nanoid();
   const numberInputId = nanoid();
 
@@ -52,7 +68,13 @@ export default function ContactForm() {
           required
         />
       </Label>
-      <Submit>Add to contact</Submit>
+      {isLoading && !error && isGeneralLoading ? (
+        <Submit>
+          <Puff height={15} stroke="#000" style={{ padding: '0 20px' }} />
+        </Submit>
+      ) : (
+        <Submit>Add to contact</Submit>
+      )}
     </Form>
   );
 }

src/components/ContactForm/ContactForm.styled.js

@@ -23,6 +23,8 @@ export const Input = styled.input`
   border-radius: 3px;
 `;
 export const Submit = styled.button`
+  display: flex;
+  align-items: center;
   background-color: #ffecc8;
   border: 1px solid grey;
   border-radius: 3px;

src/components/ContactList/ContactList.jsx

@@ -1,7 +1,7 @@
-import { Li, List, Delete } from './ContactList.styled';
-import { useSelector, useDispatch } from 'react-redux';
+import { Li, List } from './ContactList.styled';
+import { useSelector } from 'react-redux';
 import { selectContacts, selectFilter } from 'redux/selectors';
-import { deleteContact } from 'redux/contactsOperations';
+import { Contact } from 'components/Contact/Contact';
 
 const getVisibleTasks = (contacts, filter) => {
   const normilizedFilter = filter.toLowerCase();
@@ -14,18 +14,13 @@ const Items = () => {
   const contacts = useSelector(selectContacts);
   const filter = useSelector(selectFilter);
   const visibleTasks = getVisibleTasks(contacts, filter);
-  const dispatch = useDispatch();
+
   return (
     <List>
       {visibleTasks.length ? (
         visibleTasks.map(({ id, name, number }) => (
           <Li key={id}>
-            <p>
-              {name}: {number}
-              <Delete onClick={() => dispatch(deleteContact(id))}>
-                Delete
-              </Delete>
-            </p>
+            <Contact id={id} name={name} number={number} />
           </Li>
         ))
       ) : (

src/redux/contactSlice.js

@@ -37,7 +37,7 @@ const contactSlice = createSlice({
       state.isLoading = false;
       state.error = null;
       const index = state.items.findIndex(
-        contact => contact.id === action.payload
+        contact => contact.id === action.payload.id
       );
       state.items.splice(index, 1);
     },