felipemotarocha · AdysonVieira · Nov 14, 2023 · Nov 14, 2023 · Nov 14, 2023 · edusilva-dev
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,8 @@ import Header from "@/components/ui/header";
 import { AuthProvider } from "@/providers/auth";
 import Footer from "@/components/ui/footer";
 import CartProvider from "@/providers/cart";
+import Search from "@/components/ui/search";
+import SearchProvider from "@/providers/search";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -23,11 +25,14 @@ export default function RootLayout({
       <body className={inter.className}>
         <div className="flex h-full flex-col">
           <AuthProvider>
+            <SearchProvider>
             <CartProvider>
               <Header />
+              <Search />
               <div className="flex-1">{children}</div>
               <Footer />
             </CartProvider>
+            </SearchProvider>
           </AuthProvider>
         </div>
       </body>

diff --git a/src/app/product/[slug]/components/product-info.tsx b/src/app/product/[slug]/components/product-info.tsx
@@ -2,6 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import DiscountBadge from "@/components/ui/discount-badge";
+import { convertCurrencyToReal } from "@/helpers/convert-currency";
 import { ProductWithTotalPrice } from "@/helpers/product";
 import { CartContext } from "@/providers/cart";
 import { ArrowLeftIcon, ArrowRightIcon, TruckIcon } from "lucide-react";
@@ -34,7 +35,7 @@ const ProductInfo = ({ product }: ProductInfoProps) => {
 
       <div className="flex items-center gap-2">
         <h1 className="text-xl font-bold lg:text-3xl">
-          R$ {product.totalPrice.toFixed(2)}
+        {convertCurrencyToReal(product.totalPrice)}
         </h1>
         {product.discountPercentage > 0 && (
           <DiscountBadge className="lg:text-base">
@@ -45,7 +46,7 @@ const ProductInfo = ({ product }: ProductInfoProps) => {
 
       {product.discountPercentage > 0 && (
         <p className="text-sm line-through opacity-75 lg:text-base">
-          R$ {Number(product.basePrice).toFixed(2)}
+          {convertCurrencyToReal(Number(product.basePrice))}
         </p>
       )}
 

diff --git a/src/components/ui/cart-item.tsx b/src/components/ui/cart-item.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import { Button } from "./button";
 import { ArrowLeftIcon, ArrowRightIcon, TrashIcon } from "lucide-react";
 import { useContext } from "react";
+import { convertCurrencyToReal } from "@/helpers/convert-currency";
 
 interface CartItemProps {
   product: CartProduct;
@@ -48,11 +49,11 @@ const CartItem = ({ product }: CartItemProps) => {
 
           <div className="flex items-center gap-2">
             <p className="text-sm font-bold lg:text-base">
-              R$ {product.totalPrice.toFixed(2)}
+              {convertCurrencyToReal(product.totalPrice)}
             </p>
             {product.discountPercentage > 0 && (
               <p className="text-xs line-through opacity-75 lg:text-sm">
-                R$ {Number(product.basePrice).toFixed(2)}
+                {convertCurrencyToReal(Number(product.basePrice))}
               </p>
             )}
           </div>

diff --git a/src/components/ui/product-item.tsx b/src/components/ui/product-item.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import DiscountBadge from "./discount-badge";
 import { cn } from "@/lib/utils";
+import { convertCurrencyToReal } from "@/helpers/convert-currency";
 
 interface ProductItemProps {
   product: ProductWithTotalPrice;
@@ -39,16 +40,16 @@ const ProductItem = ({ product, className }: ProductItemProps) => {
           {product.discountPercentage > 0 ? (
             <>
               <p className="truncate font-semibold lg:text-lg">
-                R$ {product.totalPrice.toFixed(2)}
+                {convertCurrencyToReal(product.totalPrice)}
               </p>
 
               <p className="truncate text-xs line-through opacity-75 lg:text-sm">
-                R$ {Number(product.basePrice).toFixed(2)}
+                {convertCurrencyToReal(Number(product.basePrice))}
               </p>
             </>
           ) : (
             <p className="truncate text-sm font-semibold">
-              R$ {product.basePrice.toFixed(2)}
+              {convertCurrencyToReal(Number(product.basePrice))}
             </p>
           )}
         </div>

diff --git a/src/components/ui/search-bar.tsx b/src/components/ui/search-bar.tsx
@@ -0,0 +1,28 @@
+'use client'
+import useSearch from '@/hooks/use-search'
+import { SearchIcon } from 'lucide-react'
+import React, { ReactNode } from 'react'
+
+const SearchBar = ({children}: {children: ReactNode}) => {
+  const { search, onChange } = useSearch()
+
+  return (
+    <div className='p-5 w-full'>
+      <div className='bg-white rounded-md flex justify-between items-center px-5'>
+        <input
+          className='bg-transparent focus:outline-none py-2 w-[95%] text-secondary text-sm'
+          type="text"
+          id='search-bar'
+          name='search-bar'
+          value={search}
+          onChange={onChange}
+          spellCheck={false}
+        />
+        <SearchIcon color='#acacac' />
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export default SearchBar
diff --git a/src/components/ui/search-card-result.tsx b/src/components/ui/search-card-result.tsx
@@ -0,0 +1,41 @@
+'use client'
+import { ProductWithTotalPrice } from '@/helpers/product'
+import React from 'react'
+import Image from 'next/image'
+import { convertCurrencyToReal } from '@/helpers/convert-currency'
+import Link from 'next/link'
+import useSearch from '@/hooks/use-search'
+
+const SearchCardResult = ({ product }: {product: ProductWithTotalPrice | undefined}) => {
+  const { setSearch } =  useSearch()
+
+  if (!product) {
+    return null
+  }
+
+  return (
+    <Link
+      href={`/product/${product.slug}`}
+      onClick={() => setSearch('')}
+      key={product.id}
+      className='flex gap-4'>
+      <div className='bg-accent w-14 h-14 rounded-md flex items-center justify-center'>
+        <Image 
+          src={product.imageUrls[0]}
+          sizes='100vw'
+          alt={product.description}
+          width={0}
+          height={0}
+          className='w-10 h-10 aspect-square'
+          />
+      </div>
+      <div>
+        <p className='text-black opacity-70'>{product.name}</p>
+        <span className='text-primary font-bold text-md pr-2'>{convertCurrencyToReal(product.totalPrice)}</span>
+        <span className='text-black opacity-60 line-through text-xs'>{convertCurrencyToReal(Number(product.basePrice))}</span>
+      </div>
+    </Link>
+  )
+}
+
+export default SearchCardResult
diff --git a/src/components/ui/search-results.tsx b/src/components/ui/search-results.tsx
@@ -0,0 +1,43 @@
+'use client'
+import React from 'react'
+import { computeProductTotalPrice } from '@/helpers/product'
+import SearchCardResult from './search-card-result'
+import { Product } from '@prisma/client'
+import useSearch from '@/hooks/use-search'
+
+interface SearchResultsProps {
+  products: Product[]
+}
+
+const SearchResults = ({ products }: SearchResultsProps ) => {
+  const { deferredSearch } = useSearch();
+  const [filteredProducts, setFilteredProducts] = React.useState<Product[]>([])
+
+
+  React.useEffect(() => {
+    const filtered = products.filter((product) => product.name.toLowerCase().includes(deferredSearch.toLowerCase()) )
+    setFilteredProducts(filtered)
+  }, [deferredSearch, products])
+
+  if (!deferredSearch) return null
+
+  return (
+    <ul className='p-5 bg-slate-50 flex flex-col gap-5 absolute w-[calc(100%-2.5rem)] z-10 max-h-80 overflow-scroll top-16 left-5 box-border rounded-md [&::-webkit-scrollbar]:hidden'>
+      { 
+        deferredSearch && filteredProducts.length !== 0 ?
+        filteredProducts?.map((product) => (
+          <li key={product.id}>
+            <SearchCardResult product={computeProductTotalPrice(product)} />
+          </li>
+        ))
+        : <li>
+            <p className='text-accent text-sm font-semibold'>
+              {`Não encontramos nenhuma sugestão :(`}
+            </p>
+          </li>
+      }
+    </ul>
+  )
+}
+
+export default SearchResults
diff --git a/src/components/ui/search.tsx b/src/components/ui/search.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import SearchBar from './search-bar'
+import SearchResults from './search-results'
+import { prismaClient } from "@/lib/prisma";
+
+const Search = async () => {
+  const products = await prismaClient.product.findMany({})
+  console.log(products)
+  return (
+    <div className='flex flex-col relative'>
+        <SearchBar>
+          <SearchResults products={products}/>
+        </SearchBar>
+    </div>
+  )
+}
+
+export default Search
diff --git a/src/helpers/convert-currency.ts b/src/helpers/convert-currency.ts
@@ -0,0 +1,8 @@
+export const convertCurrencyToReal = (value: number) => {
+  return value.toLocaleString(
+    'pt-BR', {
+      style: 'currency',
+      currency: 'BRL'
+      }
+    )
+}
diff --git a/src/hooks/use-search.tsx b/src/hooks/use-search.tsx
@@ -0,0 +1,8 @@
+import React from "react"
+import { ISearch } from "@/providers/search"
+
+const useSearch = () => {
+  return React.useContext(ISearch)
+}
+
+export default useSearch
diff --git a/src/providers/search.tsx b/src/providers/search.tsx
@@ -0,0 +1,29 @@
+'use client'
+import React, { ReactNode, SetStateAction } from 'react'
+
+interface ISearchProps {
+  search: string | undefined
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  deferredSearch: string
+  setSearch: React.Dispatch<SetStateAction<string>>
+}
+
+export const ISearch = React.createContext({} as ISearchProps)
+
+const SearchProvider = ({ children }: { children: ReactNode }) => {
+  const [search, setSearch] = React.useState('')
+  const deferredSearch = React.useDeferredValue(search)
+
+  const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value)
+  }, [])
+
+  return (
+    <ISearch.Provider value={{search, onChange, deferredSearch, setSearch}}>
+      {children}
+    </ISearch.Provider>
+  )
+}
+
+export default SearchProvider
+