Files
pca-pijac/frontend/pages/vendors/[slug]/index.js
2023-07-06 16:40:08 +04:00

98 lines
2.5 KiB
JavaScript

// import directus from '~/lib/directus'
export const getStaticPaths = async () => {
const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
url.searchParams.append('fields[]', 'slug')
url.searchParams.append('limit', -1)
const res = await fetch(url.toString())
const { data: vendors } = await res.json()
return {
paths: vendors.map((v) => ({ params: { slug: v.slug } })),
fallback: false, // false or "blocking"
}
}
export const getStaticProps = async ({ params: { slug } }) => {
const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
url.searchParams.append('fields[]', '*')
url.searchParams.append('fields[]', 'categories.categories_id.slug')
url.searchParams.append('fields[]', 'categories.categories_id.name')
url.searchParams.append('fields[]', 'categories.categories_id.parent_id')
url.searchParams.append('fields[]', 'categories.categories_id.subcategories.slug')
url.searchParams.append('fields[]', 'categories.categories_id.subcategories.name')
url.searchParams.append('limit', 1)
url.searchParams.append('filter', JSON.stringify({ slug: { _eq: slug } }))
const res = await fetch(url.toString())
const {
data: [vendor],
} = await res.json()
return { props: vendor }
}
export default function VendorPage(vendor) {
return (
<>
<h1>{vendor.name}</h1>
<p>{vendor.description}</p>
<h2>Address</h2>
<p>
{vendor.address_line_1 && (
<>
{vendor.address_line_1}
<br />
</>
)}
{vendor.address_line_2 && (
<>
{vendor.address_line_2}
<br />
</>
)}
{vendor.city && (
<>
{vendor.city}
<br />
</>
)}
{vendor.state && (
<>
{vendor.state}
<br />
</>
)}
{vendor.country && (
<>
{vendor.country}
<br />
</>
)}
</p>
{vendor.website && (
<>
<h2>Website</h2>
<a href={vendor.website} target="_blank">
{vendor.website}
</a>
</>
)}
{vendor.categories.length > 0 && (
<>
<h2>Categories</h2>
<ul>
{vendor.categories.map((cat) => (
<li key={cat.categories_id.slug}>{cat.categories_id.name}</li>
))}
</ul>
</>
)}
</>
)
}