33. Clean Up the Project

JuanPabloDiaz · Dec 4, 2023 · eecd2ea · eecd2ea
1 parent 232735f
commit eecd2ea
Showing 1 changed file with 103 additions and 0 deletions.
diff --git a/_posts/platzi/2023-11-15-ecommerce-react-vite-tailwind.md b/_posts/platzi/2023-11-15-ecommerce-react-vite-tailwind.md
@@ -3640,14 +3640,117 @@ Styling is a part of both UI (User Interface) and UX (User Experience). From a U
 
 It's good practice to check if we are repeating code and clean up the project. Here is an example of code that we can clean.
 
+In other words, refactoring the code to avoid repetition its good practice.
+
+
 ### Modify the `Navbar` Component
 
+Refactor the code to avoid repetition by creating a new component for the navigation links.
+
 Located in `src/Components/Navbar/index.jsx`
 
 ```jsx
+import { NavLink } from "react-router-dom";
+import { useContext } from "react";
+import { AppContext } from "../../Context";
+import { HiOutlineShoppingCart } from "react-icons/hi";
+import { useScrollPosition } from "../../Utils/useScrollPosition";
 
+// refactored code to avoid repetition. activeStyle was getting repeated.
+const NavItem = ({ to, children, setSearchByCategory }) => {
+  const activeStyle = "underline text-gray-500 underline-offset-4";
+  return (
+    <li>
+      <NavLink
+        to={to}
+        className={({ isActive }) => (isActive ? activeStyle : undefined)}
+        onClick={() => setSearchByCategory && setSearchByCategory(to.slice(1))}
+      >
+        {children}
+      </NavLink>
+    </li>
+  );
+};
+
+const Navbar = () => {
+  const context = useContext(AppContext);
+
+  function classNamesNavBarScroll(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+
+  const scrollPosition = useScrollPosition();
+  // console.log(scrollPosition);
+
+  return (
+    <header
+      className={classNamesNavBarScroll(
+        scrollPosition > 0
+          ? "md:shadow md:bg-white md:-translate-y-6 md:h-auto"
+          : "md:shadow-none md:bg-none md:translate-y-0 md:h-none",
+        "absolute md:fixed top-2 inset-x-0 z-40 md:transition-shadow-xl md:shadow-black md:transition-color duration-500 md:-translate-y-6 md:h-20 lg:h-14"
+      )}
+    >
+      <nav className="hidden sm:flex flex-col sm:flex-row justify-between items-center fixed z-10 w-full py-5 px-8 text-md font-light top-0">
+        <ul className="flex flex-col sm:flex-row items-center gap-3">
+          <li className="font-semibold text-lg">
+            <NavLink to="/" onClick={() => context.setSearchByCategory(null)}>
+              Shopi
+            </NavLink>
+          </li>
+          <NavItem to="/" setSearchByCategory={context.setSearchByCategory}>
+            All
+          </NavItem>
+          <NavItem
+            to="/clothes"
+            setSearchByCategory={context.setSearchByCategory}
+          >
+            Clothes
+          </NavItem>
+          <NavItem
+            to="/electronics"
+            setSearchByCategory={context.setSearchByCategory}
+          >
+            Electronics
+          </NavItem>
+          <NavItem
+            to="/furnitures"
+            setSearchByCategory={context.setSearchByCategory}
+          >
+            Furnitures
+          </NavItem>
+          <NavItem to="/toys" setSearchByCategory={context.setSearchByCategory}>
+            Toys
+          </NavItem>
+        </ul>
+
+        <ul className="hidden sm:flex items-center gap-3">
+          <NavItem to="/my-orders">My Orders</NavItem>
+          <NavItem to="/sign-in">Sign In</NavItem>
+          <NavItem to="/my-account">My Account</NavItem>
+          <li>
+            <NavLink
+              to="/card"
+              className={`flex justify-center items-center ${({ isActive }) =>
+                isActive ? activeStyle : undefined}`}
+            >
+              <HiOutlineShoppingCart className="mr-1" />
+              <p>{context.cartProducts.length}</p>
+            </NavLink>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+};
+
+export default Navbar;
 ```
 
+> In this refactored code, a new NavItem component is created which encapsulates the repeated NavLink code. The NavItem component takes a to prop for the link, children for the link text, and an optional setSearchByCategory function. If setSearchByCategory is provided, it will be called with the category name when the link is clicked.
+
+> Notice that the "Shopi" item has its own unique styles and does not share the same styles as the other NavItem components, you can directly use the NavLink component for it instead of the NavItem component.
+