some change

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<Post[]>,
+) {
+  const [pages, setPages] = useState<Post[][]>([])
+  const [hasMore, setHasMore] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const cursor = useRef<string | null>(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
+}

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<void>
+}
+
+export default function FeedView({ pages, onLoadMore }: FeedViewProps) {
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
+  const posts = pages.flat()
+
+  useIntersectionLoad(onLoadMore, sentinelRef)
+
+  return (
+    <div className="w-full">
+      <div className="flex flex-col gap-6 w-full">
+        <div className="flex flex-col gap-6 w-full">
+          {posts.map((post) => (
+            <PostItem key={post.postId} post={post} />
+          ))}
+        </div>
+      </div>
+      <div ref={sentinelRef} className="h-1" />
+    </div>
+  )
+}

src/app/feed/components/PostItem.tsx

@@ -0,0 +1,69 @@
+import { Post, PostMedia } from '../posts/posts.ts'
+import { Link } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+
+interface PostItemProps {
+  post: Post
+}
+
+export default function PostItem({ post }: PostItemProps) {
+  const formattedDate = post.createdAt.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setVisible(true))
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [])
+
+  const opacity = visible ? 'opacity-100' : 'opacity-0'
+
+  return (
+    <article className={`w-full p-4 ${opacity} transition-opacity duration-500`} key={post.postId}>
+      <div className="text-sm text-gray-500 mb-3">
+        <Link to={`/u/${post.authorName}`} className="text-gray-400 hover:underline mr-2">
+          @{post.authorName}
+        </Link>
+        • {formattedDate}
+      </div>
+
+      <div className="text-gray-800 mb-4 whitespace-pre-wrap">{post.content}</div>
+
+      {post.media.length > 0 && (
+        <div className="grid gap-4 grid-cols-1">
+          {post.media.map((media) => (
+            <PostMediaItem key={media.url.toString()} media={media} />
+          ))}
+        </div>
+      )}
+    </article>
+  )
+}
+
+interface PostMediaProps {
+  media: PostMedia
+}
+
+function PostMediaItem({ media }: PostMediaProps) {
+  const url = media.url.toString()
+  const width = media.width ?? undefined
+  const height = media.height ?? undefined
+  return (
+    <img
+      width={width}
+      height={height}
+      src={url}
+      alt="todo sry :("
+      className="w-full h-auto"
+      loading="lazy"
+    />
+  )
+}