From 29da05b30299c0148baa62568c99f46b067e98c4 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 28 Jun 2022 18:39:09 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=92=EF=B8=8F=20Fix=20search.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search.tsx | 41 ++++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/search.tsx b/src/components/search.tsx
index 1b6f3e9..c8551c3 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -1,10 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Input, Text, Image, HStack, Box, Center } from "@chakra-ui/react";
-import useSWR from "swr";
 import useDebounce from "@/hooks/useDebounce";
 import { SVGCardProps } from "@/interfaces/components";
 import CustomLink from "@/common/link";
-import Error from "@/components/error";
 import { getSvgByQuery } from "@/services";
 import CustomIconBtn from "@/common/iconBtn";
 import { Trash } from "phosphor-react";
@@ -12,15 +10,24 @@ import Tap from "@/animations/tap";
 
 const Search = () => {
   const [search, setSearch] = useState("");
+  const [results, setResults] = useState<SVGCardProps[]>([]);
   const debouncedSearch = useDebounce(search, 500);
-  const { data, error } = useSWR(`${getSvgByQuery}${debouncedSearch}`);
 
-  if (error) {
-    <Error title="Error" description="an error occurred with your search" />;
-  }
+  useEffect(() => {
+    if (debouncedSearch) {
+      fetch(getSvgByQuery + debouncedSearch).then((res) => {
+        if (res.ok) {
+          res.json().then((data) => {
+            setResults(data);
+          });
+        }
+      });
+    }
+  }, [debouncedSearch]);
 
   const handleClear = () => {
     setSearch("");
+    setResults([]);
   };
 
   return (
@@ -29,14 +36,14 @@ const Search = () => {
         width="full"
         variant="flushed"
         size="lg"
-        placeholder="Search"
+        placeholder="Search svgs..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
       />
-      {data && data.length > 0 && (
+      {results && results.length > 0 && (
         <>
-          <HStack spacing={4} mt={4} overflowY="hidden">
-            {data.map((item: SVGCardProps) => (
+          <HStack spacing={4} mt={4} overflowX="auto" overflowY="hidden">
+            {results.map((item: SVGCardProps) => (
               <Tap key={item.title}>
                 <CustomLink href={`/svg/${item.id}`}>
                   <Box
@@ -61,11 +68,13 @@ const Search = () => {
               </Tap>
             ))}
           </HStack>
-          <CustomIconBtn
-            title="clear"
-            icon={<Trash size={16} />}
-            onClick={handleClear}
-          />
+          <Box p="3">
+            <CustomIconBtn
+              title="clear"
+              icon={<Trash size={16} />}
+              onClick={handleClear}
+            />
+          </Box>
         </>
       )}
     </>