diff --git a/src/components/ContactList/ContactList.jsx b/src/components/ContactList/ContactList.jsx index 2adc7b7..0cf1394 100644 --- a/src/components/ContactList/ContactList.jsx +++ b/src/components/ContactList/ContactList.jsx @@ -1,6 +1,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { deleteContact } from '../../redux/operations'; -import * as selectors from '../../redux/selectors'; +import * as selectors from '../../redux/contacts/selectors'; import { Loader } from '../Loader/Loader'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx index 2c6fe40..5a33616 100644 --- a/src/components/Filter/Filter.jsx +++ b/src/components/Filter/Filter.jsx @@ -1,6 +1,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { setFilter } from '../../redux/filterSlice'; -import * as selectors from '../../redux/selectors'; +import * as selectors from '../../redux/contacts/selectors'; import css from './Filter.module.css'; diff --git a/src/components/Form/ContactForm/ContactForm.jsx b/src/components/Form/ContactForm/ContactForm.jsx index 14de10b..22fa8fe 100644 --- a/src/components/Form/ContactForm/ContactForm.jsx +++ b/src/components/Form/ContactForm/ContactForm.jsx @@ -1,6 +1,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { addContact } from '../../../redux/operations'; -import * as selectors from '../../../redux/selectors'; +import * as selectors from '../../../redux/contacts/selectors'; import { nanoid } from '@reduxjs/toolkit'; import Notiflix from 'notiflix'; diff --git a/src/components/Form/authForms/LoginForm.jsx b/src/components/Form/authForms/LoginForm.jsx index 1b936f3..089b5ee 100644 --- a/src/components/Form/authForms/LoginForm.jsx +++ b/src/components/Form/authForms/LoginForm.jsx @@ -1,8 +1,9 @@ import { useDispatch, useSelector } from 'react-redux'; +import { selectErrorLogin } from '../../../redux/auth/selectors'; export const LoginForm = () => { const dispatch = useDispatch(); - const errorLogin = useSelector(state => state.error); // Dont FORGET !!! import selector + const errorLogin = useSelector(selectErrorLogin); const handleSubmit = e => { e.preventDefault(); diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 749b32e..18877c2 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -1,7 +1,7 @@ -import { UseSelector } from "react-redux"; import { NavLink } from 'react-router-dom'; - -import { UserMenu } from '../UserMenu/UserMenu' +import { useSelector } from 'react-redux'; +import { selectIsLoggedIn } from '../../redux/auth/selectors'; +import { UserMenu } from '../UserMenu/UserMenu'; const Navigation = () => { const isLoggedIn = useSelector(selectIsLoggedIn); @@ -25,4 +25,4 @@ const Navigation = () => { ); }; -export default Navigation; \ No newline at end of file +export default Navigation; diff --git a/src/components/UserMenu/UserMenu.jsx b/src/components/UserMenu/UserMenu.jsx index b168f1b..f316eb3 100644 --- a/src/components/UserMenu/UserMenu.jsx +++ b/src/components/UserMenu/UserMenu.jsx @@ -1,17 +1,19 @@ -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch, useSelector } from 'react-redux'; +import { logOut } from '../../redux/auth/operations'; +import { selectUser } from '../../redux/auth/selectors'; const UserMenu = () => { - const dispatch = useDispatch(); - const user = useSelector(selectUser); + const dispatch = useDispatch(); + const user = useSelector(selectUser); - return ( - -

Welcome, {user.name}

- -
- ); -} + return ( + +

Welcome, {user.name}

+ +
+ ); +}; -export default UserMenu; \ No newline at end of file +export default UserMenu; diff --git a/src/pages/Contacts.jsx b/src/pages/Contacts.jsx index e9198d7..0e0ca1e 100644 --- a/src/pages/Contacts.jsx +++ b/src/pages/Contacts.jsx @@ -2,12 +2,19 @@ import { useSelector, useDispatch } from 'react-redux'; import { useEffect } from 'react'; import { Grid } from 'react-loader-spinner'; +import { fetchContacts } from '../redux/contacts/operations'; +import { selectLoading, selectError } from '../redux/contacts/selectors'; + +import { Filter } from '../components/Filter/Filter'; +import { ContactList } from '../components/ContactList/ContactList'; +import { ContactForm } from '../components/form/ContactForm/ContactForm'; + const { useEffect } = require('react'); const { useDispatch, useSelector } = require('react-redux'); const Contacts = () => { const dispatch = useDispatch(); - const isLoading = useSelector(selectIsloading); + const isLoading = useSelector(selectLoading); const error = useSelector(selectError); useEffect(() => { diff --git a/src/redux/auth/operations.js b/src/redux/auth/operations.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/auth/selectors.js b/src/redux/auth/selectors.js new file mode 100644 index 0000000..e875044 --- /dev/null +++ b/src/redux/auth/selectors.js @@ -0,0 +1,4 @@ +export const selectIsLoggedIn = state => state.auth.isLoggedIn; +export const selectUser = state => state.auth.user; +export const selectIsRefreshing = state => state.auth.isRefreshing; +export const selectErrorLogin = state => state.auth.error; diff --git a/src/redux/auth/slice.js b/src/redux/auth/slice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/contactsSlice.js b/src/redux/contacts/contactsSlice.js similarity index 100% rename from src/redux/contactsSlice.js rename to src/redux/contacts/contactsSlice.js diff --git a/src/redux/filterSlice.js b/src/redux/contacts/filterSlice.js similarity index 100% rename from src/redux/filterSlice.js rename to src/redux/contacts/filterSlice.js diff --git a/src/redux/initialState.js b/src/redux/contacts/initialState.js similarity index 100% rename from src/redux/initialState.js rename to src/redux/contacts/initialState.js diff --git a/src/redux/operations.js b/src/redux/contacts/operations.js similarity index 100% rename from src/redux/operations.js rename to src/redux/contacts/operations.js diff --git a/src/redux/selectors.js b/src/redux/contacts/selectors.js similarity index 100% rename from src/redux/selectors.js rename to src/redux/contacts/selectors.js