Cambiar estado del boton al agregar curso a mi horario

src/App.tsx

@@ -4,6 +4,7 @@ import { Wallpaper } from "./Wallpaper";
 import { Show, createSignal } from "solid-js";
 import { css } from "aphrodite";
 import { estilosGlobales } from "./Estilos";
+import { Creditos } from "./Creditos";
 
 function App() {
     /// @ts-ignore
@@ -34,6 +35,7 @@ function App() {
             </Show>
             <div style={{width: "100%", height: "0.5rem"}}/>
             <ContenedorHorarios/>
+            <Creditos/>
         </div>
     );
 }

src/ContenedorHorarios/ContenedorHorarios.tsx

@@ -23,8 +23,6 @@ const [cursosUsuario, setCursosUsuarios] = createState<ListaCursosUsuario>({
     cursos: []
 });
 
-
-
 const agregarCursoUsuario = (curso: Curso) => {
     if (cursosUsuario.cursos.find(x => x.nombre === curso.nombre)) {
         return;
@@ -100,7 +98,9 @@ export function ContenedorHorarios() {
                 <Horarios data={datos()!!}
                           estadoLayout={estadoLayout()}
                           setEstadoLayout={setEstadoLayout}
-                          fnAgregarCurso={agregarCursoUsuario}/>
+                          fnAgregarCurso={agregarCursoUsuario}
+                          listaCursosUsuario={cursosUsuario}
+                />
             </Show>
         </div>
     </div>;

src/ContenedorHorarios/Cursos.tsx

@@ -1,28 +1,69 @@
-import { AnioData, Curso } from "../types/DatosHorario";
-import { For } from "solid-js";
+import { AnioData, Curso, ListaCursosUsuario } from "../types/DatosHorario";
+import { createEffect, createMemo, For } from "solid-js";
 import { StyleSheet, css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
 
 const e = StyleSheet.create({
     contenedorCurso: {
-        display: "inline-block",
-
+        display: "inline-block"
     }
 });
 
-export function Cursos(props: { dataAnio: AnioData, fnAgregarCurso: (c: Curso) => void }) {
-    return <>
-        <For each={Object.entries(props.dataAnio)}>
-            {([_, datosCurso]) => {
-                return <span title={"Agregar " + datosCurso.abreviado + " a mi horario"} className={css(
+interface Props {
+    dataAnio: AnioData,
+    fnAgregarCurso: (c: Curso) => void,
+    listaCursosUsuario: ListaCursosUsuario
+}
+
+export function Cursos(props: Props) {
+
+    const claseCursoNoAgregado = css(
         e.contenedorCurso,
         estilosGlobales.contenedor,
         estilosGlobales.contenedorCursor,
         estilosGlobales.contenedorCursorSoft
-                )}
+    );
+
+    const claseCursoAgregado = css(
+        e.contenedorCurso,
+        estilosGlobales.contenedor,
+        estilosGlobales.contenedorCursor,
+        estilosGlobales.contenedorCursorSoft,
+        estilosGlobales.contenedorCursorActivo,
+    );
+
+    return <>
+        <For each={Object.entries(props.dataAnio)}>
+            {([_, datosCurso]) => {
+
+                const cursoAgregadoMemo = createMemo(
+                    () => props.listaCursosUsuario.cursos.find(x => x.nombre === datosCurso.nombre) !== undefined,
+                    undefined,
+                    (x, y) => x === y
+                );
+
+                const tituloMemo = createMemo(() => cursoAgregadoMemo()
+                    ? `Remover ${datosCurso.abreviado} de mi horario`
+                    : `Agregar ${datosCurso.abreviado} a mi horario`
+                );
+
+                const claseMemo = createMemo(() =>
+                    cursoAgregadoMemo()
+                        ? claseCursoAgregado
+                        : claseCursoNoAgregado
+                );
+
+                const iconoMemo = createMemo(() =>
+                    cursoAgregadoMemo()
+                        ? "ph-minus"
+                        : "ph-plus"
+                );
+
+                return <span title={tituloMemo()}
+                             className={claseMemo()}
                              onClick={() => props.fnAgregarCurso(datosCurso)}
                 >
-                    <i className="ph-plus"/>
+                    <i className={iconoMemo()}/>
                     {datosCurso.abreviado} - {datosCurso.nombre}
                 </span>
             }}

src/ContenedorHorarios/Horarios.tsx

@@ -1,4 +1,4 @@
-import { Curso, DatosHorario } from "../types/DatosHorario";
+import { Curso, DatosHorario, ListaCursosUsuario } from "../types/DatosHorario";
 import { For, createSignal, createMemo} from "solid-js";
 import { css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
@@ -12,7 +12,8 @@ interface HorariosProps {
     data: DatosHorario,
     estadoLayout: EstadoLayout,
     setEstadoLayout: (v: EstadoLayout) => EstadoLayout,
-    fnAgregarCurso: (c: Curso) => void
+    fnAgregarCurso: (c: Curso) => void,
+    listaCursosUsuario: ListaCursosUsuario
 }
 
 export function Horarios(props: HorariosProps) {
@@ -70,7 +71,11 @@ export function Horarios(props: HorariosProps) {
                     <Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
                 </div>
                 <div>
-                    <Cursos dataAnio={dataTabla()} fnAgregarCurso={props.fnAgregarCurso}/>
+                    <Cursos
+                        dataAnio={dataTabla()}
+                        fnAgregarCurso={props.fnAgregarCurso}
+                        listaCursosUsuario={props.listaCursosUsuario}
+                    />
                 </div>
             </Match>
             <Match when={props.estadoLayout === "MaxPersonal"}>

src/ContenedorHorarios/MiHorario.tsx

@@ -58,6 +58,10 @@ export function MiHorario(props: MiHorarioProps) {
     const fnMinimizar = () => props.setEstadoLayout("Normal");
     const estadoActualLayout = () => props.estadoLayout;
 
+    /* TODO: En barra superior colocar todos los horarios. En barra inferior el horario
+        actual.
+        Al hacer click en un horario de la barra superior, llevarlo al inicio de la lista.
+     */
     return <div>
         <Switch>
             <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxPersonal"}>
@@ -69,12 +73,6 @@ export function MiHorario(props: MiHorarioProps) {
                     )}>
                         Mi horario
                     </div>
-                    <div className={css(
-                        estilosGlobales.inlineBlock,
-                        estilosGlobales.contenedor
-                    )}>
-                        Opcion 2
-                    </div>
                 </div>
 
                 <div>

src/Creditos.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet, css } from "aphrodite";
+
+const e = StyleSheet.create({
+    creditos: {
+        textAlign: "center",
+        paddingTop: "7.5rem",
+        paddingBottom: "1rem"
+    }
+});
+
+export function Creditos() {
+    return <div className={css(e.creditos)}>
+        Desarrollado por Fernando Araoz con TypeScript, JSX y Solid.js.
+    </div>
+}