Modificar la estructura de los datos en Horarios.tsx para permitir seleccionar grupos en la tabla de ese componente

src/ContenedorHorarios/ContenedorHorarios.tsx

@@ -14,6 +14,7 @@ import {
 } from "../types/DatosHorario";
 import { estilosGlobales } from "../Estilos";
 import { batch, createEffect, createMemo, createSignal, createState, Show } from "solid-js";
+import { useListaCursos } from "./useListaCursos";
 
 const datosPromise = (async () => {
     const file = await fetch("/horarios/2020_2_fps_ingenieriadesistemas.yaml");
@@ -63,23 +64,11 @@ const ElemCargando = () =>
 
 export type EstadoLayout = "MaxPersonal" | "Normal" | "MaxHorarios";
 
-const [cursosUsuario, setCursosUsuarios] = createState<ListaCursosUsuario>({
+const {
-    sigIndice: 0,
+    listaCursos: cursosUsuario,
-    cursos: []
+    setListaCursos: setCursosUsuarios,
-});
+    agregarCursoALista: agregarCursoUsuario
-
+} = useListaCursos();
-// TODO: Agregar un indice del ultimo curso
-const agregarCursoUsuario = (curso: Curso) => {
-    // Si el horario ya se habia agregado, ocultarlo
-    const cursoActualIndex = cursosUsuario.cursos.findIndex(x => x.nombre === curso.nombre);
-    if (cursoActualIndex !== -1) {
-        setCursosUsuarios("cursos", cursoActualIndex, "oculto", x => !x);
-    } else {
-        setCursosUsuarios("cursos", cursosUsuario.sigIndice, curso);
-        setCursosUsuarios("sigIndice", x => x + 1);
-        // setCursosUsuarios("cursos", a => [...a, curso]);
-    }
-};
 
 export function ContenedorHorarios() {
     const [datosCargados, setDatosCargados] = createSignal(false);
@@ -136,7 +125,7 @@ export function ContenedorHorarios() {
                 <Horarios data={datos()!!}
                           estadoLayout={estadoLayout()}
                           setEstadoLayout={setEstadoLayout}
-                          fnAgregarCurso={agregarCursoUsuario}
+                          fnAgregarCurso={(c) => agregarCursoUsuario(JSON.parse(JSON.stringify(c)))}
                           listaCursosUsuario={cursosUsuario}
                           setCursosUsuarios={setCursosUsuarios}
                 />

src/ContenedorHorarios/Horarios.tsx

@@ -1,5 +1,5 @@
-import { Curso, CursoRaw, DatosHorario, DatosHorarioRaw, ListaCursosUsuario } from "../types/DatosHorario";
+import { Curso, CursoRaw, Cursos, DatosHorario, DatosHorarioRaw, ListaCursosUsuario } from "../types/DatosHorario";
-import { For, createSignal, createMemo, SetStateFunction } from "solid-js";
+import { For, createSignal, createMemo, SetStateFunction, batch, untrack } from "solid-js";
 import { css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
 import { Tabla } from "./Tabla";
@@ -7,6 +7,7 @@ import { CursosElem } from "./CursosElem";
 import { EstadoLayout } from "./ContenedorHorarios";
 import { BotonMaxMin } from "./BotonMaxMin";
 import { Switch, Match } from "solid-js";
+import { useListaCursos } from "./useListaCursos";
 
 interface HorariosProps {
     data: DatosHorario,
@@ -17,6 +18,12 @@ interface HorariosProps {
     setCursosUsuarios: SetStateFunction<ListaCursosUsuario>
 }
 
+const {
+    setListaCursos,
+    agregarCursoALista,
+    eliminarCursosDeLista
+} = useListaCursos();
+
 export function Horarios(props: HorariosProps) {
     const [anioActual, setAnioActual] = createSignal("1er año");
     // ID que indica cuales celdas resaltar.
@@ -42,7 +49,24 @@ export function Horarios(props: HorariosProps) {
     </For>;
 
     const dataTabla = createMemo(() => {
-        return props.data.años[anioActual()];
+        const anio = anioActual();
+        const obj: Cursos = {};
+        untrack(() => {
+            const cursos = props.data.años[anio];
+            batch(() => {
+                eliminarCursosDeLista();
+
+                let i = 0;
+                for (const [, curso] of Object.entries(cursos)) {
+                    agregarCursoALista(curso);
+
+                    obj[i] = curso;
+                    i++;
+                }
+            });
+        });
+
+        return obj;
     });
 
     const fnMaximizar = () => props.setEstadoLayout("MaxHorarios");
@@ -75,7 +99,7 @@ export function Horarios(props: HorariosProps) {
                            anio={anioActual()}
                            idHover={idHover}
                            setIdHover={setIdHover}
-                           setCursosUsuarios={() => {}}
+                           setCursosUsuarios={setListaCursos}
                     />
                 </div>
                 <div>

src/ContenedorHorarios/MiHorario.tsx

@@ -33,8 +33,6 @@ const e = StyleSheet.create({
 export function MiHorario(props: MiHorarioProps) {
     const [idHover, setIdHover] = createSignal("");
 
-    // TODO: Cambiar esto para cambiar 'seleccionado' aqui
-    // Simplificar para mantener reactividad (?)
     const datosMiHorario = createMemo(() => {
         const obj: Cursos = {};
         props.cursosUsuario.cursos.forEach((x, i) => {

src/ContenedorHorarios/Tabla/CeldaFila.tsx

@@ -101,6 +101,7 @@ export function CeldaFila(props: Props) {
                 const [estabaResaltado, setEstabaResaltado] = createSignal(false);
 
                 const estaSeleccionado = createMemo(() => {
+                    console.log("Seleccionado actualizado")
                     return datos.datosGrupo.seleccionado;
                 });
 

src/ContenedorHorarios/useListaCursos.ts

@@ -0,0 +1,39 @@
+import { createState, SetStateFunction, State } from "solid-js";
+import { Curso, ListaCursosUsuario } from "../types/DatosHorario";
+
+interface ReturnType {
+    listaCursos: State<ListaCursosUsuario>,
+    setListaCursos: SetStateFunction<ListaCursosUsuario>,
+    agregarCursoALista: (c: Curso) => void,
+    eliminarCursosDeLista: () => void
+}
+
+export const useListaCursos = (): ReturnType => {
+    const [listaCursos, setListaCursos] = createState<ListaCursosUsuario>({
+        sigIndice: 0,
+        cursos: []
+    });
+
+    const agregarCursoALista = (curso: Curso) => {
+        // Si el horario ya se habia agregado, ocultarlo
+        const cursoActualIndex = listaCursos.cursos.findIndex(x => x.nombre === curso.nombre);
+        if (cursoActualIndex !== -1) {
+            setListaCursos("cursos", cursoActualIndex, "oculto", x => !x);
+        } else {
+            setListaCursos("cursos", listaCursos.sigIndice, curso);
+            setListaCursos("sigIndice", x => x + 1);
+        }
+    };
+
+    const eliminarCursosDeLista = () => {
+        setListaCursos("cursos", []);
+        setListaCursos("sigIndice", 0);
+    };
+
+    return {
+        listaCursos,
+        setListaCursos,
+        agregarCursoALista,
+        eliminarCursosDeLista
+    };
+};