0

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:

  1. Si existe: añado la masterclass al listado de videos de la sección
  2. 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;

1 respuesta 1

0

Para resolver este problema puedes usar un map, lo cual lo puedes representar con un objeto donde las llaves serán el nombre de la sección y el valor es la sección en sí.

Debes recorrer cada masterClass tal cual lo tienes planteado, e insertar la sección de ese masterClass al mapa, teniendo en cuenta que si ya existe simplemente querrás agregarlo a la lista de videos.

En la siguiente solución he asumido que section.name no puede ser opcional, dado que no has especificado qué pasaría en ese caso, pero la interfaz sí lo define como tal.

const getSections = (masterclasses: IMasterclass[]): ISection[] => {
/** Mapa para almacenar las secciones donde la llave será el 
 *. nombre de la sección lo que garantiza que no hayan dos secciones 
 *  con el mismo nombre en la colección.
*/
const sections: { [sectionName: string]: ISection } = {};

masterclasses.forEach(mc => {
  sections[mc.section.name] = {
      name: mc.section.name,
      // Inserta este `masterClass` al final de la lista
      videos: [...sections[mc.section.name]?.videos ?? [], mc],
  }
});

// Convierte el mapa en una lista
return Object.keys(sections)
  .map(sectionName => sections[sectionName]);
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.