Skip to content

Commit

Permalink
CATEGORY BRAND FETCh
Browse files Browse the repository at this point in the history
  • Loading branch information
@Valentino1930
Valentino1930 committed Jul 26, 2024
1 parent 10380a8 commit c96c1b4
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 86 deletions.
95 changes: 48 additions & 47 deletions src/Pages/Product.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,21 @@ import { ProductsContext } from '../context/ProductsContext'
import { useCart } from '../context/CartContext'
export default function Product() {
let { id } = useParams()
const {getProductById,productos} = useContext(ProductsContext)
const {addCart} = useCart()
const [producto,setProducto] = useState({})
const { getProductById, productos } = useContext(ProductsContext)
const { addCart } = useCart()
const [producto, setProducto] = useState({})
const [mainImage, setMainImage] = useState()
useEffect(()=>{
getProductById(id).then(producto =>{
useEffect(() => {
getProductById(id).then(producto => {
setProducto(producto)
setMainImage(producto.img_1)})
},[id])
setMainImage(producto.img_1)
})
}, [id])

const user = useSelector(state => state?.user?.user)
const [noticeLogin,setNoticeLogin] = useState(null)
console.log(producto)
const [noticeLogin, setNoticeLogin] = useState(null)
console.log(producto)

const handleMainImage = (e) => {

setMainImage(e.target.parentElement.value)
Expand All @@ -31,22 +32,22 @@ export default function Product() {

//ARREGLARLO

// const relatedProducts = productos.filter((prod)=>{
// if(prod.id_product != id){
// return prod.category == producto.category || prod.brand == producto.brand
// }
// })
const relatedProducts = productos.filter((prod) => {
if (prod.id_product != id) {
return prod.cateory_name == producto.name_category_name || prod.brand_name == producto.brand_name
}
})





return (
<section style={{ background: 'rgb(0,0,0) linear-gradient(170deg, rgba(0,0,0,1) 24%, rgba(78,0,103,1) 95%)' }}>
<Navbar></Navbar>
{/* CONTENEDOR PRODUCTO SELECCIONADO + PRODUCTOS RELACIONADOS */}
<div className='pt-[20vh] pb-[10vh] w-[90%] mx-auto'>
{/* SECCION PRODUCTO SELECCIONADO */}
<section className='max-[700px]:flex-col
flex items-center border- border-white shadow-lg shadow-violet-500/50'>
flex items-center border-b border-white shadow-lg shadow-violet-500/50'>
{/* DATOS PRODUCTO SELECCIONADO */}
<article className='max-[700px]:py-2
py-[300px] flex flex-col items-center justify-center text-white px-6 text-center bg-[#202020] h-[430px] md:w-1/2'>
Expand All @@ -55,7 +56,7 @@ export default function Product() {
<div className='flex'>
<h5 className='text-red-600 text-2xl'>${producto.price}.00</h5>
<h5 className='text-orange-100 bg-orange-700 ml-4 rounded-md p-1 cursor-pointer hover:bg-orange-600 hover:text-orange-200'>
<motion.div onClick={()=>{user ? addCart(producto) : setNoticeLogin(true)}}>
<motion.div onClick={() => { user ? addCart(producto) : setNoticeLogin(true) }}>
Comprar
</motion.div>
</h5>
Expand All @@ -74,7 +75,7 @@ export default function Product() {
</Link>
</motion.button>
</motion.div>

</div>
}
</AnimatePresence>
Expand All @@ -100,37 +101,37 @@ export default function Product() {
</section>

{/* SECCION PRODUCTOS RELACIONADOS */}
{/* <section className='bg-[#202020]'>
<h1 className='text-white text-center text-3xl py-5'>Productos Relacionados:</h1>
<div className=' max-[700px]:flex-col
<section className='bg-[#202020]'>
<h1 className='text-white text-center text-3xl py-5'>Productos Relacionados:</h1>
<div className=' max-[700px]:flex-col
flex flex-wrap items-center justify-center'>
{
relatedProducts.length ?
relatedProducts.map((prod) => {
return <article key={prod.id_producto} className=' w-[35%] m-3 cursor-pointer p-10 bg-[#18181a] hover:bg-black lg:w-1/3 lg:m-5' style={{boxShadow: '1px 2px 15px 6px rgba(207,90,0,0.42)' , transition:'.5s ease-in-out'}}>
<div className='h-full flex flex-col items-center justify-center'>
<img src={`/productos/${prod.imagen_1}.png`} alt="" className='w-[220px]' />
<h1 className='text-white'>{prod.producto}</h1>
<h5 className='text-orange-400'>{prod.marca} - {prod.categoria}</h5>
<div className='flex items-center mt-3'>
<h5 className='text-zinc-500 border p-1 text-center hover:text-orange-400'>
<Link to={`/products/${prod.id_producto}`}>Descubre Mas</Link>
</h5>
<h5 className='text-zinc-500 border p-1 ml-4 hover:text-orange-400'>
<button>Comprar</button>
</h5>
</div>
{
relatedProducts.length ?
relatedProducts.map((prod) => {
return <article key={prod.id_product} className=' w-[35%] m-3 cursor-pointer p-10 bg-[#18181a] hover:bg-black lg:w-1/3 lg:m-5' style={{ boxShadow: '1px 2px 15px 6px rgba(207,90,0,0.42)', transition: '.5s ease-in-out' }}>
<div className='h-full flex flex-col items-center justify-center'>
<img src={`/productos/${prod.img_1}.png`} alt="" className='w-[220px]' />
<h1 className='text-white'>{prod.name}</h1>
<h5 className='text-orange-400'>{prod.brand_name} - {prod.cateory_name}</h5>
<div className='flex items-center mt-3'>
<h5 className='text-zinc-500 border p-1 text-center hover:text-orange-400'>
<Link to={`/products/${prod.id_product}`}>Descubre Mas</Link>
</h5>
<h5 className='text-zinc-500 border p-1 ml-4 hover:text-orange-400'>
<button>Comprar</button>
</h5>
</div>
</article>
})
: <h5 className='text-white'>No Hay Productos Relacionados a {producto.producto}</h5>
}
</div>
</section> */}
</div>

</article>
})
: <h5 className='text-white'>No Hay Productos Relacionados a {producto.producto}</h5>
}
</div>
</section>
</div>
<Footer></Footer>

</section>
)
}
4 changes: 2 additions & 2 deletions src/Pages/Products.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Products() {
useEffect(() => {

function getCategorias() {
fetch('http://localhost:3000/category')
fetch('https://api-4-ai9l.onrender.com/api/category')
.then(res => {
// Verifica si la respuesta fue exitosa
if (!res.ok) {
Expand All @@ -46,7 +46,7 @@ export default function Products() {
});
}
function getMarcas() {
fetch('http://localhost:3000/brands')
fetch('https://api-4-ai9l.onrender.com/api/brands')
.then(res => {
// Verifica si la respuesta fue exitosa
if (!res.ok) {
Expand Down
58 changes: 30 additions & 28 deletions src/components/ShowProducts.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,40 @@ import { Link } from 'react-router-dom'
import { ProductsContext } from '../context/ProductsContext'

export default function ShowProducts({ products }) {
const {productos,maxPrice,productosFiltrados} = useContext(ProductsContext)
const[hoveredIndex,setHoveredIndex] = useState(null)
const { productos, maxPrice, productosFiltrados, loading } = useContext(ProductsContext)
const [hoveredIndex, setHoveredIndex] = useState(null)
console.log(productosFiltrados)
if(productos.length <= 1){

if (productos.length <= 1) {
return <h1 className='text-orange-600 text-2xl'>Productos no encontrados :& </h1>
}else{
return (productosFiltrados.length >= 1 ?productosFiltrados:productos).filter((prod)=>prod.price <= maxPrice)
.map((prod,index) => {
return <article key={prod.id_product} className='cursor-pointer p-10 rounded-xl mx-auto my-5 md:m-8 hover:bg-black' style={{ boxShadow: '1px 2px 15px 6px rgba(207,90,0,0.42)' , transition:'.5s ease-in-out'}}
onMouseOver={()=>setHoveredIndex(index)} onMouseOut={()=>setHoveredIndex(null)}
>
<div className='h-full flex flex-col items-center justify-center'>
<img src={hoveredIndex === index ? `productos/${prod.img_1}.png` : `productos/${prod.img_2}.png`} alt="" className='w-[220px]' />
<h1 className='text-orange-500'>{prod.name}</h1>
<div className='flex w-full justify-center text-white gap-x-3 py-2'>
} else if (loading) {
return <h1 className='text-orange-600 text-2xl'>Loading products...</h1>
} else {
return (productosFiltrados.length >= 1 ? productosFiltrados : productos).filter((prod) => prod.price <= maxPrice)
.map((prod, index) => {
return <article key={prod.id_product} className='cursor-pointer p-10 rounded-xl mx-auto my-5 md:m-8 hover:bg-black' style={{ boxShadow: '1px 2px 15px 6px rgba(207,90,0,0.42)', transition: '.5s ease-in-out' }}
onMouseOver={() => setHoveredIndex(index)} onMouseOut={() => setHoveredIndex(null)}
>
<div className='h-full flex flex-col items-center justify-center'>
<img src={hoveredIndex === index ? `productos/${prod.img_1}.png` : `productos/${prod.img_2}.png`} alt="" className='w-[220px]' />
<h1 className='text-orange-500'>{prod.name}</h1>
<div className='flex w-full justify-center text-white gap-x-3 py-2'>
<p>{prod.brand_name.toUpperCase()}</p>
<p>{prod.category_name.toUpperCase()}</p>
</div>
<div className='flex items-center mt-3'>
<h5 className='text-zinc-500 border p-1 hover:text-orange-400'>
<Link to={`/products/${prod.id_product}`}>Descubre Mas</Link>
</h5>
<h5 className='text-2xl font-extrabold p-1 ml-4 text-orange-400'>
${prod.price}
</h5>
</div>
</div>
<div className='flex items-center mt-3'>
<h5 className='text-zinc-500 border p-1 hover:text-orange-400'>
<Link to={`/products/${prod.id_product}`}>Descubre Mas</Link>
</h5>
<h5 className='text-2xl font-extrabold p-1 ml-4 text-orange-400'>
${prod.price}
</h5>
</div>
</div>

</article>


})

</article>


})
}
}
16 changes: 7 additions & 9 deletions src/context/ProductsContext.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ export const ProductsContext = createContext()
export default function ProductsContextProvider({ children }) {

const [productos, setProducts] = useState([])
const[loading,setLoading] = useState(false)
const [sortMax, setSortMax] = useState(false)
const [maxPrice, setMaxPrice] = useState(200)
const [productosFiltrados, setProductosFiltrados] = useState([])
const[searchWorld , setSearchWorld] = useState('')

const handleSort = () => {
if (productosFiltrados.length >= 1) {
if (sortMax) {
Expand All @@ -30,9 +32,6 @@ export default function ProductsContextProvider({ children }) {
}
setSortMax(!sortMax)
}



const worldFilter = (e) => {
setSearchWorld(e.target.value)

Expand Down Expand Up @@ -62,29 +61,28 @@ export default function ProductsContextProvider({ children }) {
setProductosFiltrados([])
}
}

const handleMaxPrice = (value) => setMaxPrice(value)

const getProductById = async (id) => {
console.log(productos)
const producto = productos.find(prod => prod.id_product == id)
return producto
}
const getProducts = async () => {
setLoading(true)
try {
const data = await getAllProducts()

if (data.error) {
//AVISAR DEL ERROR



} else {
setProducts(data.products)

}

} catch (error) {

}finally{
setLoading(false)
}
}
useEffect(() => {
Expand All @@ -93,7 +91,7 @@ export default function ProductsContextProvider({ children }) {

return (
<ProductsContext.Provider
value={{ searchWorld,showAll, productos, productosFiltrados, handleFilter, handleSort, sortMax, getProducts, handleMaxPrice, maxPrice, getProductById, worldFilter }}
value={{ searchWorld,showAll, productos, productosFiltrados, handleFilter, handleSort, sortMax, getProducts, handleMaxPrice, maxPrice, getProductById, worldFilter, loading }}
>
{children}
</ProductsContext.Provider>
Expand Down

0 comments on commit c96c1b4

Please sign in to comment.