Non-admin navigate categories

4 years ago · 04f9546522
parent ad53c4d8f4
commit 04f9546522
6 changed files with 61 additions and 7 deletions
--- a/components/card/card.js
+++ b/components/card/card.js
@ -8,8 +8,7 @@ import axios from 'axios'
 export default function Card({item}) {
  const [cart, setCart] = useCart()
  const numInCart = cart?.items?.find(i => i.item.uuid === item.uuid)?.count || 0
-  let featuredImage = item.images.filter(i=>i.featured)[0]
-  if(!featuredImage) featuredImage = item.images[0]
+  let featuredImage = item.images.find(i=>i.featured) || item.images[0]

  const addToCart = async ev => {
    if(ev) ev.preventDefault()
--- a/components/categoryCard/categoryCard.js
+++ b/components/categoryCard/categoryCard.js
@ -0,0 +1,20 @@
+import React from 'react'
+import Link from 'next/link'
+
+import styles from '../card/style.module.css'
+
+export default function CategoryCard({category}) {
+  const count = category.items ? category.items.length : category.item_count
+
+  return (
+    <div className={styles.card} style={{display: 'inline-block', maxWidth: 300, margin: 16}}>
+      <h3><Link href={`/store/category/${category.urlslug}`}><a>{category.name}</a></Link></h3>
+      <div className={styles['card-text']} style={{textAlign: 'center'}}>{category.description}</div>
+        <ul className={styles['card-details']}>
+          <li className={styles['number-in-stock']}>
+            {count} item{count !== 1 ? 's' : ''}
+          </li>
+        </ul>
+    </div>
+  )
+}
--- a/db/mappings/item.js
+++ b/db/mappings/item.js
@ -54,6 +54,7 @@ module.exports = [{
  properties: [
    'name',
    'description',
-    'urlslug'
+    'urlslug',
+    'item_count'
  ]
 }]
--- a/db/sql/2-views.sql
+++ b/db/sql/2-views.sql
@ -54,6 +54,8 @@ create or replace view sos.v_category as
    "child_category".category_uuid as child_category_uuid,
    "child_category".category_name as child_category_name,
    "child_category".category_urlslug as child_category_urlslug,
+    "child_category".category_description as child_category_description,
+	  coalesce("child_item_counts".category_item_count, 0)::int4 as child_category_item_count,
    "parent_category".category_uuid as parent_category_uuid,
    "parent_category".category_name as parent_category_name,
    "parent_category".category_urlslug as parent_category_urlslug,
@ -62,6 +64,13 @@ create or replace view sos.v_category as
    left join sos."category_category" "child_category_link" on "category".category_uuid = "child_category_link".category_category_parent_uuid
    left join sos."category_category" "parent_category_link" on "category".category_uuid = "parent_category_link".category_category_child_uuid
    left join sos."category" "child_category" on "child_category_link".category_category_child_uuid = "child_category".category_uuid
+    left join (
+      select
+        category_item_category_uuid as category_uuid,
+        count(category_item_item_uuid) as category_item_count
+      from sos."category_item"
+      	group by category_uuid
+    ) child_item_counts on "child_category".category_uuid = "child_item_counts".category_uuid
    left join sos."category" "parent_category" on "parent_category_link".category_category_parent_uuid = "parent_category".category_uuid
    left join sos."category_item" on "category".category_uuid = "category_item".category_item_category_uuid
    left join sos.v_item on "category_item".category_item_item_uuid = item_uuid;
--- a/pages/store/categories.js
+++ b/pages/store/categories.js
@ -0,0 +1,24 @@
+import Head from 'next/head'
+
+import CategoryCard from '~/components/categoryCard'
+import styles from './category/style.module.css'
+
+Categories.getInitialProps = async ({ctx}) => {
+  const {data: categories} = await ctx.axios.get('/api/categories')
+  return {categories}
+}
+
+export default function Categories({categories: allCategories}) {
+  const topCategories = allCategories.filter(cat => !cat.parent)
+  return (
+    <>
+      <Head><title>Categories</title></Head>
+      <h2>Categories</h2>
+      {topCategories.length > 0 && <div className={styles.childCategories}>
+        {topCategories.map(category => (
+          <CategoryCard category={category}/>
+        ))}
+      </div>}
+    </>
+  )
+}
--- a/pages/store/category/[slug].js
+++ b/pages/store/category/[slug].js
@ -3,6 +3,7 @@ import Head from 'next/head'
 import Link from 'next/link'

 import Card from '~/components/card'
+import CategoryCard from '~/components/categoryCard'
 import styles from './style.module.css'

 Category.getInitialProps = async function({ctx: {axios, query: {slug}}}){
@ -25,15 +26,15 @@ export default function Category({category: {items, children, parent, ...categor
      <Head><title>{category.name}</title></Head>
      <h2>{category.name}</h2>
      <div className={styles.pageContainer}>
-        {parent && (
+        {parent ? (
          <Link href={`/store/category/${parent.urlslug}`}><a className={styles.parentLink}>&lt; Back to {parent.name}</a></Link>
+        ) : (
+          <Link href={`/store/categories`}><a className={styles.parentLink}>&lt; Back to all categories</a></Link>
        )}
        <p className={styles.description}>{category.description}</p>
        {children.length > 0 && <div className={styles.childCategories}>
          {children.map(childCategory => (
-            <>
-              <Link href={`/store/category/${childCategory.urlslug}`}><a>{childCategory.name}</a></Link>
-            </>
+            <CategoryCard category={childCategory}/>
          ))}
        </div>}
        <div className={styles.items}>