added updates

src/Routes/Route.tsx

@@ -9,13 +9,17 @@ import { CardPage } from '../pages/CardPage';
 import { FavoritePage } from '../pages/FavoritePage';
 import { CartPage } from '../pages/CartPage';
 import { NotFoundPage } from '../pages/NotFoundPage';
+import { TabletsPage } from '../pages/TabletsPage';
+import { AccessoriesPage } from '../pages/AccessoriesPage';
 
 export const AppRoutes = () => {
   return (
     <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/phones" element={<PhonesPage />} />
       <Route path="/phones/:id" element={<CardPage />} />
+      <Route path="/tablets" element={<TabletsPage />} />
+      <Route path="/accessories" element={<AccessoriesPage />} />
       <Route path="/favorites" element={<FavoritePage />} />
       <Route path="/cart" element={<CartPage />} />
       <Route path="*" element={<NotFoundPage />} />

src/api/getData.tsx

@@ -6,6 +6,10 @@ export const getProducts = async () => {
   return client.get<Product[]>('/products.json');
 };
 
+export const getTablets = async () => {
+  return client.get<Product[]>('/products.json');
+};
+
 export const getDescription = async (id: string) => {
   return client.get<ProductInfo>(`/products/${id}.json`);
 };

src/components/Banner.tsx

@@ -44,6 +44,14 @@ export const Banner = () => {
     });
   };
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      handleBannerScroll(1);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   useEffect(() => {
     const dots = document.querySelector('.banner__dots');
 

src/components/Catalog.tsx

@@ -1,5 +1,5 @@
 import { Product } from '../types/Product';
-import { Card } from './Card';
+import { Card } from './ProductCard';
 
 type Props = {
   catalog: Product[],

src/components/Dropdown.tsx

@@ -6,11 +6,11 @@ import { SearchLink } from './SearchLink';
 const sortByCategories = [
   'Default',
   'Newest',
-  'Lowest Price',
-  'Highest Price',
+  'Alphabetically',
+  'Cheapest',
 ];
 
-const itemsOnPage = [8, 12, 16, 24];
+const itemsOnPage = [4, 8, 16, 'All'];
 
 type Props = {
   type: string,
@@ -24,7 +24,7 @@ export const Dropdown:React.FC<Props> = ({
   const [searchParams] = useSearchParams();
   const params = isSortBy
     ? searchParams.get(type) || 'Default'
-    : parseInt(searchParams.get(type) || '12', 10);
+    : searchParams.get(type) || '8';
 
   const title = isSortBy ? 'Sort By' : 'Items on page';
   const category = isSortBy ? sortByCategories : itemsOnPage;

src/components/Footer.tsx

@@ -1,4 +1,9 @@
-import { Link, NavLink } from 'react-router-dom';
+import classNames from 'classnames';
+import { NavLink } from 'react-router-dom';
+
+const linkClassNames = (
+  { isActive } : { isActive : boolean },
+) => classNames('footer__link text__uppercase', { active: isActive });
 
 export const Footer = () => {
   const scrollToTop = () => {
@@ -12,15 +17,18 @@ export const Footer = () => {
       </div>
 
       <div className="footer__centre">
-        <Link className="text__uppercase" to="/github">
+        <NavLink
+          className={linkClassNames}
+          to="https://github.com/ihorivna007/react_phone-catalog/tree/develop"
+        >
           github
-        </Link>
-        <Link className="text__uppercase" to="/contacts">
+        </NavLink>
+        <NavLink className={linkClassNames} to="/contacts">
           contacts
-        </Link>
-        <Link className="text__uppercase" to="/rights">
+        </NavLink>
+        <NavLink className={linkClassNames} to="/rights">
           rights
-        </Link>
+        </NavLink>
       </div>
 
       <div className="footer__right">

src/components/Header.tsx

@@ -15,11 +15,12 @@ const iconClassNames = (
 ) => classNames('header__icon', { active: isActive });
 
 const headerLinks = ['home', 'phones', 'tablets', 'accessories'];
+const pageWithSearchBar = ['/phones', '/tablets', '/accessories', '/favorites'];
 
 export const Header:React.FC = () => {
   const { pathname } = useLocation();
   const searchBarIsPresent
-    = pathname === '/phones' || pathname === '/favorites';
+    = pageWithSearchBar.includes(pathname);
   const cartIsActive = pathname === '/cart';
 
   const menuIsPresent = pathname === '/';

src/components/Menu.tsx

@@ -6,6 +6,8 @@ type Props = {
 };
 const headerLinks = ['home', 'phones', 'tablets', 'accessories'];
 const footerLinks = ['github', 'contacts', 'rights'];
+const githubLink
+  = 'https://github.com/ihorivna007/react_phone-catalog/tree/develop';
 
 export const Menu:React.FC<Props> = ({ isMenuOpened }) => (
   <div className="menu">
@@ -30,7 +32,7 @@ export const Menu:React.FC<Props> = ({ isMenuOpened }) => (
         <NavLink
           key={link}
           className="text__uppercase"
-          to={`/${link}`}
+          to={link === 'github' ? githubLink : `/${link}`}
         >
           {link}
         </NavLink>

src/components/NoResults.tsx

@@ -0,0 +1,13 @@
+type Props = {
+  category: string,
+};
+
+export const NoResults:React.FC<Props> = ({ category }) => {
+  const title = category.slice(0, 1).toUpperCase() + category.slice(1);
+
+  return (
+    <div className="page__not-found">
+      <h3>{`${title} not found`}</h3>
+    </div>
+  );
+};

src/components/ItemsSlider.tsx → src/components/ProductsSlider.tsx

@@ -1,15 +1,15 @@
 import { useState } from 'react';
 import FadeLoader from 'react-spinners/FadeLoader';
 import { Product } from '../types/Product';
-import { Card } from './Card';
+import { Card } from './ProductCard';
 
 type Props = {
   title: string,
   itemsList: Product[],
   isLoading: boolean,
 };
 
-export const ItemsSlider:React.FC<Props> = ({
+export const ProductsSlider: React.FC<Props> = ({
   title,
   itemsList,
   isLoading,

src/components/SearchBar.tsx

@@ -15,6 +15,9 @@ export const SearchBar: React.FC<Props> = ({ category }) => {
       { query: event.target.value || null }));
   };
 
+  const mobileVersion = window.innerWidth <= 768;
+  const placeholder = mobileVersion ? 'on page' : `in ${category}`;
+
   const clearQuery = () => {
     setSearchParams(getSearchWith(searchParams, { query: '' }));
   };
@@ -24,7 +27,7 @@ export const SearchBar: React.FC<Props> = ({ category }) => {
       <input
         className="header__search__input"
         type="text"
-        placeholder={`Search in ${category}...`}
+        placeholder={`Search ${placeholder}...`}
         onChange={handleSearchBar}
         value={query}
       />
@@ -35,9 +38,7 @@ export const SearchBar: React.FC<Props> = ({ category }) => {
           className="icon icon--close close-button"
           onClick={clearQuery}
         />
-      ) : (
-        window.innerWidth > 768 && <p className="icon icon--search" />
-      )}
+      ) : <p className="icon icon--search" />}
     </div>
   );
 };

src/helpers/cartTab.tsx

@@ -23,5 +23,9 @@ export const cartListAdded = (cartId: string) => {
 };
 
 export const checkIsSelected = (id: string) => {
-  return !!findItem(selectedList, id);
+  if (selectedList.length > 0) {
+    return !!findItem(selectedList, id);
+  }
+
+  return false;
 };

src/pages/AccessoriesPage.tsx

@@ -0,0 +1,5 @@
+import { ProductsPage } from './ProductsPage';
+
+export const AccessoriesPage: React.FC = () => (
+  <ProductsPage title="Accessories" category="accessories" />
+);

src/pages/CardPage.tsx

@@ -8,7 +8,7 @@ import { Product } from '../types/Product';
 import { ProductInfo } from '../types/ProductInfo';
 import { customColors } from '../helpers/customColors';
 
-import { ItemsSlider } from '../components/ItemsSlider';
+import { ProductsSlider } from '../components/ProductsSlider';
 import { Navigation } from '../components/Navigation';
 import { HistoryBackButton } from '../components/HistoryBackButton';
 import { FavoriteButton } from '../components/FavoriteButton';
@@ -273,7 +273,7 @@ export const CardPage: React.FC = () => {
               </div>
             </div>
           </section>
-          <ItemsSlider
+          <ProductsSlider
             title="You may also like"
             itemsList={properties.filter(item => item.id !== currentProduct.id)}
             isLoading={false}

src/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { getProducts } from '../api/getData';
 import { Product } from '../types/Product';
-import { ItemsSlider } from '../components/ItemsSlider';
+import { ProductsSlider } from '../components/ProductsSlider';
 import { Banner } from '../components/Banner';
 import { Category } from '../components/Category';
 
@@ -45,15 +45,15 @@ export const HomePage: React.FC = () => {
     <main className="page">
       <Banner />
 
-      <ItemsSlider
+      <ProductsSlider
         title="Hot price"
         itemsList={hotPriceList}
         isLoading={isLoading}
       />
 
       <Category />
 
-      <ItemsSlider
+      <ProductsSlider
         title="Brand new models"
         itemsList={newModelsList}
         isLoading={isLoading}

src/pages/NotFoundPage.tsx

@@ -4,7 +4,7 @@ export const NotFoundPage = () => (
   <div>
     <Navigation />
     <div className="page">
-      <h2>Not Found Page</h2>
+      <h1>Page not found</h1>
     </div>
   </div>
 );