4
0
forked from crowetic/commerce

Prefetch Search

This commit is contained in:
Belen Curcio 2020-10-12 10:58:41 -03:00
parent d5868fae02
commit aa8e8fe89d
3 changed files with 32 additions and 12 deletions

View File

@ -1,13 +1,14 @@
import cn from 'classnames' import cn from 'classnames'
import { FC } from 'react' import { FC } from 'react'
import s from './Searchbar.module.css' import s from './Searchbar.module.css'
import { useRouter } from 'next/router'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
} }
const Searchbar: FC<Props> = ({ className }) => { const Searchbar: FC<Props> = ({ className }) => {
const router = useRouter()
return ( return (
<div <div
className={cn( className={cn(
@ -15,7 +16,15 @@ const Searchbar: FC<Props> = ({ className }) => {
className className
)} )}
> >
<input className={s.input} placeholder="Search for products..." /> <input
className={s.input}
placeholder="Search for products..."
onChange={(e) => {
e.preventDefault()
router.push('/search')
console.log('changing')
}}
/>
<div className={s.iconContainer}> <div className={s.iconContainer}>
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20"> <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
<path <path

View File

@ -46,7 +46,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
return ( return (
<div className={cn(s.root, className)}> <div className={cn(s.root, className)}>
<div className="absolute"> <div className="absolute">
<h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl"> <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
{product.name} {product.name}
</h1> </h1>
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block"> <div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
@ -102,7 +102,10 @@ const ProductView: FC<Props> = ({ product, className }) => {
</div> </div>
</section> </section>
<section className="pb-12"> <section className="pb-12">
<div dangerouslySetInnerHTML={{ __html: product.description }} /> <div
className="break-words"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
</section> </section>
<section className="pb-4"> <section className="pb-4">
<Button type="button" className={s.button} onClick={addToCart}> <Button type="button" className={s.button} onClick={addToCart}>

View File

@ -4,6 +4,8 @@ import { Layout } from '@components/core'
import { Grid, Marquee, Hero } from '@components/ui' import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product' import { ProductCard } from '@components/product'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
export async function getStaticProps({ preview }: GetStaticPropsContext) { export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { products } = await getAllProducts() const { products } = await getAllProducts()
@ -19,6 +21,12 @@ export default function Home({
categories, categories,
brands, brands,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter()
useEffect(() => {
router.prefetch('/search')
}, [])
return ( return (
<div className="mt-3"> <div className="mt-3">
<Grid items={products.slice(0, 3)} wrapper={ProductCard} /> <Grid items={products.slice(0, 3)} wrapper={ProductCard} />
@ -44,22 +52,22 @@ export default function Home({
/> />
<div className="py-12 flex flex-row w-full"> <div className="py-12 flex flex-row w-full">
<div className="pr-3 w-48"> <div className="pr-3 w-48">
<ul className="uppercase"> <ul className="mb-10">
<li> <li className="py-1 text-black font-bold tracking-wide">
<h2 className="font-bold">All Categories</h2> All Categories
</li> </li>
{categories.map((cat) => ( {categories.map((cat) => (
<li key={cat.path} className="mt-2"> <li key={cat.path} className="py-1 text-gray-800">
<a href="#">{cat.name}</a> <a href="#">{cat.name}</a>
</li> </li>
))} ))}
</ul> </ul>
<ul className="uppercase mt-6"> <ul className="">
<li> <li className="py-1 text-black font-bold tracking-wide">
<h2 className="font-bold">All Designers</h2> All Designers
</li> </li>
{brands.flatMap(({ node }) => ( {brands.flatMap(({ node }) => (
<li key={node.path} className="mt-2"> <li key={node.path} className="py-1 text-gray-800">
<a href="#">{node.name}</a> <a href="#">{node.name}</a>
</li> </li>
))} ))}