import { useState,useEffect } from 'react';
import './App.css';
import Header from './Components/Header/Header';
import { BrowserRouter as Router, Route ,Routes} from 'react-router-dom';
import Pages from './Pages/Pages';
import Data from "./Components/FlashDeals/Data"
import Cart from './Components/Cart/Cart';
import Sdata from './Components/Shop/Sdata';
import {auth} from "../src/Firebase/Firebase"
import Dashboard from './Admin/Dashboard/Dashboard';
import AdminMain from './Admin/AdminMain/AdminMain';
import AddProduct from './Admin/AddProduct/AddProduct';
function App() {
const productItems = Data.productItems
const {shopItems} = Sdata
const [cartItem,setCartItem] = useState([]);
const [userData,setUserData] = useState(undefined);
const [adminRoute,setAdminRoute] = useState(false)
console.log(adminRoute)
useEffect(()=>{
if(window.location.pathname.startsWith('/admin')){
setAdminRoute(true)
}else{
setAdminRoute(false)
}
},[])
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((user) => {
if (user && user.emailVerified) {
console.log("user is",user)
setUserData(user)
}
});
return () => unsubscribe();
}, []);
const handleSignOut = () => {
auth.signOut()
.then(() => {
setUserData(undefined);
setCartItem([]);
})
.catch((error) => {
console.log('Sign out error:', error);
});
};
const addToCart = (product)=>{
const productExit = cartItem.find((item)=>item.id === product.id)
if(productExit){
setCartItem(cartItem.map((item)=>
(item.id === product.id ? {...productExit,qty:productExit.qty + 1} : item)
))
}else{
setCartItem([...cartItem,{...product,qty:1}])
}
}
const decreaseQty = (product) =>{
const productExit = cartItem.find((item)=>item.id === product.id)
if(productExit.qty === 1){
setCartItem(cartItem.filter((item)=>item.id !== product.id))
}else{
setCartItem(cartItem.map((item)=>(item.id=== product.id ? {...productExit,qty : productExit.qty-1}:item)))
}
}
return (
<>
<Router>
{adminRoute ? <Dashboard/> : <Header cartItem={cartItem} userData={userData} handleSignOut={handleSignOut}/> }
<Routes>
<Route path='/' element={<Pages productItems={productItems} addToCart={addToCart} cartItem={cartItem} shopItems={shopItems} userData={userData} />}/>
<Route path='/cart' element={<Cart cartItem={cartItem} addToCart={addToCart} decreaseQty={decreaseQty}/>}/>
<Route path='/admin/dashboard' element={<AdminMain/>}/>
<Route path='/admin/add-product' element={<AddProduct />} />
</Routes>
</Router>
</>
);
}
export default App;
this is the unique code snippet of a React application with various components.
If you are wondering how to render the element <AddProduct /> inside .main-content div in the Dashboard component, follow these steps:
Firstly, make sure that you have imported all necessary components and configured your routes correctly.
Next, within the Dashboard component, locate the section where you want to render the AddProduct component. In this case, it is inside the .main-content div.
Within the return statement of the Dashboard component, add the following code snippet:
<>
<AdminSidebar/>
<div className='main-content'>
<AdminHeader handleToggleClick={handleToggleClick}/>
<AddProduct /> {/* This will render the AddProduct component inside the main content div */}
</div>
<input type="checkbox" name='' id='sidebar-toggle' onChange={handleCheckboxChange} checked={checkboxChecked}/>
<label htmlFor="sidebar-toggle" className='body-label' onClick={handleToggleClick}></label>
</>
By adding the <AddProduct /> element inside the .main-content div in the Dashboard component's return statement, you can successfully render the AddProduct component in the desired location.
Ensure that all other components are working seamlessly together to achieve the desired functionality in your React application.