SEARCH MACHINE 🥱

TODO.md

@@ -0,0 +1,2 @@
+- [ ] hacer q la search bar renderice los resultados o que se refetchee bien la pagina
+- [ ] 

components/ColorModeSwitcher.js

@@ -13,7 +13,7 @@ export const ColorModeSwitcher = (props) => {
       fontSize="lg"
       aria-label={`Switch to ${text} mode`}
       variant="ghost"
-      color="current"
+      color="white"
       marginLeft="2"
       onClick={toggleColorMode}
       icon={<SwitchIcon />}

components/Layout/TopNavBar.tsx

@@ -8,18 +8,21 @@ import {
   Text,
   Heading,
   VStack,
+  Link,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import React, { useState, useEffect } from "react";
 import { TopRight } from "./TopRight";
+import { theme } from "../../styles/theme";
+import { useColorMode } from "@chakra-ui/react";
 
 export const TopNavBar = ({
   picUrl = "http://github.com/IvanRomero03.png",
 }) => {
   const router = useRouter();
+  const { colorMode } = useColorMode();
 
   return (
-    // Flex to top
     <>
       <Flex
         minW="100%"
@@ -33,15 +36,18 @@ export const TopNavBar = ({
         opacity={0.9}
         zIndex={1}
       >
-        <a href="http://github.com/RoBorregos">
+        <Link href="http://github.com/RoBorregos" isExternal>
           <Image
-            src={"http://github.com/RoBorregos.png"}
+            //src={colorMode == "dark" ? "Logo_blanco.png" : "Logo_negro.png"}
+            src={"Logo_blanco.png"}
             alt="logo"
-            boxSize="50px"
+            maxH={"65px"}
             opacity={1.5}
           />
-        </a>
-        <Heading opacity={1}>RoboLinks</Heading>
+        </Link>
+        <Heading opacity={1} color={"white"}>
+          RoboLinks
+        </Heading>
         <TopRight picUrl={picUrl} />
       </Flex>
     </>

components/Layout/TopRight.tsx

@@ -8,23 +8,32 @@ import {
   MenuItem,
   Text,
   Button,
+  Avatar,
 } from "@chakra-ui/react";
 import { HamburgerIcon } from "@chakra-ui/icons";
+import { ColorModeSwitcher } from "../ColorModeSwitcher";
+type props = {
+  picUrl: string;
+  username?: string;
+};
 
-export const TopRight = ({ picUrl = "http://github.com/RoBorregos.png" }) => {
+export const TopRight = ({
+  picUrl = "http://github.com/RoBorregos.png",
+  username,
+}: props) => {
   return (
     <>
       <HStack spacing={4}>
-        <Image
-          src={picUrl}
-          alt="logo"
-          boxSize="50px"
-          borderRadius={"50%"}
-          opacity={1}
-        />
+        <Avatar src={picUrl} name={username ?? ""} />
+        <ColorModeSwitcher />
         <Menu>
           <MenuButton>
-            <IconButton icon={<HamburgerIcon />} aria-label="Menu" />
+            <IconButton
+              icon={<HamburgerIcon />}
+              aria-label="Menu"
+              variant="ghost"
+              color="white"
+            />
           </MenuButton>
           <MenuList>
             <MenuItem>

components/Link/LinkComponent.tsx

@@ -18,18 +18,18 @@ import { useQuery } from "@tanstack/react-query";
 import client from "../../client";
 
 export const LinkComponent = ({ idLink }) => {
-  const { data, isLoading, isError } = useQuery(["link" + "idLink"], () =>
+  const { data, isLoading, isError } = useQuery(["link" + idLink], () =>
     client.get(`Link/getLink?idLink=${idLink}`)
   );
-  console.log(data?.data);
+  //console.log(data?.data);
   return (
     <>
       <Box
         maxW={"350px"}
         w={"full"}
         //bg={"teal.800"}
         backdropBlur={"sm"}
-        boxShadow={"2xl"}
+        boxShadow={"md"}
         rounded={"md"}
         overflow={"hidden"}
         borderWidth={2}

components/Link/linkStack.tsx

@@ -0,0 +1,27 @@
+import { Spinner, Stack } from "@chakra-ui/react";
+import React from "react";
+import { LinkComponent } from "./LinkComponent";
+import { useQuery } from "@tanstack/react-query";
+import client from "../../client";
+
+const LinkStack = ({ search, tags }) => {
+  const { data, isLoading, isError, isFetching } = useQuery(["links"], () =>
+    client.post("/Link/searchLinks", {
+      search: search,
+      tags: tags,
+    })
+  );
+  console.log("LinkStack", isFetching);
+  console.log(data);
+  return (
+    <Stack m="2%" spacing={8}>
+      {isLoading ? (
+        <Spinner />
+      ) : (
+        data.data?.map((link) => <LinkComponent idLink={link.idLink} />)
+      )}
+    </Stack>
+  );
+};
+
+export default LinkStack;

components/Searcher/SearchBar.tsx

@@ -0,0 +1,115 @@
+import {
+  Input,
+  Box,
+  HStack,
+  Button,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Badge,
+  Code,
+  Spacer,
+  Center,
+  Text,
+  IconButton,
+} from "@chakra-ui/react";
+import { SearchMode, SearchModeEnum } from "../../types/SearchMode";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import client from "../../client";
+import { AddIcon, CheckIcon, CloseIcon } from "@chakra-ui/icons";
+
+const SearchBar = ({ setSearch, setTags, search }) => {
+  const queryClient = useQueryClient();
+  const [selectedTags, setSelectedTags] = useState(new Set() as Set<number>);
+  const [isSelected, setIsSelected] = useState({});
+  const { data, isLoading, error } = useQuery(["tags"], () =>
+    client.get("/Tag/getTags")
+  );
+  const handleSearch = () => {
+    queryClient.fetchQuery(["links"], () =>
+      client.post("/Link/searchLinks", {
+        search: search,
+        tags: Array.from(selectedTags),
+      })
+    );
+  };
+  return (
+    <>
+      <Box>
+        <HStack>
+          <IconButton
+            aria-label="Add new Link"
+            icon={<AddIcon />}
+            onClick={() => {}}
+          />
+          <Input
+            focusBorderColor="blue.500"
+            placeholder="Search"
+            onChange={(e) => {
+              setSearch(e.target.value);
+              handleSearch();
+            }}
+          />
+          <Button onClick={handleSearch}>Search</Button>
+          <Menu>
+            <MenuButton>
+              <Button>
+                <Badge colorScheme={"green"}>Tags</Badge>
+              </Button>
+            </MenuButton>
+            <MenuList>
+              {data?.data?.map((tag) => {
+                return (
+                  <MenuItem
+                    key={tag.idTag}
+                    onClick={() => {
+                      setIsSelected({ ...isSelected, [tag.idTag]: true });
+                      selectedTags.add(tag.idTag);
+                      setSelectedTags(selectedTags);
+                      setTags(Array.from(selectedTags));
+                    }}
+                  >
+                    <HStack justify={"space-between"}>
+                      <Badge colorScheme={tag.tagColor}>{tag.tagName}</Badge>
+                      <Spacer />
+                      {isSelected[tag.idTag] ? <CheckIcon /> : null}
+                    </HStack>
+                  </MenuItem>
+                );
+              })}
+            </MenuList>
+          </Menu>
+          <HStack>
+            {Array.from(selectedTags).map((tag) => {
+              const tagData = data?.data?.find((t) => t.idTag === tag);
+              return (
+                <Badge
+                  key={tagData.idTag}
+                  colorScheme={tagData.tagColor}
+                  onClick={() => {
+                    setIsSelected({ ...isSelected, [tagData.idTag]: false });
+                    selectedTags.delete(tagData.idTag);
+                    setSelectedTags(selectedTags);
+                    setTags(Array.from(selectedTags));
+                  }}
+                  cursor={"pointer"}
+                >
+                  <HStack>
+                    <Text>{tagData.tagName}</Text>
+                    <Center>
+                      <CloseIcon />
+                    </Center>
+                  </HStack>
+                </Badge>
+              );
+            })}
+          </HStack>
+        </HStack>
+      </Box>
+    </>
+  );
+};
+
+export default SearchBar;

package.json

@@ -25,6 +25,7 @@
     "prisma": "^4.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.4.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {

pages/api/Link/searchLink.ts

@@ -41,18 +41,8 @@ const searchLink = async (req: NextApiRequest, res: NextApiResponse) => {
         },
       ],
     },
-    include: {
-      LinkTags: {
-        select: {
-          Tag: {
-            select: {
-              idTag: true,
-              tagName: true,
-              tagColor: true,
-            },
-          },
-        },
-      },
+    select: {
+      idLink: true,
     },
   });
   res.status(200).json(links);

pages/api/Link/searchLinkWithTags.ts

@@ -53,18 +53,8 @@ const searchLinkWithTags = async (
         },
       },
     },
-    include: {
-      LinkTags: {
-        select: {
-          Tag: {
-            select: {
-              idTag: true,
-              tagName: true,
-              tagColor: true,
-            },
-          },
-        },
-      },
+    select: {
+      idLink: true,
     },
   });
   res.status(200).json(links);