Xor290/projet_gestion_commande
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update

Browse Source
This commit is contained in:
Xor290
2026-03-11 19:57:34 +01:00
parent f6b3948839
commit 375aa38454
62 changed files with 2714 additions and 1981 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-prep/src/pages/User/Accueil.tsx
+87 -68
View File
@@ -1,33 +1,30 @@
import { useState, useEffect } from "react";
import ProductCard from "../../components/ProductCard";
import Navbar from "../../components/Navbar";
import { getAllProducts, getProductsByCategory, getMediaUrl } from "../../api/api";
import type { Product } from "../../api/api";
import { getAllProducts, getProductsByCategory, getMediaUrl, getCategories } from "../../api/api";
import type { Product, Category } from "../../api/api";
import "./UserAccueil.css";
function UserAccueil() {
const [selectedCategory, setSelectedCategory] = useState<string>("tous");
const [categories, setCategories] = useState<Category[]>([]);
const [products, setProducts] = useState<Product[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const categories = [
{ label: "Tous", value: "tous" },
{ label: "Weed&Hash", value: "weed&hash" },
{ label: "Zipette&Co", value: "zipette&co" },
{ label: "Gros&Semi", value: "gros&semi" },
];
const categoryTitles: Record<string, string> = {
tous: "Tous les produits",
"weed&hash": "Weed & Hash",
"zipette&co": "Zipette & Co",
"gros&semi": "Gros & Semi",
};
useEffect(() => {
getCategories().then(setCategories);
}, []);
useEffect(() => {
const catObj = categories.find((c) => c.name === selectedCategory);
if (catObj?.is_coming_soon) {
setLoading(false);
setProducts([]);
return;
}
loadProducts();
}, [selectedCategory]);
}, [selectedCategory, categories]);
const loadProducts = async () => {
setLoading(true);
@@ -107,73 +104,95 @@ function UserAccueil() {
return "https://via.placeholder.com/400x400/1a1a1a/ffffff?text=No+Image";
};
const grosSemiStyle =
selectedCategory === "gros&semi"
? {
backgroundImage: `url('/logo-gros-semi.png')`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "contain",
backgroundAttachment: "local",
}
: {};
const selectedCategoryObj = categories.find((c) => c.name === selectedCategory);
const isSelectedComingSoon = selectedCategoryObj?.is_coming_soon ?? false;
return (
<>
<Navbar />
<div className="user-page-container" style={grosSemiStyle}>
<div className="user-page-container">
<div className="category-filter">
{categories.map((category) => (
<button
key={category.value}
className={`category-button ${selectedCategory === category.value ? "active" : ""}`}
data-category={category.value}
onClick={() => handleCategoryChange(category.value)}
>
{category.label}
</button>
))}
<button
className={`category-button ${selectedCategory === "tous" ? "active" : ""}`}
data-category="tous"
onClick={() => handleCategoryChange("tous")}
>
Tous
</button>
{categories.map((category) => {
const isActive = selectedCategory === category.name;
const catColor = category.color || "#7c3aed";
return (
<button
key={category.id}
className={`category-button ${isActive ? "active" : ""}`}
style={
isActive
? {
backgroundColor: catColor,
borderColor: catColor,
color: "#ffffff",
}
: { borderColor: `${catColor}66` }
}
onClick={() => handleCategoryChange(category.name)}
>
{category.name}
</button>
);
})}
</div>
<div className="category-header">
<h2 className="category-title">
{categoryTitles[selectedCategory]}
{selectedCategory === "tous" ? "Tous les produits" : selectedCategory}
</h2>
</div>
{loading && (
<div className="loading-container">
<p>Chargement des produits...</p>
</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)} // ✨ Nouveau prop
/>
</div>
))}
</div>
)}
{selectedCategory === "gros&semi" && (
{isSelectedComingSoon ? (
<div className="coming-soon-overlay">
<span className="coming-soon-text">Prochainement</span>
<p className="coming-soon-desc">
Les produits de cette catégorie arrivent bientôt !
</p>
</div>
) : (
<>
{loading && (
<div className="loading-container">
<p>Chargement des produits...</p>
</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>
</>