Add repo search function

FdelMazo · Feb 25, 2024 · cdf6946 · cdf6946
1 parent c2bab18
commit cdf6946
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 13 deletions.
diff --git a/src/components/MainApp.js b/src/components/MainApp.js
@@ -13,6 +13,7 @@ const MainApp = () => {
     return data.map((r) => ({
       user: r.owner.login,
       repoName: r.name,
+      description: r.description,
       repoData: r,
     }));
   }, [data]);

diff --git a/src/components/Repos.js b/src/components/Repos.js
@@ -1,16 +1,21 @@
+import {
+  Search2Icon,
+  StarIcon,
+  TimeIcon,
+} from "@chakra-ui/icons";
 import {
   Box,
-  Heading,
-  Code,
+  Button,
   Center,
+  Code,
+  Heading,
   IconButton,
+  Input,
+  InputGroup,
+  InputLeftElement,
   Tooltip,
   useColorModeValue,
 } from "@chakra-ui/react";
-import {
-  StarIcon,
-  TimeIcon,
-} from "@chakra-ui/icons";
 import React from "react";
 import Loading from "./Loading";
 import RepoCards from "./react-gh-repo-cards";
@@ -19,27 +24,35 @@ const Repos = ({ materiaSelected, repos, materias }) => {
   // 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[1]);
+  const [nombreFilter, setNombreFilter] = React.useState("");
 
   const shownRepos = React.useMemo(() => {
+    let reposToShow = repos
     if (fiubaOnly) {
-      return repos
+      reposToShow = repos
         .filter(
           (r) =>
             !materias
               .flatMap((m) => m.codigos)
               .some((c) => r.repoData.topics.includes(c)),
         )
-        .sort(sortOption.sortFn);
     } else if (materiaSelected) {
-      return repos
+      reposToShow = repos
         .filter((r) =>
           materiaSelected.codigos.some((c) => r.repoData.topics.includes(c)),
         )
-        .sort(sortOption.sortFn);
-    } else {
-      return repos.sort(sortOption.sortFn);
     }
-  }, [materiaSelected, repos, materias, fiubaOnly, sortOption]);
+
+    if (nombreFilter) {
+      reposToShow = reposToShow.filter((r) =>
+        r.user.toLowerCase().includes(nombreFilter.toLowerCase()) ||
+        r.description?.toLowerCase().includes(nombreFilter.toLowerCase()) ||
+        r.repoName.toLowerCase().includes(nombreFilter.toLowerCase())
+      )
+    }
+
+    return reposToShow.sort(sortOption.sortFn)
+  }, [materiaSelected, repos, materias, fiubaOnly, sortOption, nombreFilter]);
 
   return (
     <Box h="80vh" m={2}>
@@ -63,6 +76,29 @@ const Repos = ({ materiaSelected, repos, materias }) => {
             </span>
           ))}
       </Heading>
+      <InputGroup my={2}>
+        <InputLeftElement
+          pointerEvents="none"
+          as={Button}
+          variant="ghost"
+          color="purple.400"
+          children={<Search2Icon />}
+        />
+        <Input
+          borderColor="purple"
+          focusBorderColor="violet"
+          _hover={{
+            borderColor: "violet",
+          }}
+          color="gray.600"
+          bg={useColorModeValue("purple.50", "purple.100")}
+          placeholder="Repositorios"
+          _placeholder={{ opacity: 0.5, color: "purple.900" }}
+          value={nombreFilter}
+          onChange={(event) => setNombreFilter(event.target.value)}
+        />
+      </InputGroup>
+
       <Box
         p={8}
         overscrollBehaviorY="contain"