amber/src/App.js

import { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Cart from './pages/Cart';
import Login from './pages/Login';
import Newsletter from './pages/Newsletter';
import Products from './pages/Products';
import Product from './pages/Products/Product';
import Checkout from './pages/Checkout';
import Navbar from './components/Navbar';
import Footer from './components/Footer/Footer';
import Header from './components/Header';
import theme from './theme/theme';
import { ThemeProvider } from '@mui/material';
import { fetchCart } from './redux/slices/cartSlice';
import { useSelector, useDispatch } from 'react-redux';

const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;

function App() {

  const dispatch = useDispatch()

  useEffect(() => {

    //Check if cart exist
    let cartHistory = localStorage.getItem('amber-cart');
    cartHistory = cartHistory ? JSON.parse(cartHistory) : {};

    // if we got cart, then just fetch from BE based on ID
    if (!isEmptyObject(cartHistory)) {

      dispatch(fetchCart(cartHistory.id));

    }

  }, [])

  return (
    <ThemeProvider theme={theme}>
      <Header />
      <Navbar />
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/login' element={<Login />} />

          <Route path='products'>
            {/* All Products */}
            <Route index element={<Products />} />

            {/* Single Product */}
            <Route path=':pid' element={<Product />} />

          </Route>

          <Route path='/newsletter' element={<Newsletter />} />
          <Route path='/cart' element={<Cart />} />
          <Route path='/checkout' element={<Checkout />} />
        </Routes>
      </BrowserRouter>
      <Footer />
    </ThemeProvider>
  );
}



export default App;