diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx index ab965445b..28b3f8910 100644 --- a/components/common/Navbar/Navbar.tsx +++ b/components/common/Navbar/Navbar.tsx @@ -42,7 +42,7 @@ const Navbar: FC = ({ className }) => {
- +
) diff --git a/components/common/Searchbar/Searchbar.tsx b/components/common/Searchbar/Searchbar.tsx index 290873395..c091a5ef2 100644 --- a/components/common/Searchbar/Searchbar.tsx +++ b/components/common/Searchbar/Searchbar.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect } from 'react' +import { FC, useEffect, useMemo } from 'react' import cn from 'classnames' import s from './Searchbar.module.css' import { useRouter } from 'next/router' @@ -15,48 +15,51 @@ const Searchbar: FC = ({ className, id = 'search' }) => { router.prefetch('/search') }, []) - return ( -
- - { - e.preventDefault() + return useMemo( + () => ( +
+ + { + e.preventDefault() - if (e.key === 'Enter') { - const q = e.currentTarget.value + if (e.key === 'Enter') { + const q = e.currentTarget.value - router.push( - { - pathname: `/search`, - query: q ? { q } : {}, - }, - undefined, - { shallow: true } - ) - } - }} - /> -
- - - + router.push( + { + pathname: `/search`, + query: q ? { q } : {}, + }, + undefined, + { shallow: true } + ) + } + }} + /> +
+ + + +
-
+ ), + [] ) } diff --git a/pages/index.tsx b/pages/index.tsx index de29f6e75..8fbdd5e9e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -17,47 +17,33 @@ export async function getStaticProps({ }: GetStaticPropsContext) { const config = getConfig({ locale }) + // Get Featured Products const { products: featuredProducts } = await getAllProducts({ variables: { field: 'featuredProducts', first: 6 }, config, preview, }) + + // Get Best Selling Products const { products: bestSellingProducts } = await getAllProducts({ variables: { field: 'bestSellingProducts', first: 6 }, config, preview, }) + + // Get Best Newest Products const { products: newestProducts } = await getAllProducts({ variables: { field: 'newestProducts', first: 12 }, config, preview, }) + const { categories, brands } = await getSiteInfo({ config, preview }) const { pages } = await getAllPages({ config, preview }) - return { - props: { - featuredProducts, - bestSellingProducts, - newestProducts, - categories, - brands, - pages, - }, - revalidate: 10, - } -} - -const nonNullable = (v: any) => v - -export default function Home({ - featuredProducts, - bestSellingProducts, - newestProducts, - categories, - brands, -}: InferGetStaticPropsType) { - const { featured, bestSelling } = useMemo(() => { + // These are the products that are going to be displayed in the landing. + // We prefer to do the computation at buildtime/servertime + const { featured, bestSelling } = (() => { // Create a copy of products that we can mutate const products = [...newestProducts] // If the lists of featured and best selling products don't have enough @@ -73,8 +59,30 @@ export default function Home({ (i) => bestSellingProducts[i] ?? products.shift() ).filter(nonNullable), } - }, [newestProducts, featuredProducts, bestSellingProducts]) + })() + return { + props: { + featured, + bestSelling, + newestProducts, + categories, + brands, + pages, + }, + revalidate: 10, + } +} + +const nonNullable = (v: any) => v + +export default function Home({ + featured, + bestSelling, + brands, + categories, + newestProducts, +}: InferGetStaticPropsType) { return (