Component compound

package.json

@@ -12,7 +12,7 @@
     "@types/react-dom": "^17.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.6.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

src/02-components-patterns/components/ProductButtons.tsx

@@ -0,0 +1,19 @@
+import { useContext } from "react";
+import styles from "../../02-components-patterns/styles/styles.module.css";
+import { ProductContext } from "./ProductCard";
+
+export const ProductButtons = () => {
+  const { increaseBy, counter } = useContext(ProductContext);
+
+  return (
+    <div className={styles.buttonsContainer}>
+      <button onClick={() => increaseBy(-1)} className={styles.buttonMinus}>
+        -
+      </button>
+      <div className={styles.countLabel}>{counter}</div>
+      <button onClick={() => increaseBy(1)} className={styles.buttonAdd}>
+        +
+      </button>
+    </div>
+  );
+};

src/02-components-patterns/components/ProductCard.tsx

@@ -0,0 +1,34 @@
+import styles from "../styles/styles.module.css";
+import useCounter from "../hooks/useCounter";
+import { createContext } from "react";
+import { ProductContextProps, Props } from "../interfaces/interfaces";
+import { ProductImage } from "./ProductImages";
+import { ProductTitle } from "./ProductTitle";
+import { ProductButtons } from "./ProductButtons";
+
+export const ProductContext = createContext({} as ProductContextProps);
+const { Provider } = ProductContext;
+
+const ProductCard = ({ children, product }: Props) => {
+  const { counter, increaseBy } = useCounter();
+
+  return (
+    <Provider
+      value={{
+        counter,
+        increaseBy,
+        product,
+      }}
+    >
+      <div className={styles.productCard}>
+        <h1>Product Card</h1>
+        {children}
+        <ProductImage img={product.img} />
+        <ProductTitle title={product.title} />
+        <ProductButtons />
+      </div>
+    </Provider>
+  );
+};
+
+export default ProductCard;

src/02-components-patterns/components/ProductImages.tsx

@@ -0,0 +1,18 @@
+import { useContext } from "react";
+import styles from "../../02-components-patterns/styles/styles.module.css";
+import noImg from "../../02-components-patterns/assets/no-image.jpg";
+import { ProductContext } from "./ProductCard";
+
+export const ProductImage = ({ img = "" }) => {
+  const { product } = useContext(ProductContext);
+  let imgToShow: string;
+
+  if (img) {
+    imgToShow = img;
+  } else if (product.img) {
+    imgToShow = product.img;
+  } else {
+    imgToShow = noImg;
+  }
+  return <img className={styles.productImg} src={imgToShow} alt="" />;
+};

src/02-components-patterns/components/ProductTitle.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import styles from "../../02-components-patterns/styles/styles.module.css";
+import { ProductContext } from "./ProductCard";
+
+export const ProductTitle = ({ title }: { title: string }) => {
+  const { product } = useContext(ProductContext);
+  return (
+    <span className={styles.productDescription}>
+      {title ? title : product.title}
+    </span>
+  );
+};

src/02-components-patterns/components/index.ts

@@ -0,0 +1,16 @@
+import { ProductButtons } from "./ProductButtons";
+import ProductCard from "./ProductCard";
+import { ProductImage } from "./ProductImages";
+import { ProductTitle } from "./ProductTitle";
+
+export { ProductImage } from "./ProductImages";
+export { ProductTitle } from "./ProductTitle";
+export { ProductButtons } from "./ProductButtons";
+
+export const ProductCardHoc = Object.assign(ProductCard, {
+  Title: ProductTitle,
+  Button: ProductButtons,
+  Image: ProductImage,
+});
+
+export default ProductCardHoc;

src/02-components-patterns/hooks/useCounter.ts

@@ -0,0 +1,12 @@
+import { useState } from "react";
+
+const useCounter = () => {
+  const [counter, setCounter] = useState(0);
+
+  const increaseBy = (value: number) => {
+    setCounter((prev) => Math.max(prev + value, 0));
+  };
+  return { counter, increaseBy };
+};
+
+export default useCounter;

src/02-components-patterns/interfaces/interfaces.ts

@@ -0,0 +1,30 @@
+import { ReactElement } from "react";
+import { JsxElement } from "typescript";
+
+export interface Props {
+  product: Product;
+  children?: ReactElement | ReactElement[];
+}
+export interface Product {
+  id: string;
+  title: string;
+  img?: string;
+}
+
+export interface ProductButtonsProps {
+  increaseBy: (arg: number) => void;
+  counter: number;
+}
+
+export interface ProductContextProps {
+  counter: number;
+  increaseBy: (value: number) => void;
+  product: Product;
+}
+
+export interface ProductCardHocProps {
+  ({ children, product }: Props): JSX.Element;
+  Title: ({ title }: { title?: string }) => JSX.Element;
+  Button: () => JSX.Element;
+  Image: ({ img }: { img?: string }) => JSX.Element;
+}

