Skip to content

Commit

Permalink
code reorganization
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaiste
zaiste committed Sep 25, 2023
1 parent 7edb5b4 commit da66dbf
Show file tree
Hide file tree
Showing 11 changed files with 472 additions and 303 deletions.
37 changes: 17 additions & 20 deletions app/cart/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,45 @@
import { CheckoutFindDocument } from "@/gql/graphql";
import { cookies } from "next/headers";
import Image from 'next/image';
import { execute } from "../../lib";
import { redirect } from "next/navigation";
import * as Checkout from '@/lib/checkout';
import { USDollarFormatter } from "@/lib";

export const metadata = {
title: 'My Page Title',
title: 'Shopping Cart · Saleor Storefront',
};

export default async function Page() {
const cart = cookies().get('cart')?.value;
const checkoutId = cookies().get('cart')?.value || "";

const { checkout } = cart ? await execute(CheckoutFindDocument, {
variables: {
token: cart,
},
cache: 'no-store',
}) : { checkout: { lines: [] } };
const checkout = await Checkout.find(checkoutId);
const lines = checkout ? checkout.lines : [];

async function performCheckout() {
'use server';

// TODO

redirect('/checkout');
}


return (
<section className="max-w-7xl mx-auto p-8">
<h1 className="mt-8 text-3xl font-bold text-gray-900">Your Shopping Cart</h1>

<form className="mt-12">
<div>
<ul role="list" className="divide-y divide-gray-200 border-b border-t border-gray-200">
{checkout?.lines.map((item) => (
{lines.map((item) => (
<li key={item.id} className="flex py-4">
<div className="flex-shrink-0 bg-slate-50 rounded-md border">
<Image
src={item.variant?.product?.thumbnail?.url || ''}
// src={`/${item.product?.id}.png`}
{item.variant?.product?.thumbnail?.url && <Image
src={item.variant?.product?.thumbnail?.url}
alt="image"
width={200}
height={200}
className="h-24 w-24 rounded-lg object-cover object-center sm:h-32 sm:w-32"
/>
/>}
</div>

<div className="flex flex-1 flex-col relative ml-4 justify-center">
Expand All @@ -51,15 +49,14 @@ export default async function Page() {
<h3 className="font-medium text-gray-700">
{item.variant?.product?.name}
</h3>
{/* <p className="mt-1 text-sm text-gray-500">{item.variant?.product?.categories[0].name}</p> */}
<p className="mt-1 text-sm text-gray-500">{item.variant?.product?.category?.name}</p>
</div>

{/* <p className="text-right font-semibold text-gray-900 p-4">{USDollarFormatter.format((item.product?.price || 0) / 100 * item.quantity)}</p> */}
<p className="text-right font-semibold text-gray-900 p-4">{USDollarFormatter.format((item.totalPrice.gross.amount || 0))}</p>

This comment has been minimized.

Sign in to view

Copy link
@typeofweb

typeofweb Sep 25, 2023

Contributor

We should also pass the currency to the formatter
</div>

<div className="mt-4">
{/* <div className="text-sm font-bold">{item.quantity}</div> */}
{/* <RemoveButton id={item.id} /> */}
<div className="text-sm font-bold">{item.quantity}</div>
</div>

</div>
Expand All @@ -76,7 +73,7 @@ export default async function Page() {
<div className="text-gray-900 font-semibold">Your Total</div>
<p className="mt-1 text-sm text-gray-500">Shipping will be calculated in the next step</p>
</div>
{/* <div className="font-medium text-gray-900">{USDollarFormatter.format(((order?.orderItems || []).reduce((saved, current) => saved + current.total, 0) || 0) / 100)}</div> */}
<div className="font-medium text-gray-900">{USDollarFormatter.format(checkout?.totalPrice.gross.amount || 0)}</div>
</div>
</div>
<div className="mt-10 grid grid-cols-3">
Expand Down
8 changes: 4 additions & 4 deletions app/categories/[id]/page.tsx → app/categories/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ export const metadata = {
title: 'My Page Title',
};

export default async function Page({ params }: { params: { id: string } }) {
export default async function Page({ params }: { params: { slug: string } }) {
const { category } = await execute(ProductListByCategoryDocument, {
variables: { slug: params.id },
cache: 'no-store'
variables: { slug: params.slug },
cache: 'default'
})

if (!category) {
Expand All @@ -29,7 +29,7 @@ export default async function Page({ params }: { params: { id: string } }) {
<section className="mx-auto max-w-2xl px-8 py-12 sm:px-6 sm:py-18 lg:max-w-7xl">
<div className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
{products?.edges.map(({ node: product }) =>
<ProductElement key={product.id} {...product} />
<ProductElement key={product.id} product={product} />
)}
</div>
</section>
Expand Down
6 changes: 3 additions & 3 deletions app/error.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ export default function Error({ error, reset }: {
return (
<div className="bg-white">
<div className="mx-auto max-w-7xl px-6 py-12">
<h2 className="text-2xl font-bold text-slate-800 leading-10 tracking-tight">Something went wrong</h2>
<h1 className="text-2xl font-bold text-slate-800 leading-10 tracking-tight">Something went wrong</h1>
<p className="mt-6 max-w-2xl text-base leading-7 text-slate-600">
<code>
{error.message}
{error.message}
</code>
</p>
<button
className="mt-8 h-10 px-6 font-semibold rounded-md bg-red-500 text-white"
className="mt-8 h-10 px-6 font-semibold rounded-md bg-red-500 text-white"
onClick={
() => reset()
}
Expand Down
8 changes: 2 additions & 6 deletions app/products/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { notFound } from "next/navigation";
import { AddButton } from "./AddButton";
import { VariantSelector } from '@/ui/components/VariantSelector';
import { CheckIcon } from 'lucide-react';
import * as Checkout from '@/lib/checkout';

export const metadata = {
title: 'My Page Title',
Expand Down Expand Up @@ -64,12 +65,7 @@ export default async function Page(props: { params: { id: string }, searchParams
cart = cookies().get('cart')?.value;

if (cart) {
const { checkout } = await execute(CheckoutFindDocument,
{
variables: {
token: cart,
},
})
const checkout = await Checkout.find(cart);

if (!checkout) {
cookies().delete('cart');
Expand Down
6 changes: 5 additions & 1 deletion graphql/CheckoutFind.graphql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ query CheckoutFind($token: UUID!) {
email
lines {
id
quantity
totalPrice {
gross {
amount
Expand All @@ -19,6 +20,9 @@ query CheckoutFind($token: UUID!) {
url
alt
}
category {
name
}
}
pricing {
price {
Expand All @@ -38,4 +42,4 @@ query CheckoutFind($token: UUID!) {
}
}
}
}
}
13 changes: 13 additions & 0 deletions lib/checkout.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { CheckoutFindDocument } from "@/gql/graphql";
import { execute } from "@/lib";

export async function find(cart: string) {
const { checkout } = cart ? await execute(CheckoutFindDocument, {
variables: {
token: cart,
},
cache: 'no-cache',
}) : { checkout: null };

return checkout;
}
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@
"@saleor/auth-sdk": "^0.12.0",
"@stripe/stripe-js": "^2.1.6",
"@types/mdx": "^2.0.7",
"@types/node": "20.6.3",
"@types/node": "20.6.5",
"@types/react": "18.2.22",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.16",
"clsx": "^2.0.0",
"editorjs-html": "^3.4.3",
"eslint": "8.49.0",
"eslint": "8.50.0",
"eslint-config-next": "13.5.2",
"lucide-react": "^0.279.0",
"next": "13.5.2",
Expand Down
Loading

0 comments on commit da66dbf

Please sign in to comment.