{error}
diff --git a/src/app/feed/components/FeedView.ts b/src/app/feed/components/FeedView.ts
new file mode 100644
index 0000000..b79acb9
--- /dev/null
+++ b/src/app/feed/components/FeedView.ts
@@ -0,0 +1,36 @@
+import { useCallback, useRef, useState } from 'react'
+import { Post } from '../posts/posts.ts'
+
+const PageSize = 20
+
+export function useFeedViewModel(
+ loadMore: (cursor: string | null, amount: number) => Promise
,
+) {
+ const [pages, setPages] = useState([])
+ const [hasMore, setHasMore] = useState(true)
+ const [error, setError] = useState(null)
+
+ const cursor = useRef(null)
+ const loading = useRef(false)
+
+ const loadNextPage = useCallback(async () => {
+ if (loading.current || !hasMore || error) return
+ loading.current = true
+
+ try {
+ const delay = new Promise((resolve) => setTimeout(resolve, 500))
+ const pagePromise = loadMore(cursor.current, PageSize)
+ const [page] = await Promise.all([pagePromise, delay])
+ setHasMore(page.length >= PageSize)
+ cursor.current = page.at(-1)?.postId ?? null
+ setPages((prev) => [...prev, page])
+ } catch (e: unknown) {
+ const err = e as Error
+ setError(err.message)
+ } finally {
+ loading.current = false
+ }
+ }, [loadMore, hasMore, error])
+
+ return { pages, setPages, loadNextPage, error } as const
+}
diff --git a/src/app/feed/components/FeedView.tsx b/src/app/feed/components/FeedView.tsx
new file mode 100644
index 0000000..d35256f
--- /dev/null
+++ b/src/app/feed/components/FeedView.tsx
@@ -0,0 +1,29 @@
+import { useRef } from 'react'
+import { useIntersectionLoad } from '../../../hooks/useIntersectionLoad.ts'
+import { Post } from '../posts/posts.ts'
+import PostItem from './PostItem.tsx'
+
+interface FeedViewProps {
+ pages: Post[][]
+ onLoadMore: () => Promise
+}
+
+export default function FeedView({ pages, onLoadMore }: FeedViewProps) {
+ const sentinelRef = useRef(null)
+ const posts = pages.flat()
+
+ useIntersectionLoad(onLoadMore, sentinelRef)
+
+ return (
+
+
+
+ {posts.map((post) => (
+
+ ))}
+
+
+
+
-
-
-
-
-
-
- @{post.authorName}• {formattedDate}
- {!hideViewButton && (
- <>
- {' • '}
-
- View
-
-
- )}
+
+ @{post.authorName}
+
+ • {formattedDate}
{post.content}
@@ -61,95 +44,24 @@ export default function PostItem({
))}
)}
-
-
- {post.possibleReactions.map((emoji) => {
- const count = reactions.filter((r) => r.emoji === emoji).length
- const didReact = reactions.some((r) => r.emoji == emoji && r.authorName == username)
- const onClick = () => {
- if (didReact) {
- clearReaction(emoji)
- } else {
- addReaction(emoji)
- }
- }
-
- return (
-
- )
- })}
-