From 95d1e3b262f20029625b236a67cdb1b4581b68c9 Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Wed, 17 Mar 2021 11:12:49 -0500
Subject: [PATCH] Cambiar mecanismo para resaltar celdas - ahora no busca un
 string exacto, sino que este contenido

---
 src/ContenedorHorarios/Horarios.tsx        | 10 ++++-
 src/ContenedorHorarios/Tabla/CeldaFila.tsx | 48 +++++++++++++++-------
 src/ContenedorHorarios/Tabla/FilaTabla.tsx |  2 -
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/ContenedorHorarios/Horarios.tsx b/src/ContenedorHorarios/Horarios.tsx
index 507123a..0c0f8e6 100755
--- a/src/ContenedorHorarios/Horarios.tsx
+++ b/src/ContenedorHorarios/Horarios.tsx
@@ -17,8 +17,9 @@ interface HorariosProps {
 }
 
 export function Horarios(props: HorariosProps) {
-
     const [anioActual, setAnioActual] = createSignal("1er año");
+    // ID que indica cuales celdas resaltar.
+    const [idHover, setIdHover] = createSignal("");
 
     const elAnios = <For each={Object.entries(props.data.años)}>
         {([nombre]) => {
@@ -68,7 +69,12 @@ export function Horarios(props: HorariosProps) {
                 />
                 <br/>
                 <div className={css(estilosGlobales.contenedor)}>
-                    <Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
+                    <Tabla data={dataTabla()}
+                           version={props.data.version}
+                           anio={anioActual()}
+                           idHover={idHover}
+                           setIdHover={setIdHover}
+                    />
                 </div>
                 <div>
                     <Cursos
diff --git a/src/ContenedorHorarios/Tabla/CeldaFila.tsx b/src/ContenedorHorarios/Tabla/CeldaFila.tsx
index f65928c..6702fc7 100755
--- a/src/ContenedorHorarios/Tabla/CeldaFila.tsx
+++ b/src/ContenedorHorarios/Tabla/CeldaFila.tsx
@@ -58,7 +58,20 @@ const clasesColores = {
 }
 
 interface Props {
-    datos: { id: string, txt: string, esLab: boolean }[],
+    /**
+     * Informacion de los cursos a renderizar en la celda
+     *
+     * id - Identificador unico del grupo: 20200912_1er_PW1_T_A
+     *
+     * txt - El nombre a renderizar
+     *
+     * esLab - Boolean que indica si el grupo es de laboratorio
+     */
+    datos: {
+        id: string,
+        txt: string,
+        esLab: boolean
+    }[],
     idHover: () => string,
     setIdHover: (v: string) => string,
     fnResaltarFila: () => void,
@@ -80,21 +93,26 @@ export function CeldaFila(props: Props) {
             {({id, txt, esLab}) => {
                 const [estabaResaltado, setEstabaResaltado] = createSignal(false);
 
-                const clases = createMemo(() => {
-                    const clases = [e.celdaCurso, esLab ? e.celdaCursoLab : e.celdaCursoTeoria];
-                    let adicional = "";
-                    if (id === idHover()) {
-                        props.fnResaltarFila();
-                        clases.push(e.celdaCursoActiva);
-                        adicional = clasesColores[props.dia];
+                const clases = createMemo(
+                    () => {
+                        const clases = [e.celdaCurso, esLab ? e.celdaCursoLab : e.celdaCursoTeoria];
+                        let adicional = "";
+                        const idHoverS = idHover();
+                        if (idHoverS !== "" &&  id.search(idHoverS) !== -1) {
+                            props.fnResaltarFila();
+                            clases.push(e.celdaCursoActiva);
+                            adicional = clasesColores[props.dia];
 
-                        setEstabaResaltado(true);
-                    } else if (estabaResaltado()) {
-                        props.fnDesresaltarFila();
-                        setEstabaResaltado(false);
-                    }
-                    return css(...clases) + " " + adicional;
-                });
+                            setEstabaResaltado(true);
+                        } else if (estabaResaltado()) {
+                            props.fnDesresaltarFila();
+                            setEstabaResaltado(false);
+                        }
+                        return css(...clases) + " " + adicional;
+                    },
+                    undefined,
+                    (x, y) => x === y
+                );
 
                 return <span className={clases()}
                              onMouseEnter={() => fnOnMouseEnter(id)}
diff --git a/src/ContenedorHorarios/Tabla/FilaTabla.tsx b/src/ContenedorHorarios/Tabla/FilaTabla.tsx
index 3a4eba9..a30fe32 100755
--- a/src/ContenedorHorarios/Tabla/FilaTabla.tsx
+++ b/src/ContenedorHorarios/Tabla/FilaTabla.tsx
@@ -50,8 +50,6 @@ const e = StyleSheet.create({
     }
 });
 
-
-// TODO: Usar un arr en vez de un objeto?
 const [diasResaltados, setDiasResaltados] = createState({
     Lunes: 0,
     Martes: 0,