ashe
/
sos-nextjs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Non-admin navigate categories

Browse Source
main
Ashelyn Dawn 4 years ago
parent ad53c4d8f4
commit 04f9546522
6 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File

3
components/card/card.js
Unescape Escape View File

@ -8,8 +8,7 @@ import axios from 'axios'
export default function Card({item}) { export default function Card({item}) {
const [cart, setCart] = useCart() const [cart, setCart] = useCart()
const numInCart = cart?.items?.find(i => i.item.uuid === item.uuid)?.count || 0 const numInCart = cart?.items?.find(i => i.item.uuid === item.uuid)?.count || 0
let featuredImage = item.images.filter(i=>i.featured)[0] let featuredImage = item.images.find(i=>i.featured) || item.images[0]
if(!featuredImage) featuredImage = item.images[0]
const addToCart = async ev => { const addToCart = async ev => {
if(ev) ev.preventDefault() if(ev) ev.preventDefault()

20
components/categoryCard/categoryCard.js
Unescape Escape View File

@ -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>
)
}

3
db/mappings/item.js
Unescape Escape View File

@ -54,6 +54,7 @@ module.exports = [{
properties: [ properties: [
'name', 'name',
'description', 'description',
'urlslug' 'urlslug',
'item_count'
] ]
}] }]

9
db/sql/2-views.sql
Unescape Escape View File

@ -54,6 +54,8 @@ create or replace view sos.v_category as
"child_category".category_uuid as child_category_uuid, "child_category".category_uuid as child_category_uuid,
"child_category".category_name as child_category_name, "child_category".category_name as child_category_name,
"child_category".category_urlslug as child_category_urlslug, "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_uuid as parent_category_uuid,
"parent_category".category_name as parent_category_name, "parent_category".category_name as parent_category_name,
"parent_category".category_urlslug as parent_category_urlslug, "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" "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_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 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" "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."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; left join sos.v_item on "category_item".category_item_item_uuid = item_uuid;

24
pages/store/categories.js
Unescape Escape View File

@ -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>}
</>
)
}

9
pages/store/category/[slug].js
Unescape Escape View File

@ -3,6 +3,7 @@ import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link'
import Card from '~/components/card' import Card from '~/components/card'
import CategoryCard from '~/components/categoryCard'
import styles from './style.module.css' import styles from './style.module.css'
Category.getInitialProps = async function({ctx: {axios, query: {slug}}}){ 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> <Head><title>{category.name}</title></Head>
<h2>{category.name}</h2> <h2>{category.name}</h2>
<div className={styles.pageContainer}> <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/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> <p className={styles.description}>{category.description}</p>
{children.length > 0 && <div className={styles.childCategories}> {children.length > 0 && <div className={styles.childCategories}>
{children.map(childCategory => ( {children.map(childCategory => (
<> <CategoryCard category={childCategory}/>
<Link href={`/store/category/${childCategory.urlslug}`}><a>{childCategory.name}</a></Link>
</>
))} ))}
</div>} </div>}
<div className={styles.items}> <div className={styles.items}>

Write Preview
Loading…
Cancel
Save