WIP

frontend/pages/404.js

@@ -0,0 +1,3 @@
+export default function Custom404() {
+  return <h1>404 - Page Not Found</h1>
+}

frontend/pages/500.js

@@ -0,0 +1,3 @@
+export default function Custom500() {
+  return <h1>500 - Server-side error occurred</h1>
+}

frontend/pages/[slug]/index.js

@@ -1,36 +1,32 @@
-import directus from '~/lib/directus'
+export const getStaticPaths = async () => {
+  const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/pages`)
+  url.searchParams.append('fields[]', 'slug')
+  const res = await fetch(url.toString())
 
-// export const getServerSideProps = async () => {
-//   const { data: pages } = await directus.items('pages').readByQuery({
-//     limit: 1,
-//   })
+  const { data: pages } = await res.json()
 
-//   return {
-//     paths: pages.map((p) => ({ params: { slug: p.slug } })),
-//     fallback: false, // false or "blocking"
-//   }
-// }
+  return {
+    paths: pages.map((p) => ({ params: { slug: p.slug } })),
+    fallback: false, // false or "blocking"
+  }
+}
 
-export const getServerSideProps = async ({ params }) => {
-  const { slug } = params
+export const getStaticProps = async ({ params: { slug } }) => {
+  const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/pages`)
+  url.searchParams.append('fields[]', 'title')
+  url.searchParams.append('fields[]', 'content')
+  url.searchParams.append('limit', 1)
+  url.searchParams.append('filter', JSON.stringify({ slug: { _eq: slug } }))
+  const res = await fetch(url.toString())
 
   const {
     data: [page],
-  } = await directus.items('pages').readByQuery({
-    limit: 1,
-    filter: {
-      slug: {
-        _eq: slug,
-      },
-    },
-  })
+  } = await res.json()
 
-  if (!page) return { notFound: true }
-
-  return { props: { page } }
+  return { props: page }
 }
 
-export default function Page({ page }) {
+export default function Page(page) {
   return (
     <div>
       <h1>{page.title}</h1>

frontend/pages/_app.js

@@ -1,7 +1,7 @@
 import { ChakraProvider } from '@chakra-ui/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import Layout from '~/components/layout'
-import theme from './theme'
+import theme from '~/src/theme'
 
 const queryClient = new QueryClient()
 

frontend/pages/_error.js

@@ -0,0 +1,8 @@
+export default function Error(props) {
+  return (
+    <>
+      <h2>Oops, there is an error!</h2>
+      <pre>{JSON.stringify(props, null, 2)}</pre>
+    </>
+  )
+}

frontend/pages/import/index.js

@@ -1,166 +0,0 @@
-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(' &amp')
-      .join('')
-      .split('&')
-      .join('and')
-      .split('/')
-      .join('-')
-      .replace(/\-\-+/, '-')
-      .trim()
-  )
-}
-
-function sanitize(str = '') {
-  return (
-    str
-      //
-      .split(' &amp')
-      .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 function Home() {
-  // importCategories()
-  // importSubcategories()
-  // importCategoryStructure()
-  // importVendors()
-
-  return (
-    <main>
-      <h1>Import {new Date().toISOString()}</h1>
-      {/* <pre>{JSON.stringify(res, null, 2)} </pre> */}
-    </main>
-  )
-}

frontend/pages/theme.js

@@ -1,40 +0,0 @@
-import { extendTheme } from '@chakra-ui/react'
-import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
-
-const pagination = defineStyle({
-  whiteSpace: 'nowrap',
-  bg: 'transparent',
-  gap: 3,
-  paddingInlineStart: 3,
-  paddingInlineEnd: 3,
-  lineHeight: 10,
-  borderRadius: 'md',
-  border: '1px solid',
-  borderColor: 'inherit',
-  width: '100%',
-  _hover: {
-    textDecor: 'none',
-  },
-  '&.current': {
-    bg: 'var(--chakra-colors-gray-300)',
-    border: '1px solid transparent',
-  },
-  _dark: {
-    bg: 'var(--chakra-colors-gray-900)',
-    '&.current': {
-      bg: 'var(--chakra-colors-gray-700)',
-    },
-  },
-})
-
-const linkTheme = defineStyleConfig({
-  variants: { pagination },
-})
-
-const theme = extendTheme({
-  components: {
-    Link: linkTheme,
-  },
-})
-
-export default theme

frontend/pages/vendors/[slug]/index.js

@@ -1,32 +1,41 @@
-import directus from '~/lib/directus'
+// 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())
 
-export const getServerSideProps = async ({ params }) => {
-  const { slug } = params
+  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 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 } },
-  })
+  } = await res.json()
 
-  if (!vendor) return { notFound: true }
-
-  return { props: { vendor } }
+  return { props: vendor }
 }
 
-export default function VendorPage({ vendor }) {
+export default function VendorPage(vendor) {
   return (
-    <div>
+    <>
       <h1>{vendor.name}</h1>
       <p>{vendor.description}</p>
 
@@ -78,11 +87,11 @@ export default function VendorPage({ vendor }) {
           <h2>Categories</h2>
           <ul>
             {vendor.categories.map((cat) => (
-              <li key={cat.id}>{cat.categories_id.name}</li>
+              <li key={cat.categories_id.slug}>{cat.categories_id.name}</li>
             ))}
           </ul>
         </>
       )}
-    </div>
+    </>
   )
 }

frontend/pages/vendors/index.js

@@ -1,5 +1,5 @@
 import { Link } from '@chakra-ui/next-js'
-import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid, Text, Skeleton } from '@chakra-ui/react'
+import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid, Skeleton } from '@chakra-ui/react'
 import { useQuery } from '@tanstack/react-query'
 import { useRouter } from 'next/router'
 import Pagination from '~/components/pagination'
@@ -15,13 +15,16 @@ export default function VendorsPage() {
   const { data, isFetching } = useQuery({
     queryKey: ['vendors', page],
     queryFn: async (...props2) => {
-      await new Promise((r) => setTimeout(r, 2000))
+      const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
+      url.searchParams.append('fields[]', '*')
+      url.searchParams.append('limit', PER_PAGE)
+      url.searchParams.append('page', page)
+      url.searchParams.append('sort', 'name')
+      url.searchParams.append('meta[]', 'filter_count')
 
-      const res = await fetch(
-        `${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors?fields[]=*&limit=12&page=${page}&meta[]=filter_count&sort=name`
-      )
+      const res = await fetch(url.toString())
       if (!res.ok) {
-        throw new Error('wrong')
+        throw new Error('Oops')
       }
 
       return res.json()