adapte le code Programmation.tsx et CarteArtiste.tsx pour  prendre en charge la nouvelle structure de données étant celle-ci : [
  {
    "dateDebutE": "2023-07-21",
    "dateFinE": "2023-07-21",
    "descriptionG": "Desc",
    "heureDebutE": "09:00:00",
    "heureFinE": "10:00:00",
    "idE": 1,
    "idG": 1,
    "idH": 1,
    "idL": null,
    "nomE": "Concert Groupe 1",
    "nomG": "Vladimir Cauchemar"
  },
  {
    "dateDebutE": "2023-07-21",
    "dateFinE": "2023-07-21",
    "descriptionG": "Desc",
    "heureDebutE": "13:00:00",
    "heureFinE": "14:00:00",
    "idE": 2,
    "idG": 2,
    "idH": 1,
    "idL": null,
    "nomE": "Concert Groupe 2",
    "nomG": "Booba"
  },
  {
    "dateDebutE": "2023-07-21",
    "dateFinE": "2023-07-21",
    "descriptionG": "Desc",
    "heureDebutE": "17:00:00",
    "heureFinE": "18:00:00",
    "idE": 3,
    "idG": 3,
    "idH": 1,
    "idL": null,
    "nomE": "Concert Groupe 3",
    "nomG": "Freeze Corleone"
  },
  {
    "dateDebutE": "2023-07-22",
    "dateFinE": "2023-07-22",
    "descriptionG": "Desc",
    "heureDebutE": "09:00:00",
    "heureFinE": "10:00:00",
    "idE": 4,
    "idG": 4,
    "idH": 2,
    "idL": null,
    "nomE": "Concert Groupe 4",
    "nomG": "Damso"
  },
  {
    "dateDebutE": "2023-07-22",
    "dateFinE": "2023-07-22",
    "descriptionG": "Desc",
    "heureDebutE": "13:00:00",
    "heureFinE": "14:00:00",
    "idE": 5,
    "idG": 5,
    "idH": 2,
    "idL": null,
    "nomE": "Concert Groupe 5",
    "nomG": "Ashe 22"
  },
  {
    "dateDebutE": "2023-07-22",
    "dateFinE": "2023-07-22",
    "descriptionG": "Desc",
    "heureDebutE": "17:00:00",
    "heureFinE": "18:00:00",
    "idE": 6,
    "idG": 6,
    "idH": 2,
    "idL": null,
    "nomE": "Concert Groupe 6",
    "nomG": "Heuss l'Enfoiré"
  },
  {
    "dateDebutE": "2023-07-23",
    "dateFinE": "2023-07-23",
    "descriptionG": "Desc",
    "heureDebutE": "08:00:00",
    "heureFinE": "09:00:00",
    "idE": 7,
    "idG": 7,
    "idH": 3,
    "idL": null,
    "nomE": "Concert Groupe 7",
    "nomG": "Zola"
  },
  {
    "dateDebutE": "2023-07-23",
    "dateFinE": "2023-07-23",
    "descriptionG": "Desc",
    "heureDebutE": "11:00:00",
    "heureFinE": "12:00:00",
    "idE": 8,
    "idG": 8,
    "idH": 3,
    "idL": null,
    "nomE": "Concert Groupe 8",
    "nomG": "Sch"
  },
  {
    "dateDebutE": "2023-07-23",
    "dateFinE": "2023-07-23",
    "descriptionG": "Desc",
    "heureDebutE": "14:00:00",
    "heureFinE": "15:00:00",
    "idE": 9,
    "idG": 9,
    "idH": 3,
    "idL": null,
    "nomE": "Concert Groupe 9",
    "nomG": "H Jeunecrack"
  },
  {
    "dateDebutE": "2023-07-23",
    "dateFinE": "2023-07-23",
    "descriptionG": "Desc",
    "heureDebutE": "17:00:00",
    "heureFinE": "18:00:00",
    "idE": 10,
    "idG": 10,
    "idH": 3,
    "idL": null,
    "nomE": "Concert Groupe 10",
    "nomG": "Luther"
  }
]import {useEffect, useState, useRef, useLayoutEffect} from 'react'
import SearchBar from '../../components/form/SearchBar';
import Combo from '../../components/form/Combo';
import CarteArtiste from '../../components/Artiste/CarteArtiste';
import { motion } from 'framer-motion';
import { useLocation } from 'react-router-dom';
import axios from 'axios';
import Footer from '../../components/footer';

type Props = {
    isNavInFocus: boolean;
    setIsNavTransparent: (isNavTransparent : boolean) => void;
}

type Groupe = {
  idG: number;
  nomG: string;
  descriptionG: string;
  datePassage: string;
  heurePassage: string;
}

