Cache fixes

app/components/Article/Contents.tsx

@@ -61,7 +61,7 @@ const glossaryInjecter = (pageid: string, glossary: Glossary) => {
   return (html: string) =>
     Object.values(glossary)
       .filter((item) => item.pageid != pageid)
-      .sort((a, b) => b.alias.length - a.alias.length)
+      .sort((a, b) => (b.alias?.length ?? 0) - (a.alias?.length ?? 0))
       .reduce((html, {term, alias}) => {
         const match = new RegExp(`(^|[^\\w-])(${alias})($|[^\\w-])`, 'i')
         if (!seen.has(term) && html.search(match) >= 0) {

app/root.tsx

@@ -97,7 +97,10 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
   const embed = !!request.url.match(/embed/)
   const showSearch = !request.url.match(/onlyInitial/)
 
-  const question = await fetchQuestion(request)
+  const question = await fetchQuestion(request).catch((e) => {
+    console.error('\n\nUnexpected error in loader\n', e)
+    return null
+  })
 
   return {
     question,

app/routes/questions.$questionId.$.tsx

@@ -26,36 +26,17 @@ export const loader = async ({request, params}: LoaderFunctionArgs) => {
   }
 
   try {
-    const dataPromise = loadQuestionDetail(request, questionId)
-      .then(({data}) => data)
-      .catch(raise500)
+    const dataPromise = loadQuestionDetail(request, questionId).catch(raise500)
     const tagsPromise = loadTags(request)
       .then(({data}) => data)
       .catch(raise500)
-    return defer({data: dataPromise, tags: tagsPromise})
+    return defer({question: dataPromise, tags: tagsPromise})
   } catch (error: unknown) {
     const msg = `No question found with ID ${questionId}. Please go to <a href="https://discord.com/invite/Bt8PaRTDQC">Discord</a> and report where you found this link.`
     throw new Response(msg, {status: 404})
   }
 }
 
-export function fetchQuestion(pageid: string) {
-  const url = `/questions/${encodeURIComponent(pageid)}`
-  return fetch(url)
-    .then(async (response) => {
-      const json: Awaited<ReturnType<typeof loadQuestionDetail>> = await response.json()
-      if ('error' in json) console.error(json.error)
-      const {data, timestamp} = json
-
-      reloadInBackgroundIfNeeded(url, timestamp)
-
-      return data
-    })
-    .catch((e) => {
-      throw raise500(e)
-    })
-}
-
 const dummyQuestion = (title: string | undefined) =>
   ({
     text: 'Loading...',
@@ -80,7 +61,7 @@ export default function RenderArticle() {
   const [showNav, setShowNav] = useState(false) // Used on mobile
   const params = useParams()
   const pageid = params.questionId ?? '😱'
-  const {data, tags} = useLoaderData<typeof loader>()
+  const {question, tags} = useLoaderData<typeof loader>()
   const {findSection, getArticle, getPath} = useToC()
   const section = findSection(location?.state?.section || pageid)
 
@@ -97,11 +78,12 @@ export default function RenderArticle() {
   }, [location.key])
 
   useEffect(() => {
-    data.then((val) => {
-      const question = val as Question
+    question.then((val) => {
+      const {data: question, timestamp} = val as {data: Question; timestamp: string}
+      reloadInBackgroundIfNeeded(location.pathname, timestamp)
       if (question.title) document.title = question.title
     })
-  }, [data])
+  }, [question, location])
 
   return (
     <Page modal={showNav}>
@@ -145,18 +127,18 @@ export default function RenderArticle() {
             />
           }
         >
-          <Await resolve={Promise.all([data, tags])}>
-            {([resolvedValue, tags]) => {
-              if (resolvedValue instanceof Response) {
-                return <Error error={resolvedValue} />
-              } else if (!(resolvedValue as any)?.pageid) {
+          <Await resolve={Promise.all([question, tags])}>
+            {([resolvedQuestion, resolvedTags]) => {
+              if (resolvedQuestion instanceof Response || !('data' in resolvedQuestion)) {
+                return <Error error={resolvedQuestion} />
+              } else if (!resolvedQuestion.data.pageid) {
                 return (
                   <Error error={{statusText: 'Could not fetch question', status: 'emptyArticle'}} />
                 )
               } else {
                 return (
                   <Article
-                    question={updateTags(resolvedValue as Question, tags as Tag[])}
+                    question={updateTags(resolvedQuestion.data as Question, resolvedTags as Tag[])}
                     glossary={glossary}
                     className={showNav ? 'desktop-only' : ''}
                   />

app/server-utils/stampy.ts

@@ -48,7 +48,7 @@ export type Banner = {
 }
 export type GlossaryEntry = {
   term: string
-  alias: string
+  alias?: string // not present in actual Coda response
   pageid: PageId
   contents: string
   image: string