fix post fetch

nichoth · nichoth · commit a9fc232b44e3 · 2026-02-14T00:01:16.000-08:00
diff --git a/src/client/db/remote-adapter.ts b/src/client/db/remote-adapter.ts
@@ -7,6 +7,7 @@ import ky from 'ky'
 import type {
     DbAdapter,
     Feed,
+    Item,
     ItemsResponse,
     CountsResponse
 } from './types.js'
@@ -64,6 +65,29 @@ export const remoteAdapter:DbAdapter = {
         return response.json<ItemsResponse>()
     },
 
+    async getItemByRoute (itemRoute:string):Promise<Item|null> {
+        try {
+            const response = await api.get('items/by-route', {
+                searchParams: { route: itemRoute }
+            })
+
+            const data = await response.json<{
+                item:Item
+            }>()
+            return data.item
+        } catch (err) {
+            if (
+                err instanceof Error &&
+                'response' in err &&
+                (err as { response?:Response }).response?.status === 404
+            ) {
+                return null
+            }
+
+            throw err
+        }
+    },
+
     async getCounts ():Promise<CountsResponse> {
         const response = await api.get('items/count')
         return response.json<CountsResponse>()
diff --git a/src/client/db/types.ts b/src/client/db/types.ts
@@ -58,6 +58,7 @@ export interface DbAdapter {
         limit?:number
         offset?:number
     }):Promise<ItemsResponse>
+    getItemByRoute(itemRoute:string):Promise<Item|null>
     getCounts():Promise<CountsResponse>
     updateItem(
         id:number,
diff --git a/src/client/routes/index.ts b/src/client/routes/index.ts
@@ -58,13 +58,7 @@ export default function _Router (state:AppState):InstanceType<typeof Router> {
         return FeedReader
     })
 