export default function Programmation(props : Props) {
  const location = useLocation();
  const idArtistComingFrom = location.state?.comesFromPageArtist;
  const oldX = location.state?.oldX;
  const oldY = location.state?.oldY;
  const oldGroupes = location.state?.oldGroupes;


  window.history.replaceState({}, document.title)
  const[lesGroupes, setLesGroupes] = useState<Groupe[]>(location.state? oldGroupes : []);
  

  useEffect(() => {
    if (!location.state){
      axios.get('http://localhost:8080/getGroupesWithEvenements').then((res) => {
        const data = res.data;
        console.log(data)
        const listeGroupes : Groupe[] = [];
        console.log(data)
        data.forEach((groupe: Groupe) => {
          if (groupe.datePassage && groupe.heurePassage) {
            const lesMois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet","Août", "Septembre", "Octobre", "Novembre", "Décembre"];
            const date = groupe.datePassage.split("-");
            const datePassage = date[2] + " " + lesMois[parseInt(date[1])-1];
            groupe.datePassage = datePassage; 
            const heure = groupe.heurePassage.split(":");
            const heurePassage = heure[0] + "H" + heure[1];
            groupe.heurePassage = heurePassage;
            listeGroupes.push(groupe);
          }
        });
        setLesGroupes(listeGroupes);
    })
  }
  }, [])
  


  const[filtreDate, setFiltreDate] = useState("Tout");
  const[filtreAffichage, setFiltreAffichage] = useState("Grille");
  const[filtreGenre, setFiltreGenre] = useState("Tout");

  const pageRef = useRef<HTMLDivElement>(null);
  
  
  const contentVariants = {
    visible:{
      filter: "blur(0px)",
      scale:1,
      zIndex:1,
      transition:{
        duration:0.5,
        ease: [1, 0, 0,1]
      }
    },
    hidden:{
      filter:"blur(10px)",
      scale:0.8,
      zIndex:-1,
      transition:{
        duration:0.5,
        ease: [1, 0, 0,1]
      }
    }
  }

  useEffect(() => {
    window.scrollTo(0, 0)
    props.setIsNavTransparent(false)
  }, [])

  return (
    <>
    <motion.div id="Programmation"
    className='page-defaut'
    variants={contentVariants}
    animate={props.isNavInFocus ? "hidden" : "visible"}
    ref={pageRef}
    >
        <header>
            <div className="title">
                <h2>PROGRAMMATION</h2>
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M62.9991 27.739L42.1815 27.7675L56.8787 13.0286L50.7001 6.86056L36.0029 21.5994L35.9744 0.785744L27.2406 0.797718L27.2692 21.6114L12.5316 6.91288L6.36413 13.0979L21.1017 27.7964L0.289932 27.825L0.301899 36.5537L21.1137 36.5251L6.41646 51.2641L12.6009 57.4321L27.2981 42.6932L27.3266 63.5069L36.0603 63.4949L36.0318 42.6812L50.7694 57.3798L56.931 51.1948L42.1934 36.4962L63.011 36.4677L62.9991 27.739Z" fill="#FFD600"/>
                </svg>
            </div>
            <div className="filters-container">
                <div className="filters">
                    <Combo title="DATE" choices={["Tout", "21 Juillet", "22 Juillet", "23 Juillet"]} currentChoice={filtreDate} setCurrentChoice={setFiltreDate} />
                    <Combo title="AFFICHAGE" choices={["Grille", "Horaires"]} currentChoice={filtreAffichage} setCurrentChoice={setFiltreAffichage} />
                    <Combo title="GENRE" choices={["Tout", "Rap", "Rock", "Pop"]} currentChoice={filtreGenre} setCurrentChoice={setFiltreGenre} />
                </div>
                <SearchBar text="Rechercher un artiste"/>
            </div>
        </header>
        <main className='liste-artistes'>
            {
              lesGroupes.map((groupe, index) => {
                return(
                  <CarteArtiste oldGroupes={lesGroupes} key={groupe.idG} id={groupe.idG} oldX={idArtistComingFrom == groupe.idG ? oldX : null} oldY={idArtistComingFrom == groupe.idG ? oldY : null} comesFromPageArtist={idArtistComingFrom == groupe.idG} nomArtiste={groupe.nomG} date={groupe.datePassage} heure={groupe.heurePassage} setIsNavTransparent={props.setIsNavTransparent} />
                )
              })
            }
        </main>
    </motion.div>
    <Footer/>
    </>
  )
}
import { motion } from 'framer-motion'
import {useState,useRef, useEffect} from 'react'
import { Link } from 'react-router-dom'

type Props = {
    id:number,
    date: string,
    heure: string,
    nomArtiste: string,
    setIsNavTransparent: (isNavTransparent : boolean) => void;
    comesFromPageArtist?: boolean;
    oldX?: number;
    oldY?: number;
    oldGroupes?: Groupe[];
}

type Groupe = {
    idG: number;
    nomG: string;
    descriptionG: string;
    datePassage: string;
    heurePassage: string;
  }

