Like match

front/src/axios.instance.js

@@ -7,7 +7,7 @@ const Instance = () => {
     headers: {
       "Content-Type": "application/json",
       Authorization:
-        "Bearer 4e3382ac49435af655866867ae8b0d6e1df3eaad25227b77a94229167245942c0f71edd35ec66a56c34a21081effa13ad9682aa26f7e11ba74e1a458ecdcb1cdd02782ccb25406add09278145c3a94dca2a1787d4c96a0be5bfcaaad626f6ceeb00f709befd0624f95bac66cc7f043976a82a607333ff54382d25fa1b548c528",
+        "Bearer 8a092cb4b8ed1a885ea9db27aba6ef600086d53f2c5957925c7c408039b66909c550d002fafe2944731669c0c3bf077eb0735f418b4c82da464d353812dcaf764ff876447f21039c9e54463c3a847c10c2aac65d68453a75d1fc134a1cf2219a48c677b010e2f765688f3be1aca479de07e4122d2787e3358cc3aec11d1f1836",
     },
   });
 };

front/src/components/Sponsor/Sponsor.jsx

@@ -3,6 +3,8 @@ import Navigation from "../Navigation";
 import SponsorItem from "./SponsorItem";
 import { GetSponsors } from "../../request/sponsors.request";
 import Spinner from "../Spinner";
+import { GetAthletes, PostAthletes, PuitAthletes } from "../../request/athletes.request";
+import coeur from "../../img/Logo/flamme-en-contour.png"
 import {  PostAthletes, PuitAthletes } from "../../request/athletes.request";
 
 const Sponsor = () => {
@@ -21,7 +23,9 @@ const Sponsor = () => {
       }
 
     const [selected, setSelected] = useState([initialState])
-
+    const [show, setShow] = useState(false);
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
     const [data, setData] = useState([])
 
     const [page, setPage] = useState(0)
@@ -87,9 +91,9 @@ const Sponsor = () => {
           }}, 1)
         }else{
           alert("Sponsor liké")
-          PostAthletes({data :{
+          PuitAthletes({data :{
             likes: [{"id": 1}]
-          }})
+          }}, 1)
         }
       })
     }
@@ -120,10 +124,10 @@ const Sponsor = () => {
                       onClick={() => handleClick(id)}
                       >
                         <img src={attributes.picture} alt={attributes.name} className="card-img-top" />
-                          <div className="card-body">
+                          <div className="card-body" style={{backgroundColor: "red"}}>
                             <h3 className="card-title">{attributes.name}</h3>
                             <p className="card-text">{attributes.email}</p>
-                            <button onClick={() => handleLike(id)}>Like sponsor</button>
+                            <img src={coeur} alt="err" onClick={() => handleLike(id)} />
                           </div>
                       </div>
 
@@ -138,11 +142,8 @@ const Sponsor = () => {
             <SponsorItem sponsor={selected} />
 
         </div>
-
+        
         </div>
-
-
-
     </div>)
 }
 

front/src/components/Sponsor/SponsorLikeModal.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+
+const SponsorLikeModal = ({name}) => {
+
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    return (
+      <>
+
+        <button type="button"
+          className="btn btn-success"
+          data-bs-toggle="modal"
+          data-bs-target="#exampleModal"
+          onClick={() => handleShow()}>
+          Envoyer 
+        </button>
+
+
+        { show &&
+
+          <div className="modal fade" id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title" id="exampleModalLabel">Confirmation</h5>
+                <button
+                    type="button"
+                    className="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                    onClick={handleClose}
+                ></button>
+              </div>
+              <div className="modal-body">
+                Votre demande a bien etait envoyée à {name}
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              </div>
+            </div>
+          </div>
+        </div>}
+      </>
+  )
+}
+
+export default SponsorLikeModal