Se muestran materias 0 repos si se buscan (#22)

* optimizacion: materias solo depende de repos, no de data * Aparecen todas las materias (aunque tengan 0 repos) con todos sus codigos * Mensaje en caso de que no haya repositorios * No se muestran materias con 0 repositorios a menos que se busque * Update src/components/MainApp.js Cambio de sintaxis de constante: allCodigos -> CODIGOS Co-authored-by: Federico del Mazo <[email protected]> * Update src/components/MainApp.js Co-authored-by: Federico del Mazo <[email protected]> * Update src/components/MainApp.js Nombres mas claros Co-authored-by: Federico del Mazo <[email protected]> * Ajuste de codigo a los cambios sugeridos * Mensaje cuando no hay repos actualizado * ternarios anidados de otra forma * Una linea modificada: Center no hace nada * fixes: mensaje mejorado y fix error * comentarios cuando se estan filtrando las materias --------- Co-authored-by: Federico del Mazo <[email protected]>
FdelMazo · Sep 2, 2024 · 31e3f6c · 31e3f6c
1 parent 245e093
commit 31e3f6c
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 37 deletions.
diff --git a/src/components/MainApp.js b/src/components/MainApp.js
@@ -7,42 +7,55 @@ import useData from "../useData";
 
 const ALIAS_MATERIAS = require("../data/materias.json");
 
+const CODIGOS = new Set(
+  Object.keys(ALIAS_MATERIAS).map((c) => c.toLowerCase()),
+);
+
 const MainApp = () => {
   const { data, partialLoading } = useData();
   const repos = React.useMemo(() => {
     return data.map((r) => ({
       user: r.owner.login,
       repoName: r.name,
       description: r.description,
+      codigos: new Set(r.topics).intersection(CODIGOS),
       repoData: r,
     }));
   }, [data]);
 
-  const materias = React.useMemo(() => {
-    const mapa = data.reduce((mapa, repo) => {
-      const codigosEnRepo = repo.topics
-        .map((t) => t.toUpperCase())
-        .filter((t) => ALIAS_MATERIAS.hasOwnProperty(t));
-      codigosEnRepo.forEach((codigoEnRepo) => {
-        const nombreMateria = ALIAS_MATERIAS[codigoEnRepo];
-        const valuesAntes = mapa.get(nombreMateria);
-        const codigosAntes = valuesAntes ? valuesAntes.codigos : [];
-        const reposAntes = valuesAntes ? valuesAntes.reponames : [];
-        mapa.set(nombreMateria, {
-          codigos: [...new Set([...codigosAntes, codigoEnRepo])],
-          reponames: [...new Set([...reposAntes, repo.full_name])],
+  // Es un Map<string, {codigos, reponames}>
+  // Esto permite que se muestren todos los codigos de una materia con un mismo nombre
+  const materiasPorNombre = React.useMemo(() => {
+    const materiasPorNombre = new Map();
+    for (const [codigo, nombreMateria] of Object.entries(ALIAS_MATERIAS)) {
+      if (!materiasPorNombre.has(nombreMateria)) {
+        materiasPorNombre.set(nombreMateria, {
+          codigos: new Set(),
+          reponames: new Set(),
         });
-      });
+      }
+      materiasPorNombre.get(nombreMateria).codigos.add(codigo);
+    }
+    return materiasPorNombre;
+  }, []);
 
-      return mapa;
-    }, new Map());
-    const materias = Array.from(mapa, ([nombreMateria, objeto]) => ({
-      nombre: nombreMateria,
-      ...objeto,
+  const materias = React.useMemo(() => {
+    // Agregamos los reponames al materiasPorNombre
+    repos.forEach((repo) => {
+      repo.codigos.forEach((codigoEnRepo) => {
+        const nombreMateria = ALIAS_MATERIAS[codigoEnRepo.toUpperCase()];
+        materiasPorNombre.get(nombreMateria).reponames.add(repo.repoData.full_name);
+      });
+    });
+    // Transformamos materiasPorNombre (Map) a arreglo de objetos
+    const materias = Array.from(materiasPorNombre, ([nombre, {codigos, reponames}]) => ({
+      nombre,
+      reponames: [...reponames],
+      codigos: [...codigos],
     }));
 
     return materias;
-  }, [data]);
+  }, [repos, materiasPorNombre]);
 
   const [codigoSelected, setCodigoSelected] = React.useState(() => {
     const params = new URLSearchParams(window.location.search);

diff --git a/src/components/Materias.js b/src/components/Materias.js
@@ -29,18 +29,22 @@ const Materias = ({
     return materias
       .sort((a, b) => b.reponames.length - a.reponames.length)
       .filter((m) => {
-        const nombreFilterNormalizado = nombreFilter
-          .normalize("NFD")
-          .replace(/\p{Diacritic}/gu, "")
-          .toLowerCase();
-        const nombreMateriaNormalizada = m.nombre
-          .normalize("NFD")
-          .replace(/\p{Diacritic}/gu, "")
-          .toLowerCase();
-        return nombreFilter
-          ? nombreMateriaNormalizada.includes(nombreFilterNormalizado) ||
-              m.codigos.some((c) => c.includes(nombreFilterNormalizado))
-          : true;
+        if (nombreFilter) {
+          // Si se escribe en el buscador, que solo aparezcan materias que incluyen el nombre o codigo buscado
+          function normalize(texto) {
+            return texto
+              .normalize("NFD")
+              .replace(/\p{Diacritic}/gu, "")
+              .toLowerCase();
+          }
+          const f = normalize(nombreFilter);
+          const filterInName = normalize(m.nombre).includes(f);
+          const filterInCodes = m.codigos.some((c) => c.includes(f));
+          return filterInName || filterInCodes;
+        } else {
+          // Si NO se escribe en el buscador, que solo aparezcan materias que SI tienen repositorios
+          return m.reponames.length !== 0;
+        }
       });
   }, [materias, nombreFilter]);
 

diff --git a/src/components/Repos.js b/src/components/Repos.js
@@ -16,7 +16,7 @@ import React from "react";
 import Loading from "./Loading";
 import RepoCards from "./react-gh-repo-cards";
 
-const Repos = ({ materiaSelected, repos, materias }) => {
+const Repos = ({ materiaSelected, repos, materias, partialLoading }) => {
   // Obscure func: tocar en el tag "fiuba" del header hace que se muestren los repos que no tienen código de materia configurado
   const [fiubaOnly, setFiubaOnly] = React.useState(false);
   const [sortOption, setSortOption] = React.useState(sortOptions[0]);
@@ -107,16 +107,22 @@ const Repos = ({ materiaSelected, repos, materias }) => {
         position="relative"
         bg={useColorModeValue("purple.50", "purple.100")}
       >
-        {repos.length ? (
-          <Center>
+        {shownRepos.length ? (
+          <>
             <SortFeature
               sortOption={sortOption}
               setSortOption={setSortOption}
             />
             <RepoCards repoDetails={shownRepos} />
-          </Center>
+          </>
         ) : (
-          <Loading />
+          <Center height="100%" gap={2}>
+            {!partialLoading && materiaSelected ? (
+              <NoReposMessage codigos={materiaSelected.codigos} />
+            ) : (
+              <Loading />
+            )}
+          </Center>
         )}
       </Box>
     </Box>
@@ -166,4 +172,20 @@ const sortOptions = [
   },
 ];
 
+const NoReposMessage = ({ codigos }) => (
+  <div>
+    <p>
+      Esta materia no tiene repositorios... Agrega el primero con
+      {codigos.length === 1 ? " el tag" : " cualquiera de los tags"}...
+    </p>
+    <Center gap={2}>
+      {codigos.map((c) => (
+        <Code key={c} textIndent={0} colorScheme="purple">
+          {c}
+        </Code>
+      ))}
+    </Center>
+  </div>
+);
+
 export default Repos;