🛣 Redirects (#63)

# Redirects
Redirect old Open Vault `/catalog` IDs to their corresponding AAPB guid
with https://github.com/WGBH-MLA/organ

```[tasklist]
- [x] ~~/exhibits~~
- [x] ~~/collections~~
- [x] /catalog
- [x] WGBH-MLA/organ#5
```

Closes #61

app/fetch.jsx

@@ -19,7 +19,10 @@ export async function getPageBySlug(type, slug) {
     .then(res => res.json())
     .catch(err => {
       console.log('fetch error', err)
-      throw new Response(`Error fetching ${type}`, { status: 500 })
+      throw new Response(`Error fetching ${type}`, {
+        status: 500,
+        statusText: 'Something went wrong. Try again later.',
+      })
     })
   // console.log('exhibit body', body)
   if (body.meta && body.meta.total_count === 0) {

app/root.jsx

@@ -36,6 +36,7 @@ export async function loader() {
     ENV: {
       AAPB_HOST: process.env.AAPB_HOST || 'https://americanarchive.org',
       OV_API_URL: process.env.OV_API_URL || 'http://localhost:8000',
+      ORGAN_URL: process.env.ORGAN_URL || 'http://localhost:9000',
     },
   })
 }
@@ -102,7 +103,8 @@ export function ErrorBoundary() {
           {isRouteErrorResponse(error) ? (
             <>
               <h1>{error.status} error</h1>
-              {error.data}
+              <h3>{error.data}</h3>
+              <p>{error.statusText}</p>
             </>
           ) : (
             <>

app/routes/catalog.$catalogId.jsx

@@ -0,0 +1,64 @@
+import { useRouteError } from '@remix-run/react'
+import { redirectDocument } from '@remix-run/node'
+
+export const loader = async ({ params }) => {
+  let guid = await resolveCatalog(params.catalogId)
+  console.log(`Redirecting old OV id: ${params.catalogId} to AAPB guid: ${guid}`)
+
+  return redirectDocument(`https://americanarchive.org/catalog/${guid}`)
+}
+
+export async function resolveCatalog(id) {
+  if (!id.startsWith('A_') && !id.startsWith('V_')) {
+    throw new Response(`Invalid Open Vault Catalog ID: ${id}`, {
+      status: 400,
+      statusText: 'Open Vault Catalog IDs start with "A_" or "V_"',
+    })
+  }
+  console.log('checking OV id', id)
+
+  // Check Organ for a matching OV catalog ID
+  const guid = await fetch(`${process.env.ORGAN_URL}/ov/get/${id}`).then(
+    res => {
+      if (res.status === 404) {
+        throw new Response(`Catalog ID not found: ${id}`, {
+          status: 404,
+          statusText: 'No matching GUID found for Open Vault Catalog ID',
+        })
+      }
+      if (res.status !== 200) {
+        throw new Response(`Error fetching catalog ID`, {
+          status: res.status,
+          statusText: res.statusText,
+        })
+      }
+      return res.json()
+    }
+  )
+  .catch(err => {
+    if (err instanceof Response) throw err
+    throw new Response(`Error fetching catalog ID`, {
+      status: 500,
+      statusText: 'An error occured while resolving this old Open Vault catalog ID. Please try again later.',
+    })
+  })
+  console.log('Resolved guid!', guid)
+  // It's an older code, sir, but it checks out. I was about to redirect them.
+  return guid.guid
+}
+
+export const ErrorBoundary = () => {
+  const error = useRouteError()
+  console.log('cat error', error)
+  return (
+    <div className="page-body-container">
+      {error.status === 404 ? (
+        <h1>Not found</h1>
+      ) : (
+        <h1>{error.status} Error</h1>
+      )}
+      <h3>{error.data}</h3>
+      <div>{error.statusText}</div>
+    </div>
+  )
+}

app/routes/exhibits.$exhibitPath.jsx

@@ -30,7 +30,8 @@ export function ErrorBoundary() {
       <div className="page-body-container">
         <h1>Not found</h1>
         <h3>{error.data}</h3>
-        Check your spelling, or try another route.
+        <div>{error.statusText}</div>
+        <div>Check your spelling, or try another route.</div>
       </div>
     )
   }

package.json

@@ -31,7 +31,7 @@
     "postcss": "^8.4.39",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
-    "vite": "^5.3.4"
+    "vite": "^5.4.1"
   },
   "engines": {
     "node": ">=21"