esta es mi primera publicación en StackOverflow, lo siento si no estoy publicando correctamente.
Aquí está mi problema, como dice el título, quiero ordenar mis reservas por fecha y hora, pero el problema al que me enfrento es que las reservas aparecen en el orden en que las creas.
este es el trozo de código:
<Card className="my-4 booking-profile"> <Card.Body> <Card.Title> {bookings.map((booking, index) => { console.log(index); return ( <ul key={booking.id}> <li> <span> {" "} Tu reserva: {booking.day}/{booking.month}/{booking.year} a las{" "} {booking.hour}:{booking.minutes} </span> <i onClick={() => { deleteBooking(index); }} className="fas fa-trash-alt delete"></i> </li> </ul> ); })} </Card.Title> </Card.Body> </Card>Debe ordenarlo, pero el problema es que no puede comparar el día de la semana, por lo que debe asignar un valor a cada día, puede agregar otro orden para el mes y repetir el mismo proceso de esta manera:
const sorter = { //"sunday": 0, // << if sunday is first day of week "monday": 1, "tuesday": 2, "wednesday": 3, "thursday": 4, "friday": 5, "saturday": 6, "sunday": 7 } {bookings.sort(function sortByDay(a, b) { let day1 = a.day.toLowerCase(); let day2 = b.day.toLowerCase(); return sorter[day1] - sorter[day2]; }).map((booking, index) => { ...Luego, para el tiempo (horas y minutos), depende si está utilizando el formato am pm o no, pero el proceso es el mismo.
Sugeriría usar Array.sort() con su propio clasificador personalizado, digamos bookingSorter()
Usaremos el objeto Date de JavaAcript para ayudarnos a ordenar los valores, creando un nuevo objeto Date para cada reserva y luego comparándolo con los demás en la función de ordenación.
const bookings = [ { year: 2021, month: 12, day: 20, hour: 07, minutes: 30 }, { year: 2021, month: 11, day: 4, hour: 15, minutes: 20 }, { year: 2021, month: 11, day: 9, hour: 16, minutes: 20 }, { year: 2021, month: 11, day: 4, hour: 15, minutes: 25 } ]; function getBookingDate({ year, month, day, hour, minutes}) { return new Date(year, month - 1, day, hour, minutes); } function bookingSorter(a, b) { return getBookingDate(a) - getBookingDate(b); } function formatBooking(booking) { return getBookingDate(booking).toLocaleString('sv'); } const sortedBookings = [...bookings].sort(bookingSorter); console.log('Unsorted bookings:', bookings.map(formatBooking)); console.log('Sorted bookings:', sortedBookings.map(formatBooking)) .as-console-wrapper { max-height: 100% !important; top: 0; }