Clean application

Remove unnecessary module.css, use depcheck, organizing imports.

package.json

@@ -5,14 +5,10 @@
   "homepage": "https://emiliawenta.github.io/goit-react-hw-08-phonebook/",
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/layout": "^2.3.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@reduxjs/toolkit": "^1.9.7",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.2",
     "components": "^0.1.0",
     "depcheck": "^1.4.7",
@@ -27,8 +23,9 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
-    "web-vitals": "^2.1.3"
+    "styled-components": "^6.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App.jsx

@@ -1,19 +1,18 @@
+import { StyledContainer } from './App.styled';
+
 import { useDispatch } from 'react-redux';
 import React, { lazy, useEffect } from 'react';
 import { Routes, Route } from 'react-router-dom';
+import { useSelector } from 'react-redux/es/hooks/useSelector';
 
 import { Layout } from './Layout/Layout';
+import Loader from '../components/Loader/Loader';
+import { selectLoaderAuth } from 'redux/selectors';
 import PrivateRoute from './PrivateRoute/PrivateRoute';
 import ProtectedRoute from './ProtectedRoute/ProtectedRoute';
 import { currentUser } from '../redux/reducers/auth/operations';
 
-import { StyledContainer } from './App.styled';
-
-import { useSelector } from 'react-redux/es/hooks/useSelector';
-import { selectLoaderAuth } from 'redux/selectors';
-import Loader from '../components/Loader/Loader';
-
-const Home = lazy(() => import('../Pages/Home'));
+const Home = lazy(() => import('../components/Home/Home'));
 const Register = lazy(() => import('../components/Register/Register'));
 const Login = lazy(() => import('../components/Login/Login'));
 const Contacts = lazy(() => import('../components/Contacts/Contacts'));

src/components/ContactList/ContactList.jsx

@@ -1,22 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux/es/hooks/useSelector';
+import { Box, Flex, Heading, List, Text } from '@chakra-ui/react';
 
 import ContactListItem from './ContactListItem/ContactListItem';
 import { selectFilterValue, selectContacts } from '../../redux/selectors';
 