export default function CarteArtiste(props: Props) {
  // change le nomArtiste en majuscule et remplace les espaces par des retours à la ligne
  const nomArtiste = props.nomArtiste.toUpperCase().split(" ")
  const[isHovered, setIsHovered] = useState(false)
  const[isSwitching, setIsSwitching] = useState(false)
  const[delay, setDelay] = useState(props.comesFromPageArtist? 0.2 : 0)
  const refCarte = useRef<HTMLDivElement>(null);
  const[zIndexCard, setZIndexCard] = useState(props.comesFromPageArtist ? 99 : 1)

  useEffect(() => {
    
    setTimeout(() => {
        console.log(props.date)
        console.log(props.heure)

        setZIndexCard(1)
        setDelay(0)
    }, 600);
    
  }, [])
  

  const titleVariants = {
    hover:{
        fontSize: "2.3rem",
        color:"#FFD600",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    default:{
        fontSize: "2.3rem",
        color:"#FFFBEE",
        transition:{
            delay:delay,
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    exit:{
        fontSize: "7.625rem",
        color:"#FFD600",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    }
  }

  // fais le variant pour l'image de l'artiste (scale 1.2 sur hover)
    const imageVariants = {
        hover:{
            scale:1.3,
            transition:{
                duration:0.4,
                ease: [1, 0, 0,1]
            }
        },
        default:{
            scale:1,
            transition:{
                duration:0.4,
                ease: [1, 0, 0,1]
            }
        }
    }

  // fais le variant pour le texte de dateHeure (x 2rem sur hover)

  const dateHeureVariants = {
    hover:{
        y:"0rem",
        fontSize: "1.875rem",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    default:{
        y:(window.innerWidth <= 576 ? 3.1 : 2.9).toString() + "rem",
        fontSize: "1.875rem",
        transition:{
            delay:delay,
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    exit:{
        y:"0rem",
        fontSize: "4.6875rem",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    }
  }

  // default font-size: 1.875rem;
  // exit font-size: 4.6875rem;

  const heureVariants = {
    hover:{
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    default:{
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
  }

  const carteVariants = {
    default:{
        zIndex:zIndexCard,
        width: "24rem",
        height: "15.5rem",
        y:0,
        x:0,
        transition:{
            delay:0.2,
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    exit:{
        x: refCarte.current? -refCarte.current.offsetLeft : props.oldX? -props.oldX : 0,
        y: refCarte.current? -refCarte.current.offsetTop : props.oldY? -props.oldY : 0,
        height: "100vh",
        width: "100vw",
        zIndex:99,
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    }
  }

  const textVariants = {
    default:{
        padding: "0.5rem 1rem",
        transition:{
            delay:delay*2,
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    },
    exit:{
        padding: "3rem",
        transition:{
            duration:0.4,
            ease: [1, 0, 0,1]
        }
    }
  }


  return (
    <motion.div
    className="outer-carte-artiste"
    ref={refCarte}
    variants={carteVariants}
    initial={props.comesFromPageArtist ? "exit" : "default"}
    animate="default"
    exit={isSwitching ? "exit" : "default"}
    onClick={() => window.scrollTo(0,0)}
    >
        <Link className="carte-artiste"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        to={{
            pathname:"/artiste",
            search:`?id=${props.id}`,
        }}
        state={{
            nomArtiste: props.nomArtiste,
            date: props.date,
            heure: props.heure,
            oldX: refCarte.current?.offsetLeft,
            oldY: refCarte.current?.offsetTop,
            oldGroupes: props.oldGroupes
        }}
        onClick={() => {props.setIsNavTransparent(true); setIsSwitching(true)}}
        >
            <motion.img 
            src={"http://localhost:8080/getImageArtiste/" + props.id} 
            alt="image de l'artiste" 
            variants={imageVariants}
            initial="default"
            animate={isHovered ? "hover" : "default"}
            exit="default"
            />
            <motion.div className="texts"
            variants={textVariants}
            initial={props.comesFromPageArtist ? "exit" : "default"}
            animate="default"
            exit={isSwitching ? "exit" : "default"}
            >
                <motion.h3
                variants={titleVariants}
                initial={props.comesFromPageArtist ? "exit" : "default"}
                animate={isHovered ? "hover" : "default"}
                exit={isSwitching ? "exit" : "default"}
                >{
                    nomArtiste.map((mot, index) => {
                        return(
                            <span key={index}>{mot}<br/></span>
                        )
                    })
                }</motion.h3>
                
                <motion.div className="date-heure"
                variants={dateHeureVariants}
                initial={props.comesFromPageArtist ? "exit" : "default"}
                animate={isHovered ? "hover" : "default"}
                exit={isSwitching ? "exit" : "default"}
                >
                    <h4
                    >{props.date}</h4>

                    <motion.h4 
                    variants={heureVariants} 
                    initial="default"
                    animate={isHovered ? "hover" : "default"}
                    exit={isSwitching ? "exit" : "default"}
                    >{props.heure}</motion.h4>

                </motion.div>
            </motion.div>
        </Link>
    </motion.div>
  )
}