Skip to content

Commit

Permalink
chore: migrate to 0.11
Browse files Browse the repository at this point in the history
  • Loading branch information
blittle committed Feb 16, 2022
1 parent 9a9e8b7 commit 92ef97c
Show file tree
Hide file tree
Showing 15 changed files with 260 additions and 403 deletions.
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,14 @@
},
"dependencies": {
"@headlessui/react": "^1.4.1",
"@shopify/hydrogen": "^0.10.1",
"@shopify/hydrogen": "^0.11.0-experimental.1",
"body-parser": "^1.19.1",
"compression": "^1.7.4",
"express": "^4.17.1",
"graphql-tag": "^2.12.4",
"path-to-regexp": "^6.2.0",
"react": "0.0.0-experimental-529dc3ce8-20220124",
"react-dom": "0.0.0-experimental-529dc3ce8-20220124",
"react-router-dom": "^5.2.0",
"serve-static": "^1.14.1"
}
}
2 changes: 1 addition & 1 deletion shopify.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default {
storeDomain: 'hydrogen-preview.myshopify.com',
storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
storefrontApiVersion: 'unstable',
storefrontApiVersion: '2022-01',
};
9 changes: 2 additions & 7 deletions src/App.client.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
import {HelmetProvider} from '@shopify/hydrogen/client';
import CartProvider from './components/CartProvider.client';