-import {
-  Box,
-  Flex,
-  Heading,
-  Input,
-  List,
-  ListItem,
-  ListIcon,
-  OrderedList,
-  UnorderedList,
-  Text,
-} from '@chakra-ui/react';
-
 export default function ContactList() {
   const { contacts } = useSelector(selectContacts);
   const filterValue = useSelector(selectFilterValue);

src/components/ContactList/ContactListItem/ContactListItem.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
-
-import { deleteContact } from '../../../redux/reducers/contacts/operations';
-
+import { PhoneIcon, DeleteIcon } from '@chakra-ui/icons';
 import {
   Flex,
   ListItem,
@@ -12,7 +10,8 @@ import {
   Card,
   CardBody,
 } from '@chakra-ui/react';
-import { PhoneIcon, DeleteIcon } from '@chakra-ui/icons';
+
+import { deleteContact } from '../../../redux/reducers/contacts/operations';
 
 export default function ContactListItem({ id, name, number }) {
   const dispatch = useDispatch();

src/components/Contacts/Contacts.jsx

@@ -1,12 +1,10 @@
-import { Helmet } from 'react-helmet';
+import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { logout } from '../../redux/reducers/auth/operations';
-import { Button } from '@chakra-ui/react';
-import ContactList from '../ContactList/ContactList';
+
 import Form from '../Form/Form';
 import Filter from '../Filter/Filter';
+import ContactList from '../ContactList/ContactList';
 import { fetchContacts } from '../../redux/reducers/contacts/operations';
-import React, { useEffect } from 'react';
 
 export default function Contacts() {
   const dispatch = useDispatch();

src/components/Filter/Filter.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
+import { Box, Flex, Heading, Input } from '@chakra-ui/react';
 
 import { filterContact } from '../../redux/reducers/contacts/filterSlice';
 
-import { Box, Flex, Heading, Input } from '@chakra-ui/react';
-import css from './Filter.module.css';
-
 export default function Filter() {
   const dispatch = useDispatch();
 

src/components/Form/Form.jsx

@@ -1,15 +1,10 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-
-import { addContact } from '../../redux/reducers/contacts/operations';
-
-import { Heading } from '@chakra-ui/react';
-import { Card, CardBody } from '@chakra-ui/react';
 import { Notify } from 'notiflix/build/notiflix-notify-aio';
-
-import { useSelector } from 'react-redux/es/hooks/useSelector';
 import { ArrowForwardIcon, PhoneIcon } from '@chakra-ui/icons';
+import { useSelector } from 'react-redux/es/hooks/useSelector';
 import {
+  Heading,
   Flex,
   Box,
   Stack,
@@ -19,14 +14,16 @@ import {
   Input,
   InputGroup,
   InputLeftElement,
-  useColorMode,
+  Card,
+  CardBody,
 } from '@chakra-ui/react';
-import { selectAuth } from '../../redux/selectors';
+
+import { selectContacts } from '../../redux/selectors';
+import { addContact } from '../../redux/reducers/contacts/operations';
 
 export default function Form() {
   const dispatch = useDispatch();
-  // const { error } = useSelector(selectAuth);
-  // console.log(error);
+  const { error } = useSelector(selectContacts);
 
   const handleSubmit = event => {
     event.preventDefault();
@@ -37,9 +34,9 @@ export default function Form() {
     form.reset();
   };
 
-  // if (error) {
-  //   return Notify.failure(error);
-  // }
+  if (error) {
+    return Notify.failure(error);
+  }
 
   return (
     <Box>

src/Pages/Home.jsx → src/components/Home/Home.jsx

@@ -1,22 +1,20 @@
+import {
+  CheckIcon,
+  EditIcon,
+  SearchIcon,
+  DeleteIcon,
+  PhoneIcon,
+} from '@chakra-ui/icons';
 import {
   Card,
   CardHeader,
   CardBody,
   CardFooter,
   Heading,
   Text,
-  Image,
   Stack,
-  Button,
   SimpleGrid,
 } from '@chakra-ui/react';
-import {
-  CheckIcon,
-  EditIcon,
-  SearchIcon,
-  DeleteIcon,
-  PhoneIcon,
-} from '@chakra-ui/icons';
 
 export default function Home() {
   return (
@@ -45,7 +43,9 @@ export default function Home() {
       </Card>
       <SimpleGrid
         spacing={4}
-        templateColumns="repeat(auto-fill, minmax(200px, 1fr))"
+        paddingTop="15px"
+        justify="center"
+        templateColumns="repeat(auto-fill, minmax(400px, 1fr))"
       >
         <Card>
           <CardHeader>
@@ -57,7 +57,7 @@ export default function Home() {
               experience.
             </Text>
           </CardBody>
-          <CardFooter>
+          <CardFooter justifyContent="center">
             <EditIcon />
           </CardFooter>
         </Card>
@@ -71,7 +71,7 @@ export default function Home() {
               more scrolling endlessly.
             </Text>
           </CardBody>
-          <CardFooter>
+          <CardFooter justifyContent="center">
             <SearchIcon />
           </CardFooter>
         </Card>
@@ -85,7 +85,7 @@ export default function Home() {
               to remove unwanted entries. Just a one taps, and you're done!
             </Text>
           </CardBody>
-          <CardFooter>
+          <CardFooter justifyContent="center">
             <DeleteIcon />
           </CardFooter>
         </Card>
@@ -96,11 +96,11 @@ export default function Home() {
           <CardBody>
             <Text>
               Whether you're at work, home, or on the go, ConnectSave is at your
-              fingertips. Access your contacts anytime, anywhere – our app is
+              fingertips. Access your contacts anytime, anywhere our app is
               designed to keep you connected on your terms.
             </Text>
           </CardBody>
-          <CardFooter>
+          <CardFooter justifyContent="center">
             <PhoneIcon />
           </CardFooter>
         </Card>

src/components/Layout/Layout.jsx

@@ -1,21 +1,17 @@
-import React from 'react';
-import { Suspense } from 'react';
+import React, { Suspense } from 'react';
+import { useDispatch } from 'react-redux';
 import { Outlet } from 'react-router-dom';
-import Loader from '../Loader/Loader';
+import { ArrowForwardIcon } from '@chakra-ui/icons';
+import { useSelector } from 'react-redux/es/hooks/useSelector';
+import { Button, Tag, TagLabel, Avatar } from '@chakra-ui/react';
 
+import Loader from '../Loader/Loader';
 import { useAuth } from 'hook/useAuth';
-import { logout } from '../../redux/reducers/auth/operations';
-import { useDispatch } from 'react-redux';
-
 import ThemeToggler from '../ThemeToggler';
-import { selectLoaderAuth } from 'redux/selectors';
-
-import { Button, Tag, TagLabel, Avatar } from '@chakra-ui/react';
+import { logout } from '../../redux/reducers/auth/operations';
+import { selectUser, selectLoaderAuth } from '../../redux/selectors';
 
-import { useSelector } from 'react-redux/es/hooks/useSelector';
-import { selectUser } from '../../redux/selectors';
 import { StyledLayout, StyledLink } from './Layout.styled';
-import { ArrowForwardIcon } from '@chakra-ui/icons';
 
 const AuthenticatedNav = () => {
   const user = useSelector(selectUser);