WIP: app -> pages
This commit is contained in:
38
frontend/pages/[slug]/index.js
Normal file
38
frontend/pages/[slug]/index.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import directus from '~/lib/directus'
|
||||
|
||||
export const getStaticPaths = async () => {
|
||||
const { data: pages } = await directus.items('pages').readByQuery({
|
||||
limit: 1,
|
||||
})
|
||||
|
||||
return {
|
||||
paths: pages.map((p) => ({ params: { slug: p.slug } })),
|
||||
fallback: false, // false or "blocking"
|
||||
}
|
||||
}
|
||||
|
||||
export const getStaticProps = async ({ params }) => {
|
||||
const { slug } = params
|
||||
|
||||
const {
|
||||
data: [page],
|
||||
} = await directus.items('pages').readByQuery({
|
||||
limit: 1,
|
||||
filter: {
|
||||
slug: {
|
||||
_eq: slug,
|
||||
},
|
||||
},
|
||||
})
|
||||
return { props: { page } }
|
||||
}
|
||||
|
||||
export default function Page({ page }) {
|
||||
return (
|
||||
<div>
|
||||
<h1>{page.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{ __html: page.content }}></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
12
frontend/pages/_app.js
Normal file
12
frontend/pages/_app.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import { ChakraProvider } from '@chakra-ui/react'
|
||||
import Layout from '~/components/layout'
|
||||
|
||||
export default function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<ChakraProvider>
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
</ChakraProvider>
|
||||
)
|
||||
}
|
||||
166
frontend/pages/import/page.js
Normal file
166
frontend/pages/import/page.js
Normal file
@@ -0,0 +1,166 @@
|
||||
import directus from '~/lib/directus'
|
||||
import all from '~/public/data.json'
|
||||
|
||||
function sluggify(str = '') {
|
||||
return (
|
||||
str
|
||||
.toLocaleLowerCase()
|
||||
.normalize('NFKC')
|
||||
.trim()
|
||||
//
|
||||
.split('.')
|
||||
.join(' ')
|
||||
.split('(')
|
||||
.join('')
|
||||
.split(')')
|
||||
.join('')
|
||||
.split('|')
|
||||
.join(' ')
|
||||
.trim()
|
||||
.split(',')
|
||||
.join('')
|
||||
.split(' ')
|
||||
.join('-')
|
||||
.split('-/-')
|
||||
.join('-')
|
||||
.split(' &')
|
||||
.join('')
|
||||
.split('&')
|
||||
.join('and')
|
||||
.split('/')
|
||||
.join('-')
|
||||
.replace(/\-\-+/, '-')
|
||||
.trim()
|
||||
)
|
||||
}
|
||||
|
||||
function sanitize(str = '') {
|
||||
return (
|
||||
str
|
||||
//
|
||||
.split(' &')
|
||||
.join('')
|
||||
.split(' / ')
|
||||
.join('/')
|
||||
.split('/')
|
||||
.join(' / ')
|
||||
.trim()
|
||||
)
|
||||
}
|
||||
|
||||
async function importCategories() {
|
||||
all.results.map((one) => {
|
||||
one.raw.marketplaceexhibitorcategory?.map(async (cat) => {
|
||||
const name = sanitize(cat)
|
||||
const slug = sluggify(name)
|
||||
try {
|
||||
await directus.items('categories').createOne({
|
||||
slug,
|
||||
name,
|
||||
})
|
||||
} catch (error) {}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function importSubcategories() {
|
||||
all.results.map((one) => {
|
||||
one.raw.marketplaceexhibitorsubcategory?.map(async (cat) => {
|
||||
const name = sanitize(cat)
|
||||
const slug = sluggify(name)
|
||||
try {
|
||||
await directus.items('categories').createOne({
|
||||
slug,
|
||||
name,
|
||||
})
|
||||
} catch (error) {}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function importCategoryStructure() {
|
||||
const { data: categories } = await directus.items('categories').readByQuery({ limit: -1 })
|
||||
|
||||
all.results.map((one) => {
|
||||
one.raw.marketplaceexhibitorcategorysubcategory?.map(async (cat) => {
|
||||
const [parentTitle, catTitle] = cat.split('|')
|
||||
const catSlug = sluggify(catTitle)
|
||||
const parentSlug = sluggify(parentTitle)
|
||||
if (parentSlug) {
|
||||
try {
|
||||
const category = categories.find((c) => catSlug === c.slug)
|
||||
const parent = categories.find((c) => parentSlug === c.slug)
|
||||
await directus.items('categories').updateOne(category.id, {
|
||||
parent_id: parent.id,
|
||||
})
|
||||
} catch (error) {}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function importVendors() {
|
||||
const { data: categories } = await directus.items('categories').readByQuery({ limit: -1 })
|
||||
|
||||
return Promise.all(
|
||||
all.results.map(async (one) => {
|
||||
const name = sanitize(one.raw.name)
|
||||
let slug = sluggify(name)
|
||||
const {
|
||||
data: [existingVendor],
|
||||
} = await directus.items('vendors').readByQuery({
|
||||
fields: ['slug'],
|
||||
limit: -1,
|
||||
filter: {
|
||||
slug: {
|
||||
_eq: slug,
|
||||
},
|
||||
},
|
||||
})
|
||||
let i = 1
|
||||
while (existingVendor?.slug === slug) {
|
||||
slug = sluggify(name) + '-' + i++
|
||||
}
|
||||
|
||||
const categoryIds = new Set(
|
||||
one.raw.marketplaceexhibitorcategory
|
||||
?.map((t) => sluggify(sanitize(t)))
|
||||
.map((s) => categories.filter((t) => !t.parent_id).find((t) => s === t.slug)?.id)
|
||||
.filter((s) => !!s)
|
||||
)
|
||||
|
||||
const vendor = {
|
||||
slug,
|
||||
name,
|
||||
status: 'published',
|
||||
description: one.raw?.description,
|
||||
address_line_1: one.raw?.addressline1,
|
||||
address_line_2: one.raw?.addressline2,
|
||||
city: one.raw?.city,
|
||||
state: one.raw?.state,
|
||||
country: one.raw?.country,
|
||||
website: one.raw?.website,
|
||||
}
|
||||
try {
|
||||
const res = await directus.items('vendors').createOne(vendor)
|
||||
categoryIds.forEach(async (cid) => {
|
||||
await directus.items('vendors_categories').createOne({ vendors_id: res.id, categories_id: cid })
|
||||
})
|
||||
} catch (error) {}
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
export default async function Home() {
|
||||
// importCategories()
|
||||
// importSubcategories()
|
||||
// importCategoryStructure()
|
||||
// importVendors()
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Import {new Date().toISOString()}</h1>
|
||||
{/* <pre>{JSON.stringify(res, null, 2)} </pre> */}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
7
frontend/pages/index.js
Normal file
7
frontend/pages/index.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<pre>{JSON.stringify(new Date().toISOString().split('T').join(' ').substring(0, 16), null, 2)}</pre>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
89
frontend/pages/vendors/[slug]/page.js
vendored
Normal file
89
frontend/pages/vendors/[slug]/page.js
vendored
Normal file
@@ -0,0 +1,89 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import directus from '~/lib/directus'
|
||||
|
||||
async function getVendor(slug) {
|
||||
return directus.items('vendors').readByQuery({
|
||||
fields: [
|
||||
//
|
||||
'*',
|
||||
'categories.categories_id.slug',
|
||||
'categories.categories_id.name',
|
||||
'categories.categories_id.parent_id',
|
||||
'categories.categories_id.subcategories.slug',
|
||||
'categories.categories_id.subcategories.name',
|
||||
],
|
||||
limit: 1,
|
||||
filter: { slug: { _eq: slug } },
|
||||
})
|
||||
}
|
||||
|
||||
export default async function VendorPage({ params }) {
|
||||
const {
|
||||
data: [vendor],
|
||||
} = await getVendor(params.slug)
|
||||
|
||||
if (!vendor) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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>{cat.categories_id.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
46
frontend/pages/vendors/page.js
vendored
Normal file
46
frontend/pages/vendors/page.js
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Link } from '@chakra-ui/next-js'
|
||||
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid } from '@chakra-ui/react'
|
||||
import directus from '~/lib/directus'
|
||||
|
||||
const PER_PAGE = 50
|
||||
|
||||
async function getVendors(page = 1) {
|
||||
return directus.items('vendors').readByQuery({
|
||||
fields: [
|
||||
//
|
||||
'*',
|
||||
],
|
||||
limit: PER_PAGE,
|
||||
page,
|
||||
meta: ['filter_count'],
|
||||
})
|
||||
}
|
||||
|
||||
export default async function VendorsPage({ params }) {
|
||||
const { data: vendors, meta } = await getVendors()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Heading size="lg" my={8}>
|
||||
Vendors <small>({meta.filter_count} total)</small>
|
||||
</Heading>
|
||||
<SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
|
||||
{vendors.map((v) => (
|
||||
<LinkBox as={Card} rounded={4}>
|
||||
<Image
|
||||
roundedTop={4}
|
||||
objectFit="cover"
|
||||
src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80"
|
||||
alt="Chakra UI"
|
||||
/>
|
||||
<CardBody>
|
||||
<LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
|
||||
{v.name}
|
||||
</LinkOverlay>
|
||||
</CardBody>
|
||||
</LinkBox>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user