Merge pull request #11 from lizaklimova/auth-components-markup

Auth operations done

src/components/App/App.tsx

@@ -1,17 +1,20 @@
-import { FC, lazy, LazyExoticComponent, ComponentType } from 'react';
-import { Routes, Route, NavLink } from 'react-router-dom';
+import { FC, lazy, LazyExoticComponent, ComponentType, useEffect } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Toaster } from 'react-hot-toast';
 import { ThemeProvider } from 'styled-components';
+import { AppDispatch } from 'redux/store';
+import { refreshUser, logOut } from '../../redux/auth/operations';
 import { GlobalStyles } from 'assets/styles/GlobalStyles';
 import useTheme from 'hooks/useTheme';
+import useAuth from 'hooks/useAuth';
+import { RestrictedRoute } from 'routes/RestrictedRoute';
+import { PrivateRoute } from 'routes/PrivateRoute';
+import RegisterPage from 'pages/RegisterPage';
+import LoginPage from 'pages/LoginPage';
 import SharedLayout from 'layout/SharedLayout';
 import WelcomePage from 'pages/WelcomePage';
 
-const RegisterPage: LazyExoticComponent<ComponentType<any>> = lazy(
-  () => import('pages/RegisterPage')
-);
-const LoginPage: LazyExoticComponent<ComponentType<any>> = lazy(
-  () => import('pages/LoginPage')
-);
 const MainPage: LazyExoticComponent<ComponentType<any>> = lazy(
   () => import('pages/MainPage')
 );
@@ -38,48 +41,96 @@ const NotFoundPage: LazyExoticComponent<ComponentType<any>> = lazy(
 );
 
 const App: FC = () => {
+  const dispatch: AppDispatch = useDispatch();
   const { currentTheme } = useTheme();
+  const { isRefreshing, isLoggedIn } = useAuth();
+
+  useEffect(() => {
+    dispatch(refreshUser());
+  }, [dispatch]);
 
-  return (
+  const loggingOut = () => {
+    dispatch(logOut());
+  };
+
+  return isRefreshing ? (
+    <div>Refreshing... </div>
+  ) : (
     <ThemeProvider theme={currentTheme}>
       <GlobalStyles />
-      <header>
-        <nav
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '30px',
-          }}
-        >
-          <NavLink to="/categories/beef">Categories</NavLink>
-          <NavLink to="add">Add recipes</NavLink>
-          <NavLink to="my">My recipes</NavLink>
-          <NavLink to="favorite">Favorites</NavLink>
-          <NavLink to="/shopping-list">Shopping list</NavLink>
-          <NavLink to="search">Search</NavLink>
-        </nav>
-      </header>
+      <Toaster position="top-center" />
 
       <Routes>
         <Route path="/" element={<WelcomePage />} />
-        <Route path="/register" element={<RegisterPage />} />
-        <Route path="/login" element={<LoginPage />} />
+        <Route
+          path="/register"
+          element={
+            <RestrictedRoute component={RegisterPage} redirectTo="/main" />
+          }
+        />
+        <Route
+          path="/login"
+          element={<RestrictedRoute component={LoginPage} redirectTo="/main" />}
+        />
 
         <Route path="/" element={<SharedLayout />}>
-          <Route index element={<MainPage />} />
+          <Route
+            path="main"
+            element={<PrivateRoute component={MainPage} redirectTo="/login" />}
+          />
           <Route
             path="/categories/:categoryName"
-            element={<CategoriesPage />}
+            element={
+              <PrivateRoute component={CategoriesPage} redirectTo="/login" />
+            }
+          />
+          <Route
+            path="add"
+            element={
+              <PrivateRoute component={AddRecipesPage} redirectTo="/login" />
+            }
+          />
+          <Route
+            path="my"
+            element={
+              <PrivateRoute component={MyRecipesPage} redirectTo="/login" />
+            }
+          />
+          <Route
+            path="favorite"
+            element={
+              <PrivateRoute component={FavoritesPage} redirectTo="/login" />
+            }
+          />
+          <Route
+            path="shopping-list"
+            element={
+              <PrivateRoute component={ShoppingListPage} redirectTo="/login" />
+            }
+          />
+          <Route
+            path="search"
+            element={
+              <PrivateRoute component={SearchPage} redirectTo="/login" />
+            }
           />
-          <Route path="/add" element={<AddRecipesPage />} />
-          <Route path="/my" element={<MyRecipesPage />} />
-          <Route path="/favorite" element={<FavoritesPage />} />
-          <Route path="/shopping-list" element={<ShoppingListPage />} />
-          <Route path="/search" element={<SearchPage />} />
           <Route path="*" element={<NotFoundPage />} />
         </Route>
       </Routes>
+
+      {isLoggedIn && (
+        <button
+          onClick={loggingOut}
+          style={{
+            backgroundColor: 'red',
+            padding: '15px',
+            borderRadius: '30px',
+            margin: '15px',
+          }}
+        >
+          Logout
+        </button>
+      )}
     </ThemeProvider>
   );
 };

