fix

Sokilskill · Oct 9, 2023 · d6f03c4 · d6f03c4
1 parent fb0ec0e
commit d6f03c4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 31 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,11 +1,7 @@
-// import { useState, useEffect } from 'react';
-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('persist:root'));
@@ -16,9 +12,6 @@ export const App = () => {
   // );
   // const [timer, setTimer] = useState(0);
 
-  const dispatch = useDispatch();
-  const contacts = useSelector(({ contacts }) => contacts);
-
   // useEffect(() => {
   //   //якщо пустий локал сторедж => тоді задати таймер 3 (використовується для відображення таймеру зворотнього відліку на сторінці),
   //   // і запустити setTimout => завантажить шаблон контактів і виведе на екран
@@ -50,20 +43,20 @@ export const App = () => {
 
   // addNewContacts не залишив тут форма може бути перевикористана
 
-  const addNewContacts = (name, number) => {
-    const noClearInputForm = true;
-    const similarElement = element => element.name === name;
-    if (contacts.find(similarElement)) {
-      alert(name + ' is already in contacts.');
-      return noClearInputForm;
-    }
-    dispatch(addContact({ name, number }));
-  };
+  // const addNewContacts = (name, number) => {
+  //   const noClearInputForm = true;
+  //   const similarElement = element => element.name === name;
+  //   if (contacts.find(similarElement)) {
+  //     alert(name + ' is already in contacts.');
+  //     return noClearInputForm;
+  //   }
+  //   dispatch(addContact({ name, number }));
+  // };
 
   return (
     <div className="container">
       <MainTitle title="Phonebook" />
-      <ContactForm addNewContacts={addNewContacts} />
+      <ContactForm />
       <MainTitle title="Contacts" />
       <Filter />
       {true ? (

diff --git a/src/components/ContactForm/ContactForm.jsx b/src/components/ContactForm/ContactForm.jsx
@@ -1,14 +1,18 @@
 import { useState } from 'react';
-import PropTypes from 'prop-types';
 import css from './ContactForm.module.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { addContact } from 'redux/contacts/contactsSlice';
+import { getContacts } from 'redux/selector';
+
+const ContactForm = () => {
+  const contacts = useSelector(getContacts);
+  const dispatch = useDispatch();
 
-const ContactForm = ({ addNewContacts }) => {
   const [name, setName] = useState('');
   const [number, setNumber] = useState('');
 
   const handlerInputChange = e => {
     const { name, value } = e.target;
-
     switch (name) {
       case 'name':
         setName(value);
@@ -24,10 +28,15 @@ const ContactForm = ({ addNewContacts }) => {
   const handlerFormSubmit = e => {
     e.preventDefault();
 
-    if (!addNewContacts(name, number)) {
-      setName('');
-      setNumber('');
+    const similarElement = element => element.name === name;
+    if (contacts.find(similarElement)) {
+      alert(name + ' is already in contacts.');
+      return;
     }
+
+    dispatch(addContact({ name, number }));
+    setName('');
+    setNumber('');
   };
 
   return (
@@ -40,7 +49,7 @@ const ContactForm = ({ addNewContacts }) => {
           type="text"
           name="name"
           value={name}
-          placeholder="Сергій або Serhii "
+          placeholder="Сергій - Serhii "
           // pattern="^[a-zA-Zа-яА-Я]+(([' \-][a-zA-Zа-яА-Я ])?[a-zA-Zа-яА-Я]*)*$"
           pattern="^[a-zA-Zа-яА-ЯєіїЄІЇ]+(([' \-][a-zA-Zа-яА-ЯєіїЄІЇ ])?[a-zA-Zа-яА-ЯєіїЄІЇ]*)*$"
           title="Name may contain only letters, apostrophe, dash and spaces. For example Adrian, Jacob Mercer, Charles de Batz de Castelmore d'Artagnan"
@@ -55,7 +64,7 @@ const ContactForm = ({ addNewContacts }) => {
           type="tel"
           name="number"
           value={number}
-          placeholder="099-123-45-67 або 0991234567"
+          placeholder="099-123-45-67 - 0991234567"
           // pattern="\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}"
           pattern="\+?\d{1,4}?[ .\-\s]?\(?\d{1,3}?\)?[ .\-\s]?\d{1,4}[ .\-\s]?\d{1,4}[ .\-\s]?\d{1,9}"
           title="Phone number must be digits and can contain spaces, dashes, parentheses and can start with +"
@@ -70,8 +79,4 @@ const ContactForm = ({ addNewContacts }) => {
   );
 };
 
-ContactForm.propTypes = {
-  addNewContacts: PropTypes.func.isRequired,
-};
-
 export default ContactForm;
diff --git a/src/components/ContactList/ContactList.jsx b/src/components/ContactList/ContactList.jsx
@@ -2,12 +2,15 @@ import React from 'react';
 import css from './ContactList.module.css';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteContact } from 'redux/contacts/contactsSlice';
+import { getContacts, getFilter } from 'redux/selector';
 
 const ContactList = () => {
   const dispatch = useDispatch();
 
-  const contacts = useSelector(({ contacts }) => contacts);
-  const filter = useSelector(({ filter }) => filter);
+  // const { contacts, filter } = useSelector(state => state);
+
+  const contacts = useSelector(getContacts);
+  const filter = useSelector(getFilter);
 
   const filterContacts = () => {
     const lowerCaseFilter = filter.toLowerCase();

diff --git a/src/redux/selector.js b/src/redux/selector.js
@@ -0,0 +1,2 @@
+export const getContacts = state => state.contacts;
+export const getFilter = state => state.filter;