4
0
forked from crowetic/commerce

Merge branch 'master' of github.com:okbel/e-comm-example

This commit is contained in:
Belen Curcio 2020-10-14 17:21:42 -03:00
commit 95965f9f49
6 changed files with 140 additions and 101 deletions

View File

@ -1,21 +1,46 @@
import getAllProducts from '../../operations/get-all-products' import getAllProducts, {
Products,
Product,
} from '../../operations/get-all-products'
import type { ProductsHandlers } from '../products' import type { ProductsHandlers } from '../products'
const SORT: { [key: string]: string | undefined } = {
latest: 'date_modified',
trending: 'total_sold',
price: 'price',
}
const LIMIT = 12
// Return current cart info // Return current cart info
const getProducts: ProductsHandlers['getProducts'] = async ({ const getProducts: ProductsHandlers['getProducts'] = async ({
res, res,
body: { search, category, brand }, body: { search, category, brand, sort },
config, config,
}) => { }) => {
// Use a dummy base as we only care about the relative path // Use a dummy base as we only care about the relative path
const url = new URL('/v3/catalog/products', 'http://a') const url = new URL('/v3/catalog/products', 'http://a')
url.searchParams.set('is_visible', 'true')
url.searchParams.set('limit', String(LIMIT))
if (search) url.searchParams.set('keyword', search) if (search) url.searchParams.set('keyword', search)
if (category && Number.isInteger(Number(category))) if (category && Number.isInteger(Number(category)))
url.searchParams.set('categories:in', category) url.searchParams.set('categories:in', category)
if (brand && Number.isInteger(Number(brand))) if (brand && Number.isInteger(Number(brand)))
url.searchParams.set('brand_id', brand) url.searchParams.set('brand_id', brand)
if (sort) {
const [_sort, direction] = sort.split('-')
const sortValue = SORT[_sort]
if (sortValue && direction) {
url.searchParams.set('sort', sortValue)
url.searchParams.set('direction', direction)
}
}
// We only want the id of each product // We only want the id of each product
url.searchParams.set('include_fields', 'id') url.searchParams.set('include_fields', 'id')
@ -25,7 +50,25 @@ const getProducts: ProductsHandlers['getProducts'] = async ({
const entityIds = data.map((p) => p.id) const entityIds = data.map((p) => p.id)
const found = entityIds.length > 0 const found = entityIds.length > 0
// We want the GraphQL version of each product // We want the GraphQL version of each product
const { products } = await getAllProducts({ variables: { entityIds } }) const graphqlData = await getAllProducts({
variables: { first: LIMIT, entityIds },
})
// Put the products in an object that we can use to get them by id
const productsById = graphqlData.products.reduce<{ [k: number]: Product }>(
(prods, p) => {
prods[p.node.entityId] = p
return prods
},
{}
)
const products: Products = found ? [] : graphqlData.products
// Populate the products array with the graphql products, in the order
// assigned by the list of entity ids
entityIds.forEach((id) => {
const product = productsById[id]
if (product) products.push(product)
})
res.status(200).json({ data: { products, found } }) res.status(200).json({ data: { products, found } })
} }

View File

@ -15,7 +15,7 @@ export type SearchProductsData = {
export type ProductsHandlers = { export type ProductsHandlers = {
getProducts: BigcommerceHandler< getProducts: BigcommerceHandler<
SearchProductsData, SearchProductsData,
{ search?: 'string'; category?: string; brand?: string } { search?: 'string'; category?: string; brand?: string; sort?: string }
> >
} }

View File

@ -12,11 +12,12 @@ export type SearchProductsInput = {
search?: string search?: string
categoryId?: number categoryId?: number
brandId?: number brandId?: number
sort?: string
} }
export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = ( export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
options, options,
{ search, categoryId, brandId }, { search, categoryId, brandId, sort },
fetch fetch
) => { ) => {
// Use a dummy base as we only care about the relative path // Use a dummy base as we only care about the relative path
@ -27,6 +28,7 @@ export const fetcher: HookFetcher<SearchProductsData, SearchProductsInput> = (
url.searchParams.set('category', String(categoryId)) url.searchParams.set('category', String(categoryId))
if (Number.isInteger(categoryId)) if (Number.isInteger(categoryId))
url.searchParams.set('brand', String(brandId)) url.searchParams.set('brand', String(brandId))
if (sort) url.searchParams.set('sort', sort)
return fetch({ return fetch({
url: url.pathname + url.search, url: url.pathname + url.search,
@ -45,6 +47,7 @@ export function extendHook(
['search', input.search], ['search', input.search],
['categoryId', input.categoryId], ['categoryId', input.categoryId],
['brandId', input.brandId], ['brandId', input.brandId],
['sort', input.sort],
], ],
customFetcher, customFetcher,
{ revalidateOnFocus: false, ...swrOptions } { revalidateOnFocus: false, ...swrOptions }

View File

@ -1,4 +1,3 @@
import { useEffect, useState } from 'react'
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Link from 'next/link' import Link from 'next/link'
@ -8,6 +7,13 @@ import useSearch from '@lib/bigcommerce/products/use-search'
import { Layout } from '@components/core' import { Layout } from '@components/core'
import { Container, Grid } from '@components/ui' import { Container, Grid } from '@components/ui'
import { ProductCard } from '@components/product' import { ProductCard } from '@components/product'
import {
filterQuery,
getCategoryPath,
getDesignerPath,
getSlug,
useSearchMeta,
} from '@utils/search'
export async function getStaticProps({ preview }: GetStaticPropsContext) { export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { categories, brands } = await getSiteInfo() const { categories, brands } = await getSiteInfo()
@ -17,7 +23,14 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
} }
} }
export default function Home({ const SORT = Object.entries({
'latest-desc': 'Latest arrivals',
'trending-desc': 'Trending',
'price-asc': 'Price: Low to high',
'price-desc': 'Price: High to low',
})
export default function Search({
categories, categories,
brands, brands,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
@ -25,9 +38,8 @@ export default function Home({
const { asPath } = router const { asPath } = router
const { q, sort } = router.query const { q, sort } = router.query
const query = filterQuery({ q, sort }) const query = filterQuery({ q, sort })
const pathname = asPath.split('?')[0]
const { category, brand } = useSearchMeta(asPath) const { pathname, category, brand } = useSearchMeta(asPath)
const activeCategory = categories.find( const activeCategory = categories.find(
(cat) => getSlug(cat.path) === category (cat) => getSlug(cat.path) === category
) )
@ -39,6 +51,7 @@ export default function Home({
search: typeof q === 'string' ? q : '', search: typeof q === 'string' ? q : '',
categoryId: activeCategory?.entityId, categoryId: activeCategory?.entityId,
brandId: activeBrand?.entityId, brandId: activeBrand?.entityId,
sort: typeof sort === 'string' ? sort : '',
}) })
return ( return (
@ -114,62 +127,34 @@ export default function Home({
/> />
</> </>
) : ( ) : (
// TODO: add a proper loading state
<div>Searching...</div> <div>Searching...</div>
)} )}
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<ul> <ul>
<li className="py-1 text-primary font-bold tracking-wide">Sort</li> <li className="py-1 text-primary font-bold tracking-wide">Sort</li>
<li className="py-1 text-default"> <li
<Link className={cn('py-1 text-default', {
href={{ underline: !sort,
pathname, })}
query: filterQuery({ q }), >
}} <Link href={{ pathname, query: filterQuery({ q }) }}>
>
<a>Relevance</a> <a>Relevance</a>
</Link> </Link>
</li> </li>
<li className="py-1 text-default"> {SORT.map(([key, text]) => (
<Link <li
href={{ key={key}
pathname, className={cn('py-1 text-default', {
query: filterQuery({ q, sort: 'latest-desc' }), underline: sort === key,
}} })}
> >
<a>Latest arrivals</a> <Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
</Link> <a>{text}</a>
</li> </Link>
<li className="py-1 text-default"> </li>
<Link ))}
href={{
pathname,
query: filterQuery({ q, sort: 'trending-desc' }),
}}
>
<a>Trending</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'price-asc' }),
}}
>
<a>Price: Low to high</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'price-desc' }),
}}
>
<a>Price: High to low</a>
</Link>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -177,48 +162,4 @@ export default function Home({
) )
} }
Home.Layout = Layout Search.Layout = Layout
function useSearchMeta(asPath: string) {
const [category, setCategory] = useState<string | undefined>()
const [brand, setBrand] = useState<string | undefined>()
useEffect(() => {
const parts = asPath.split('/')
let c = parts[2]
let b = parts[3]
if (c === 'designers') {
c = parts[4]
}
if (c !== category) setCategory(c)
if (b !== brand) setBrand(b)
}, [asPath])
return { category, brand }
}
// Removes empty query parameters from the query object
const filterQuery = (query: any) =>
Object.keys(query).reduce<any>((obj, key) => {
if (query[key]?.length) {
obj[key] = query[key]
}
return obj
}, {})
// Remove trailing and leading slash
const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
const getCategoryPath = (slug: string, brand?: string) =>
`/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
const getDesignerPath = (slug: string, category?: string) => {
const designer = slug.replace(/^brands/, 'designers')
return `/search${designer ? `/${designer}` : ''}${
category ? `/${category}` : ''
}`
}

View File

@ -17,7 +17,8 @@
"paths": { "paths": {
"@lib/*": ["lib/*"], "@lib/*": ["lib/*"],
"@assets/*": ["assets/*"], "@assets/*": ["assets/*"],
"@components/*": ["components/*"] "@components/*": ["components/*"],
"@utils/*": ["utils/*"]
} }
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],

51
utils/search.tsx Normal file
View File

@ -0,0 +1,51 @@
import { useEffect, useState } from 'react'
export function useSearchMeta(asPath: string) {
const [pathname, setPathname] = useState<string>('/search')
const [category, setCategory] = useState<string | undefined>()
const [brand, setBrand] = useState<string | undefined>()
useEffect(() => {
// Only access asPath after hydration to avoid a server mismatch
const path = asPath.split('?')[0]
const parts = path.split('/')
console.log('P', parts)
let c = parts[2]
let b = parts[3]
if (c === 'designers') {
c = parts[4]
}
setPathname(path)
if (c !== category) setCategory(c)
if (b !== brand) setBrand(b)
}, [asPath])
return { pathname, category, brand }
}
// Removes empty query parameters from the query object
export const filterQuery = (query: any) =>
Object.keys(query).reduce<any>((obj, key) => {
if (query[key]?.length) {
obj[key] = query[key]
}
return obj
}, {})
// Remove trailing and leading slash
export const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
export const getCategoryPath = (slug: string, brand?: string) =>
`/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
export const getDesignerPath = (slug: string, category?: string) => {
const designer = slug.replace(/^brands/, 'designers')
return `/search${designer ? `/${designer}` : ''}${
category ? `/${category}` : ''
}`
}