Merge pull request #16 from Batsave/product/details2

Product/details2
Batsave · Jan 18, 2024 · 5939664 · 5939664
2 parents f446948 + 4206de1
commit 5939664
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 10 deletions.
diff --git a/backend/src/controllers/productsControllers.js b/backend/src/controllers/productsControllers.js
@@ -15,7 +15,7 @@ const readWithId = async (req, res, next) => {
   console.info(req.body);
 
   try {
-    const productsList = await tables.products.readWithId(req.params.id);
+    const productsList = await tables.products.read(req.params.id);
     if (productsList == null) {
       res.sendStatus(404);
     } else {

diff --git a/backend/src/models/ProductsManager.js b/backend/src/models/ProductsManager.js
@@ -12,13 +12,13 @@ class ProductsManager extends AbstractManager {
     return rows;
   }
 
-  async read(id) {
+  async read(productId) {
     // Execute the SQL SELECT query to retrieve a specific products by its ID
     const [rows] = await this.database.query(
       `SELECT *
              FROM ${this.table}
-             WHERE id = ?`,
-      [id]
+             WHERE productId = ?`,
+      [productId]
     );
 
     // Return the first row of the result, which represents the products

diff --git a/frontend/src/components/details.jsx b/frontend/src/components/details.jsx
@@ -4,7 +4,19 @@ function Details() {
   return (
     <div className="details">
       <h2 className="brand">brand</h2>
-      <img className="picture" src="" alt="" />
+      <div className="product_and_add_container">
+        <div className="img_Container">
+          <img className="picture" src="" alt="" />
+          <img className="picture" src="" alt="" />
+          <img className="picture" src="" alt="" />
+          <img className="picture" src="" alt="" />
+        </div>
+        <div className="add_Products">
+          <h3>nom du produit</h3>
+          <p>texte de description</p>
+          <button type="button">AJOUTER AU PANIER</button>
+        </div>
+      </div>
       <p className="description">
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates
         impedit nam quos vero facere ea fuga dolore maxime repellat rerum.

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -16,6 +16,7 @@ import Products from "./pages/Products/Products";
 import Orders from "./pages/Orders/Orders";
 
 import Chatbot from "./pages/Chatbot";
+import ProductDetails from "./pages/Products/ProductDetails";
 
 console.info(`
 ██╗      ██████╗ ██████╗ ███████╗ █████╗ ██╗         ██████╗ ██████╗ ██████╗ 
@@ -75,7 +76,10 @@ const router = createBrowserRouter([
         path: "/products",
         element: <Products />,
       },
-
+      {
+        path: "/products/:id",
+        element: <ProductDetails />,
+      },
       {
         path: "/orders",
         element: <Orders />,

diff --git a/frontend/src/pages/Products/ProductDetails.jsx b/frontend/src/pages/Products/ProductDetails.jsx
@@ -4,6 +4,25 @@ import Details from "../../components/details";
 import "../../scss/ProductDetails.scss";
 
 function ProductDetails() {
+  // const [productList, setProductList] = useState();
+  // useEffect(() => {
+  //   const getProductsList = async () => {
+  //     try {
+  //       const response = await axios.get(
+  //         `
+  //         ${import.meta.env.VITE_BACKEND_URL}/api/product/`,
+  //         {
+  //           withCredentials: true,
+  //         }
+  //       );
+  //       setProductList(response.data);
+  //     } catch (error) {
+  //       console.log(error);
+  //     }
+  //   };
+  //   getProductsList();
+  // }, []);
+
   // const [ProductsList, setproductList] = useState([]);
 
   // useEffect(() => {
@@ -17,8 +36,10 @@ function ProductDetails() {
   //       );
   //       setproductList(response.data);
   return (
-    <div className="detailsContainer">
-      <Details />
+    <div className="details_Container">
+      <div className="logo">
+        <Details />
+      </div>
     </div>
   );
 }

diff --git a/frontend/src/scss/ProductDetails.scss b/frontend/src/scss/ProductDetails.scss
@@ -1,4 +1,19 @@
-.detailsContainer {
+.details_Container {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
 }
+.logo {
+  background: url("/assets/svg/favicon_black.svg");
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 210px;
+  height: 200px;
+  margin: auto;
+}
+.details {
+  position: relative;
+  top: 15rem;
+}
diff --git a/frontend/src/scss/components/Details.scss b/frontend/src/scss/components/Details.scss
@@ -3,5 +3,33 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 50%;
+}
+
+.brand {
+}
+
+.picture {
+  background-color: gray;
+  width: 60px;
+  height: 80px;
+}
+
+.img_Container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px 10px;
+  margin-top: 2rem;
+}
+
+.description {
+  width: 100vw;
+  text-align: center;
+  margin-top: 4rem;
+}
+
+.product_and_add_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2rem;
 }