Login

import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Login from './components/Login/Login';
import ErrorPage from './components/ErrorPage/ErrorPage';
import Register from './components/Register/Register';
import Recipes from './components/Recipes/Recipes';
import User from './components/UserInfo/UseInfo';
import CreateRecipe from './components/CreateRecipe/CreateRecipe';
import DetailsRecipe from './components/DetailsRecipe/DetailsRecipe';
import Users from './components/Users/Users';
import EditRecipe from './components/EditRecipe/EditRecipe';
import Logout from './components/Logout/Logout';
import EditUser from './components/Users/EditUser/EditUser';
import Home from './components/Home/Home';
import Favourites from './components/Favourites/Favourites';

import * as storageService from './services/storageService';

import './App.css';

import { useState, useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';

function App() {

  const [userData, setUserData] = useState({ isAuth: false, username: '' });

  useEffect(() => {

    let user = storageService.getLocalStorage()?.username;

    setUserData({
      isAuth: Boolean(user),
      username: user
    })
  }, []);


  const onLogin = (user) => {
    setUserData({
      isAuth: true,
      username: user
    })
  }

  const onLogout = () => {
    setUserData({
      isAuth: false,
      username: ''
    })
  }

  return (
    <div className="App">
      <Header  {...userData} />
      <div className="mainContainer">

        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/login' element={<Login onLogin={onLogin} />} />
          <Route path='/register' element={<Register onLogin={onLogin}/>} />
          <Route path='/logout' element={<Logout onLogout={onLogout}/>} />
          <Route path='/recipes' element={<Recipes />} />
          <Route path='/user-info' element={<User />} />
          <Route path='/create-recipe' element={<CreateRecipe />} />
          <Route path='/favourites' element={<Favourites />} />
          <Route path='/details/:productId' element={<DetailsRecipe />} />
          <Route path='/users' element={<Users />} />
          <Route path='/edit-recipe/:productId' element={<EditRecipe />} />
          <Route path='/edit-user/:userId' element={<EditUser />} />
          <Route path='*' element={<ErrorPage />} />
        </Routes>

      </div>
      <Footer />
    </div>
  );
}

export default App;