changes

src/pages/AuthorPage.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react'
 import { useParams } from 'react-router'
 import { loadPostsForAuthor } from '../api/api.ts'
 import { Post } from '../model/posts/posts.ts'
-import './FeedView.css'
 import FeedView from './FeedView.tsx'
 
 export default function AuthorPage() {

src/pages/FeedView.css

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

src/pages/FeedView.tsx

@@ -1,7 +1,6 @@
 import { Post } from '../model/posts/posts.ts'
 import PostsList from '../components/PostsList.tsx'
 import { useCallback, useRef, useState } from 'react'
-import './FeedView.css'
 import { useIntersectionLoad } from '../hooks/useIntersectionLoad.ts'
 
 const PageSize = 20
@@ -12,10 +11,7 @@ interface FeedViewProps {
 
 export default function FeedView({ loadPosts }: FeedViewProps) {
   const [pages, setPages] = useState<Post[][]>([])
-  const posts = pages.flat()
-
   const [hasMore, setHasMore] = useState(true)
-  const [isLoading, setIsLoading] = useState(false)
 
   const cursor = useRef<string | null>(null)
   const loading = useRef(false)
@@ -24,7 +20,6 @@ export default function FeedView({ loadPosts }: FeedViewProps) {
   const loadNextPage = useCallback(async () => {
     if (loading.current || !hasMore) return
     loading.current = true
-    setIsLoading(true)
 
     try {
       const delay = new Promise((resolve) => setTimeout(resolve, 500))
@@ -35,27 +30,16 @@ export default function FeedView({ loadPosts }: FeedViewProps) {
       setPages((prev) => [...prev, page])
     } finally {
       loading.current = false
-      setIsLoading(false)
     }
   }, [loadPosts, hasMore])
 
   useIntersectionLoad(loadNextPage, sentinelRef)
   return (
-    <main className="w-full max-w-full px-12 py-6">
-      <div className="col-start-1">
-        <PostsList posts={posts} />
-        {isLoading && (
-          <div className="w-full flex justify-center py-4">
-            <Spinner />
-          </div>
-        )}
+    <main className="w-full flex justify-center">
+      <div className="max-w-3xl">
+        <PostsList pages={pages} />
         <div ref={sentinelRef} className="h-1" />
       </div>
     </main>
   )
 }
-
-// Spinner component
-const Spinner = () => (
-  <div className="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
-)

src/pages/HomePage.tsx

@@ -1,6 +1,5 @@
 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'