add: Logo and Event participants list

src/components/events/EventDetail.tsx

@@ -3,6 +3,7 @@ import { Event } from "../../models/Event.model";
 import { useState } from "react";
 import EventParticipationModal from "./EventParticipationModal";
 import { useAppSelector } from "../../redux/hooks";
+import ListParticipantsModal from "./ListParticipantsModal";
 
 type EventDetailProps = {
   event: Event;
@@ -10,32 +11,45 @@ type EventDetailProps = {
 
 export default function EventDetail({ event }: EventDetailProps) {
   const [show, setShow] = useState(false);
+  const [showParticipants, setShowParticipants] = useState(false);
 
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
 
+  const handleCloseParticipants = () => setShowParticipants(false);
+  const handleShowParticipants = () => setShowParticipants(true);
+
   const { isAuthenticated } = useAppSelector((state) => state.auth);
 
   return (
     <div className="d-flex flex-column align-items-center px-5">
       <h1>{event.nom}</h1>
       <Figure.Image src={event.media_url} />
-      <Button className="mb-1" disabled={!isAuthenticated}>
+      <Button
+        className="mb-1"
+        disabled={!isAuthenticated}
+        onClick={handleShowParticipants}
+      >
         Voir participants
       </Button>
       <Button onClick={handleShow} disabled={!isAuthenticated}>
         Je participe
       </Button>
-      {
-        !isAuthenticated && <p>
+      {!isAuthenticated && (
+        <p className="text-danger">
           Connectez-vous pour marquer votre participation
         </p>
-      }
+      )}
       <EventParticipationModal
         show={show}
         handleClose={handleClose}
         event={event}
       />
+      <ListParticipantsModal
+        show={showParticipants}
+        handleClose={handleCloseParticipants}
+        event={event}
+      />
       <p>
         <b>Description: </b>
         {event.description}

src/components/events/ListParticipantsModal.tsx

+import { Button, ListGroup, Modal } from "react-bootstrap";
+import { Event } from "../../models/Event.model";
+import { useAppSelector } from "../../redux/hooks";
+
+type ListParticipantsModalProps = {
+  show: boolean;
+  handleClose: () => void;
+  event: Event;
+};
+
+export default function ListParticipantsModal({
+  show,
+  handleClose,
+  event,
+}: ListParticipantsModalProps) {
+  const eventId = `${event.id_manif}_${event.date}_${event.heure_debut}`;
+  const eventDetails = useAppSelector((state) =>
+    state.events.find((_event) => _event.eventId === eventId)
+  );
+  const participantsTakingCar = eventDetails?.participants.takeOwnCar;
+  const participantsSharingOtherCar = eventDetails?.participants.shareOtherCar;
+  const participantsOnTheirOwn = eventDetails?.participants.onTheirOwn;
+
+  return (
+    <Modal show={show} onHide={handleClose} size="lg" centered>
+      <Modal.Header closeButton>
+        <Modal.Title>Participants: {event.nom}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <ListGroup as="ol">
+          {participantsTakingCar &&
+            participantsTakingCar.map((user, index) => (
+              <ListGroup.Item
+                as="li"
+                className="d-flex justify-content-between align-items-start"
+                key={"user_with_car" + index}
+              >
+                <div className="ms-2 me-auto">
+                  <div className="fw-bold">{user}</div>
+                  Prendra sa propre voiture
+                </div>
+              </ListGroup.Item>
+            ))}
+          {participantsSharingOtherCar &&
+            participantsSharingOtherCar.map((user, index) => (
+              <ListGroup.Item
+                as="li"
+                className="d-flex justify-content-between align-items-start"
+                key={"user_sharing_car" + index}
+              >
+                <div className="ms-2 me-auto">
+                  <div className="fw-bold">{user}</div>
+                  {eventDetails.cars
+                    .map((car) => car.users)
+                    .flat()
+                    .includes(user) ? (
+                    <>Va partager une autre voiture</>
+                  ) : (
+                    <>Recherche encore une voiture</>
+                  )}
+                </div>
+              </ListGroup.Item>
+            ))}
+          {participantsOnTheirOwn &&
+            participantsOnTheirOwn.map((user, index) => (
+              <ListGroup.Item
+                as="li"
+                className="d-flex justify-content-between align-items-start"
+                key={"user_on_his_own" + index}
+              >
+                <div className="ms-2 me-auto">
+                  <div className="fw-bold">{user}</div>
+                  Va s'arranger par lui-même
+                </div>
+              </ListGroup.Item>
+            ))}
+        </ListGroup>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose}>
+          Fermer
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

src/components/footer/Footer.tsx

-import { Col, Container, Row } from "react-bootstrap";
+import { Col, Container, Image, Row } from "react-bootstrap";
+import LogoEventopia from "../../assets/EventopiaBlancCropped.png";
 
 export default function Footer() {
   return (
     <Container className="p-5 text-center bg-body-tertiary rounded-3" fluid>
       <Row>
         <Col>
-          <h4>Hackathon Login</h4>
+          <Image src={LogoEventopia} fluid />;
         </Col>
         <Col>
           <h5>A propos de nous</h5>

src/components/navbar/CustomNavbar.tsx

@@ -8,9 +8,10 @@ import {
 } from "react-bootstrap";
 
 import "../../App.css";
-import { Link, NavLink, useNavigate } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { logout } from "../../redux/slices/authSlice";
+import logoEventopia from "../../assets/EventopiaBlancCropped.png";
 
 const CustomNavbar = () => {
   const navigate = useNavigate();
@@ -20,7 +21,14 @@ const CustomNavbar = () => {
     <Navbar bg="light" expand="lg" className="flex-column">
       <Container>
         <Navbar.Brand>
-          <Link to={"/"}>Hackathon LOGIN</Link>
+          <img
+            src={logoEventopia}
+            width="120"
+            className="d-inline-block align-center"
+            alt="React Bootstrap logo"
+            onClick={() => navigate("/")}
+            style={{ cursor: "pointer" }}
+          />
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="navbarScroll" />
         <Navbar.Collapse id="navbarScroll" className="justify-content-end">