done

package.json

@@ -4,6 +4,10 @@
   "private": true,
   "homepage": "https://Anastasia-front.github.io/goit-react-hw-08-phonebook/",
   "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
@@ -13,10 +17,15 @@
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-hot-toast": "^2.4.1",
     "react-loading-icons": "^1.1.0",
+    "react-particles": "^2.9.3",
     "react-redux": "^8.0.5",
+    "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
+    "redux-persist": "^6.0.0",
     "styled-components": "^5.3.10",
+    "tsparticles": "^2.9.3",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

src/components/App.jsx

@@ -1,38 +1,77 @@
-import Section from './Section';
-import ContactForm from './ContactForm';
-import ContactList from './ContactList';
-import Filter from './Filter';
-import { useDispatch, useSelector } from 'react-redux';
-import { useEffect } from 'react';
-import { fetchContacts } from 'redux/contactsOperations';
-import { selectError } from 'redux/selectors';
+import { useEffect, lazy } from 'react';
+import { useDispatch } from 'react-redux';
+import { Route, Routes } from 'react-router-dom';
+import { Layout } from './Layout';
+import { PrivateRoute } from './PrivateRoute';
+import { RestrictedRoute } from './RestrictedRoute';
+import { refreshUser } from 'redux/auth/operations';
+import { useAuth } from 'hooks';
+import { Toaster } from 'react-hot-toast';
+
+const HomePage = lazy(() => import('../pages/Home'));
+const RegisterPage = lazy(() => import('../pages/Register'));
+const LoginPage = lazy(() => import('../pages/Login'));
+const ContactsPage = lazy(() => import('../pages/Contacts'));
 
 export const App = () => {
   const dispatch = useDispatch();
-  // const isLoading = useSelector(selectIsLoading);
-  const error = useSelector(selectError);
+  const { isRefreshing } = useAuth();
 
   useEffect(() => {
-    dispatch(fetchContacts());
+    dispatch(refreshUser());
   }, [dispatch]);
-  return (
-    <div>
-      <Section title="Phonebook">
-        <ContactForm />
-      </Section>
 
-      <Section title="Contacts">
-        <Filter />
-        {/* {isLoading && !error && (
-          <b style={{ marginLeft: 70 }}>Request in progress...</b>
-        )} */}
-        {error && (
-          <b style={{ marginLeft: 70 }}>
-            The operation failed with error: ${error}
-          </b>
-        )}
-        {!error && <ContactList />}
-      </Section>
+  return isRefreshing ? (
+    <div style={{ position: 'relative' }}>
+      <h1
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+      >
+        Refreshing user...
+      </h1>
     </div>
+  ) : (
+    <>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<HomePage />} />
+          <Route
+            path="/register"
+            element={
+              <RestrictedRoute
+                redirectTo="/contacts"
+                component={<RegisterPage />}
+              />
+            }
+          />
+          <Route
+            path="/login"
+            element={
+              <RestrictedRoute
+                redirectTo="/contacts"
+                component={<LoginPage />}
+              />
+            }
+          />
+          <Route
+            path="/contacts"
+            element={
+              <PrivateRoute redirectTo="/login" component={<ContactsPage />} />
+            }
+          />
+        </Route>
+      </Routes>
+      <Toaster
+        position="top-center"
+        reverseOrder={false}
+        toastOptions={{
+          duration: 5000,
+        }}
+      />
+    </>
   );
 };

src/components/AppBar/AppBar.jsx

@@ -0,0 +1,16 @@
+import { Navigation } from '../Navigation/Navigation';
+import { UserMenu } from '../UserMenu/UserMenu';
+import { AuthNav } from '../AuthNav/AuthNav';
+import { useAuth } from 'hooks';
+import { Header } from './AppBar.styled';
+
+export const AppBar = () => {
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <Header>
+      <Navigation />
+      {isLoggedIn ? <UserMenu /> : <AuthNav />}
+    </Header>
+  );
+};

src/components/AppBar/AppBar.styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Header = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #2a363b;
+  padding: 10px;
+`;

src/components/AuthNav/AuthNav.jsx

@@ -0,0 +1,10 @@
+import { Link } from './AuthNav.styled';
+
+export const AuthNav = () => {
+  return (
+    <div>
+      <Link to="/register">Register</Link>
+      <Link to="/login">Log In</Link>
+    </div>
+  );
+};

src/components/AuthNav/AuthNav.styled.js

@@ -0,0 +1,19 @@
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const Link = styled(NavLink)`
+  display: inline-block;
+  text-decoration: none;
+  padding: 12px;
+  font-weight: 700;
+  color: black;
+  &:hover {
+    color: teal;
+  }
+
+  &.active {
+    color: white;
+    text-shadow: teal 2px 4px 3px, teal 6px 8px 30px, teal 1px 3px 30px;
+    font-weight: 900;
+  }
+`;