wip add button and feed stuff

src/pages/AuthorPage.tsx

@@ -1,25 +1,20 @@
-import { PostsFeed } from '../components/PostsFeed.tsx'
 import { useCallback } from 'react'
 import { useParams } from 'react-router'
 import { loadPostsForAuthor } from '../api/api.ts'
-import { useAsyncState } from '../hooks/useAsyncData.ts'
 import { Post } from '../model/posts/posts.ts'
+import './FeedView.css'
+import FeedView from './FeedView.tsx'
 
-export function AuthorPage() {
+export default function AuthorPage() {
   const { username } = useParams()
 
-  const fetchPosts = useCallback(async () => {
-    const result = await loadPostsForAuthor(username!)
-    return result.posts.map((post) => Post.fromDto(post))
-  }, [username])
-
-  const posts = useAsyncState(fetchPosts)
-
-  return (
-    <main className={`w-full max-w-full md:flex md:justify-center`}>
-      <div className="w-full md:w-lg md:max-w-lg md:ml-8">
-        <PostsFeed posts={posts ?? []} />
-      </div>
-    </main>
+  const fetchPosts = useCallback(
+    async (cursor: string | null, amount: number | null) => {
+      const result = await loadPostsForAuthor(username!, cursor, amount)
+      return result.posts.map((post) => Post.fromDto(post))
+    },
+    [username],
   )
+
+  return <FeedView loadPosts={fetchPosts} />
 }

src/pages/FeedView.css

@@ -0,0 +1,6 @@
+@media (width >= 48rem) {
+    main {
+        display: grid;
+        grid-template-columns: 1.618fr 1fr;
+    }
+}

src/pages/FeedView.tsx

@@ -0,0 +1,94 @@
+import { Post } from '../model/posts/posts.ts'
+import PostsFeed from '../components/PostsFeed.tsx'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import './FeedView.css'
+
+// Stub for spinner component
+const Spinner = () => (
+  <div className="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+)
+
+const PageSize = 2
+
+interface FeedViewProps {
+  loadPosts: (cursor: string | null, amount: number) => Promise<Post[]>
+}
+export default function FeedView({ loadPosts }: FeedViewProps) {
+  const [pages, setPages] = useState<Post[][]>([])
+
+  const posts = pages.flat()
+
+  const [hasMore, setHasMore] = useState(true)
+  const cursor = useRef<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const loading = useRef(false)
+
+  const loadNextPage = useCallback(async () => {
+    if (loading.current) return
+
+    loading.current = true
+    setIsLoading(true)
+
+    try {
+      const page = await loadPosts(cursor.current, PageSize)
+
+      if (page.length < PageSize) {
+        setHasMore(false)
+      }
+
+      cursor.current = page.at(-1)?.postId ?? null
+
+      setPages((prev) => [...prev, page])
+    } finally {
+      setIsLoading(false)
+      loading.current = false
+    }
+  }, [loadPosts])
+
+  useEffect(() => {
+    const timeoutId = setTimeout(async () => {
+      await loadNextPage()
+    })
+
+    return () => {
+      clearTimeout(timeoutId)
+    }
+  }, [loadNextPage])
+
+  const loadButtonState = isLoading ? 'loading' : hasMore ? 'ready' : 'done'
+
+  return (
+    <main className={`w-full max-w-full px-12 py-6`}>
+      <div className={`col-start-1`}>
+        <PostsFeed posts={posts} />
+        <LoadMoreButton state={loadButtonState} onClick={loadNextPage} />
+      </div>
+    </main>
+  )
+}
+
+interface LoadMoreButtonProps {
+  state: 'ready' | 'loading' | 'done'
+  onClick: () => void
+}
+
+function LoadMoreButton({ state, onClick }: LoadMoreButtonProps) {
+  const buttonClasses =
+    'w-full py-3 px-4 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-md flex items-center justify-center disabled:opacity-70'
+  switch (state) {
+    case 'done':
+      return <div className="text-center text-gray-400 py-4">that's all...</div>
+    case 'loading':
+      return (
+        <button disabled={true} className={buttonClasses}>
+          <Spinner />
+        </button>
+      )
+    case 'ready':
+      return (
+        <button className={buttonClasses} onClick={onClick}>
+          Load more
+        </button>
+      )
+  }
+}

src/pages/HomePage.tsx

@@ -0,0 +1,14 @@
+import { useCallback } from 'react'
+import { Post } from '../model/posts/posts.ts'
+import './FeedView.css'
+import { loadPublicFeed } from '../api/api.ts'
+import FeedView from './FeedView.tsx'
+
+export default function HomePage() {
+  const fetchPosts = useCallback(async (cursor: string | null, amount: number | null) => {
+    const result = await loadPublicFeed(cursor, amount)
+    return result.posts.map((post) => Post.fromDto(post))
+  }, [])
+
+  return <FeedView loadPosts={fetchPosts} />
+}