Skip to content

Commit

Permalink
Separate responsibilities between App and Navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@afsaa
afsaa committed Aug 27, 2024
1 parent 2bc49bc commit b8d21b0
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 103 deletions.
55 changes: 41 additions & 14 deletions src/components/Navbar/navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,36 @@
import { useAppStore } from '@/store';
import { NavigationLinks, toggleDarkMode } from '@/utils';
import { useState } from 'react';
import { NavLink } from 'react-router-dom';
import { NavbarProps } from './navbar.type';

const Navbar = ({ links, cartCount, handleShowCartFromNavbar, setCategoryQuery, toggleDarkMode, toggleMenu, toggleMenuHandler }: NavbarProps): JSX.Element => {
const Navbar = (): JSX.Element => {
const navLinks = NavigationLinks();
const activeStyle: string = 'underline underline-offset-4';

// Toggle Menu
const [toggleMenu, setToggleMenu] = useState<boolean>(false);

const setCategoryQuery: (query: string) => void = useAppStore((state) => state.setCategoryQuery);

// Dark Mode
const isDarkModeOn: boolean = useAppStore((state) => state.isDarkModeOn);
const setDarkMode: () => void = useAppStore((state) => state.setDarkMode);
const handleToggleDarkMode = () => {
toggleDarkMode(!isDarkModeOn);
setDarkMode();
};

// Cart
const setShowCart = useAppStore((state) => state.setShowCart);
const shoppingCartCount = useAppStore((state) => state.shoppingCartCount);
const handleShowCart = () => {
setShowCart(true);
setShowProductDetail(false);
};

// Product Detail
const setShowProductDetail: (show: boolean) => void = useAppStore((state) => state.setShowProductDetail);

return (
<nav className="relative md:static flex items-center justify-between z-10 top-0 w-full py-5 px-8 text-sm font-light bg-white dark:bg-slate-800">
<div className={`w-full md:flex hidden justify-around items-center bg-white/75 dark:bg-slate-800/75`}>
Expand All @@ -13,10 +40,10 @@ const Navbar = ({ links, cartCount, handleShowCartFromNavbar, setCategoryQuery,
Watt a Shop
</NavLink>
</li>
{links.map((link) => (
{navLinks.map((navLink) => (
<li key={crypto.randomUUID()}>
<NavLink to={link.href} onClick={() => setCategoryQuery(link.href.replace('/', '').replace('-', ' '))} className={link.className}>
{link.label}
<NavLink to={navLink.href} onClick={() => setCategoryQuery(navLink.href.replace('/', '').replace('-', ' '))} className={navLink.className}>
{navLink.label}
</NavLink>
</li>
))}
Expand Down Expand Up @@ -46,18 +73,18 @@ const Navbar = ({ links, cartCount, handleShowCartFromNavbar, setCategoryQuery,
strokeWidth={1.5}
stroke="currentColor"
className="h-6 w-6 text-black dark:text-white cursor-pointer"
onClick={handleShowCartFromNavbar}
onClick={handleShowCart}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
/>
</svg>
<div className="text-lg">{cartCount}</div>
<div className="text-lg">{shoppingCartCount}</div>
</li>
<li>
<button onClick={() => toggleDarkMode()}>
<button onClick={() => handleToggleDarkMode()}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 text-black dark:text-white">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
Expand All @@ -77,10 +104,10 @@ const Navbar = ({ links, cartCount, handleShowCartFromNavbar, setCategoryQuery,
Watt a Shop
</NavLink>
</li>
{links.map((link) => (
{navLinks.map((navLink) => (
<li key={crypto.randomUUID()}>
<NavLink to={link.href} onClick={() => setCategoryQuery(link.href.replace('/', '').replace('-', ' '))} className={link.className}>
{link.label}
<NavLink to={navLink.href} onClick={() => setCategoryQuery(navLink.href.replace('/', '').replace('-', ' '))} className={navLink.className}>
{navLink.label}
</NavLink>
</li>
))}
Expand Down Expand Up @@ -110,10 +137,10 @@ const Navbar = ({ links, cartCount, handleShowCartFromNavbar, setCategoryQuery,
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
/>
</svg>
<div className="text-lg">{cartCount}</div>
<div className="text-lg">{shoppingCartCount}</div>
</li>
<li>
<button onClick={() => toggleDarkMode()}>
<button onClick={() => handleToggleDarkMode()}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 text-black dark:text-white">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
Expand All @@ -122,7 +149,7 @@ const Navbar = ({ links, cartCount, handleShowCartFromNavbar, setCategoryQuery,
</ul>
</div>

<div className="md:hidden cursor-pointer" onClick={() => toggleMenuHandler()}>
<div className="md:hidden cursor-pointer" onClick={() => setToggleMenu(!toggleMenu)}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-black dark:text-white">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
Expand Down
98 changes: 9 additions & 89 deletions src/pages/App/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import { Cart, Navbar, ProductDetail } from '@/components';
import { useEffect, useState } from 'react';
import { BrowserRouter, useRoutes } from 'react-router-dom';
import { Layout } from '../../components';
import { NavbarLink } from '../../components/Navbar/navbar.type';
import { useAppStore } from '../../store';
import { Order, Product } from '../../store/store.types';
import { checkMode, toggleDarkMode } from '../../utils';
import CurrentOrder from '../CurrentOrder';
import Home from '../Home';
import MyAccount from '../MyAccount';
import MyOrders from '../MyOrders';
import NotFound from '../NotFound';
import SignIn from '../SignIn';
import { Cart, Layout, Navbar, ProductDetail } from '@/components';
import { AppRoutes } from '@/routes';
import { useAppStore } from '@/store';
import { Order, Product } from '@/store/store.types';
import { checkMode } from '@/utils';
import { useEffect } from 'react';
import { BrowserRouter } from 'react-router-dom';

function App(): JSX.Element {
const showCart = useAppStore((state) => state.showCart);
Expand All @@ -27,13 +20,10 @@ function App(): JSX.Element {
const setTitleQuery = useAppStore((state) => state.setTitleQuery);
const removeProductFromCart = useAppStore((state) => state.removeProductFromCart);
const decreaseShoppingCartCount = useAppStore((state) => state.decreaseShoppingCartCount);
const setCategoryQuery: (query: string) => void = useAppStore((state) => state.setCategoryQuery);
const isDarkModeOn: boolean = useAppStore((state) => state.isDarkModeOn);

const showProductDetail: boolean = useAppStore((state) => state.showProductDetail);
const setShowProductDetail: (show: boolean) => void = useAppStore((state) => state.setShowProductDetail);
const currentProduct = useAppStore((state) => state.currentProduct);
const setDarkMode: () => void = useAppStore((state) => state.setDarkMode);
const [toggleMenu, setToggleMenu] = useState<boolean>(false);

const handleCheckout = () => {
const randomId: string = crypto.randomUUID();
Expand All @@ -58,84 +48,14 @@ function App(): JSX.Element {
decreaseShoppingCartCount(1);
};

const handleToggleDarkMode = () => {
toggleDarkMode(!isDarkModeOn);
setDarkMode();
};

const handleToggleMenu = () => {
setToggleMenu(!toggleMenu);
};

const handleShowCartFromNavbar = () => {
setShowCart(true);
setShowProductDetail(false);
};

useEffect(() => {
checkMode();
return () => {};
}, []);

const AppRoutes = (): React.ReactElement | null => {
const routes = useRoutes([
{ path: '/', element: <Home /> },
{ path: '/:category', element: <Home /> },
{ path: '/my-account', element: <MyAccount /> },
{ path: '/my-orders', element: <MyOrders /> },
{ path: '/my-orders/:id', element: <CurrentOrder /> },
{ path: '/sign-in', element: <SignIn /> },
{ path: '/*', element: <NotFound /> },
]);

return routes;
};

const NavigationLinks = (): NavbarLink[] => {
const activeStyle: string = 'underline underline-offset-4';

const navigationLinks: NavbarLink[] = [
{
label: 'All',
href: '/',
className: ({ isActive }) => (isActive ? activeStyle : undefined),
},
{
label: 'Electronics',
href: '/electronics',
className: ({ isActive }) => (isActive ? activeStyle : undefined),
},
{
label: 'Jewelery',
href: '/jewelery',
className: ({ isActive }) => (isActive ? activeStyle : undefined),
},
{
label: "Men's clothing",
href: "/men's-clothing",
className: ({ isActive }) => (isActive ? activeStyle : undefined),
},
{
label: "Women's clothing",
href: "/women's-clothing",
className: ({ isActive }) => (isActive ? activeStyle : undefined),
},
];
return navigationLinks;
};

return (
<BrowserRouter>
<Navbar
links={NavigationLinks()}
cartCount={shoppingCartCount}
handleShowCartFromNavbar={handleShowCartFromNavbar}
isDarkMode={isDarkModeOn}
toggleDarkMode={handleToggleDarkMode}
setCategoryQuery={setCategoryQuery}
toggleMenu={toggleMenu}
toggleMenuHandler={handleToggleMenu}
/>
<Navbar />
<Layout>
<AppRoutes />
</Layout>
Expand Down

0 comments on commit b8d21b0

Please sign in to comment.