From 67e0aa963695220862e51e556ff65f85c4c36aa5 Mon Sep 17 00:00:00 2001
From: Medenos <masfervic@hotmail.com>
Date: Sun, 16 Oct 2022 21:22:41 -0400
Subject: [PATCH] cliquer sur un item envoie a une page de detail avec son id

---
 .../grosses-mitaines-ui/src/components/App.js |  2 ++
 .../src/components/ItemList.js                | 16 ++++++++++------
 .../src/pages/MorceauDetail.js                | 19 +++++++++++++++++++
 .../src/stylesheets/site.css                  |  5 +++++
 4 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
index 625534a..74b4be8 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
@@ -5,6 +5,7 @@ import AboutUs from "../pages/AboutUs";
 import Privacy from "../pages/Privacy";
 import ContactUs from "../pages/ContactUs";
 import Morceaux from "../pages/Morceaux";
+import MorceauDetail from "../pages/MorceauDetail";
 
 const App = () => {
 
@@ -17,6 +18,7 @@ const App = () => {
           <Route path="aboutUs" element={<AboutUs/>} />
           <Route path="contactUs" element={<ContactUs/>}/>
           <Route path="privacy" element={<Privacy/>}/>
+          <Route path="morceaux/:id" element={<MorceauDetail/>}/>
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
index 44ca1fc..4a466f9 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
@@ -1,5 +1,6 @@
 import { Button } from 'react-bootstrap';
 import Item from './Item';
+import { Link } from 'react-router-dom';
 
 const ItemList = ({ items }) => {
 
@@ -7,12 +8,15 @@ const ItemList = ({ items }) => {
         <>
             <div className='item-list'>
                 {items.map((item) =>
-                    <Item imageUrl={item.imageUrl}
-                        name={item.name}
-                        price={item.price}
-                        status={item.status}
-                        newPrice={item.newPrice}
-                    />
+                    <Link className='item-link' to={`/morceaux/${item.id}`}>
+                        <Item key={item.id} imageUrl={item.imageUrl}
+                            name={item.name}
+                            price={item.price}
+                            status={item.status}
+                            newPrice={item.newPrice}
+                        />
+                    </Link>
+
                 )}
             </div>
             <div>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
new file mode 100644
index 0000000..7f02acb
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import {useParams} from "react-router-dom";
+
+const MorceauDetail = () => {
+
+    const {id} = useParams();
+
+    useEffect(() => {
+        document.title = 'Morceaux';
+    });
+
+    return (
+        <>
+        <p>{id}</p>
+        </>
+    );
+}
+
+export default MorceauDetail;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 6d1d056..52acbdc 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -345,6 +345,11 @@ html {
 
 }
 
+.item-link, .item-link:hover{
+    color: black;
+    text-decoration: none;
+}
+
 
 .btn-primary{
     background-color: purple;