estoy haciendo un proyecto en nextjs y quiero ordenar un array de secciones partiendo de una información que me viene de una API.
Las interfaces que tengo definidas son las siguientes:
export interface IMasterclass {
id: number;
title: string;
description: string;
createdAt: string;
tags: string;
speaker?: ISpeaker;
section: ISection;
videoId: string;
publishAt: string;
image: string;
}
export interface ISpeaker {
nickname: string;
avatar: string;
}
/* EXPORTAR A UN NIVEL MÁS ALTO */
/* Los dos ?: para poder pasarle un objeto vacío */
export interface ISection {
name?: string;
image?: string;
videos?: IMasterclass[];
}
El flujo es el siguiente: se carga la page y mediante un useEffect me traigo la información de las masterclass de una API, las cuales son objetos que tienen una clave SECTION. Lo que hago es recorrer el listado de masterclass y ver si existe la sección que trae definida:
- Si existe: añado la masterclass al listado de videos de la sección
- Si no existe: creo una sección nueva y su listado de vídeos añado la masterclass en cuestión
/* INTERFACES */
import {
IMasterclass,
ISpeaker,
ISection
} from "../../../utils/interfaces/masterclass";
const getSections = (masterclasses: IMasterclass[] ) => {
let sections:ISection[] = []
masterclasses.forEach(mc => {
if (//Existe la seccion en mi variable local sections){
// Añado mc al objeto ISection cuyo name === mc.section.name
}else{
// Creo un nuevo objeto en el array sections del tipo ISection
// Añado mc al objeto creado
}
})
return sections;
};
const Masterclass = () => {
const [sections, setSections] = useState<ISection[]>();
let { t } = useTranslation();
useEffect(() => {
getInitialMasterclasses().then((res) => {
const sectionsList = getSections(res);
setSections(sectionsList);
});
}, []);
return (
<>
<Head />
<main className={styles.main}>
<h1>{t("masterclass:title")}</h1>
<div className={styles.section_container}>
<VideoList title={t("masterclass:video_list_title1")} videos={[]} />
</div>
</main>
</>
);
};
export default Masterclass;