Improved Categories (#339)

* Improved Categories

* Improved Categories

* Improved Categories

* Improved Categories

* Improved Categories

* Improved Categories

pages/[...pages].tsx

@@ -10,7 +10,7 @@ import { missingLocaleInPages } from '@lib/usage-warns'
 import { getConfig } from '@framework/api'
 import getPage from '@framework/common/get-page'
 import getAllPages from '@framework/common/get-all-pages'
-import { defaultPageProps } from '@lib/defaults'
+import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
@@ -19,9 +19,9 @@ export async function getStaticProps({
 }: GetStaticPropsContext<{ pages: string[] }>) {
   const config = getConfig({ locale })
   const { pages } = await getAllPages({ preview, config })
+  const { categories } = await getSiteInfo({ config, preview })
   const path = params?.pages.join('/')
   const slug = locale ? `${locale}/${path}` : path
-
   const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
   const data =
     pageItem &&
@@ -34,7 +34,7 @@ export async function getStaticProps({
   }
 
   return {
-    props: { ...defaultPageProps, pages, page },
+    props: { pages, page, categories },
     revalidate: 60 * 60, // Every hour
   }
 }

pages/cart.tsx

@@ -7,15 +7,17 @@ import { Layout } from '@components/common'
 import { Button, Text } from '@components/ui'
 import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
 import { CartItem } from '@components/cart'
+import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
   locale,
 }: GetStaticPropsContext) {
   const config = getConfig({ locale })
+  const { categories } = await getSiteInfo({ config, preview })
   const { pages } = await getAllPages({ config, preview })
   return {
-    props: { pages },
+    props: { pages, categories },
   }
 }
 

pages/index.tsx

@@ -1,9 +1,8 @@
 import { Layout } from '@components/common'
-import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
+import { Grid, Marquee, Hero } from '@components/ui'
 // import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-
 import { getConfig } from '@framework/api'
 import getAllProducts from '@framework/product/get-all-products'
 import getSiteInfo from '@framework/common/get-site-info'
@@ -14,6 +13,8 @@ export async function getStaticProps({
   locale,
 }: GetStaticPropsContext) {
   const config = getConfig({ locale })
+  const { pages } = await getAllPages({ config, preview })
+  const { categories } = await getSiteInfo({ config, preview })
 
   const { products } = await getAllProducts({
     variables: { first: 12 },
@@ -21,15 +22,12 @@ export async function getStaticProps({
     preview,
   })
 
-  // const { categories, brands } = await getSiteInfo({ config, preview })
-  // const { pages } = await getAllPages({ config, preview })
-
   return {
     props: {
       products,
-      categories: [],
+      categories,
       brands: [],
-      pages: [],
+      pages,
     },
     revalidate: 14400,
   }
@@ -37,8 +35,6 @@ export async function getStaticProps({
 
 export default function Home({
   products,
-  brands,
-  categories,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>

pages/orders.tsx

@@ -1,18 +1,21 @@
 import type { GetStaticPropsContext } from 'next'
 import { Bag } from '@components/icons'
+import { getConfig } from '@framework/api'
 import { Layout } from '@components/common'
 import { Container, Text } from '@components/ui'
-import { getConfig } from '@framework/api'
 import getAllPages from '@framework/common/get-all-pages'
+import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
   locale,
 }: GetStaticPropsContext) {
   const config = getConfig({ locale })
+  const { categories } = await getSiteInfo({ config, preview })
   const { pages } = await getAllPages({ config, preview })
+
   return {
-    props: { pages },
+    props: { pages, categories },
   }
 }
 

pages/product/[slug].tsx

@@ -11,6 +11,7 @@ import { getConfig } from '@framework/api'
 import getProduct from '@framework/product/get-product'
 import getAllPages from '@framework/common/get-all-pages'
 import getAllProductPaths from '@framework/product/get-all-product-paths'
+import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   params,
@@ -24,6 +25,7 @@ export async function getStaticProps({
     config,
     preview,
   })
+  const { categories } = await getSiteInfo({ config, preview })
 
   if (!product) {
     throw new Error(`Product with slug '${params!.slug}' not found`)
@@ -33,6 +35,7 @@ export async function getStaticProps({
     props: {
       pages,
       product,
+      categories,
     },
     revalidate: 200,
   }

pages/profile.tsx

@@ -4,15 +4,17 @@ import getAllPages from '@framework/common/get-all-pages'
 import useCustomer from '@framework/customer/use-customer'
 import { Layout } from '@components/common'
 import { Container, Text } from '@components/ui'
+import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
   locale,
 }: GetStaticPropsContext) {
   const config = getConfig({ locale })
+  const { categories } = await getSiteInfo({ config, preview })
   const { pages } = await getAllPages({ config, preview })
   return {
-    props: { pages },
+    props: { pages, categories },
   }
 }
 

pages/search.tsx

@@ -13,12 +13,9 @@ import useSearch from '@framework/product/use-search'
 import getAllPages from '@framework/common/get-all-pages'
 import getSiteInfo from '@framework/common/get-site-info'
 
+import getSlug from '@lib/get-slug'
 import rangeMap from '@lib/range-map'
 
-// TODO(bc) Remove this. This should come from the API
-import getSlug from '@lib/get-slug'
-
-// TODO (bc) : Remove or standarize this.
 const SORT = Object.entries({
   'latest-desc': 'Latest arrivals',
   'trending-desc': 'Trending',
@@ -75,7 +72,7 @@ export default function Search({
 
   const { data } = useSearch({
     search: typeof q === 'string' ? q : '',
-    categoryId: activeCategory?.entityId,
+    categoryId: activeCategory?.id,
     brandId: (activeBrand as any)?.entityId,
     sort: typeof sort === 'string' ? sort : '',
   })
@@ -164,8 +161,7 @@ export default function Search({
                         className={cn(
                           'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
                           {
-                            underline:
-                              activeCategory?.entityId === cat.entityId,
+                            underline: activeCategory?.id === cat.id,
                           }
                         )}
                       >

pages/wishlist.tsx

@@ -1,13 +1,13 @@
 import type { GetStaticPropsContext } from 'next'
 import { Heart } from '@components/icons'
+import { getConfig } from '@framework/api'
 import { Layout } from '@components/common'
 import { Text, Container } from '@components/ui'
-import { defaultPageProps } from '@lib/defaults'
-import { getConfig } from '@framework/api'
 import { useCustomer } from '@framework/customer'
 import { WishlistCard } from '@components/wishlist'
 import useWishlist from '@framework/wishlist/use-wishlist'
 import getAllPages from '@framework/common/get-all-pages'
+import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
@@ -21,11 +21,12 @@ export async function getStaticProps({
   }
 
   const config = getConfig({ locale })
+  const { categories } = await getSiteInfo({ config, preview })
   const { pages } = await getAllPages({ config, preview })
   return {
     props: {
       pages,
-      ...defaultPageProps,
+      categories,
     },
   }
 }