chore: update
This commit is contained in:
@@ -1,10 +1,24 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import ProductCard from "../../components/ProductCard";
|
||||
import Navbar from "../../components/Navbar";
|
||||
import { getAllProducts, getProductsByCategory, getMediaUrl, getCategories } from "../../api/api";
|
||||
import {
|
||||
getAllProducts,
|
||||
getProductsByCategory,
|
||||
getMediaUrl,
|
||||
getCategories,
|
||||
} from "../../api/api";
|
||||
import type { Product, Category } from "../../api/api";
|
||||
import "./UserAccueil.css";
|
||||
|
||||
function getTextColor(hex: string): string {
|
||||
const h = hex.replace("#", "");
|
||||
const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
|
||||
const r = parseInt(full.slice(0, 2), 16);
|
||||
const g = parseInt(full.slice(2, 4), 16);
|
||||
const b = parseInt(full.slice(4, 6), 16);
|
||||
return (r * 299 + g * 587 + b * 114) / 1000 > 128 ? "#000000" : "#ffffff";
|
||||
}
|
||||
|
||||
function UserAccueil() {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>("tous");
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
@@ -42,10 +56,7 @@ function UserAccueil() {
|
||||
if (response.success && response.data) {
|
||||
setProducts(response.data);
|
||||
} else {
|
||||
setError(
|
||||
response.message ||
|
||||
"Erreur lors du chargement des produits",
|
||||
);
|
||||
setProducts([]);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Erreur lors du chargement des produits");
|
||||
@@ -104,13 +115,29 @@ function UserAccueil() {
|
||||
return "https://via.placeholder.com/400x400/1a1a1a/ffffff?text=No+Image";
|
||||
};
|
||||
|
||||
const selectedCategoryObj = categories.find((c) => c.name === selectedCategory);
|
||||
const selectedCategoryObj = categories.find(
|
||||
(c) => c.name === selectedCategory,
|
||||
);
|
||||
const isSelectedComingSoon = selectedCategoryObj?.is_coming_soon ?? false;
|
||||
|
||||
<div className="category-header">
|
||||
<h2 className="category-title">
|
||||
{selectedCategory === "tous"
|
||||
? "Tous les produits"
|
||||
: selectedCategory}
|
||||
</h2>
|
||||
</div>;
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="user-page-container">
|
||||
<div className="category-header">
|
||||
<h2 className="category-title">
|
||||
{selectedCategory === "tous"
|
||||
? "Tous les produits"
|
||||
: selectedCategory}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="category-filter">
|
||||
<button
|
||||
className={`category-button ${selectedCategory === "tous" ? "active" : ""}`}
|
||||
@@ -119,6 +146,7 @@ function UserAccueil() {
|
||||
>
|
||||
Tous
|
||||
</button>
|
||||
|
||||
{categories.map((category) => {
|
||||
const isActive = selectedCategory === category.name;
|
||||
const catColor = category.color || "#7c3aed";
|
||||
@@ -131,11 +159,13 @@ function UserAccueil() {
|
||||
? {
|
||||
backgroundColor: catColor,
|
||||
borderColor: catColor,
|
||||
color: "#ffffff",
|
||||
color: getTextColor(catColor),
|
||||
}
|
||||
: { borderColor: `${catColor}66` }
|
||||
}
|
||||
onClick={() => handleCategoryChange(category.name)}
|
||||
onClick={() =>
|
||||
handleCategoryChange(category.name)
|
||||
}
|
||||
>
|
||||
{category.name}
|
||||
</button>
|
||||
@@ -143,12 +173,6 @@ function UserAccueil() {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="category-header">
|
||||
<h2 className="category-title">
|
||||
{selectedCategory === "tous" ? "Tous les produits" : selectedCategory}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{isSelectedComingSoon ? (
|
||||
<div className="coming-soon-overlay">
|
||||
<span className="coming-soon-text">Prochainement</span>
|
||||
@@ -156,43 +180,50 @@ function UserAccueil() {
|
||||
Les produits de cette catégorie arrivent bientôt !
|
||||
</p>
|
||||
</div>
|
||||
) : loading ? (
|
||||
<div className="loading-container">
|
||||
<p>Chargement des produits...</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="error-container">
|
||||
<p className="error-message">{error}</p>
|
||||
<button onClick={loadProducts}>Réessayer</button>
|
||||
</div>
|
||||
) : products.length === 0 ? (
|
||||
<div className="empty-container">
|
||||
<p>
|
||||
Il n'y a pas de produit disponible pour l'instant.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{loading && (
|
||||
<div className="loading-container">
|
||||
<p>Chargement des produits...</p>
|
||||
<div className="products-grid">
|
||||
{products.map((product) => (
|
||||
<div
|
||||
key={product.id}
|
||||
data-category={product.category}
|
||||
>
|
||||
<ProductCard
|
||||
id={product.id}
|
||||
name={product.name}
|
||||
price={getProductPrice(product)}
|
||||
unit={product.unit || "g"}
|
||||
image={getProductImage(product)}
|
||||
stock={product.stock}
|
||||
category={product.category}
|
||||
prices={product.prices}
|
||||
hasVideo={hasProductVideo(product)}
|
||||
videoUrl={getProductVideoUrl(product)}
|
||||
categoryColor={
|
||||
categories.find(
|
||||
(c) =>
|
||||
c.name.toLowerCase() ===
|
||||
product.category?.toLowerCase(),
|
||||
)?.color
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && products.length > 0 && (
|
||||
<div className="products-grid">
|
||||
{products.map((product) => (
|
||||
<div
|
||||
key={product.id}
|
||||
data-category={product.category}
|
||||
>
|
||||
<ProductCard
|
||||
id={product.id}
|
||||
name={product.name}
|
||||
price={getProductPrice(product)}
|
||||
unit={product.unit || "g"}
|
||||
image={getProductImage(product)}
|
||||
stock={product.stock}
|
||||
category={product.category}
|
||||
prices={product.prices}
|
||||
hasVideo={hasProductVideo(product)}
|
||||
videoUrl={getProductVideoUrl(product)}
|
||||
categoryColor={
|
||||
categories.find(
|
||||
(c) => c.name.toLowerCase() === product.category?.toLowerCase(),
|
||||
)?.color
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user