|
|
|
|
import React, {useState} from 'react'
|
|
|
|
|
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}}}){
|
|
|
|
|
const {data: category} = await axios.get(`/api/categories/by-slug/${slug}`)
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
) : (
|
|
|
|
|
<Link href={`/store/categories`}><a className={styles.parentLink}>< Back to all categories</a></Link>
|
|
|
|
|
)}
|
|
|
|
|
<p className={styles.description}>{category.description}</p>
|
|
|
|
|
{children.length > 0 && <div className={styles.childCategories}>
|
|
|
|
|
{children.map(childCategory => (
|
|
|
|
|
<CategoryCard category={childCategory}/>
|
|
|
|
|
))}
|
|
|
|
|
</div>}
|
|
|
|
|
</div>
|
|
|
|
|
{items.length > 0 ? (
|
|
|
|
|
<div className="cardContainer">
|
|
|
|
|
{items.map(item=>
|
|
|
|
|
<Card item={item}/>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
) : <p>No items found</p> }
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
