document loading working

package-lock.json

@@ -8,6 +8,7 @@
       "name": "eexiv-2",
       "version": "0.1.0",
       "dependencies": {
+        "@tanstack/react-query": "^5.20.2",
         "minisearch": "^6.3.0",
         "next": "14.1.0",
         "react": "^18",
@@ -466,6 +467,30 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.20.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.20.2.tgz",
+      "integrity": "sha512-sAILwNiyA1I52e6imOsmNDUA/PuOayOzqz5jcLiIB5wBXqVk+HIiriWouPcAkjS8RqARfHUehuoPwcZ7Uzh0GQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.20.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.20.2.tgz",
+      "integrity": "sha512-949myvMY77cPqwb71m3wRG2ypgwPijshO5kN9w0CDKWrFC0X8Wh1mwSqst88kIr58tWlWNsGy3U40AK23RgYQA==",
+      "dependencies": {
+        "@tanstack/query-core": "5.20.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@types/file-saver": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",

package.json

@@ -10,6 +10,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.20.2",
     "minisearch": "^6.3.0",
     "next": "14.1.0",
     "react": "^18",

src/app/db/data.ts

@@ -346,8 +346,7 @@ authorName (as a slug): {
   website: website url
 }
 */
-export interface Authors {
-  [key: string]: {
+export interface Author {
   name: {
     first: string
     last: string
@@ -360,8 +359,7 @@ export interface Authors {
   bio?: string
   website?: string
 }
-}
-export const authors: Authors = {
+export const authors: { [key: string]: Author } = {
   shasan: {
     name: {
       first: 'Saim',

src/app/db/loaders.ts

@@ -1,4 +1,4 @@
-import { Document } from './data'
+import { Document, Author } from './data'
 
 export const loadDocument = (id: string): Promise<Document> => {
   return new Promise((resolve, reject) => {
@@ -62,3 +62,32 @@ export const loadAllDocuments = (): Promise<{ [key: string]: Document }> => {
     }
   })
 }
+
+export const loadAllAuthors = (): Promise<{ [key: string]: Author }> => {
+  return new Promise((resolve, reject) => {
+    if (typeof Worker !== 'undefined') {
+      const worker = new Worker(
+        new URL('./workers/documentLoader.worker.ts', import.meta.url),
+        { type: 'module' }
+      )
+
+      worker.onmessage = (e: MessageEvent<{ [key: string]: Author }>) => {
+        resolve(e.data)
+        worker.terminate()
+      }
+
+      worker.onerror = (error) => {
+        reject(error)
+        worker.terminate()
+      }
+
+      worker.postMessage('LOAD')
+    } else {
+      reject(
+        new Error(
+          'Web Workers are not supported in this environment. Please avoid using a prehistoric browser.'
+        )
+      )
+    }
+  })
+}

src/app/db/workers/affiliationLoader.worker.ts

@@ -0,0 +1,7 @@
+import { affiliations } from '../data'
+
+onmessage = (e) => {
+  if (e.data === 'LOAD') {
+    self.postMessage(affiliations)
+  }
+}

src/app/db/workers/authorLoader.worker.ts

@@ -0,0 +1,7 @@
+import { authors } from '../data'
+
+onmessage = (e) => {
+  if (e.data === 'LOAD') {
+    self.postMessage(authors)
+  }
+}

src/app/db/workers/nationalityLoader.worker.ts

@@ -0,0 +1,7 @@
+import { nationalities } from '../data'
+
+onmessage = (e) => {
+  if (e.data === 'LOAD') {
+    self.postMessage(nationalities)
+  }
+}

src/app/db/workers/topicLoader.worker.ts

@@ -0,0 +1,7 @@
+import { topics } from '../data'
+
+onmessage = (e) => {
+  if (e.data === 'LOAD') {
+    self.postMessage(topics)
+  }
+}

src/app/document/view/[slug]/DocumentViewer.tsx

@@ -1,4 +1,4 @@
-import { DocumentType, Document } from '@/app/db/data'
+import { DocumentType } from '@/app/db/data'
 import { Zilla_Slab } from 'next/font/google'
 import { epoch2datestring } from '@/app/utils/epoch2datestring'
 import {
@@ -10,14 +10,21 @@ import {
 } from '@/app/components/DataDisplay'
 import { ItemBadge, Status } from '@/app/components/Badges'
 import Link from 'next/link'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { loadDocument } from '@/app/db/loaders'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500', '700'] })
 
-export default function DocumentViewer({
-  doc,
-  slug,
-}: Readonly<{ doc: Document; slug: string }>) {
-  const { manifest, abstract, file, citation } = doc
+export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
+  const { data, error } = useSuspenseQuery({
+    queryKey: [slug],
+    queryFn: () => {
+      const data = loadDocument(slug)
+      return data
+    },
+  })
+
+  const { manifest, abstract, file, citation } = data
   const {
     title,
     authors,
@@ -31,6 +38,8 @@ export default function DocumentViewer({
     status,
   } = manifest
 
+  if (error) throw error
+
   return (
     <div className='max-w-4xl lg:max-w-6xl mx-auto'>
       <h1

src/app/document/view/[slug]/page.tsx

@@ -1,29 +1,13 @@
 'use client'
-import { Zilla_Slab } from 'next/font/google'
-import { DocumentType, reviewer, Document, documents } from '@/app/db/data'
-import { loadDocument, loadAllDocuments } from '@/app/db/loaders'
 import DocumentViewer from './DocumentViewer'
-import createResource from '@/app/utils/createResource'
-import { Suspense, useEffect, useMemo } from 'react'
+import ErrorBoundary from '@/app/utils/ErrorBoundary'
 
 export default function Page({
   params,
 }: Readonly<{ params: { slug: string } }>) {
-  // const docResource = createResource(loadDocument(params.slug))
-  // const doc = docResource.read()
-
-  useEffect(() => {
-    const check = async () => {
-      const doc = await loadDocument(params.slug)
-      console.log(doc)
-    }
-    check()
-  })
-
   return (
-    <>
-      <div>hi</div>
-      <DocumentViewer doc={documents[params.slug]} slug={params.slug} />
-    </>
+    <ErrorBoundary>
+      <DocumentViewer slug={params.slug} />
+    </ErrorBoundary>
   )
 }

src/app/layout.tsx

@@ -8,6 +8,7 @@ import Container from './container/Container'
 import MobileMenu from './components/MobileMenu'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
+import Providers from './providers'
 
 /* The default font is Inter. If you want to use Zilla Slab (or any other Google Font, 
   which are pre-provided by Next.js in the 'next/font/google' module), you need to 
@@ -31,6 +32,7 @@ export default function RootLayout({
   return (
     <html lang='en'>
       <body className={inter.className}>
+        <Providers>
           <ToastContainer />
           <div className={styles.header}>
             <div className='max-w-[1200px] flex flex-nowrap mx-auto justify-between items-center'>
@@ -105,6 +107,7 @@ export default function RootLayout({
               </ul>
             </div>
           </footer>
+        </Providers>
       </body>
     </html>
   )

src/app/providers.jsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useState } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+export default function Providers({ children }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+          },
+        },
+      })
+  )
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}

src/app/utils/ErrorBoundary.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { notFound } from 'next/navigation'
+
+export default class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.error('Error caught by Error Boundary:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      if (this.state.error.message === '404') notFound()
+      return <h1>Something went wrong.</h1>
+    }
+
+    return this.props.children
+  }
+}

src/app/utils/createResource.ts

@@ -1,26 +0,0 @@
-export default function wrapPromise(promise: Promise<any>) {
-  let status = 'pending'
-  let result: any
-  let suspender = promise.then(
-    (r) => {
-      status = 'success'
-      result = r
-    },
-    (e) => {
-      status = 'error'
-      result = e
-    }
-  )
-
-  return {
-    read() {
-      if (status === 'pending') {
-        throw suspender
-      } else if (status === 'error') {
-        throw result
-      } else if (status === 'success') {
-        return result
-      }
-    },
-  }
-}