/**
* Setup client context, though the children are most likely server components
*/
export default function ClientApp({helmetContext, children}) {
return (
<HelmetProvider context={helmetContext}>
<CartProvider>{children}</CartProvider>
</HelmetProvider>
);
export default function ClientApp({children}) {
return <CartProvider>{children}</CartProvider>;
}
23 changes: 13 additions & 10 deletions src/App.server.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {DefaultRoutes} from '@shopify/hydrogen';
import {DefaultRoutes, ShopifyProvider} from '@shopify/hydrogen';
import {Suspense} from 'react';
import shopifyConfig from '../shopify.config';

import DefaultSeo from './components/DefaultSeo.server';
import NotFound from './components/NotFound.server';
Expand All @@ -9,15 +10,17 @@ import LoadingFallback from './components/LoadingFallback';
export default function App({log, pages, ...serverState}) {
return (
<Suspense fallback={<LoadingFallback />}>
<AppClient helmetContext={serverState.helmetContext}>
<DefaultSeo />
<DefaultRoutes
pages={pages}
serverState={serverState}
log={log}
fallback={<NotFound />}
/>
</AppClient>
<ShopifyProvider shopifyConfig={shopifyConfig}>
<AppClient>
<DefaultSeo />
<DefaultRoutes
pages={pages}
serverState={serverState}
log={log}
fallback={<NotFound />}
/>
</AppClient>
</ShopifyProvider>
</Suspense>
);
}
156 changes: 83 additions & 73 deletions src/components/Cart.client.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import {
useCartLinesTotalQuantity,
useCart,
CartCheckoutButton,
Link,
CartLines,
CartLine,
useCartLine,
CartLinePrice,
CartLineAttributes,
CartLineQuantity,
CartLineQuantityAdjustButton,
CartLineProductTitle,
CartLineSelectedOptions,
CartLineImage,
CartShopPayButton,
CartEstimatedCost,
} from '@shopify/hydrogen/client';
Expand All @@ -18,7 +25,7 @@ import {BUTTON_PRIMARY_CLASSES} from './Button.client';
*/
export default function Cart() {
const {isCartOpen, closeCart} = useCartUI();
const itemCount = useCartLinesTotalQuantity();
const {itemCount} = useCart();

return (
<div>
Expand Down Expand Up @@ -67,6 +74,73 @@ function CartHeader() {
);
}

function LineInCart() {
const {merchandise} = useCartLine();

return (
<div
role="row"
className="flex py-7 border-b last:border-b-0 border-gray-300 text-gray-900"
>
<div role="cell" className="flex-shrink-0 mr-7">
<Link to={`products/${merchandise.product.handle}`}>
<CartLineImage
className="bg-white border border-black border-opacity-5 rounded-xl "
options={{width: 98, height: 98, crop: 'center'}}
/>
</Link>
</div>
<div
role="cell"
className="flex flex-col w-full justify-between items-start flex-grow-1 mr-4"
>
<Link
to={`products/${merchandise.product.handle}`}
className="hover:underline"
>
<CartLineProductTitle className="text-lg font-medium" />
</Link>
<CartLineSelectedOptions as="ul" className="text-xs space-y-1">
{({name, value}) => (
<>
{name}: {value}
</>
)}
</CartLineSelectedOptions>
<CartLineAttributes as="ul" className="text-sm space-y-1">
{({key, value}) => (
<>
{key}: {value}
</>
)}
</CartLineAttributes>
<CartItemQuantity />
</div>
<div role="cell" className="flex flex-col justify-between items-end">
<CartLineQuantityAdjustButton
adjust="remove"
aria-label="Remove from cart"
className="disabled:pointer-events-all disabled:cursor-wait"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</CartLineQuantityAdjustButton>
<CartLinePrice className="text-lg" />
</div>
</div>
);
}

function CartItems() {
return (
<div className="px-7 flex-grow" role="table" aria-label="Shopping cart">
Expand All @@ -76,71 +150,7 @@ function CartItems() {
<div role="columnheader">Price</div>
</div>
<CartLines>
{({merchandise}) => (
<div
role="row"
className="flex py-7 border-b last:border-b-0 border-gray-300 text-gray-900"
>
<div role="cell" className="flex-shrink-0 mr-7">
<Link to={`products/${merchandise.product.handle}`}>
<CartLine.Image
className="bg-white border border-black border-opacity-5 rounded-xl "
options={{width: 98, height: 98, crop: 'center'}}
/>
</Link>
</div>
<div
role="cell"
className="flex flex-col w-full justify-between items-start flex-grow-1 mr-4"
>
<Link
to={`products/${merchandise.product.handle}`}
className="hover:underline"
>
<CartLine.ProductTitle className="text-lg font-medium" />
</Link>
<CartLine.SelectedOptions as="ul" className="text-xs space-y-1">
{({name, value}) => (
<>
{name}: {value}
</>
)}
</CartLine.SelectedOptions>
<CartLine.Attributes as="ul" className="text-sm space-y-1">
{({key, value}) => (
<>
{key}: {value}
</>
)}
</CartLine.Attributes>
<CartItemQuantity />
</div>
<div
role="cell"
className="flex flex-col justify-between items-end"
>
<CartLine.QuantityAdjustButton
adjust="remove"
aria-label="Remove from cart"
className="disabled:pointer-events-all disabled:cursor-wait"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</CartLine.QuantityAdjustButton>
<CartLine.Price className="text-lg" />
</div>
</div>
)}
<LineInCart />
</CartLines>
</div>
);
Expand All @@ -149,7 +159,7 @@ function CartItems() {
function CartItemQuantity() {
return (
<div className="flex border rounded border-gray-300 items-center overflow-auto mt-2">
<CartLine.QuantityAdjustButton
<CartLineQuantityAdjustButton
adjust="decrease"
aria-label="Decrease quantity"
className="p-2 disabled:pointer-events-all disabled:cursor-wait"
Expand All @@ -166,12 +176,12 @@ function CartItemQuantity() {
clipRule="evenodd"
/>
</svg>
</CartLine.QuantityAdjustButton>
<CartLine.Quantity
</CartLineQuantityAdjustButton>
<CartLineQuantity
as="div"
className="p-2 text-gray-900 text-xs text-center"
/>
<CartLine.QuantityAdjustButton
<CartLineQuantityAdjustButton
adjust="increase"
aria-label="Increase quantity"
className="p-2 text-gray-400 disabled:pointer-events-all disabled:cursor-wait"
Expand All @@ -188,7 +198,7 @@ function CartItemQuantity() {
clipRule="evenodd"
/>
</svg>
</CartLine.QuantityAdjustButton>
</CartLineQuantityAdjustButton>
</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/CartIconWithItems.client.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import {useCartLinesTotalQuantity} from '@shopify/hydrogen/client';
import {useCart} from '@shopify/hydrogen/client';

import CartIcon from './CartIcon';

/**
* A client component that specifies the icon to use if a cart contains merchandise
*/
export default function CartIconWithItems() {
const itemCount = useCartLinesTotalQuantity();
const {itemCount} = useCart();

return (
<>
Expand Down
14 changes: 9 additions & 5 deletions src/components/DefaultSeo.server.jsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
import {useShopQuery} from '@shopify/hydrogen';
import {useShopQuery, Seo} from '@shopify/hydrogen';
import gql from 'graphql-tag';

import Seo from './Seo.client';

/**
* A server component that fetches a `shop.name` and sets default values and templates for every page on a website
*/
export default function DefaultSeo() {
const {
data: {
shop: {name: shopName},
shop: {name: shopName, description: shopDescription},
},
} = useShopQuery({
query: QUERY,
cache: {maxAge: 60 * 60 * 12, staleWhileRevalidate: 60 * 60 * 12},
});

return <Seo shopName={shopName} />;
return (
<Seo
type="defaultSeo"
data={{title: shopName, description: shopDescription}}
/>
);
}

const QUERY = gql`
query shopName {
shop {
name
description
}
}
`;
15 changes: 6 additions & 9 deletions src/components/MoneyCompareAtPrice.client.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import {Money} from '@shopify/hydrogen/client';
import {useMoney} from '@shopify/hydrogen/client';

/**
* A client component that renders a `Money` component for a product's compare at price
*/
export default function MoneyCompareAtPrice({money}) {
const {amount, currencyNarrowSymbol} = useMoney(money);
return (
<Money money={money}>
{({amount, currencyNarrowSymbol}) => (
<span className="line-through text-lg mr-2.5 text-gray-500">
{currencyNarrowSymbol}
{amount}
</span>
)}
</Money>
<span className="line-through text-lg mr-2.5 text-gray-500">
{currencyNarrowSymbol}
{amount}
</span>
);
}
18 changes: 8 additions & 10 deletions src/components/MoneyPrice.client.jsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import {Money} from '@shopify/hydrogen/client';
import {useMoney} from '@shopify/hydrogen/client';

/**
* A client component that defines the currency code, currency symbol, and amount of a product
*/
export default function MoneyPrice({money}) {
const {amount, currencyNarrowSymbol, currencyCode} = useMoney(money);

return (
<Money className="text-black text-md" money={money}>
{({amount, currencyNarrowSymbol, currencyCode}) => (
<>
{currencyCode}
{currencyNarrowSymbol}
{amount}
</>
)}
</Money>
<>
{currencyCode}
{currencyNarrowSymbol}
{amount}
</>
);
}
Loading

0 comments on commit 92ef97c

Please sign in to comment.