import { GetServerSidePropsContext , GetStaticPaths , GetStaticPropsContext , } from "next" ; import React , { ReactElement } from "react" ; import { OuterContainer } from "../../../components/helpers" ; import Layout from "../../../components/Layout" ; import Menu from "../../../components/Menu" ; import NotFound from "../../../components/NotFound" ; import ProductList from "../../../components/Products/ProductList" ; import SearchBar from "../../../components/SearchBar/SearchBar" ; import { SBottomSpacer , SProductSectionHeader , } from "../../../styles/StyledElements" ; import { IAllProducts } from "../../../types" ; import { getCategory , getCategoryList } from "../../../utils" ; interface Props { category : IAllProducts ; } export default function Category ( { category } ) { if ( ! category ) { return < NotFound > Not Found < /NotFound>; } return ( < Layout title = { `${ category . category_name || "Category" }` } > < OuterContainer > < SearchBar /> < SProductSectionHeader hasBackground = { false } > < div > < h2 > { category . category_name } < /h2> < /div> < /SProductSectionHeader> < ProductList products = { category . products } category_id = { category . category_id } / > < SBottomSpacer /> < Menu / > < /OuterContainer> < /Layout>); } export const getStaticProps = async ( ctx ) => { if ( ctx && "params" in ctx && "categoryId" in ctx . params ! ) { const categoryId = ctx . params ! . categoryId ! as string ; const category = getCategory ( categoryId ) ; if ( ! category ) { return { props : { } , } ; } return { props : { category } , } ; } return { props : { } } ; } ; export const getStaticPaths = async ( ) => { const categoryList = getCategoryList ( ) ; const staticList = categoryList . map ( ( item ) => ( { params : { categoryId : `${ item . id }` , } , } ) ) ; return { fallback : true , paths : staticList , } ; } ;