-    router.addRoute('/post/*', (match:ReturnType<typeof router.match>) => {
-        const splats = match!.splats
-        const itemUrl = splats[0]
-        const item = state.items.value.find(i => i.link?.includes(itemUrl))
-        if (item && !item.is_read) {
-            State.toggleItemRead(state, item.id, true)
-        }
+    router.addRoute('/post/*', () => {
         return ItemReader
     })
 
diff --git a/src/client/routes/item-reader.ts b/src/client/routes/item-reader.ts
@@ -4,48 +4,64 @@ import { useCallback } from 'preact/hooks'
 import { useComputed } from '@preact/signals'
 import { NotFound } from '../not-found.js'
 import { formatDate, sanitizeHtml } from '../util.js'
-import { type Item, type AppState, State } from '../state.js'
+import {
+    type Item,
+    type AppState,
+    State,
+    findItemByRoute,
+    isItemRoute
+} from '../state.js'
 import './item-reader.css'
 import Debug from '@substrate-system/debug'
 const debug = Debug('rsss:view')
 
 export const ItemReader:FunctionComponent<{
     state:AppState;
     splats:string[];
-}> = function ItemReader ({ state, splats }) {
-    const itemUrl = splats.shift()
-
-    debug('reading...', itemUrl)
+}> = function ItemReader ({ state }) {
+    debug('reading...', state.route.value)
 
     const itemSignal = useComputed<
         undefined|null|Item
     >(() => {
-        if (!state.items.value.length) return null
-        return state.items.value.find(
-            i => i.link?.includes(itemUrl!)
+        if (!isItemRoute(state.route.value)) return null
+        return (
+            findItemByRoute(state, state.route.value) ||
+            state.routeItem.value
         )
     })
 
     const item = itemSignal.value
-    if (!item) {
-        return html`<${NotFound} />`
+    const isLoadingItem = (
+        state.routeItemLoading.value &&
+        !item
+    )
+
+    if (isLoadingItem) {
+        return html`
+            <div class="route item-reader">
+                <p class="loading-text">Loading post...</p>
+            </div>
+        `
     }
+    if (!item) return html`<${NotFound} />`
 
+    const itemId = item.id
     const isStarred = !!item.is_starred
     const isRead = !!item.is_read
 
     const handleStar = useCallback(async () => {
         await State.toggleItemStarred(
             state,
-            item!.id,
+            itemId,
             !isStarred
         )
-    }, [])
+    }, [itemId, isStarred])
 
     async function handleToggleRead () {
         await State.toggleItemRead(
             state,
-            item!.id,
+            itemId,
             !isRead
         )
     }
diff --git a/src/client/state.ts b/src/client/state.ts
@@ -61,6 +61,8 @@ export interface CountsResponse {
 export type AppState = {
     _setRoute:(route:string) => void,
     route:Signal<string>,
+    routeItem:Signal<Item|null>,
+    routeItemLoading:Signal<boolean>,
     user:Signal<User|null>,
     authLoading:Signal<boolean>,
     authError:Signal<string|null>,
@@ -84,6 +86,8 @@ export function State ():AppState {
     const state = {
         _setRoute: onRoute.setRoute.bind(onRoute),
         route: signal(location.pathname),
+        routeItem: signal<Item|null>(null),
+        routeItemLoading: signal(false),
         user: signal<User|null>(null),
         authLoading: signal(true),
         authError: signal<string|null>(null),
@@ -114,6 +118,82 @@ export function State ():AppState {
         }
     })
 
+    let routeItemRequest:string|null = null
+
+    effect(() => {
+        const route = state.route.value
+        const itemFromList = findItemByRoute(state, route)
+
+        if (!isItemRoute(route)) {
+            routeItemRequest = null
+            batch(() => {
+                state.routeItem.value = null
+                state.routeItemLoading.value = false
+            })
+            return
+        }
+
+        if (itemFromList) {
+            routeItemRequest = null
+            batch(() => {
+                state.routeItem.value = itemFromList
+                state.routeItemLoading.value = false
+            })
+
+            if (!itemFromList.is_read) {
+                void State.toggleItemRead(
+                    state,
+                    itemFromList.id,
+                    true
+                )
+            }
+            return
+        }
+
+        if (!state.isAuthenticated.value) {
+            batch(() => {
+                state.routeItem.value = null
+                state.routeItemLoading.value = false
+            })
+            return
+        }
+
+        if (routeItemRequest === route) return
+        routeItemRequest = route
+        state.routeItemLoading.value = true
+
+        void State.loadItemByRoute(state, route)
+            .then((item) => {
+                if (state.route.value !== route) return
+
+                batch(() => {
+                    state.routeItem.value = item
+                    state.routeItemLoading.value = false
+                })
+
+                if (item && !item.is_read) {
+                    void State.toggleItemRead(
+                        state,
+                        item.id,
+                        true
+                    )
+                }
+            })
+            .catch((err) => {
+                debug('Error loading route item:', err)
+                if (state.route.value !== route) return
+                batch(() => {
+                    state.routeItem.value = null
+                    state.routeItemLoading.value = false
+                })
+            })
+            .finally(() => {
+                if (routeItemRequest === route) {
+                    routeItemRequest = null
+                }
+            })
+    })
+
     /**
      * Load data after authentication
      */
@@ -492,6 +572,27 @@ State.loadItems = async function (
     }
 }
 
+/**
+ * Load a single item that matches a /post/* route
+ */
+State.loadItemByRoute = async function (
+    _state:AppState,
+    route:string
+):Promise<Item|null> {
+    const itemRoute = routeToItemRoute(route)
+    if (!itemRoute) return null
+
+    try {
+        const item = await remoteAdapter.getItemByRoute(
+            itemRoute
+        )
+        return item as Item|null
+    } catch (err) {
+        debug('Error loading item by route:', err)
+        return null
+    }
+}
+
 /**
  * Load counts from remote DB
  */
@@ -521,12 +622,21 @@ State.toggleItemRead = async function (
 
         if (response.ok) {
             // Optimistic UI update
-            state.items.value = state.items.value.map(
-                item => item.id === itemId ? {
-                    ...item,
-                    is_read: isRead ? 1 : 0
-                } : item
-            )
+            batch(() => {
+                state.items.value = state.items.value.map(
+                    item => item.id === itemId ? {
+                        ...item,
+                        is_read: isRead ? 1 : 0
+                    } : item
+                )
+
+                if (state.routeItem.value?.id === itemId) {
+                    state.routeItem.value = {
+                        ...state.routeItem.value,
+                        is_read: isRead ? 1 : 0
+                    }
+                }
+            })
 
             await State.loadCounts(state)
         }
@@ -556,6 +666,13 @@ State.toggleItemStarred = async function (
                         is_starred: isStarred ? 1 : 0
                     } : item
                 )
+
+                if (state.routeItem.value?.id === itemId) {
+                    state.routeItem.value = {
+                        ...state.routeItem.value,
+                        is_starred: isStarred ? 1 : 0
+                    }
+                }
             })
 
             await State.loadCounts(state)
@@ -626,15 +743,17 @@ State.clearSelectedItem = function (state:AppState):void {
 export const isItemRoute = function (
     route:string
 ):boolean {
-    if (
-        route === '/' ||
-        route.startsWith('/login') ||
-        route.startsWith('/api')
-    ) {
-        return false
-    }
+    return route.startsWith('/post/')
+}
 
-    return route.includes('/post/')
+/**
+ * Convert a /post/* route to the comparable link fragment
+ */
+export const routeToItemRoute = function (
+    route:string
+):string|null {
+    if (!isItemRoute(route)) return null
+    return route.replace(/^\/post\//, '')
 }
 
 /**
@@ -644,8 +763,16 @@ export const findItemByRoute = function (
     state:AppState,
     route:string
 ):Item|null {
+    const itemRoute = routeToItemRoute(route)
+    if (!itemRoute) return null
+
     for (const item of state.items.value) {
-        if (itemToRoute(item) === route) {
+        const itemRoutePath = itemToRoute(item)
+        if (itemRoutePath === route) {
+            return item
+        }
+
+        if (item.link?.includes(itemRoute)) {
             return item
         }
     }
diff --git a/src/server/durable-objects/index.ts b/src/server/durable-objects/index.ts
diff --git a/test/db-adapter.ts b/test/db-adapter.ts
