connect keep reading

app/components/Article/KeepGoing/index.tsx

@@ -0,0 +1,40 @@
+import Button from '~/components/Button'
+import ListTable from '~/components/Table'
+import {ArrowRight} from '~/components/icons-generated'
+import useToC from '~/hooks/useToC'
+import type {TOCItem} from '~/routes/questions.toc'
+import type {Question} from '~/server-utils/stampy'
+import './keepGoing.css'
+
+const NextArticle = ({category, next}: {category?: string; next?: TOCItem}) =>
+  next && (
+    <>
+      <h2>Keep going! &#128073;</h2>
+      <span>Continue with the next article in {category}</span>
+      <div className="keepGoing-next">
+        <span className="keepGoing-next-title">{next.title}</span>
+        <Button action={`/${next.pageid}`} className="primary-alt">
+          Next
+          <ArrowRight />
+        </Button>
+      </div>
+    </>
+  )
+
+export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
+  const {findSection, getNext} = useToC()
+  const {category} = findSection(pageid) || {}
+  const next = getNext(pageid)
+  const hasRelated = relatedQuestions && relatedQuestions.length > 0
+
+  return (
+    <div className="keepGoing">
+      <NextArticle category={category} next={next} />
+
+      {next && hasRelated && <span>Or jump to a related question</span>}
+      {hasRelated && <ListTable elements={relatedQuestions.map((i) => ({...i, hasIcon: true}))} />}
+    </div>
+  )
+}
+
+export default KeepGoing

app/components/Article/index.tsx

@@ -1,4 +1,5 @@
 import {useRef, useState, useEffect} from 'react'
+import KeepGoing from '~/components/Article/KeepGoing'
 import CopyIcon from '~/components/icons-generated/Copy'
 import EditIcon from '~/components/icons-generated/Pencil'
 import ThumbUpIcon from '~/components/icons-generated/ThumbUp'
@@ -232,7 +233,7 @@ export const Article = ({question, glossary}: ArticleProps) => {
     const time = text.split(' ')
     return Math.ceil(time.length / rate) // ceil to avoid "0 min read"
   }
