Add spinner on athlete

front/package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

front/public/index.html

@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

front/src/App.css

@@ -1,3 +1,5 @@
+@import url(./stylesheets/sponsor.css);
+
 .App {
   text-align: center;
 }
@@ -36,3 +38,24 @@
     transform: rotate(360deg);
   }
 }
+
+.column-sponsor {
+  background: #fff;
+  max-width: 50%;
+  width: 50%;
+  height: 100vh;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  }
+  &:last-child {
+    background: black;
+    border-top: 1px solid rgba(255,255,255,0.5);
+  }
+  @media (max-width: 600px) {
+    max-width: 100%;
+    width: 100%;
+  }

front/src/App.js

@@ -1,23 +1,13 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
+import Router from "./Router";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.min.js";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Router />
     </div>
   );
 }

front/src/Router.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Home from "./components/Home";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Sponsor from "./components/Sponsor/Sponsor";
+import Athlete from "./components/Athlete/Athlete";
+import SposorOffer from "./components/SposorOffer";
+const Router = () => {
+  return (
+    <div>
+      <BrowserRouter>
+        <Routes>
+          <Route exact path="/" element={<Home />} />
+          <Route path="/sponsor" element={<Sponsor />} />
+          <Route path="/athlete" element={<Athlete />} />
+          <Route path="/PostSponsoring" element={<SposorOffer />} />
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
+};
+
+export default Router;

front/src/components/Athlete/Athlete.jsx

@@ -0,0 +1,107 @@
+import React, {useState, useEffect} from "react";
+import Navigation from "../Navigation";
+import athlete from "../../database/athlete.json"
+import AthleteItem from "./AthleteItem";
+import Spinner from "../Spinner";
+
+
+const Athlete = () => {
+
+    const [selected, setSelected] = useState("")
+
+    const [data, setData] = useState([])
+
+    const [page, setPage] = useState(0)
+
+    const [load, setLoad] = useState(true)
+
+    useEffect(() => {
+
+      if(load) {
+        const timer = setTimeout(() => {
+
+          setData(athlete.slice(page, page + 10))
+          setLoad(false)
+
+        }, 1000);
+        return () => clearTimeout(timer);
+      }
+
+    }, [page, load])
+
+    const handleClick = (id) => {
+
+      setSelected(data.filter(element => element._id === id))
+    }
+
+    useEffect(() => {
+      const handleScroll = () => {
+
+        if (window.scrollY === 570 && page < 100 ) {
+          setPage(prevState => prevState + 10)
+          setLoad(true)
+        }
+      };
+
+      window.addEventListener('scroll', handleScroll);
+
+      return () => {
+        window.removeEventListener('scroll', handleScroll);
+      };
+    }, [page]);
+
+
+    return (
+    <div >
+        Sponsor
+        <Navigation />
+
+        <div className="d-flex mt-5">
+
+        {
+          load
+
+          ? <Spinner />
+
+
+          : <div className="d-flex flex-column align-items-center gap-3 column-sponsor">
+              {
+                data.map((v) => {
+                  return (
+
+                      <div key={v.recordid}
+                      className="card rounded"
+                      style={{width: '18rem'}}
+                      onClick={() => handleClick(v.recordid)}
+                      >
+                        <img src={"https://www.radiofrance.fr/s3/cruiser-production/2022/11/b4a8652e-ce65-4dbf-b9f2-70f9c2c07ba9/560x315_capture-d-ecran-2022-11-14-111004.jpg"} alt="" className="card-img-top" />
+                          <div className="card-body">
+                            <h3 className="card-title">{v.fields.prenom} {v.fields.nom}</h3>
+                            <p className="card-text">{v.fields.sport}</p>
+                          </div>
+                      </div>
+
+                  )
+                })
+
+              }
+          </div>
+        }
+
+        <div className="column-sponsor border border-primary rounded">
+
+            <AthleteItem athlete={selected} />
+
+        </div>
+
+
+        </div>
+
+
+
+
+
+    </div>)
+}
+
+export default Athlete;

front/src/components/Athlete/AthleteItem.jsx

@@ -0,0 +1,69 @@
+import React, {Fragment} from 'react'
+import AthleteModal from './AthleteModal'
+
+const AthleteItem = ({athlete}) => {
+
+
+  //const {about, company, sports, email, phone, address, isActive, created_date} = sponsor?.[0]
+  const isEmpty = (obj) => Object.values(obj).every(x => x.length < 1)
+
+  const dateFormated = date => {
+
+    if(date === undefined) return
+
+    const formated = date.split('T')[0].split('-').reverse().join('/ ')
+
+    return  formated
+  }
+
+
+  const displayData = (
+
+    <Fragment>
+
+        <div className='d-flex justify-content-between'>
+
+                <div className='text-success mx-3'>Athlete en recherche de sponsor</div>
+
+            {/* <div className='mx-3'>
+              {
+                dateFormated(created_date)
+              }
+            </div> */}
+        </div>
+
+
+        <h2>{athlete[0]?.fields.nom}</h2>
+
+        <div className='mx-3' >
+            <h4>{athlete[0]?.fields.sport}</h4>
+            <div className="mt-3">
+              {
+                true &&  <AthleteModal company={"variable"} />
+              }
+            </div>
+
+
+            <div className='d-flex justify-content-between mt-3'>
+
+            </div>
+            <div>
+            </div>
+        </div>
+    </Fragment>
+
+  )
+
+  return (
+
+      <div >
+      {
+        displayData
+      }
+
+    </div>
+
+  )
+}
+
+export default AthleteItem

front/src/components/Athlete/AthleteModal.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+
+
+const AthleteModal = ({company}) => {
+
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    console.log(show)
+
+    return (
+      <>
+
+        <button type="button"
+          className="btn btn-success"
+          data-bs-toggle="modal"
+          data-bs-target="#exampleModal"
+          onClick={() => handleShow()}>
+          Envoyer votre demande
+        </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 à {company}
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              </div>
+            </div>
+          </div>
+        </div>}
+      </>
+  )
+}
+
+export default AthleteModal

front/src/components/Home.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Navigation from "./Navigation";
+import { useNavigate } from "react-router-dom";
+const Home = () => {
+
+  const navigate = useNavigate();
+
+  const handleSubmit = () => navigate('/sponsor');
+
+  return <div>
+    Home
+    <Navigation />
+
+      <div className="m-5 text-end">
+        <form onSubmit={handleSubmit}>
+          <input type="text" placeholder="" />
+          <input type="submit" className="btn btn-primary"/>
+        </form>
+      </div>
+
+  </div>;
+};
+
+export default Home;

front/src/components/Navigation.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import logoStyle from "../../src/img/Logo/logo by c4m noir.png";
+
+const Navigation = () =>{
+    const navigate = useNavigate();
+
+    return(<div>
+        <img src={logoStyle} onClick={() => navigate("/")}/>
+        <button onClick={() => navigate("/athlete")}>Cherchez un Sponsor</button>
+        <button onClick={() => navigate("/PostSponsoring")}>Proposez de sponsoriser</button>
+    </div>)
+}
+
+export default Navigation;