updates

src/components/App.jsx

@@ -1,32 +1,46 @@
-import { lazy } from 'react';
-import { Routes, Route } from 'react-router-dom';
-
-import { useEffect } from 'react';
+import { lazy, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
+import { Routes, Route } from 'react-router-dom';
 
 import Layout from './Layout/Layout';
-import ContactsPage from 'pages/ContactsPage/ContactsPage';
-import RegisterPage from 'pages/RegisterPage/RegisterPage';
-import NotFound from 'pages/NotFound/NotFound';
-
+import { PrivateRoute } from '../routes/PrivateRoute';
+// import { RestrictedRoute } from './RestrictedRoute';
+import { useAuth } from '../hooks/useAuth';
 import operations from '../redux/auth/authOperations';
 
 const HomePage = lazy(() => import('pages/HomePage/HomePage'));
 const LoginPage = lazy(() => import('pages/LoginPage/LoginPage'));
+const ContactsPage = lazy(() => import('pages/ContactsPage/ContactsPage'));
+const RegisterPage = lazy(() => import('pages/RegisterPage/RegisterPage'));
+const NotFound = lazy(() => import('pages/NotFound/NotFound'));
+const NotAuthPage = lazy(() => import('pages/NotAuthPage/NotAuthPage'));
 
 const App = () => {
   const dispatch = useDispatch();
+  const { isRefreshing } = useAuth();
+
   useEffect(() => {
     dispatch(operations.refreshUser());
   }, [dispatch]);
 
-  return (
+  return isRefreshing ? (
+    <b>Refreshing user...</b>
+  ) : (
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<HomePage />} />
         <Route path="register" element={<RegisterPage />} />
         <Route path="login" element={<LoginPage />} />
-        <Route path="contacts" element={<ContactsPage />} />
+        <Route path="unauthorized" element={<NotAuthPage />} />
+        <Route
+          path="/contacts"
+          element={
+            <PrivateRoute
+              redirectTo="/unauthorized"
+              component={<ContactsPage />}
+            />
+          }
+        />
 
         <Route path="*" element={<NotFound to={'/'} />}></Route>
       </Route>

src/components/AppBar/AppBar.jsx

@@ -5,7 +5,7 @@ import { AuthNav } from './AuthNav';
 import { UserMenu } from 'components/AppBar/UserMenu';
 import { Header } from './AppBar.styled';
 
-import authSelectors from '../../redux/auth/authSelectors';
+import { authSelectors } from '../../redux/auth/authSelectors';
 
 export const AppBar = () => {
   const isLoggedIn = useSelector(authSelectors.selectIsLoggedIn);

src/components/AppBar/Navigation.jsx

@@ -1,19 +1,26 @@
+import { useSelector } from 'react-redux';
+import { authSelectors } from '../../redux/auth/authSelectors';
+
 import {
   NavigationMenu,
   NavItem,
   StyledLink,
 } from 'components/AppBar/AppBar.styled';
 
 export const Navigation = () => {
+  const isLoggedIn = useSelector(authSelectors.selectIsLoggedIn);
+
   return (
     <NavigationMenu>
       <NavItem>
         <StyledLink to="/">Home</StyledLink>
       </NavItem>
 
-      <NavItem>
-        <StyledLink to="contacts">Contacts</StyledLink>
-      </NavItem>
+      {isLoggedIn && (
+        <NavItem>
+          <StyledLink to="contacts">Contacts</StyledLink>
+        </NavItem>
+      )}
     </NavigationMenu>
   );
 };

src/components/AppBar/UserMenu.jsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import authSelectors from '../../redux/auth/authSelectors';
+import { authSelectors } from '../../redux/auth/authSelectors';
 import operations from '../../redux/auth/authOperations';
 
 import { IconContext } from 'react-icons';

src/hooks/useAuth.js

@@ -1,18 +1,12 @@
 import { useSelector } from 'react-redux';
-import {
-  selectUser,
-  selectIsLoggedIn,
-  selectIsRefreshing,
-} from '../redux/auth/selectors';
+import { authSelectors } from '../redux/auth/authSelectors';
 
 export const useAuth = () => {
-  const isLoggedIn = useSelector(selectIsLoggedIn);
-  const isRefreshing = useSelector(selectIsRefreshing);
-  const user = useSelector(selectUser);
+  const isLoggedIn = useSelector(authSelectors.selectIsLoggedIn);
+  const user = useSelector(authSelectors.selectUserName);
 
   return {
     isLoggedIn,
-    isRefreshing,
     user,
   };
 };

src/pages/HomePage/HomePage.jsx

@@ -1,12 +1,12 @@
 import { useSelector } from 'react-redux';
-import authSelectors from '../../redux/auth/authSelectors';
+import { authSelectors } from '../../redux/auth/authSelectors';
 
 import { Title } from './HomePage.styled';
 
 const HomePage = () => {
   const name = useSelector(authSelectors.selectUserName);
 
-  return <Title>Hello {name}</Title>;
+  return <Title>Wellcome to Our Application {name}</Title>;
 };
 
 export default HomePage;

src/pages/NotAuthPage/NotAuthPage.jsx

@@ -0,0 +1,20 @@
+import {
+  NotAuthContainer,
+  Title,
+  Text,
+  StyledLink,
+} from './NotAuthPage.styled';
+
+const NotAuthPage = () => {
+  return (
+    <NotAuthContainer>
+      <Title>Unauthorized user</Title>
+      <Text>You have profile</Text>
+      <StyledLink to="login">Log in</StyledLink>
+      <Text>Register now</Text>
+      <StyledLink to="register">Register</StyledLink>
+    </NotAuthContainer>
+  );
+};
+
+export default NotAuthPage;

src/pages/NotAuthPage/NotAuthPage.styled.jsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { NavLink } from 'react-router-dom';
+
+export const NotAuthContainer = styled.div`
+  text-align: center;
+  background-color: #1dacd6;
+  padding: 20px;
+  border-radius: 4px;
+`;
+
+export const Title = styled.h1`
+  font-size: 60px;
+`;
+
+export const Text = styled.p`
+  font-size: 18px;
+`;
+
+export const StyledLink = styled(NavLink)`
+  color: #000000;
+  font-size: 44px;
+`;

src/pages/NotFound/NotFound.styled.jsx

@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 
 export const ErrorContainer = styled.div`
   text-align: center;
-  background-color: #78a1bb;
+  background-color: #1dacd6;
   padding: 20px;
   border-radius: 4px;
 `;

src/redux/auth/authSelectors.js

@@ -2,9 +2,9 @@ const selectIsLoggedIn = state => state.auth.isLoggedIn;
 
 const selectUserName = state => state.auth.user.name;
 
-const authSelectors = {
+export const selectIsRefreshing = state => state.auth.isRefreshing;
+
+export const authSelectors = {
   selectIsLoggedIn,
   selectUserName,
 };
-
-export default authSelectors;

src/redux/auth/authSlice.js

@@ -5,6 +5,7 @@ const initialState = {
   user: { name: null, email: null },
   token: null,
   isLoggedIn: false,
+  isRefreshing: false,
 };
 
 const authSlice = createSlice({
@@ -27,9 +28,16 @@ const authSlice = createSlice({
         state.token = null;
         state.isLoggedIn = false;
       })
+      .addCase(operations.refreshUser.pending, state => {
+        state.isRefreshing = true;
+      })
       .addCase(operations.refreshUser.fulfilled, (state, action) => {
         state.user = action.payload;
         state.isLoggedIn = true;
+        state.isRefreshing = false;
+      })
+      .addCase(operations.refreshUser.rejected, state => {
+        state.isRefreshing = false;
       });
   },
 });

src/routes/PrivateRoute.js

@@ -0,0 +1,9 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+export const PrivateRoute = ({ component: Component, redirectTo = '/' }) => {
+  const { isLoggedIn, isRefreshing } = useAuth();
+  const shouldRedirect = !isLoggedIn && !isRefreshing;
+
+  return shouldRedirect ? <Navigate to={redirectTo} /> : Component;
+};