From 436eba9c8ebab7bcec17d7d732f4617bc05e5ff1 Mon Sep 17 00:00:00 2001 From: Edson Pimenta Date: Fri, 15 Dec 2023 11:06:13 -0300 Subject: [PATCH] feat(pages): :recycle: changes ICoffeeSchema and coffee listing and details translation logic --- ...ng => special-coffee-display-homepage.png} | Bin src/components/CoffeeCard/index.tsx | 33 +++--- src/data/coffees.ts | 102 ++++++++++++++++++ src/pages/Home/index.tsx | 20 ++-- src/types/coffeType.ts | 4 +- 5 files changed, 129 insertions(+), 30 deletions(-) rename src/assets/{special-coffe-display-homepage.png => special-coffee-display-homepage.png} (100%) create mode 100644 src/data/coffees.ts diff --git a/src/assets/special-coffe-display-homepage.png b/src/assets/special-coffee-display-homepage.png similarity index 100% rename from src/assets/special-coffe-display-homepage.png rename to src/assets/special-coffee-display-homepage.png diff --git a/src/components/CoffeeCard/index.tsx b/src/components/CoffeeCard/index.tsx index c6652e0..68a9205 100644 --- a/src/components/CoffeeCard/index.tsx +++ b/src/components/CoffeeCard/index.tsx @@ -7,11 +7,9 @@ import { convertToDollars } from "../../utils/convertToDollar"; import { AddedToCartNotification } from "../AddedToCartNotification"; import { IconButton } from "../IconButton"; -export interface CoffeeCardProps { +export interface ICoffeeCardProps { id: string; imgSrc: string; - coffeeName: string; - coffeeDesc: string; coffeePrice: number; coffeeTags: string[]; } @@ -19,17 +17,15 @@ export interface CoffeeCardProps { export function CoffeeCard({ id, imgSrc, - coffeeName, - coffeeDesc, - coffeePrice, coffeeTags, -}: CoffeeCardProps) { + coffeePrice, +}: ICoffeeCardProps) { const { t, i18n } = useTranslation(); const { handleAddToCart } = useContext(AppContext); const [productQuantity, setProductQuantity] = useState(1); - const [formatedCoffeePrice, setformatedCoffeePrice] = useState< + const [formattedCoffeePrice, setFormattedCoffeePrice] = useState< string | null >(null); @@ -50,7 +46,12 @@ export function CoffeeCard({ function handleAddedToCartWithNotification() { handleAddToCart( - { id, imgSrc, coffeeName, coffeeTags, coffeeDesc, coffeePrice }, + { + id, + imgSrc, + coffeeTags, + coffeePrice, + }, productQuantity, ); if (showAddedToCartNotification === false) { @@ -65,15 +66,15 @@ export function CoffeeCard({ if (i18n.language === "en") { convertToDollars(coffeePrice) .then((coffeePriceInDollar) => - setformatedCoffeePrice(coffeePriceInDollar), + setFormattedCoffeePrice(coffeePriceInDollar), ) .catch(() => { console.error("Error while trying to convert coffee price"); }); } else { - setformatedCoffeePrice(`${coffeePrice}`.replace(".", ",")); + setFormattedCoffeePrice(`${coffeePrice}`.replace(".", ",")); } - }, [formatedCoffeePrice, coffeePrice, i18n.language]); + }, [formattedCoffeePrice, coffeePrice, i18n.language]); return ( <> @@ -89,16 +90,16 @@ export function CoffeeCard({ key={index} className="mt-3 w-fit items-center justify-center rounded-full bg-product-yellow-light px-2 py-1 text-[0.625rem] font-bold uppercase text-product-yellow-dark" > - {coffeeTag} + {t(`${coffeeTag}Tag`)} ))}

- {coffeeName} + {t(`${id}Name`)}

-

{coffeeDesc}

+

{t(`${id}Desc`)}

@@ -106,7 +107,7 @@ export function CoffeeCard({ {i18n.language === "pt" ? `${coffeePrice}`.replace(".", ",") - : formatedCoffeePrice} + : formattedCoffeePrice}
diff --git a/src/data/coffees.ts b/src/data/coffees.ts new file mode 100644 index 0000000..ee0b121 --- /dev/null +++ b/src/data/coffees.ts @@ -0,0 +1,102 @@ +import arabe from "../assets/arabe.png"; +import cafeComLeite from "../assets/cafe-com-leite.png"; +import capuccino from "../assets/capuccino.png"; +import hotChocolate from "../assets/chocolate-quente.png"; +import cubano from "../assets/cubano.png"; +import expresso from "../assets/expresso.png"; +import expressoAmericano from "../assets/expresso-americano.png"; +import expressoCremoso from "../assets/expresso-cremoso.png"; +import expressoGelado from "../assets/expresso-gelado.png"; +import havaiano from "../assets/havaiano.png"; +import irlandes from "../assets/irlandes.png"; +import latte from "../assets/latte.png"; +import macchiato from "../assets/macchiato.png"; +import mochaccino from "../assets/mochaccino.png"; +import { ICoffeeSchema } from "../types/coffeType"; + +export const coffeeList: ICoffeeSchema[] = [ + { + id: "traditionalExpresso", + imgSrc: expresso, + coffeeTags: ["traditional"], + coffeePrice: 9.99, + }, + { + id: "americanExpresso", + imgSrc: expressoAmericano, + coffeeTags: ["traditional"], + coffeePrice: 9.99, + }, + { + id: "creamyExpresso", + imgSrc: expressoCremoso, + coffeeTags: ["traditional"], + coffeePrice: 9.99, + }, + { + id: "coldExpresso", + imgSrc: expressoGelado, + coffeeTags: ["traditional", "iced"], + coffeePrice: 9.99, + }, + { + id: "coffeeAndMilk", + imgSrc: cafeComLeite, + coffeeTags: ["traditional", "withMilk"], + coffeePrice: 9.99, + }, + { + id: "latte", + imgSrc: latte, + coffeeTags: ["traditional", "withMilk"], + coffeePrice: 9.99, + }, + { + id: "capuccino", + imgSrc: capuccino, + coffeeTags: ["traditional", "withMilk"], + coffeePrice: 9.99, + }, + { + id: "macchiato", + imgSrc: macchiato, + coffeeTags: ["traditional", "withMilk"], + coffeePrice: 9.99, + }, + { + id: "mochaccino", + imgSrc: mochaccino, + coffeeTags: ["traditional", "withMilk"], + coffeePrice: 9.99, + }, + { + id: "hotChocolate", + imgSrc: hotChocolate, + coffeeTags: ["traditional", "withMilk"], + coffeePrice: 9.99, + }, + { + id: "cuban", + imgSrc: cubano, + coffeeTags: ["special", "alcoholic", "iced"], + coffeePrice: 9.99, + }, + { + id: "hawaiian", + imgSrc: havaiano, + coffeeTags: ["special"], + coffeePrice: 9.99, + }, + { + id: "arab", + imgSrc: arabe, + coffeeTags: ["special"], + coffeePrice: 9.99, + }, + { + id: "irish", + imgSrc: irlandes, + coffeeTags: ["special", "alcoholic"], + coffeePrice: 9.99, + }, +]; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 19abf53..b752e2b 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -2,9 +2,9 @@ import { Coffee, Package, ShoppingCart, Timer } from "@phosphor-icons/react"; import { Helmet, HelmetProvider } from "react-helmet-async"; import { useTranslation } from "react-i18next"; -import specialCoffeDisplayHomepage from "../../assets/special-coffe-display-homepage.png"; +import specialCoffeeDisplayHomepage from "../../assets/special-coffee-display-homepage.png"; import { CoffeeCard } from "../../components/CoffeeCard"; -import { coffeeList } from "../../data/coffes"; +import { coffeeList } from "../../data/coffees"; export function Home() { const { t } = useTranslation(); @@ -75,7 +75,7 @@ export function Home() {
- +
@@ -84,15 +84,13 @@ export function Home() { {t("coffeeListHeadline")}
    - {coffeeList.map((coffe) => ( -
  • + {coffeeList.map((coffee) => ( +
    • ))} diff --git a/src/types/coffeType.ts b/src/types/coffeType.ts index f147835..d8a9cd9 100644 --- a/src/types/coffeType.ts +++ b/src/types/coffeType.ts @@ -1,8 +1,6 @@ -export interface coffeType { +export interface ICoffeeSchema { id: string; imgSrc: string; - coffeeName: string; - coffeeDesc: string; coffeeTags: string[]; coffeePrice: number; }