src/02-components-patterns/pages/ShoppingPage.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import ProductCardHoc from "../components";
+import ProductCard from "../components/ProductCard";
+
+const product = {
+  id: "1",
+  title: "Coffe Mud - Card",
+  img: "./coffee-mug.png",
+};
+
+const ShoppingPage = () => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+      }}
+    >
+      {/* <ProductCard product={product}>
+        <ProductCard.Title title="Hola Mundo" />
+        <ProductCard.Image />
+      </ProductCard> */}
+      <ProductCard product={product}>
+        <ProductCardHoc.Title title="Hola Mundo" />
+        <ProductCardHoc.Image />
+        <ProductCardHoc.Button />
+      </ProductCard>
+    </div>
+  );
+};
+
+export default ShoppingPage;

src/02-components-patterns/styles/styles.module.css

@@ -0,0 +1,62 @@
+
+
+.productCard {
+    background-color: white;
+    border-radius: 15px;
+    color: black;
+    padding-bottom: 5px;
+    width: 250px;
+    margin-right: 5px;
+    margin-top: 5px;
+}
+
+.productImg {
+    border-radius: 15px 15px 0px 0px;
+    width: 100%;
+}
+
+.productDescription {
+    margin: 10px;
+}
+
+.buttonsContainer {
+    margin: 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.buttonMinus {
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid black;
+    border-radius: 5px 0px 0px 5px;
+    font-size: 20px;
+    width: 30px;
+}
+
+.buttonMinus:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.countLabel {
+    border-bottom: 1px solid black;
+    border-top: 1px solid black;
+    font-size: 16px;
+    height: 25px;
+    padding-top: 5px;
+    text-align: center;
+    width: 30px;
+}
+
+.buttonAdd {
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid black;
+    border-radius: 0px 5px 5px 0px;
+    font-size: 20px;
+    width: 30px;
+}
+
+.buttonAdd:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}

src/routes/Navigation.tsx

@@ -1,45 +1,46 @@
+import { Suspense } from "react";
 import {
   BrowserRouter as Router,
-  Switch,
+  Routes,
   Route,
-  NavLink
-} from 'react-router-dom';
+  NavLink,
+  Navigate,
+} from "react-router-dom";
 
-import logo from '../logo.svg';
+import logo from "../logo.svg";
+import { routes } from "./routes";
 
 export const Navigation = () => {
   return (
-    <Router>
-      <div className="main-layout">
-        <nav>
-            <img src={ logo } alt="React Logo" />
-          <ul>
-            <li>
-              <NavLink to="/" activeClassName="nav-active" exact>Home</NavLink>
-            </li>
-            <li>
-              <NavLink to="/about" activeClassName="nav-active" exact>About</NavLink>
-            </li>
-            <li>
-              <NavLink to="/users" activeClassName="nav-active" exact>Users</NavLink>
-            </li>
-          </ul>
-        </nav>
+    <Suspense fallback={<span>...Loading</span>}>
+      <Router>
+        <div className="main-layout">
+          <nav>
+            <img src={logo} alt="React Logo" />
+            <ul>
+              {routes.map((route) => (
+                <li key={route.path}>
+                  <NavLink
+                    to={route.to}
+                    className={({ isActive }) => (isActive ? "nav-active" : "")}
+                  >
+                    {route.name}
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </nav>
 
-        {/* A <Switch> looks through its children <Route>s and
+          {/* A <Switch> looks through its children <Route>s and
             renders the first one that matches the current URL. */}
-        <Switch>
-          <Route path="/about">
-            <h1>About</h1>
-          </Route>
-          <Route path="/users">
-            <h1>Users</h1>
-          </Route>
-          <Route path="/">
-            <h1>Home</h1>
-          </Route>
-        </Switch>
-      </div>
-    </Router>
+          <Routes>
+            {routes.map((route) => (
+              <Route path={route.path} element={<route.Component />} />
+            ))}
+            <Route path="*" element={<Navigate to={routes[0].to} replace />} />
+          </Routes>
+        </div>
+      </Router>
+    </Suspense>
   );
-}
+};

src/routes/routes.ts

@@ -0,0 +1,20 @@
+import { LazyExoticComponent } from "react";
+
+import ShoppingPage from "../02-components-patterns/pages/ShoppingPage";
+
+type JSXComponent = () => JSX.Element;
+interface Routes {
+  to: string;
+  path: string;
+  Component: LazyExoticComponent<JSXComponent> | JSXComponent;
+  name: string;
+}
+
+export const routes: Routes[] = [
+  {
+    to: "shoppingPage",
+    path: "/shoppingPage",
+    Component: ShoppingPage,
+    name: "Lazy-1",
+  },
+];