You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
5 years ago
|
import React, {useState} from 'react'
|
||
|
|
import Head from 'next/head'
|
||
|
|
import Link from 'next/link'
|
||
|
|
|
||
|
|
import Card from '~/components/card'
|
||
|
|
import styles from './style.module.css'
|
||
|
|
|
||
|
|
Category.getInitialProps = async function({ctx: {axios, query: {slug}}}){
|
||
|
|
console.log(slug)
|
||
|
|
const {data: category} = await axios.get(`/api/categories/by-slug/${slug}`)
|
||
|
|
|
||
|
|
console.log(category)
|
||
|
|
|
||
|
|
if(!category) {
|
||
|
|
const err = new Error("Not found")
|
||
|
|
err.status = 404
|
||
|
|
throw err;
|
||
|
|
}
|
||
|
|
|
||
|
|
return {category}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Category({category: {items, children, parent, ...category}}){
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Head><title>{category.name}</title></Head>
|
||
|
|
<h2>{category.name}</h2>
|
||
|
|
<div className={styles.pageContainer}>
|
||
|
|
{parent && (
|
||
|
|
<Link href={`/store/category/${parent.urlslug}`}><a className={styles.parentLink}>< Back to {parent.name}</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>
|
||
|
|
</>
|
||
|
|
))}
|
||
|
|
</div>}
|
||
|
|
<div className={styles.items}>
|
||
|
|
{items.length > 0 ? (
|
||
|
|
<div className="cardContainer">
|
||
|
|
{items.map(item=>
|
||
|
|
<Card item={item}/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
) : <p>No items found</p> }
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|