Acabo de recibir un recibo más de Github Copilot ($10/mes 💀). Siempre digo que lo voy a desactivar porque no lo uso mucho, pero, su comodidad hace que me olvide...

GitHub Copilot es una herramienta de programación que utiliza inteligencia artificial para sugerir y completar código automáticamente.

Hoy vengo a poner a prueba sus poderes. Puntualmente en la refactorización de 612 líneas de código escritas en React con JavaScript, para ser transformado en un componente funcional con TypeScript.

Spoiler: Termina con 113 líneas de código.

El código no es presumible (code smell, redundancia, class components 🤮) y mi trabajo es revivirlo. Podría decirse que sé muy bien como repararlo (yo lo escribí 🤡). Sin embargo, ya que me duele mucho pagar por Copilot, lo dejaré en sus manos.

Código deprecado (612 líneas de código)

En el código se pueden encontrar cosas como:

for (let product of customer.products) {
  let brand = product.brand;
  let option = document.createElement("option");
  option.appendChild(document.createTextNode(brand));
  option.setAttribute("brand", brand);
  select_product.appendChild(option);
  this.brands[brand] = idx;
  idx++;
}

No luce mal, fuera de que con react no tiene sentido hacer las cosas de esta forma. Hay muchas malas decisiones tomadas, por ejemplo, que solo se consideran happy paths.

Se pueden encontrar atrocidades como:

this.statusBar.current.style.display = "block";
this.statusBar.current.innerText = "Cargando datos";

O estas (esto lo hace en la función de un componente):

const customer = await this.db.collection("customer").findOne({
  stitch_td_uid: this.client.auth.user.id,
});

5mentarios:

for (let j = i + 1; j < indexes.length; j++) {
  if (idx < indexes[j]) {
    indexes[j]--;
  }
}

Copilot

Prompt: "Refactor this class component written in jsx to a functional component with typescript. Rename as many variables as you can to cammelcase. If you see that updates are made to the DOM with the document object, transform it into the equivalent using React."

Resultados (276 líneas de código 💀)

Funciona? Nope. Pero en un principio tampoco, así que, no hay problema.

Lo interesante es que pasó de 612 líneas de código a 276 💀. Redujo el código un 55%.

• Muchas funciones que no entendió se las comió (las dejó en TODO: ...).
• Se inventó interfaces (no reutilizó tipados).
• Muchos refs (no hizo mucho caso a utilizar React en vez del DOM).
• Algunos let que podrían ser const.
• No tomó en cuenta algunos servicios existentes (imagino que por usar sus interfaces).

Lo más raro que encontré fue:

const [filter, setFilter] = useState<string | null>(null);
// ...
const loadProduct = (filter: { type: string; val: string }) => {
  setFilter(filter.val);
};
// ...
<select
  className="form-control"
  onChange={loadProduct}
  ref={selectBrandsRef}
  aria-describedby="brands"
/>

Lo cómico es que es elemento no carga productos, ni los filtra. Del estado solo se usa el setFilter. Los productos se cargan una vez, ese elemento es para filtrar el inventario.

Cosas raras, pero... lo hizo bastante limpio.

Conclusión (113 líneas de código)

Después de hacer que el código funcione, subió de 276 a 462 líneas. Por último, luego de su code splitting como Dios manda, pasó a 113.

Hay muchas cosas que copilot hace que no entiendo, pero es muy divertido ver las desgracias que genera.

De cualquier forma se siente la ayuda que ofrece, es como encariñarse de una bicicleta sin frenos. Va quitar trabajos? Nope, es un idiota... pero es mi idiota.