fix code

mate-academy · Aug 7, 2023 · 019143f · 019143f
1 parent ac5572a
commit 019143f
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 35 deletions.
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
@@ -1,27 +1,25 @@
 import {
-  useCallback,
-  useRef,
+  useEffect,
   useState,
 } from 'react';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import { AppDispatch, RootState } from './store';
 
 // eslint-disable-next-line
-export function useDebounce<T extends (...args: any[]) => void>(callback: T, delay: number) : (...args: Parameters<T>) => void {
-  const timer = useRef<NodeJS.Timeout | undefined>();
-
-  return useCallback(
-    (...args: Parameters<T>) => {
-      if (timer.current) {
-        clearTimeout(timer.current);
-      }
-
-      timer.current = setTimeout(() => {
-        callback(...args);
-      }, delay);
-    },
-    [callback, delay],
-  );
+export function useDebounceValue(value: string, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
 }
 
 export function useLocaleStorage<T>(

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -13,7 +13,9 @@ import {
 import {
   useAppDispatch,
   useAppSelector,
-  useDebounce,
+
+  useDebounceValue,
+
   useLocaleStorage,
 } from '../../app/hooks';
 import { basketItems, favoriteItems } from '../../app/store';
@@ -39,10 +41,12 @@ const App = () => {
   const [menu, setMenu] = useState(false);
   const [searchValue, setSearchValue]
     = useState(searchParams.get('query') || '');
+  const debouncedValue = useDebounceValue(searchValue, 2000);
 
   const query = searchParams.get('query') || '';
 
   const refMenu = useRef<HTMLElement>(null);
+  const refBtnMenu = useRef<HTMLButtonElement>(null);
   const favoriteProduct = useAppSelector(favoriteItems);
   const basketProduct = useAppSelector(basketItems);
 
@@ -75,8 +79,6 @@ const App = () => {
     setSearchParams(searchParams);
   };
 
-  const debounceQuery = useDebounce(querySearch, 2000);
-
   const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target.value);
   };
@@ -88,8 +90,8 @@ const App = () => {
   };
 
   useEffect(() => {
-    debounceQuery(searchValue);
-  }, [searchValue]);
+    querySearch(debouncedValue);
+  }, [debouncedValue]);
 
   useEffect(() => {
     dispatch(addAllFavorite(favorite));
@@ -98,7 +100,8 @@ const App = () => {
 
   useEffect(() => {
     const handleOutClickMenu = (e: MouseEvent) => {
-      if (refMenu.current && !refMenu.current.contains(e.target as Node)) {
+      if (refMenu.current && !refMenu.current.contains(e.target as Node)
+      && refBtnMenu.current && !refBtnMenu.current.contains(e.target as Node)) {
         setMenu(false);
       }
     };
@@ -241,6 +244,7 @@ const App = () => {
             onClick={() => setMenu(!menu)}
             type="button"
             aria-label="btn"
+            ref={refBtnMenu}
           />
         </div>
       </header>
@@ -327,7 +331,7 @@ const App = () => {
             />
             <Route path="/home" element={<Navigate to="/" replace />} />
 
-            <Route path="phones">
+            <Route path="/phones">
               <Route
                 index
                 element={(
@@ -344,7 +348,7 @@ const App = () => {
               />
             </Route>
 
-            <Route path="tablets">
+            <Route path="/tablets">
               <Route
                 index
                 element={(
@@ -361,7 +365,7 @@ const App = () => {
               />
             </Route>
 
-            <Route path="accessories">
+            <Route path="/accessories">
               <Route
                 index
                 element={(
@@ -379,13 +383,13 @@ const App = () => {
             </Route>
 
             <Route
-              path="favorites"
+              path="/favorites"
               element={
                 <ProductsList query={query} />
               }
             />
 
-            <Route path="cart" element={<PageCart />} />
+            <Route path="/cart" element={<PageCart />} />
           </Routes>
         </div>
       </main>

diff --git a/src/components/BlockBuyBtn/BlockBuyBtn.tsx b/src/components/BlockBuyBtn/BlockBuyBtn.tsx
@@ -67,6 +67,7 @@ export const BlockBuyBtn: React.FC<Props> = ({ item }) => {
         {basket.some((i) => i.id === item.id) ? 'Selected' : 'Add to cart'}
         {findProduct
           && Object.hasOwnProperty.call(findProduct, 'quantity')
+          && findProduct.quantity > 1
           ? `(${findProduct.quantity})`
           : ''}
       </button>

diff --git a/src/components/PageCart/PageCart.tsx b/src/components/PageCart/PageCart.tsx
@@ -76,7 +76,7 @@ export const PageCart = () => {
 
         <button
           className="breadcrumbs__go-back"
-          onClick={() => handGoBack()}
+          onClick={handGoBack}
           type="button"
         >
           Back

diff --git a/src/components/ProductList/ProductsList.scss b/src/components/ProductList/ProductsList.scss
@@ -139,3 +139,9 @@
     color: $Grey;
   }
 }
+
+.main {
+  &__not-found {
+    height: calc(100vh - 185px);
+  }
+}
diff --git a/src/components/ProductList/ProductsList.tsx b/src/components/ProductList/ProductsList.tsx
@@ -27,6 +27,7 @@ export const ProductsList: React.FC<Props> = ({ query }) => {
 
   const [items, setItems] = useState<Product[]>([]);
   const [visibleProd, setVisibleProd] = useState<Product[]>([]);
+  const [filterProducts, setFilterProducts] = useState<Product[]>([]);
 
   const { favoriteItem } = useAppSelector(favoriteItems);
 
@@ -107,6 +108,8 @@ export const ProductsList: React.FC<Props> = ({ query }) => {
     const filterProduct = cloneP
       .filter((c) => c.name.toLowerCase().includes(query.toLowerCase()));
 
+    setFilterProducts(filterProduct);
+
     const sortedProducts = filterProduct.sort((p1, p2) => {
       switch (sort.toLowerCase()) {
         case 'newest':
@@ -202,7 +205,11 @@ export const ProductsList: React.FC<Props> = ({ query }) => {
   }
 
   return (
-    <>
+    <div
+      className={
+        classNames({ 'main__not-found': visibleProd.length === 0 })
+      }
+    >
       <div className="breadcrumbs">
         <Link to="/home" className="breadcrumbs__home" />
         <span className="breadcrumbs__arrow" />
@@ -258,7 +265,7 @@ export const ProductsList: React.FC<Props> = ({ query }) => {
               ))}
             </ul>
           </div>
-          {perPage !== 'All' && +perPage < items.length && (
+          {perPage !== 'All' && +perPage < filterProducts.length && (
             <div className="mobiel__pagination pagination">
               <ul className="pagination__list">
                 <li className="pagination__item">
@@ -302,6 +309,6 @@ export const ProductsList: React.FC<Props> = ({ query }) => {
       ) : (
         <h1 className="page__title">Product not found</h1>
       )}
-    </>
+    </div>
   );
 };
diff --git a/src/components/ProductPage/ProductPage.tsx b/src/components/ProductPage/ProductPage.tsx
@@ -43,13 +43,15 @@ export const ProductPage = () => {
   useEffect(() => {
     getProducts()
       .then(prod => setAllProducts(prod));
+  }, []);
 
+  useEffect(() => {
     getItemProduct(id)
       .then(prod => {
         setProduct(prod);
         setActiveImg(prod.images[0]);
       });
-  }, []);
+  }, [id]);
 
   const nextImg = (img: string, arr: string[]) => {
     const checked = arr.findIndex(imges => imges === img) === arr.length - 1;
@@ -92,15 +94,15 @@ export const ProductPage = () => {
         <span className="breadcrumbs__arrow" />
 
         {arrLocation.map(l => (
-          <>
+          <span key={l}>
             <Link to={{ pathname: `/${l}` }} className="breadcrumbs__location">
               {l.slice(0, 1).toUpperCase() + l.slice(1)}
             </Link>
 
             {l !== arrLocation[arrLocation.length - 1] && (
               <span className="breadcrumbs__arrow" />
             )}
-          </>
+          </span>
         ))}
       </div>