Add TypeScript

[lopezac]

Closes #187

La idea es agregar TypeScript a la app, se que esta el otro PR #190, pero esta basado en una branch en el repo de Lazcano Luca, y preferi trabajarlo en una branch directamente en este repo.

Agregue la version de TypeScript 4.9.5 que es la mas moderna compatible (me parece) con la version de react-scripts 5.0.1 de la app.
Los types van a estar en src/Types, nose si preferis otra manera de organizarlos.

[lopezac]

Bueno @FdelMazo , pude añadir bastantes types, hay mil cosas para mejorar con los types, la aplicacion funciona pero:

• Introduje un bug que cuando se pone una materia como cursando se corre muchisimo a la izquierda

Lo principal seria arreglar ese bug.

Aparte de eso lo que le falta a este PR es resolver varios problemas que deje en comentarios TODO y FIXME, por ejemplo:

• En constants.ts el objeto GRUPOS , falta agregar, o idear una manera de que el editor reconozca cuando una categoria admite la propiedad color, actualmente en 3 partes (estan comentados con linea // FIXME: reparar ts-ignore ) ignoro el error que salta,
• O el modal de LoadingGraph chakra pide que se le agregue on onClose
• etc

[FdelMazo]

Buenísimo @lopezac! Re va tomando forma. Chiflame si necesitas una mano con el bug, o si queres una review en algun momento en particular

[salluzziluca]

buenasm @lopezac, me gustaria sumarme si te sirve una mano. Cualquier cosa avisame!

[lopezac]

Hola @salluzziluca, como andas, si me encantaria ayuda, esto lo deje hace unos meses tirado, y ahora acabo de leer masomenos todo para ponerme al dia de vuelta.

Para tipear FIUBA-Map, lo que hice fue convertir los archivos a TS, y empezar a escribir sus tipos, y aprender como funcionan, que parametros, toman etc, y ver como bajaban la cantidad de errores de 200+, a ahora seran menos de 10 errores maso, los podes encontrar buscando la palabra ts-ignore

Tambien en su momento tuve muchas dudas que deje en TODOs y FIXMEs esparcidos a lo largo de la app

Modele manualmente los tipos por ejemplo de Graph de react-graph-vis, ya que es una libreria vieja, sin soporte de TS.

Tienen un tipo , pero no lo agregaron a su paquete npm, y intente usarlo agregandolo manualmente a la app, pero no es de mucha ayuda creo.

Y acabo de descubrir, mientras releia todo lo que habia hecho hace 3 meses. El poder de Copilot ya que me ayudo a resolver problemas oscuros como unos de ChakraUI, que los tipos de por ejemplo de los props de un Badge, tiene textAlign (que es el text-align de css), pero ellos te pedian que fuera de tipo ResponsiveValue y lo chistoso es que ellos tenian definian el tipo ResponsiveValue, pero no decian ni pio (en su documentacion) de donde sacaban el TextAlign (o almenos mi yo de hace 3 meses no supo encontrarlo), pero ahora gracias a Copilot en un momento descubri que TextAlign lo definia csstype con Property.

Lo esencial que falta reparar son los @ ts-ignore esparcidos, y incluso ver los TODO y FIXME, e ir descartandolos, aparte de eso hay un bug importante que comente arriba, que cuando uno marca una materia como cursando aparece muy a la izquierda.

Bienvenida sera tu ayuda @salluzziluca!!

[lopezac]

Listo @FdelMazo, chequea como quedo, fijate si anda todo bien, y si falta algo decime

El bug era en la clase Node donde definia originalLevel luego de level, y originalmente habia que definir originalLevel y luego level.

[FdelMazo]

Lo reviso en unas semanas! Gracias por el laburazo!!

[FdelMazo]

Buenas! Ahí estuve viendo el PR. Es tremendo!

Deje bocha de comentarios pero en gran parte son preguntas de cosas que no estoy seguro de porque hacian falta o si son adecuadas o si son errores. Como yo no desarrolle esto se que seguramente hay mil piezas del rompecabezas necesarias para el PR entero, así que confio más en su criterio de porque las cosas estan como estan!

En particular me gustaría asegurarme de dos cosas

• que quede la menor cantidad de cambios de código/lógica posible, y el PR sea en su mayor medida solamente de agregar tipos al proyecto.
• que si se cambia algo en el futuro, y el tipado se rompa, entonces el CI lo ataje y nos evite deployarlo. Se podrá agregar un CI a los PRs para lograr eso (solo tenemos CI sobre master)? El linter actual, ya lo ataja?

Veo que hay otros cambios de código (chiquitos, nada importante) de cosas que no estoy del todo seguro de como impactan en el tipado ni si son necesarios. Se que hay mucho carreo de código legacy acá y hay varias cosas que ya no sirven y se podrían sacar o limpiar o arreglar, pero me gustaría que ese tipo de cosas queden para un nuevo PR, para evitar que en el mergeo de este pueda cambiar algo de la funcionalidad sin darnos cuenta

(no voy a poder re-revisarlo mucho estos dias, perdon!)

[lopezac]

Hola Fede

• Ahi veo todas las sugerencias, pero tenes total razon en lo que decis, hoy lo veo igual que vos, este PR solo tendria que ser tipados, nada de cambio de logica, pero el Axel de agosto pensaba diferente jajaja, asi que intentare deshacer todos los cambios de logica que hice.
• Ahi me fijo si el CI se ataja las roturas de tipos, y si no, le intento agregar mayor proteccion

[lopezac]

Hola Fede!

• Elimine la mayor cantidad de cambios de logica
• Quedaron 3 usos del ! non-null assertion en el proyecto, al eliminar todos los otros, fue una forma de realmente tipear las cosas y no esconderlas bajo la alfombra digamos, en MapContext.tsx:

export const UserContext = React.createContext<UserType.Context>(null!);
export const GraphContext = React.createContext<GraphType.Context>(null!);

Es una practica "conocida", safa para mi

Luego en Graph.ts
const [network, setNetwork] = React.useState<ReactGraphVisType.Network>(null!);
Si no usasemos un ! aca, tendriamos que en cada funcion que utilice network, nodes, o edges chequear que no sean nulos, habria que agregarlo?, o esta bien asi?, que opinas?, aca capaz seria mas correcto no usar el !, pero seria mas verboso el codigo

[FdelMazo]

Me parece bien usar los ! en esos casos especificos! @lopezac esta quedando buenísimo. En unos días lo reviso de punta a punta.

[lopezac]

Buenas

• Añadirle "noEmitOnError": true, en tsconfig.json creo que ayuda, a tirar error si hay un error buildeando el proyecto en main
• No estoy seguro si el verify-ts-pr.yml workflow es suficiente para chequear si cada vez que se hace un commit en un pr, tire error

[FdelMazo]

Hola @lopezac ! Me parece que quedó bárbaro el PR!!

Lo testee un poco en funcionalidad y me parece que no tiene ningún bug, por mi vamos para adelante. Me entrometí un poco: lo rebasee contra master, y le pushee unos commits cortitos para cerrar dos cosas que quedaron del CI, pero más alla de eso, lo veo perfecto.

Te deje un par de sugerencias que podes tomar o ignorar, como vos quieras. Sentite libre de mergearlo a master así, o con las sugerencias incluidas, y squasheado o no squasheado, lo que te parezca más prolijo (a mi en algunos PRs me parece mejor una cosa, en otros otra)

Te mandaste un laburazo, sos un capo. Creo que algo así le sube muchísimo la calidad a la experiencia de desarrollo al proyecto. Si llega a surgir algun bug, lo intento solucionar, y te tengo al tanto. Seguro en algun momento me siente a revisar algunas cosas extras del tipado a ver si queda algo por hacer, pero lo veo impecable.

[lopezac]

Hola @FdelMazo , ahi agregue todas las sugerencias, me parecieron buenas, nose si sera mas prolijo, pero estara bien supongo mergearlo asi sin squash, ahi lo mergeo