crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 05:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Why is prettier borked

Browse Source
This commit is contained in:
Lee Robinson 2023-08-04 18:36:41 -05:00
parent 6f24cf7ebf
commit c8036538d9
5 changed files with 57 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/error.tsx
View File

@ -2,10 +2,18 @@
export default function Error({ reset }: { reset: () => void }) {
return (
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 max-w-xl mx-auto my-4">
<div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
<h2 className="text-xl font-bold">Oh no!</h2>
<p className="my-2">There was an issue with our storefront. This could be a temporary issue, please try your action again.</p>
<button className="w-full mt-4 flex mx-auto items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90" onClick={() => reset()}>Try Again</button>
<p className="my-2">
There was an issue with our storefront. This could be a temporary issue, please try your
action again.
</p>
<button
className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
onClick={() => reset()}
>
Try Again
</button>
</div>
);
}

8
components/cart/actions.ts
View File

@ -18,13 +18,13 @@ export const addItem = async (variantId: string | undefined): Promise<String | u
}
if (!variantId) {
return 'Missing product variant ID'
return 'Missing product variant ID';
}
try {
await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);
} catch (e) {
return 'Error adding item to cart'
return 'Error adding item to cart';
}
};
@ -37,7 +37,7 @@ export const removeItem = async (lineId: string): Promise<String | undefined> =>
try {
await removeFromCart(cartId, [lineId]);
} catch (e) {
return 'Error removing item from cart'
return 'Error removing item from cart';
}
};
@ -64,6 +64,6 @@ export const updateItemQuantity = async ({
}
]);
} catch (e) {
return 'Error updating item quantity'
return 'Error updating item quantity';
}
};

68
components/cart/add-to-cart.tsx
View File

@ -26,43 +26,43 @@ export function AddToCart({
);
const selectedVariantId = variant?.id || defaultVariantId;
const title = !availableForSale
? 'Out of stock'
: !selectedVariantId
? 'Please select options'
: undefined;
? 'Out of stock'
: !selectedVariantId
? 'Please select options'
: undefined;
return (
<button
aria-label="Add item to cart"
disabled={isPending || !availableForSale || !selectedVariantId}
title={title}
onClick={() => {
// Safeguard in case someone messes with `disabled` in devtools.
if (!availableForSale || !selectedVariantId) return;
<button
aria-label="Add item to cart"
disabled={isPending || !availableForSale || !selectedVariantId}
title={title}
onClick={() => {
// Safeguard in case someone messes with `disabled` in devtools.
if (!availableForSale || !selectedVariantId) return;
startTransition(async () => {
const error = await addItem(selectedVariantId);
startTransition(async () => {
const error = await addItem(selectedVariantId);
if (error) {
// Trigger the error boundary in the root error.js
throw new Error(error.toString());
}
router.refresh();
});
}}
className={clsx(
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
{
'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
'cursor-not-allowed': isPending
if (error) {
// Trigger the error boundary in the root error.js
throw new Error(error.toString());
}
)}
>
<div className="absolute left-0 ml-4">
{!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
</div>
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
</button>
router.refresh();
});
}}
className={clsx(
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
{
'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
'cursor-not-allowed': isPending
}
)}
>
<div className="absolute left-0 ml-4">
{!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
</div>
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
</button>
);
}

2
package.json
View File

@ -43,7 +43,7 @@
"eslint-plugin-unicorn": "^48.0.0",
"lint-staged": "^13.2.3",
"postcss": "^8.4.27",
"prettier": "^3.0.0",
"prettier": "3.0.1",
"prettier-plugin-tailwindcss": "^0.4.1",
"tailwindcss": "^3.3.3",
"typescript": "5.1.6"

14
pnpm-lock.yaml generated
View File

@ -61,11 +61,11 @@ devDependencies:
specifier: ^8.4.27
version: 8.4.27
prettier:
specifier: ^3.0.0
version: 3.0.0
specifier: 3.0.1
version: 3.0.1
prettier-plugin-tailwindcss:
specifier: ^0.4.1
version: 0.4.1(prettier@3.0.0)
version: 0.4.1(prettier@3.0.1)
tailwindcss:
specifier: ^3.3.3
version: 3.3.3
@ -2630,7 +2630,7 @@ packages:
engines: {node: '>= 0.8.0'}
dev: true
/prettier-plugin-tailwindcss@0.4.1(prettier@3.0.0):
/prettier-plugin-tailwindcss@0.4.1(prettier@3.0.1):
resolution: {integrity: sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==}
engines: {node: '>=12.17.0'}
peerDependencies:
@ -2682,11 +2682,11 @@ packages:
prettier-plugin-twig-melody:
optional: true
dependencies:
prettier: 3.0.0
prettier: 3.0.1
dev: true
/prettier@3.0.0:
resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
/prettier@3.0.1:
resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==}
engines: {node: '>=14'}
hasBin: true
dev: true