CityPage.jsx

import { useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import { LMap } from '../../components/LMap'
import './CityPage.css'
/* eslint-disable */
import WeatherApi from '../../api/weather.api'
import Store from '../../store/Store'
import { displayDate } from '../../utils/datetime.util.js'

/* eslint-enable */

export const CityPage = () => {
  const { cityName } = useParams()
  const [latitude] = useState(45.183916)
  const [longitude] = useState(5.70363)
  const [weather] = useState({
    date: displayDate(20201025),
    weather: 'cloudy',
    temp2m: {
      max: 12,
      min: 7
    },
    wind10m_max: 2
  })

  // STEP 1 : Utiliser la méthode getCityTodayWeather de l'objet WeatherAPI (déjà importé) pour récupérer la météo

  // STEP 2 : Utiliser la variable cityName pour récupérer la latitude et la longitude depuis l'objet Store (déjà importé)

  return (
    <>
      <h2 className="title">Cities weather</h2>
      <article className="panel is-primary">
        <div className="panel-heading">
          <h2>{cityName}</h2>
        </div>
        <div className="panel-block">
          <LMap latitude={latitude} longitude={longitude} />
        </div>
        <div className="panel-block">
          <table className="table is-flex-grow-1">
            <thead>
              <tr>
                <th>Date</th>
                <th>Weather</th>
                <th>Min</th>
                <th>Max</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{weather.date}</td>
                <td>
                  <img
                    src={`http://www.7timer.info/img/misc/about_civil_${weather.weather}.png`}
                    alt="meteo_image"
                    className="cropped-image"
                    width={80}
                  />
                </td>
                <td>0 °C</td>
                <td>30 °C</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="panel-block">
          <Link to="/">
            <button className="button is-primary is-outlined">
              Go back home
            </button>
          </Link>
        </div>
      </article>
    </>
  )
}