Qué está mal para que no funcione esto?
Tengo este array de objetos
const videos = [
{ created: "", duration: 0 },
{ created: "", duration: 2 },
{ created: "", duration: 1 },
{ created: "", duration: 4 },
{ created: "", duration: 6 },
{ created: "", duration: -2 }
]
Quiero ordenarlos por filtros, ahora mismo solo por duracion, ascendente o descendente.
Este es el código que tengo con typescript:
Componente VideoList
/* COMPONENTS */
import InputSelect from "../Input/InputSelect";
import styles from "./VideoList.module.scss";
/* UTILS & HOOKS */
import { useEffect, useState } from "react";
/* INTERFACES */
// Formato de fecha temporal: 'dd-MM-YYTHH:mm'
interface IVideo {
created: string;
duration: number;
}
interface VideoListProps {
title: string;
videos: IVideo[];
}
const VideoList = ({ title, videos }: VideoListProps) => {
const [filterSelected, setFilterSelected] = useState<string>("");
const [sortedVideos, setSortedVideos] = useState<IVideo[]>([]);
const options = [
"Por fecha - creciente",
"Por fecha - decreciente",
"Por duración - creciente",
"Por duración - decreciente",
];
const sortByFilter = (filter: string, videos: IVideo[]): IVideo[] => {
switch (filter) {
case options[2]:
return [...videos.sort((a, b) => a.duration + b.duration)];
case options[3]:
return [...videos.sort((a, b) => a.duration - b.duration)];
default:
return [{ created: "", duration: 10000 }];
}
};
console.log('er')
const handleFilterChange = (e: any) => {
e.preventDefault();
setFilterSelected(e.target.value);
setSortedVideos(sortByFilter(filterSelected, videos));
};
return (
<>
<h4>{title}</h4>
<section className={styles.videolist_section}>
<InputSelect
name={"filter"}
title={"Ordenar por"}
label={*El nombre de la opción*}
options={options}
onChange={handleFilterChange}
optional={true}
/>
<h3>{filterSelected}</h3>
{sortedVideos.length > 0
? sortedVideos.map((video) => {
return <h1 key={video.duration}>{video.duration}</h1>;
})
: videos.map((video) => {
<h3>{video.duration}</h3>;
})}
</section>
</>
);
};
export default VideoList;
Sin más, lo que hace es que cada vez que cambia la selección del input, actualiza el estado de filterSelected y en base a este reordena el array videosSorted. Bien pues no funciona correctamente, primero que el algoritmo de ordenación no da lo que debe dar, no entiendo por qué, y luego la renderización no se hace correctamente, y creo que la actualización de los estados tampoco.
¿Alguna idea de qué le puede pasar o cómo arreglarlo?