diff --git a/src/components/App.jsx b/src/components/App.jsx
index 01aad56..87ca22d 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,61 +1,64 @@
-import React from 'react';
+import { useDispatch } from 'react-redux';
+import React, { lazy, useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import { Layout } from './Layout/Layout';
-import Register from './Register/Register';
-import Login from './Login/Login';
-import Contacts from './Contacts/Contacts';
-import Home from '../Pages/Home';
-import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { StyledContainer } from './App.styled';
import PrivateRoute from './PrivateRoute/PrivateRoute';
import ProtectedRoute from './ProtectedRoute/ProtectedRoute';
import { currentUser } from '../redux/reducers/auth/operations';
-// const Home = lazy(() => import('../pages/Home'));
+import { StyledContainer } from './App.styled';
-export function App() {
- // const { isLoading, error } = useSelector(selectContacts);
+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 Register = lazy(() => import('../components/Register/Register'));
+const Login = lazy(() => import('../components/Login/Login'));
+const Contacts = lazy(() => import('../components/Contacts/Contacts'));
+
+export function App() {
const dispatch = useDispatch();
+ const isLoadingAuth = useSelector(selectLoaderAuth);
useEffect(() => {
dispatch(currentUser());
}, [dispatch]);
- // if (error) {
- // Notify.failure(`${error}`);
- // return <h1>Something went wrong, please try reloading page...</h1>;
- // }
-
+ if (isLoadingAuth) {
+ return <Loader />;
+ }
return (
- <StyledContainer>
- <Routes>
- <Route path="/" element={<Layout />}>
- <Route index element={<Home />} />
-
- <Route
- path="login"
- element={
- <ProtectedRoute element={<Login />} redirect="/contacts" />
- }
- />
- <Route
- path="register"
- element={
- <ProtectedRoute element={<Register />} redirect="/contacts" />
- }
- />
- <Route
- path="contacts"
- element={<PrivateRoute element={<Contacts />} redirect="/login" />}
- />
- <Route />
- </Route>
-
- {/* {isLoading && <Loader />} */}
- </Routes>
- </StyledContainer>
+ <>
+ <StyledContainer>
+ <Routes>
+ <Route path="/" element={<Layout />}>
+ <Route index element={<Home />} />
+
+ <Route
+ path="login"
+ element={
+ <ProtectedRoute element={<Login />} redirect="/contacts" />
+ }
+ />
+ <Route
+ path="register"
+ element={
+ <ProtectedRoute element={<Register />} redirect="/contacts" />
+ }
+ />
+ <Route
+ path="contacts"
+ element={
+ <PrivateRoute element={<Contacts />} redirect="/login" />
+ }
+ />
+ <Route />
+ </Route>
+ <Route path="*" element={<Home />} />
+ </Routes>
+ </StyledContainer>
+ </>
);
}
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
index 3954c46..c6ffc44 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.jsx
@@ -3,26 +3,19 @@ import { Suspense } from 'react';
import { Outlet } from 'react-router-dom';
import Loader from '../Loader/Loader';
import { Link } from 'react-router-dom';
-// import { StyledHeader, StyledLink } from './Layout.styled';
+
import { useAuth } from 'hook/useAuth';
import { logout } from '../../redux/reducers/auth/operations';
import { useDispatch } from 'react-redux';
-import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';
+
import ThemeToggler from '../ThemeToggler';
+import { selectLoaderAuth } from 'redux/selectors';
+
+import { Button, Tag, TagLabel, Avatar } from '@chakra-ui/react';
-import {
- Flex,
- HStack,
- Spacer,
- Button,
- Tag,
- TagLabel,
- Avatar,
- AiOutlineUser,
-} from '@chakra-ui/react';
-import { Box, Stack, Grid, Wrap, AspectRatio } from '@chakra-ui/layout';
import { useSelector } from 'react-redux/es/hooks/useSelector';
import { selectUser } from '../../redux/selectors';
+import { StyledLayout, StyledLink } from './Layout.styled';
const AuthenticatedNav = () => {
const user = useSelector(selectUser);
@@ -34,9 +27,9 @@ const AuthenticatedNav = () => {
return (
<>
- <Tab>
- <Link to="contacts">Contacts</Link>
- </Tab>
+ <StyledLink to="/">Home</StyledLink>
+
+ <StyledLink to="contacts">Contacts</StyledLink>
<Tag size="md" colorScheme="blue" borderRadius="full">
<Avatar
@@ -65,36 +58,31 @@ const AuthenticatedNav = () => {
};
const UnAuthenticatedNav = () => (
<>
- <Tab>
- <Link to="register">Register</Link>
- </Tab>
- <Tab>
- <Link to="login">Login</Link>
- </Tab>
+ <StyledLink to="/">Home</StyledLink>
+
+ <StyledLink to="register">Register</StyledLink>
+
+ <StyledLink to="login">Login</StyledLink>
</>
);
export const Layout = () => {
const { isLoggedIn } = useAuth();
-
+ const isLoadingAuth = useSelector(selectLoaderAuth);
return (
<>
- <Tabs isLazy>
- <TabList gap="15">
- <Tab>
- <Link to="/">Home</Link>
- </Tab>
-
+ {isLoadingAuth && <Loader />}
+ <StyledLayout>
+ <nav>
+
{isLoggedIn ? <AuthenticatedNav /> : <UnAuthenticatedNav />}
- </TabList>
+ <ThemeToggler />
+ </nav>
+ </StyledLayout>
- <TabPanels>
- <Suspense fallback={<Loader />}>
- <Outlet />
- </Suspense>
- </TabPanels>
- </Tabs>
- <ThemeToggler />
+ <Suspense fallback={<Loader />}>
+ <Outlet />
+ </Suspense>
</>
);
};
diff --git a/src/components/Layout/Layout.styled.js b/src/components/Layout/Layout.styled.js
index cbd8694..3cc3858 100644
--- a/src/components/Layout/Layout.styled.js
+++ b/src/components/Layout/Layout.styled.js
@@ -1,31 +1,29 @@
-// import styled from 'styled-components';
-// import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
-// export const StyledHeader = styled.header`
-// display: flex;
-// align-items: center;
-// justify-content: space-between;
-// gap: 12px;
-// padding: 8px 0;
-// margin-bottom: 16px;
-// border-bottom: 1px solid black;
+export const StyledLayout = styled.header`
+ padding: 8px 0;
+ margin-bottom: 16px;
+ border-bottom: 1px solid black;
-// > nav {
-// display: flex;
-// }
-// `;
+ > nav {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ }
+`;
-// export const StyledLink = styled(NavLink)`
-// padding: 8px 16px;
-// border-radius: 4px;
-// text-decoration: none;
-// color: black;
-// font-weight: 500;
-// font-size: 35px;
-// transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+export const StyledLink = styled(NavLink)`
+ padding: 8px 16px;
+ border-radius: 4px;
+ text-decoration: none;
+ color: black;
+ font-weight: 500;
+ font-size: 18px;
+ transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-// &.active {
-// color: white;
-// background-color: orangered;
-// }
-// `;
+ &.active {
+ color: white;
+ background-color: #2196f3;
+ }
+`;
diff --git a/src/components/ThemeToggler.js b/src/components/ThemeToggler.js
index 17db442..1087e06 100644
--- a/src/components/ThemeToggler.js
+++ b/src/components/ThemeToggler.js
@@ -6,7 +6,7 @@ export default function ThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return (
- <Box textAlign="center" position="absolute" right="30px" top="10px">
+ <Box>
<IconButton
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
diff --git a/src/redux/selectors.js b/src/redux/selectors.js
index 2703dcb..b5de046 100644
--- a/src/redux/selectors.js
+++ b/src/redux/selectors.js
@@ -5,3 +5,18 @@ export const selectIsLoading = state => state.contact.isLoading;
export const selectisLoggedIn = state => state.auth.isLoggedIn;
export const selectUser = state => state.auth.user;
+export const selectLoaderAuth = state => state.auth.isLoading;
+export const selectLoaderContacts = state => state.contact.isLoading;
+
+// if (error) {
+// Notify.failure(`${error}`);
+// return <h1>Something went wrong, please try reloading page...</h1>;
+// } const isLoadingContacts = useSelector(selectLoaderContacts);
+// const isLoadingAuth = useSelector(selectLoaderAuth);
+
+// import { useSelector } from 'react-redux/es/hooks/useSelector';
+// import { selectLoaderAuth, selectLoaderContacts } from 'redux/selectors';
+
+// import Loader from '../Loader/Loader';
+
+/* {isLoadingContacts && <Loader />} */