src/components/Login/Login.tsx

@@ -7,8 +7,8 @@ import { AuthLink } from 'components/Registration/AuthPage/AuthPage.styled';
 const Login: FC = () => {
   return (
     <AuthPage>
-      <LoginForm title="Sign in" text="Sign in" login>
-        <InputField label="name" icon="user" type="text" />
+      <LoginForm title="Sign in" text="Sign in">
+        <InputField label="email" icon="mail" type="email" />
         <InputField label="password" icon="lock" type="password" />
       </LoginForm>
 

src/components/Login/LoginForm/LoginForm.tsx

@@ -1,4 +1,8 @@
-import { FC, FormEvent, ReactNode } from 'react';
+import { FC, FormEvent, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from 'redux/store';
+import { LoginFormProps, CredentialsLog } from './loginFormTypes';
+import { logIn } from '../../../redux/auth/operations';
 import {
   AuthForm,
   AuthFormBtn,
@@ -7,26 +11,25 @@ import {
   AuthPositionWrap,
 } from 'components/Registration/RegisterForm/RegisterForm.styled';
 
-interface LoginFormProps {
-  title: string;
-  text: string;
-  login?: boolean;
-  children: ReactNode;
-}
-
 const LoginForm: FC<LoginFormProps> = ({ title, text, login, children }) => {
-  const onLogSubmit = (e: FormEvent<HTMLFormElement>) => {
+  const dispatch: AppDispatch = useDispatch();
+
+  const onLogInSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    const data = Object.fromEntries(formData.entries());
-    console.log(data);
+    const loginCredentials: CredentialsLog = {
+      email: formData.get('email') as string,
+      password: formData.get('password') as string,
+    };
+
+    dispatch(logIn(loginCredentials));
   };
 
   return (
     <AuthPositionWrap>
       <AuthFormContainer>
         <AuthFormTitle $login={login}>{title}</AuthFormTitle>
-        <AuthForm onSubmit={onLogSubmit}>
+        <AuthForm onSubmit={onLogInSubmit}>
           {children}
           <AuthFormBtn type="submit">{text}</AuthFormBtn>
         </AuthForm>

src/components/Login/LoginForm/loginFormTypes.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export interface LoginFormProps {
+  title: string;
+  text: string;
+  login?: boolean;
+  children: ReactNode;
+}
+
+export interface CredentialsLog {
+  email: string;
+  password: string;
+}

src/components/Main/Main.tsx

@@ -1,6 +1,34 @@
-import { FC } from 'react';
+import { FC, useEffect, useRef } from 'react';
+import { toast } from 'react-hot-toast';
+import useAuth from 'hooks/useAuth';
+import useTheme from 'hooks/useTheme';
 
 const Main: FC = () => {
+  const {
+    user: { name },
+    isLoggedIn,
+    isPageReloaded,
+  } = useAuth();
+  const {
+    currentTheme: { background, mainText },
+  } = useTheme();
+
+  useEffect(() => {
+    if (isLoggedIn && !isPageReloaded) {
+      setTimeout(() => {
+        toast(`Welcome, ${name}`, {
+          icon: '👨🏻‍🍳',
+          style: {
+            borderRadius: '10px',
+            background,
+            color: mainText,
+            border: `1px solid ${mainText}`,
+          },
+        });
+      }, 1000);
+    }
+  }, []);
+
   return <div>{/* це сторінка, де хіро */}</div>;
 };
 

src/components/Registration/AuthPage/AuthPage.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
 import {
   authMob1x,
   authMob2x,
@@ -14,10 +14,7 @@ import {
   AuthPgDecorElem,
   AuthFormLinkWrap,
 } from './AuthPage.styled';
-
-interface AuthPageProps {
-  children: ReactNode;
-}
+import { AuthPageProps } from './authPageType';
 
 const AuthPage: FC<AuthPageProps> = ({ children }) => {
   return (

src/components/Registration/AuthPage/authPageType.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export interface AuthPageProps {
+  children: ReactNode;
+}

src/components/Registration/InputField/InputField.styled.tsx

@@ -84,7 +84,7 @@ export const AuthInputIcon = styled.svg`
   opacity: 0.8;
 
   @media screen and (min-width: 768px) {
-    top: 30px;
+    top: 29px;
     width: 24px;
     height: 24px;
   }
@@ -102,7 +102,7 @@ export const IndicatorIconWrap = styled.div`
 `;
 
 export const ValidationMsg = styled.p`
-  font-size: 12px;
+  font-size: 11px;
   margin-top: 5px;
 
   &.success {
@@ -114,10 +114,10 @@ export const ValidationMsg = styled.p`
   }
 
   &.warning {
-    color: (--warning);
+    color: var(--warning);
   }
 
   @media screen and (min-width: 768px) {
-    font-size: 14px;
+    font-size: 12px;
   }
 `;