[MAIN][FEATURE] Implementación buscador colecciones

modules/Collections/MyCollectionsPage/index.tsx

@@ -11,6 +11,7 @@ import {
   Spinner,
 } from "@chakra-ui/react";
 
+import useFilterUserCollection from "../hooks/useFilterUserCollections";
 import useUserCollections from "../hooks/useUserCollections";
 
 import CollectionsList from "./colletionList/CollectionsList";
@@ -22,13 +23,15 @@ const MyCollectionsPage = () => {
   const { userCollections, isLoading } = useUserCollections();
   const router = useRouter();
 
+  const { query, setQuery, filteredCollections } = useFilterUserCollection(userCollections);
+
   function handleClick() {
     router.push("/collections/create");
   }
 
   return (
     <Flex justifyContent="center" alignItems="center" flexDirection="column" mx={6}>
-      <Heading mb={10} mt="5" fontSize="18px">
+      <Heading mb={8} fontSize="18px">
         Mis colecciones
       </Heading>
       <InputGroup mb={4}>
@@ -40,10 +43,16 @@ const MyCollectionsPage = () => {
           placeholder="Buscar"
           borderColor={inputColor}
           _placeholder={{ color: inputColor }}
+          value={query}
+          onChange={(e) => {
+            return setQuery(e.target.value);
+          }}
         />
       </InputGroup>
       {(!userCollections || userCollections.length === 0) && !isLoading && <NoCollections />}
-      {userCollections && !isLoading && <CollectionsList collections={userCollections} />}
+      {userCollections && !isLoading && (
+        <CollectionsList collections={filteredCollections || userCollections} />
+      )}
       {isLoading && <Spinner color="#A7B0C0" size="xl" />}
 
       <Button

modules/Collections/hooks/useFilterUserCollections.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+
+import { UserCollections } from "./useUserCollections";
+
+function getTagMatch(tags: string[], regExp: RegExp) {
+  let tagMatch = false;
+  // eslint-disable-next-line no-restricted-syntax, no-unreachable-loop
+  for (const tag of tags) {
+    if (regExp.test(tag)) {
+      tagMatch = true;
+      break;
+    }
+  }
+  return tagMatch;
+}
+
+export default function useFilterUserCollection(userCollections: UserCollections[] | undefined) {
+  const [query, setQuery] = useState("");
+  const [filteredCollections, setFilteredCollections] = useState<UserCollections[] | null>(null);
+
+  useEffect(() => {
+    if (query && userCollections) {
+      const regExp = new RegExp(query, "gi");
+
+      const result = userCollections.filter((collection) => {
+        return regExp.test(collection.title) || getTagMatch(collection.tags!, regExp);
+      });
+
+      setFilteredCollections(result);
+    }
+
+    if (!query) setFilteredCollections(null);
+  }, [query, userCollections]);
+
+  return {
+    query,
+    setQuery,
+    filteredCollections,
+  };
+}

modules/shared/components/Menu/Menu.tsx

@@ -1,18 +1,20 @@
 import React from "react";
+import Link from "next/link";
+
 import {
+  Box,
   Drawer,
   DrawerBody,
-  DrawerOverlay,
-  DrawerContent,
   DrawerCloseButton,
-  useDisclosure,
-  Text,
+  DrawerContent,
+  DrawerOverlay,
   Flex,
-  Box,
+  Text,
+  useDisclosure,
 } from "@chakra-ui/react";
-import MenuLogo from "../Icons/MenuLogo";
+
 import Hamburguer from "../Icons/Hamburguer";
-import Link from "next/link";
+import MenuLogo from "../Icons/MenuLogo";
 
 const Links = [
   { title: "Colecciones", href: "/Collection" },
@@ -21,42 +23,44 @@ const Links = [
   { title: "Perfil", href: "/Perfil" },
 ];
 
-export default function Menu() {
+const Menu = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <>
-        <Flex justify="space-between" p={5}>
-          <Box>
-            <MenuLogo fill="white" width={18} height={23} borderColor="primary.100" borderWidth={7} />
-          </Box>
-          <Box onClick={onOpen} cursor="pointer">
-            <Hamburguer />
-          </Box>
-        </Flex>
+      <Flex justify="space-between" p={5}>
+        <Box>
+          <MenuLogo fill="white" width={18} height={23} borderColor="primary.100" borderWidth={7} />
+        </Box>
+        <Box onClick={onOpen} cursor="pointer">
+          <Hamburguer />
+        </Box>
+      </Flex>
 
-        <Drawer onClose={onClose} isOpen={isOpen} size={{ base: "full", md: "sm" }}>
-          <DrawerOverlay />
-          <DrawerContent bg="primary.100">
-            <DrawerCloseButton color="white" />
-            <DrawerBody display="flex" flexDirection="column" marginTop="120px" alignItems="center">
-              <MenuLogo
-                fill="white"
-                width={63}
-                height={83}
-                borderColor="primary.100"
-                borderWidth={2}
-              />
-              {Links.map((link) => (
-                <Text variant="menu">
-                  <Link href={link.href}>
-                    <a>{link.title}</a>
-                  </Link>
+      <Drawer onClose={onClose} isOpen={isOpen} size={{ base: "full", md: "sm" }}>
+        <DrawerOverlay />
+        <DrawerContent bg="primary.100">
+          <DrawerCloseButton color="white" />
+          <DrawerBody display="flex" flexDirection="column" marginTop="120px" alignItems="center">
+            <MenuLogo
+              fill="white"
+              width={63}
+              height={83}
+              borderColor="primary.100"
+              borderWidth={2}
+            />
+            {Links.map((link) => {
+              return (
+                <Text variant="menu" key={link.href}>
+                  <Link href={link.href}>{link.title}</Link>
                 </Text>
-              ))}
-            </DrawerBody>
-          </DrawerContent>
-        </Drawer>
+              );
+            })}
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </>
   );
-}
+};
+
+export default Menu;

modules/shared/theme/index.ts

@@ -48,9 +48,13 @@ const components: Theme["components"] = {
         fontSize: "1.5rem",
         marginTop: "45px",
       },
+      label: {
+        color: "label.50",
+        fontWeight: 600,
+        fontSize: "18px",
+      },
     },
   },
-
   Button: {
     baseStyle: {
       height: "auto",
@@ -98,16 +102,6 @@ const components: Theme["components"] = {
     },
   },
 
-  Text: {
-    variants: {
-      label: {
-        color: "label.50",
-        fontWeight: 600,
-        fontSize: "18px",
-      },
-    },
-  },
-
   Textarea: {
     // style object for base or default style
     baseStyle: {