-  console.log('Question', question)
+
   return (
     <article className="article-container">
       <h1 className="teal">{title}</h1>
@@ -244,6 +245,8 @@ export const Article = ({question, glossary}: ArticleProps) => {
 
       <Contents pageid={pageid} html={text || ''} glossary={glossary || {}} />
 
+      <KeepGoing {...question} />
+
       <ArticleFooter {...question} />
       <hr />
       <div className="article-tags">

app/components/Table/index.tsx

@@ -2,11 +2,16 @@ import {Link} from '@remix-run/react'
 import {ArrowUpRight} from '~/components/icons-generated'
 import './listTable.css'
 
+export type ListItem = {
+  pageid: string
+  title: string
+  hasIcon?: boolean
+}
 export type ListTableProps = {
   /**
    * Browse by category
    */
-  elements: any[]
+  elements: ListItem[]
 }
 
 export const ListTable = ({elements}: ListTableProps) => (

app/hooks/stateModifiers.tsx

@@ -1,4 +1,4 @@
-import {Question, QuestionState, RelatedQuestions, PageId} from '~/server-utils/stampy'
+import {Question, QuestionState, RelatedQuestion, PageId} from '~/server-utils/stampy'
 
 type StateEntry = [PageId, QuestionState]
 type StateString = string
@@ -70,7 +70,7 @@ export const insertAfter = (state: StateString, pageId: PageId, to: PageId): Sta
 export const insertInto = (
   state: StateString,
   pageid: PageId,
-  relatedQuestions: RelatedQuestions,
+  relatedQuestions: RelatedQuestion[],
   options = {toggle: true}
 ): StateString =>
   processStateEntries(state, (entries: StateEntry[]) =>

app/hooks/useCachedObjects.tsx

@@ -29,7 +29,7 @@ type useCachedObjectsType = {
   tags: useObjectsType<Tag[]>
   toc: useObjectsType<TOCItem[]>
 }
-const CachedObjectsContext = createContext<useCachedObjectsType | null>(null)
+export const CachedObjectsContext = createContext<useCachedObjectsType | null>(null)
 
 const getGlossary = async () => (await fetchGlossary()).data
 const getTags = async () => (await fetchTags()).tags
@@ -40,7 +40,6 @@ export const CachedObjectsProvider = ({children}: {children: ReactElement}) => {
   const tags = useItemsFuncs<Tag[]>(getTags)
   const toc = useItemsFuncs<TOCItem[]>(getToC)
 
-  console.log('caching')
   return (
     <CachedObjectsContext.Provider value={{tags, glossary, toc}}>
       {children}

app/hooks/useQuestionStateInUrl.ts

@@ -1,6 +1,6 @@
 import {useState, useRef, useEffect, useMemo, useCallback} from 'react'
 import {useSearchParams, useNavigation} from '@remix-run/react'
-import {Question, QuestionState, RelatedQuestions, PageId, Glossary} from '~/server-utils/stampy'
+import {Question, QuestionState, RelatedQuestion, PageId, Glossary} from '~/server-utils/stampy'
 import {fetchAllQuestionsOnSite} from '~/routes/questions.allQuestionsOnSite'
 import {fetchGlossary} from '~/routes/questions.glossary'
 import {
@@ -136,7 +136,7 @@ export default function useQuestionStateInUrl(minLogo: boolean, initialQuestions
   const unshownRelatedQuestions = (
     questions: Question[],
     questionProps: Question
-  ): RelatedQuestions => {
+  ): RelatedQuestion[] => {
     const {relatedQuestions} = questionProps
 
     const onSiteQuestions = onSiteQuestionsRef.current

app/hooks/useToC.tsx

@@ -5,6 +5,7 @@ const identity = (i: any) => i
 
 const useToC = () => {
   const {items: toc} = useCachedToC()
+  console.log(toc)
 
   const checkPath = (pageid: string) => (item: TOCItem) => {
     if (item.pageid === pageid) return [pageid]
@@ -21,10 +22,32 @@ const useToC = () => {
     return toc.map(checkPath(pageid)).filter(identity)[0]
   }
 
+  const getNext = (pageid: string): TOCItem | undefined => {
+    type NextItem = {
+      current?: string
+      next?: TOCItem
+    }
+    const findNext = (prev: string | undefined, item: TOCItem): NextItem => {
+      if (pageid === prev) return {current: prev, next: item}
+
+      let previous: string | undefined = item.pageid
+      for (const child of item.children || []) {
+        const {next, current} = findNext(previous, child)
+        if (next) return {next, current}
+        previous = current
+      }
+      return {current: previous}
+    }
+
+    const all = {pageid: '', children: toc || []} as TOCItem
+    return toc && findNext('', all).next
+  }
+
   return {
     toc: toc || [],
     findSection,
     getPath,
+    getNext,
   }
 }
 

app/routes/questions.add.tsx

@@ -2,9 +2,9 @@ import {useState, useEffect} from 'react'
 import type {ActionFunctionArgs} from '@remix-run/cloudflare'
 import {Form} from '@remix-run/react'
 import {redirect} from '@remix-run/cloudflare'
-import {addQuestion, loadAllQuestions, fetchJsonList, RelatedQuestions} from '~/server-utils/stampy'
+import {addQuestion, loadAllQuestions, fetchJsonList, RelatedQuestion} from '~/server-utils/stampy'
 
-const getRelated = async (question: string): Promise<RelatedQuestions> => {
+const getRelated = async (question: string): Promise<RelatedQuestion[]> => {
   const url = `${NLP_SEARCH_ENDPOINT}/api/search?query=${question}?status=all`
   try {
     return await fetchJsonList(url)
@@ -41,7 +41,7 @@ export const action = async ({request}: ActionFunctionArgs) => {
   } else {
     relatedQuestions = formData
       .getAll('relatedQuestion')
-      .map((question) => ({title: question})) as RelatedQuestions
+      .map((question) => ({title: question})) as RelatedQuestion[]
   }
 
   // Make sure the question is formatted as a question

app/routes/tags.single.$tag.tsx

@@ -1,7 +1,7 @@
 import {useState, useEffect, ReactNode} from 'react'
 import {LoaderFunction} from '@remix-run/cloudflare'
 import {reloadInBackgroundIfNeeded} from '~/server-utils/kv-cache'
-import {Tag as TagType, QuestionState, RelatedQuestions, loadTag} from '~/server-utils/stampy'
+import {Tag as TagType, QuestionState, RelatedQuestion, loadTag} from '~/server-utils/stampy'
 import Dialog from '~/components/dialog'
 
 type Props = {
@@ -47,7 +47,7 @@ export function Tag({
   showCount,
 }: {
   name: string
-  questions?: RelatedQuestions
+  questions?: RelatedQuestion[]
   showCount?: boolean
 }) {
   const [questions, setQuestions] = useState(tqs)

app/server-utils/stampy.ts

@@ -26,7 +26,7 @@ export enum QuestionState {
   COLLAPSED = '-',
   RELATED = 'r',
 }
-export type RelatedQuestions = {title: string; pageid: string}[]
+export type RelatedQuestion = {title: string; pageid: string}
 export enum QuestionStatus {
   WITHDRAWN = 'Withdrawn',
   SKETCH = 'Bulletpoint sketch',
@@ -59,15 +59,15 @@ export type Tag = {
   name: string
   url: string
   internal: boolean
-  questions: RelatedQuestions
+  questions: RelatedQuestion[]
   mainQuestion: string | null
 }
 export type Question = {
   title: string
   pageid: string
   text: string | null
   answerEditLink: string | null
-  relatedQuestions: RelatedQuestions
+  relatedQuestions: RelatedQuestion[]
   questionState?: QuestionState
   tags: string[]
   banners: Banner[]
@@ -82,7 +82,7 @@ export type Question = {
 export type PageId = Question['pageid']
 export type NewQuestion = {
   title: string
-  relatedQuestions: RelatedQuestions
+  relatedQuestions: RelatedQuestion[]
   source?: string
 }
 type Entity = {
@@ -434,7 +434,7 @@ export const insertRows = async (table: string, rows: NewQuestion[]) => {
   return await sendToCoda(url, payload, 'POST', `${CODA_INCOMING_TOKEN}`)
 }
 
-export const addQuestion = async (title: string, relatedQuestions: RelatedQuestions) => {
+export const addQuestion = async (title: string, relatedQuestions: RelatedQuestion[]) => {
   return await insertRows(INCOMING_QUESTIONS_TABLE, [{title, relatedQuestions}])
 }