Skip to content

Commit

Permalink
adding test logging
Browse files Browse the repository at this point in the history
  • Loading branch information
@balazsbajorics
balazsbajorics committed Oct 4, 2024
1 parent b464dfb commit 2322913
Show file tree
Hide file tree
Showing 2 changed files with 167 additions and 144 deletions.
141 changes: 36 additions & 105 deletions app/routes/_index/route.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,48 @@
import { useLoaderData } from '@remix-run/react'
import { json } from '@shopify/remix-oxygen'
import React from 'react'

import { Column } from '@h2/new/Layout'
import Hero from './sections/hero'
import BestSellers from './sections/best-sellers'
import Collections from './sections/collections'
import FeaturedProducts from './sections/featured-products'
import OurPromise from './sections/our-promise'

/**
* @type {MetaFunction}
*/
export const meta = () => {
return [{ title: 'Builder Supply | Home' }]
}
export default function Homepage() {
const renderCount = React.useRef(Math.random())
renderCount.current = renderCount.current + 1
console.log('Homepage render', renderCount.current)

/**
* @param {LoaderFunctionArgs}
*/
export async function loader({ context: { storefront } }) {
const { bestSellers } = await storefront.query(
BEST_SELLERS_QUERY,
)
if (
typeof performance !== 'undefined' &&
typeof performance.measure !== 'undefined'
) {
performance.measure(
`Homepage route render ${renderCount.current}`,
{
start: performance.now(),
duration: 50,
},
)
}

return json({ bestSellers })
}
React.useEffect(() => {
return function cleanup() {
// we are about to unmount!
console.log('Homepage unmount', renderCount.current)
if (
typeof performance !== 'undefined' &&
typeof performance.measure !== 'undefined'
) {
performance.measure(
`Homepage route unmount ${renderCount.current}`,
{
start: performance.now(),
duration: 50,
},
)
}
}
}, [])

export default function Homepage() {
/** @type {LoaderReturnData} */
const data = useLoaderData()
return (
<Column>
<Hero />
<BestSellers />
<Collections />
<FeaturedProducts />
<OurPromise />
</Column>
)
}

/*
{
handle: 'builder-tote',
title: 'Builders Tote',
variants: {
nodes: [
{
availableForSale: true,
price: {
amount: '38.00',
currencyCode: 'CAD',
},
compareAtPrice: {
amount: '42.00',
currencyCode: 'CAD',
},
image: {
id: 'gid://Shopify/placeholder/1234',
altText: 'Placeholder',
height: '600',
width: '400',
url: 'https://cdn.shopify.com/s/files/1/0657/3811/3197/files/01-DevMode-Buildertote_PDP_3_fa8b6520-484a-47e7-818d-b217b04d31e6.png',
},
},
],
},
*/

const BEST_SELLERS_QUERY = `#graphql
query BestSellers(
$country: CountryCode
$language: LanguageCode
) @inContext(country: $country, language: $language) {
bestSellers: collection(handle: "best-sellers") {
id
handle
title
description
products(
first: 6
) {
nodes {
id
title
handle
variants (first: 1) {
nodes {
availableForSale
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
image {
id
altText
height
width
url
}
}
}
}
}
}
}
`

/** @typedef {import('@shopify/remix-oxygen').LoaderFunctionArgs} LoaderFunctionArgs */
/** @template T @typedef {import('@remix-run/react').MetaFunction<T>} MetaFunction */
/** @typedef {import('storefrontapi.generated').FeaturedCollectionFragment} FeaturedCollectionFragment */
/** @typedef {import('storefrontapi.generated').RecommendedProductsQuery} RecommendedProductsQuery */
/** @typedef {import('@shopify/remix-oxygen').SerializeFrom<typeof loader>} LoaderReturnData */
170 changes: 131 additions & 39 deletions app/routes/_index/sections/hero.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,141 @@
import { Button } from '@h2/new/Button'
import { Heading, Text } from '@h2/new/Text'
import { Image } from '@shopify/hydrogen'
import * as React from 'react'

export default function Hero() {
const renderCount = React.useRef(Math.random())
renderCount.current = renderCount.current + 1
console.log('Hero render', renderCount.current)

if (
typeof performance !== 'undefined' &&
typeof performance.measure !== 'undefined'
) {
performance.measure(
`Hero render ${renderCount.current}`,
{
start: performance.now(),
duration: 50,
},
)
}

React.useEffect(() => {
return function cleanup() {
// we are about to unmount!
console.log('Hero unmount', renderCount.current)
if (
typeof performance !== 'undefined' &&
typeof performance.measure !== 'undefined'
) {
performance.measure(
`Hero unmount ${renderCount.current}`,
{
start: performance.now(),
duration: 50,
},
)
}
}
}, [])

return (
<section className='w-full relative min-h-8 h-svh max-h-[64rem] bg-darkGray'>
<section className='w-full relative min-h-8 h-svh max-h-[64rem] bg-darkGray text-white'>
<div className='min-h-inherit h-full mx-auto px-4 md:px-8 lg:px-10 w-full relative z-10 max-w-7xl pb-24 pt-36'>
<div className='w-auto min-h-inherit h-full items-start justify-between flex flex-col'>
<div className='w-auto h-auto gap-4 items-start justify-center flex flex-col pt-[10vh]'>
<Text
uppercase
size={6}
font='display'
color='accent'
className='pl-1'
>
Summer 2024
</Text>
<Heading font='text' size='8' color='white'>
Building
</Heading>
<Heading
font='display'
size='8'
color='white'
style={{ height: 106 }}
>
Essentials
</Heading>
</div>
<Button to='/products/builder-tote'>
Shop now
</Button>
<div
className='w-auto h-auto gap-4 items-start justify-center flex flex-col pt-[10vh]'
style={{
top: 196,
left: 84,
position: 'absolute',
width: 309,
height: 324,
}}
>
<span>Summer 2024</span>
<span>Building</span>
<span style={{ height: 106 }}>Essentials</span>
</div>
</div>
<div className='grid absolute z-0 inset-0 pointer-events-none grid-cols-2'>
<div />
<div className='relative'>
<div className='absolute inset-0 bg-gradient-to-r from-darkGray to-transparent to-50% z-0' />
<Image
src='https://cdn.shopify.com/s/files/1/0657/3811/3197/files/home-hero.jpg?v=1716832320'
className='object-cover w-full h-full -z-10'
/>
<div
className='w-auto min-h-inherit h-full items-start justify-between flex flex-col'
style={{
top: 158,
left: 96,
position: 'absolute',
width: 71,
height: 723,
}}
>
<Counter />
</div>
</div>
</section>
)
}

function Counter() {
const [clickCount, setClickCount] = React.useState(0)
const renderCount = React.useRef(0)
renderCount.current += 1

console.log('Counter render', renderCount.current)

if (
typeof performance !== 'undefined' &&
typeof performance.measure !== 'undefined'
) {
performance.measure(
`Counter render ${renderCount.current}`,
{
start: performance.now(),
duration: 50,
},
)
}

React.useEffect(() => {
return function cleanup() {
// we are about to unmount!
console.log('Counter unmount', renderCount.current)

if (
typeof performance !== 'undefined' &&
typeof performance.measure !== 'undefined'
) {
performance.measure(
`Counter unmount ${renderCount.current}`,
{
start: performance.now(),
duration: 50,
},
)
}
}
}, [])

return (
<div style={{ contain: 'layout' }}>
<div>Render count:{renderCount.current}</div>
<div
style={{
width: 186,
height: 116,
backgroundColor: 'red',
}}
/>
<button
onClick={() => {
setClickCount((prev) => prev + 1)
}}
style={{
cursor: 'pointer',
backgroundColor: '#aaaaaa33',
left: 26,
top: 45,
width: 134,
height: 45,
}}
>
click me {clickCount}
</button>
</div>
)
}

0 comments on commit 2322913

Please sign in to comment.