WIP

frontend/components/pagination.js

@@ -4,7 +4,7 @@ import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { Fragment } from 'react'
 
-export default function Pagination({ page = 1, itemsPerPage = 12, totalItems = 0, limit = 4 }) {
+export default function Pagination({ page = 1, itemsPerPage = 12, totalItems = 0, limit = 3 }) {
   const router = useRouter()
 
   const totalPages = Math.ceil(totalItems / itemsPerPage)

frontend/package.json

@@ -9,7 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ajna/pagination": "1.4.19",
     "@chakra-ui/icons": "2.0.19",
     "@chakra-ui/next-js": "2.1.4",
     "@chakra-ui/react": "2.7.1",

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 res.json()
-//   const { data: pages } = await directus.items('pages').readByQuery({
-//     limit: 1,
-//   })
 
-//   return {
+  return {
-//     paths: pages.map((p) => ({ params: { slug: p.slug } })),
+    paths: pages.map((p) => ({ params: { slug: p.slug } })),
-//     fallback: false, // false or "blocking"
+    fallback: false, // false or "blocking"
-//   }
+  }
-// }
+}
 
-export const getServerSideProps = async ({ params }) => {
+export const getStaticProps = async ({ params: { slug } }) => {
-  const { slug } = params
+  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({
+  } = await res.json()
-    limit: 1,
-    filter: {
-      slug: {
-        _eq: slug,
-      },
-    },
-  })
 
-  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/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 { data: vendors } = await res.json()
-  const { slug } = params
+
+  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({
+  } = await res.json()
-    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 } },
-  })
 
-  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(
+      const res = await fetch(url.toString())
-        `${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors?fields[]=*&limit=12&page=${page}&meta[]=filter_count&sort=name`
-      )
       if (!res.ok) {
-        throw new Error('wrong')
+        throw new Error('Oops')
       }
 
       return res.json()