diff --git a/src/components/App.jsx b/src/components/App.jsx
index 6d67f1c..0c635a5 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,52 +1,6 @@
-import { nanoid } from 'nanoid';
-
import { ContactForm, ContactList, Filter } from 'components';
-import { useDispatch, useSelector } from 'react-redux';
-import { addContact, deleteContact } from 'redux/contacts/phoneBookSlice';
-import { filterContact } from 'redux/contacts/filterSlice';
const App = () => {
- const dispatch = useDispatch();
- const contacts = useSelector(state => state.contactsStore.contacts);
-
- const filter = useSelector(state => state.filterStore);
-
- const handleDeleteContact = contactId => {
- dispatch(deleteContact(contactId));
- };
-
- const handleAddContact = newContact => {
- const isExist = contacts.some(
- ({ name }) => name.toLowerCase() === newContact.name.toLowerCase()
- );
-
- if (isExist) {
- alert(`Oops, contact '${newContact.name}' is already in contacts!`);
- return;
- }
- const readyToAddContact = {
- ...newContact,
- id: nanoid(),
- };
-
- // const addContactAction = {
- // type: 'contacts/addContact',
- // payload: readyToAddContact,
- // };
- dispatch(addContact(readyToAddContact));
- };
-
- const changeFilter = value => {
- dispatch(filterContact(value));
- };
-
- const getFilteredContacts = () => {
- const normalizedFilter = filter.toLowerCase();
- return contacts.filter(contact =>
- contact.name.toLowerCase().includes(normalizedFilter)
- );
- };
-
return (
{
}}
>
Phonebook
-
+
Contacts
-
-
+
+
);
};
diff --git a/src/components/ContactCard/ContactCard.jsx b/src/components/ContactCard/ContactCard.jsx
deleted file mode 100644
index e5bd184..0000000
--- a/src/components/ContactCard/ContactCard.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { CardWrapper, ButtonDelete, Info } from './ContactCard.styled';
-
-const ContactCard = ({ contact: { name, number, id }, onDeleteContact }) => {
- return (
-
- {name}
- {number}
- onDeleteContact(id)}>Delete
-
- );
-};
-
-export default ContactCard;
diff --git a/src/components/ContactCard/ContactCard.styled.js b/src/components/ContactCard/ContactCard.styled.js
deleted file mode 100644
index 2c5d8e4..0000000
--- a/src/components/ContactCard/ContactCard.styled.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled from "styled-components";
-
-export const CardWrapper = styled.div`
- display: flex;
- height: 100px;
- flex-direction: row;
- align-items: center;
- gap: 8px;
- justify-content: space-between;
-`;
-
-export const Info = styled.p`
- font-size: 18px;
- font-weight: 500;
- letter-spacing: -0.3px;
-`;
-
-export const ButtonDelete = styled.button`
- width: 70px;
- height: 40px;
- margin-left: 5px;
- border-width: inherit;
- border-radius: 5px;
- outline: none;
- background-color: #e22626;
- color: white;
- cursor: pointer;
-
- &:focus {
- background-color: #c72323;
- }
-`;
diff --git a/src/components/ContactForm/ContactForm.jsx b/src/components/ContactForm/ContactForm.jsx
index 0a42926..68bca82 100644
--- a/src/components/ContactForm/ContactForm.jsx
+++ b/src/components/ContactForm/ContactForm.jsx
@@ -1,10 +1,38 @@
import React, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import { useDispatch, useSelector } from 'react-redux';
+import { addContact } from 'redux/contacts/phoneBookSlice';
import { FormInput, Form, FormButton, FormLabel } from './ContactForm.styled';
-const ContactForm = ({ onSubmit }) => {
+const ContactForm = () => {
const [name, setName] = useState('');
const [number, setNumber] = useState('');
+ const dispatch = useDispatch();
+ const contacts = useSelector(state => state.contactsStore.contacts);
+
+ const onSubmitAddContact = e => {
+ e.preventDefault();
+ const data = {
+ name,
+ number: Number.parseFloat(number) || alert(`Number is not correct`),
+ };
+ const newContact = { ...data, id: nanoid() };
+
+ const isExist = contacts.some(
+ ({ name }) => name.toLowerCase() === newContact.name.toLowerCase()
+ );
+
+ if (isExist) {
+ alert(`Oops, contact '${newContact.name}' is already in contacts!`);
+ return;
+ }
+
+ dispatch(addContact(newContact));
+ setName('');
+ setNumber('');
+ };
+
const handleInputChange = e => {
const { name, value } = e.currentTarget;
switch (name) {
@@ -20,19 +48,8 @@ const ContactForm = ({ onSubmit }) => {
}
};
- const handleSubmit = e => {
- e.preventDefault();
- const contactSchema = {
- name,
- number: Number.parseFloat(number) || alert(`Number is not correct`),
- };
- onSubmit(contactSchema);
- setName('');
- setNumber('');
- };
-
return (
-