Merge pull request #183 from Actualiza-Tu-Carro/fixBugs

Fix bugs
Dium-dev · Oct 23, 2023 · 15cfec5 · 15cfec5
2 parents 0430e7c + ac03293
commit 15cfec5
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 43 deletions.
diff --git a/src/app/container_page.tsx b/src/app/container_page.tsx
@@ -29,7 +29,7 @@ export function ContainerPage({
       <main className="min-h-screen overflow-hidden mx-auto">
         {pathname !== '/' && <Categories />}
         {pathname === '/products' ? (
-          <section className="w-full h-full flex flex-col items-start justify-between p-1 md:p-10 md:gap-x-5 gap-y-6 md:gap-y-0">
+          <section className="w-full h-full flex flex-col items-start justify-between md:gap-x-5 gap-y-6 md:gap-y-0">
             <ContainerProducts />
             <PaginationProducts />
             <TopSellers />

diff --git a/src/components/containerCards/containerCards.tsx b/src/components/containerCards/containerCards.tsx
@@ -8,7 +8,7 @@ export function TopSellers() {
   const products = productos.slice(0, 10);
 
   return (
-    <div className="my-8">
+    <div className="my-8 w-full">
       <div className="grid place-content-center bg-[#13131D] text-white border-b-4 border-b-[#ff0000] py-5 mb-6">
         <h2 className="text-2xl">Lo más vendidos</h2>
       </div>
@@ -17,6 +17,7 @@ export function TopSellers() {
           const { title, id, price, image } = producto;
           return (
             <ProductCard
+              id={id}
               key={id}
               title={title}
               price={price}

diff --git a/src/components/filters/index.tsx b/src/components/filters/index.tsx
@@ -98,7 +98,7 @@ const Filters = () => {
                 key={category.id}
                 onClick={() => {
                   updateBody('categoryId', category.id)
-                  products.length ? updateBody('page', 1) : updateBody('page', 0)
+                  products.length && updateBody('page', 1);
                 }}
               >
                 <BiCategoryAlt/>
@@ -126,7 +126,7 @@ const Filters = () => {
                 key={brand.id}
                 onClick={() => {
                   updateBody('brandId', brand.id)
-                  products.length ? updateBody('page', 1) : updateBody('page', 0)
+                  products.length && updateBody('page', 1);
                 }}
               >
                 <AiOutlineCar/>

diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx
@@ -1,11 +1,10 @@
 'use client';
 import Image from 'next/image';
-import React, { FC, useState, useRef } from 'react';
+import React, { FC, useState } from 'react';
 import Link from 'next/link';
 import { Images } from '~/assets/img';
 import Icon from '~/assets/icons/icon';
 import MenuMobile from './MenuMobile';
-import { InputField } from '../inputs/InputField';
 import { ThemeModeButton } from '../ThemeMode';
 import { MainButton } from '../button/button';
 import { useFlagState } from '~/hooks/useFlagState';
@@ -21,23 +20,27 @@ const NavBar: FC<NavBarProps> = ({}) => {
   const [isOpenMenu, setIsOpenMenu] = useState(false);
   const [flagState, updateState] = useFlagState(false);
 
-  const searchBarRef = useRef<HTMLInputElement>(null);
-
   const toggleNavbar = () => {
     setIsOpenMenu(!isOpenMenu);
   };
   const updateBody = useProductStore((state) => state.updateBody);
   const products = useProductStore((state) => state.products);
 
   const clearSearchBar = () => {
-    if (searchBarRef.current) {
-      searchBarRef.current.value = ''; // Clear the input value
+    const searchBar: HTMLInputElement | null | HTMLElement =
+      document.getElementById('searchBar');
+    if (searchBar !== null && searchBar instanceof HTMLInputElement) {
+      searchBar.value = '';
     }
   };
-  const pathname = usePathname()
+  const pathname = usePathname();
   return (
     <nav>
-      <div className={`z-50 fixed top-0 bg-opacity-70 bg-white w-full backdrop-blur-sm flex-col ${pathname !== '/' ? 'shadow-none' : 'shadow-md'}`}>
+      <div
+        className={`z-50 fixed top-0 bg-opacity-70 bg-white w-full backdrop-blur-sm flex-col ${
+          pathname !== '/' ? 'shadow-none' : 'shadow-md'
+        }`}
+      >
         <div className="p-4 flex items-center h-[60px] justify-between mx-auto">
           {/* Contenedor lado izquierdo menu hamburguesa-imagenes*/}
           <div className="flex items-center gap-2">
@@ -83,26 +86,22 @@ const NavBar: FC<NavBarProps> = ({}) => {
               <BiSearch size={22} />
               <input
                 id="searchBar"
-                ref={searchBarRef}
                 type="text"
-                placeholder='Buscar productos'
+                placeholder="Buscar productos"
                 className="w-full py-1.5 px-3 outline-none rounded-md text-secondary-dm"
                 onChange={(event) => {
                   updateBody('name', event.target.value);
-                  products.length
-                    ? updateBody('page', 1)
-                    : updateBody('page', 0);
+                  products.length && updateBody('page', 1);
                 }}
-                disabled={!products.length}
               />
               <span
                 onClick={() => {
                   updateBody('name', '');
                   clearSearchBar();
                 }}
-                className='cursor-pointer'
+                className="cursor-pointer"
               >
-                <AiOutlineClose size={21}/>
+                <AiOutlineClose size={21} />
               </span>
             </div>
           </div>
@@ -125,29 +124,25 @@ const NavBar: FC<NavBarProps> = ({}) => {
         {/* Input mobile*/}
         <div className="md:hidden flex items-center justify-center px-2 py-1 rounded-lg mx-auto w-5/6 bg-white">
           <BiSearch size={22} />
-              <input
-                id="searchBar"
-                ref={searchBarRef}
-                type="text"
-                placeholder='Buscar productos'
-                className="w-full py-1.5 px-3 outline-none rounded-md text-secondary-dm"
-                onChange={(event) => {
-                  updateBody('name', event.target.value);
-                  products.length
-                    ? updateBody('page', 1)
-                    : updateBody('page', 0);
-                }}
-                disabled={!products.length}
-              />
-              <span
-                onClick={() => {
-                  updateBody('name', '');
-                  clearSearchBar();
-                }}
-                className='cursor-pointer'
-              >
-                <AiOutlineClose size={21}/>
-              </span>
+          <input
+            id="searchBar"
+            type="text"
+            placeholder="Buscar productos"
+            className="w-full py-1.5 px-3 outline-none rounded-md text-secondary-dm"
+            onChange={(event) => {
+              updateBody('name', event.target.value);
+              products.length && updateBody('page', 1);
+            }}
+          />
+          <span
+            onClick={() => {
+              updateBody('name', '');
+              clearSearchBar();
+            }}
+            className="cursor-pointer"
+          >
+            <AiOutlineClose size={21} />
+          </span>
         </div>
       </div>
       <div>