From 88ef8dbbfc9650238260b953fe14025a1d48e081 Mon Sep 17 00:00:00 2001 From: Grzegorz Pokorski Date: Fri, 17 Nov 2023 09:19:10 +0100 Subject: [PATCH] refactor/fix: tidy up utility functions, fix icons (#1033) --- src/app/(main)/cart/page.tsx | 3 +- src/app/(main)/products/[slug]/page.tsx | 15 ++++--- src/checkout/assets/icons/add.tsx | 4 +- src/checkout/assets/icons/alert.tsx | 4 +- src/checkout/assets/icons/discount.tsx | 4 +- src/checkout/assets/icons/edit.tsx | 4 +- src/checkout/assets/icons/error.tsx | 4 +- src/checkout/assets/icons/giftCard.tsx | 4 +- src/checkout/assets/icons/language.tsx | 4 +- src/checkout/assets/icons/minus.tsx | 2 +- src/checkout/assets/icons/photo.tsx | 4 +- src/checkout/assets/icons/plus.tsx | 4 +- src/checkout/assets/icons/remove.tsx | 4 +- src/checkout/assets/icons/trash.tsx | 4 +- src/checkout/assets/images/SaleorLogo.tsx | 34 +++++++-------- src/lib/date.ts | 2 - src/lib/graphql.ts | 23 ---------- src/lib/utils.ts | 43 +++++++++++++++++++ .../OrderList/components/OrderListItem.tsx | 4 +- src/ui/components/ProductElement.tsx | 2 +- src/ui/components/VariantSelector.tsx | 2 +- src/utils/getHrefForVariant.ts | 16 ------- 22 files changed, 95 insertions(+), 95 deletions(-) delete mode 100644 src/lib/date.ts create mode 100644 src/lib/utils.ts delete mode 100644 src/utils/getHrefForVariant.ts diff --git a/src/app/(main)/cart/page.tsx b/src/app/(main)/cart/page.tsx index ee640b1b7..93dbafaf6 100644 --- a/src/app/(main)/cart/page.tsx +++ b/src/app/(main)/cart/page.tsx @@ -4,8 +4,7 @@ import Link from "next/link"; import { CheckoutLink } from "./CheckoutLink"; import { DeleteLineButton } from "./DeleteLineButton"; import * as Checkout from "@/lib/checkout"; -import { formatMoney } from "@/lib/graphql"; -import { getHrefForVariant } from "@/utils/getHrefForVariant"; +import { formatMoney, getHrefForVariant } from "@/lib/utils"; export const metadata = { title: "Shopping Cart ยท Saleor Storefront example", diff --git a/src/app/(main)/products/[slug]/page.tsx b/src/app/(main)/products/[slug]/page.tsx index ea340558c..0f58ab256 100644 --- a/src/app/(main)/products/[slug]/page.tsx +++ b/src/app/(main)/products/[slug]/page.tsx @@ -4,12 +4,13 @@ import { cookies } from "next/headers"; import { notFound } from "next/navigation"; import { type ResolvingMetadata, type Metadata } from "next"; import xss from "xss"; -import invariant from "ts-invariant"; +import { invariant } from "ts-invariant"; import { type WithContext, type Product } from "schema-dts"; import { AddButton } from "./AddButton"; import { VariantSelector } from "@/ui/components/VariantSelector"; import { ProductImageWrapper } from "@/ui/atoms/ProductImageWrapper"; -import { executeGraphQL, formatMoney, formatMoneyRange } from "@/lib/graphql"; +import { executeGraphQL } from "@/lib/graphql"; +import { formatMoney, formatMoneyRange } from "@/lib/utils"; import { CheckoutAddLineDocument, ProductDetailsDocument, ProductListDocument } from "@/gql/graphql"; import * as Checkout from "@/lib/checkout"; import { AvailabilityMessage } from "@/ui/components/AvailabilityMessage"; @@ -129,11 +130,11 @@ export default async function Page(props: { params: { slug: string }; searchPara const price = selectedVariant?.pricing?.price?.gross ? formatMoney(selectedVariant.pricing.price.gross.amount, selectedVariant.pricing.price.gross.currency) : isAvailable - ? formatMoneyRange({ - start: product?.pricing?.priceRange?.start?.gross, - stop: product?.pricing?.priceRange?.stop?.gross, - }) - : ""; + ? formatMoneyRange({ + start: product?.pricing?.priceRange?.start?.gross, + stop: product?.pricing?.priceRange?.stop?.gross, + }) + : ""; const productJsonLd: WithContext = { "@context": "https://schema.org", diff --git a/src/checkout/assets/icons/add.tsx b/src/checkout/assets/icons/add.tsx index 19f419aab..9b733869c 100644 --- a/src/checkout/assets/icons/add.tsx +++ b/src/checkout/assets/icons/add.tsx @@ -3,8 +3,8 @@ export function AddIcon() { diff --git a/src/checkout/assets/icons/alert.tsx b/src/checkout/assets/icons/alert.tsx index e41de4b8e..655cae32f 100644 --- a/src/checkout/assets/icons/alert.tsx +++ b/src/checkout/assets/icons/alert.tsx @@ -2,8 +2,8 @@ export function AlertIcon() { return ( - - + + ); } diff --git a/src/checkout/assets/icons/discount.tsx b/src/checkout/assets/icons/discount.tsx index be14d856a..7a2be8658 100644 --- a/src/checkout/assets/icons/discount.tsx +++ b/src/checkout/assets/icons/discount.tsx @@ -8,8 +8,8 @@ export function DiscountIcon() { ); diff --git a/src/checkout/assets/icons/edit.tsx b/src/checkout/assets/icons/edit.tsx index bddd11f7d..7e0fb767e 100644 --- a/src/checkout/assets/icons/edit.tsx +++ b/src/checkout/assets/icons/edit.tsx @@ -4,8 +4,8 @@ export function EditIcon() { ); diff --git a/src/checkout/assets/icons/error.tsx b/src/checkout/assets/icons/error.tsx index 11c2ebbfd..3d8293a27 100644 --- a/src/checkout/assets/icons/error.tsx +++ b/src/checkout/assets/icons/error.tsx @@ -2,8 +2,8 @@ export function ErrorIcon() { return ( - - + + ); } diff --git a/src/checkout/assets/icons/giftCard.tsx b/src/checkout/assets/icons/giftCard.tsx index 0baf309d8..2b8542054 100644 --- a/src/checkout/assets/icons/giftCard.tsx +++ b/src/checkout/assets/icons/giftCard.tsx @@ -4,8 +4,8 @@ export function GiftCardIcon() { ); diff --git a/src/checkout/assets/icons/language.tsx b/src/checkout/assets/icons/language.tsx index d7ba92de9..a26fb6897 100644 --- a/src/checkout/assets/icons/language.tsx +++ b/src/checkout/assets/icons/language.tsx @@ -7,14 +7,14 @@ export function LanguageIcon() { stroke="#394052" stroke-opacity="0.8" strokeWidth="1.5" - stroke-linejoin="bevel" + strokeLinejoin="bevel" /> diff --git a/src/checkout/assets/icons/minus.tsx b/src/checkout/assets/icons/minus.tsx index 95eae703c..ecea5c76d 100644 --- a/src/checkout/assets/icons/minus.tsx +++ b/src/checkout/assets/icons/minus.tsx @@ -1,7 +1,7 @@ export function MinusIcon() { return ( - + ); } diff --git a/src/checkout/assets/icons/photo.tsx b/src/checkout/assets/icons/photo.tsx index 7fb71eb57..e634bb6de 100644 --- a/src/checkout/assets/icons/photo.tsx +++ b/src/checkout/assets/icons/photo.tsx @@ -2,8 +2,8 @@ export function PhotoIcon() { return ( diff --git a/src/checkout/assets/icons/plus.tsx b/src/checkout/assets/icons/plus.tsx index baec77e36..4968c0ebd 100644 --- a/src/checkout/assets/icons/plus.tsx +++ b/src/checkout/assets/icons/plus.tsx @@ -2,8 +2,8 @@ export function PlusIcon() { return ( diff --git a/src/checkout/assets/icons/remove.tsx b/src/checkout/assets/icons/remove.tsx index 7ae97e0a0..9723772e1 100644 --- a/src/checkout/assets/icons/remove.tsx +++ b/src/checkout/assets/icons/remove.tsx @@ -2,8 +2,8 @@ export function RemoveIcon() { return ( diff --git a/src/checkout/assets/icons/trash.tsx b/src/checkout/assets/icons/trash.tsx index e68fd51e9..3179c0691 100644 --- a/src/checkout/assets/icons/trash.tsx +++ b/src/checkout/assets/icons/trash.tsx @@ -4,8 +4,8 @@ export function TrashIcon() { ); diff --git a/src/checkout/assets/images/SaleorLogo.tsx b/src/checkout/assets/images/SaleorLogo.tsx index f44535977..815dec558 100644 --- a/src/checkout/assets/images/SaleorLogo.tsx +++ b/src/checkout/assets/images/SaleorLogo.tsx @@ -17,55 +17,55 @@ export function SaleorLogo() { width="697" height="232" > - + diff --git a/src/lib/date.ts b/src/lib/date.ts deleted file mode 100644 index 61227112a..000000000 --- a/src/lib/date.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const formatDate = (date: Date | number) => - new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(date); diff --git a/src/lib/graphql.ts b/src/lib/graphql.ts index 540c8de1c..3dbb9c1bf 100644 --- a/src/lib/graphql.ts +++ b/src/lib/graphql.ts @@ -74,26 +74,3 @@ export class HTTPError extends Error { Object.setPrototypeOf(this, new.target.prototype); } } - -export const formatMoney = (amount: number, currency: string) => - new Intl.NumberFormat("en-US", { - style: "currency", - currency, - }).format(amount); - -export const formatMoneyRange = ( - range: { - start?: { amount: number; currency: string } | null; - stop?: { amount: number; currency: string } | null; - } | null, -) => { - const { start, stop } = range || {}; - const startMoney = start && formatMoney(start.amount, start.currency); - const stopMoney = stop && formatMoney(stop.amount, stop.currency); - - if (startMoney === stopMoney) { - return startMoney; - } - - return `${startMoney} - ${stopMoney}`; -}; diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 000000000..6363c5d46 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,43 @@ +export const formatDate = (date: Date | number) => { + return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(date); +}; + +export const formatMoney = (amount: number, currency: string) => + new Intl.NumberFormat("en-US", { + style: "currency", + currency, + }).format(amount); + +export const formatMoneyRange = ( + range: { + start?: { amount: number; currency: string } | null; + stop?: { amount: number; currency: string } | null; + } | null, +) => { + const { start, stop } = range || {}; + const startMoney = start && formatMoney(start.amount, start.currency); + const stopMoney = stop && formatMoney(stop.amount, stop.currency); + + if (startMoney === stopMoney) { + return startMoney; + } + + return `${startMoney} - ${stopMoney}`; +}; + +export function getHrefForVariant({ + productSlug, + variantId, +}: { + productSlug: string; + variantId?: string; +}): string { + const pathname = `/products/${encodeURIComponent(productSlug)}`; + + if (!variantId) { + return pathname; + } + + const query = new URLSearchParams({ variant: variantId }); + return `${pathname}?${query.toString()}`; +} diff --git a/src/ui/components/OrderList/components/OrderListItem.tsx b/src/ui/components/OrderList/components/OrderListItem.tsx index a4efdafd8..cc195edb6 100644 --- a/src/ui/components/OrderList/components/OrderListItem.tsx +++ b/src/ui/components/OrderList/components/OrderListItem.tsx @@ -1,9 +1,7 @@ import Image from "next/image"; import Link from "next/link"; import { PaymentStatus } from "../../PaymentStatus"; -import { formatDate } from "@/lib/date"; -import { formatMoney } from "@/lib/graphql"; -import { getHrefForVariant } from "@/utils/getHrefForVariant"; +import { formatDate, formatMoney, getHrefForVariant } from "@/lib/utils"; import { type OrderDetailsFragment } from "@/gql/graphql"; type Props = { diff --git a/src/ui/components/ProductElement.tsx b/src/ui/components/ProductElement.tsx index a767a5238..7a8b4b89f 100644 --- a/src/ui/components/ProductElement.tsx +++ b/src/ui/components/ProductElement.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { ProductImageWrapper } from "@/ui/atoms/ProductImageWrapper"; import type { ProductListItemFragment } from "@/gql/graphql"; -import { formatMoneyRange } from "@/lib/graphql"; +import { formatMoneyRange } from "@/lib/utils"; export function ProductElement({ product, diff --git a/src/ui/components/VariantSelector.tsx b/src/ui/components/VariantSelector.tsx index 44706bced..8671b11f1 100644 --- a/src/ui/components/VariantSelector.tsx +++ b/src/ui/components/VariantSelector.tsx @@ -2,7 +2,7 @@ import { clsx } from "clsx"; import Link from "next/link"; import { redirect } from "next/navigation"; import { type ProductListItemFragment, type VariantDetailsFragment } from "@/gql/graphql"; -import { getHrefForVariant } from "@/utils/getHrefForVariant"; +import { getHrefForVariant } from "@/lib/utils"; export function VariantSelector({ variants, diff --git a/src/utils/getHrefForVariant.ts b/src/utils/getHrefForVariant.ts deleted file mode 100644 index ada6d7f71..000000000 --- a/src/utils/getHrefForVariant.ts +++ /dev/null @@ -1,16 +0,0 @@ -export function getHrefForVariant({ - productSlug, - variantId, -}: { - productSlug: string; - variantId?: string; -}): string { - const pathname = `/products/${encodeURIComponent(productSlug)}`; - - if (!variantId) { - return pathname; - } - - const query = new URLSearchParams({ variant: variantId }); - return `${pathname}?${query.toString()}`; -}