recatfor

src/pages/HomePage.tsx

@@ -1,25 +1,56 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
+import FeedView from '../feed/FeedView.tsx'
+import { PostsService } from '../model/posts/postsService.ts'
+import { useUserStore } from '../store/userStore.ts'
+import { MediaService } from './mediaService.ts'
+import NewPostWidget from '../components/NewPostWidget.tsx'
+import { useFeedViewModel } from '../feed/feedViewModel.ts'
 import { Post } from '../model/posts/posts.ts'
-import { loadPublicFeed } from '../api/api.ts'
-import FeedView from './FeedView.tsx'
+import { Temporal } from '@js-temporal/polyfill'
 
-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))
-  }, [])
-
-  const handleCreatePost = useCallback(async (content: string, media: File[]) => {
-    // This is a placeholder for the actual implementation
-    // In a real app, you would call an API to create a post
-    console.log('Creating post:', { content, media })
-
-    // Simulate API call delay
-    await new Promise(resolve => setTimeout(resolve, 1000))
-
-    // You would typically refresh the feed after creating a post
-    // This could be done by calling fetchPosts again or by adding the new post to the state
-  }, [])
-
-  return <FeedView loadPosts={fetchPosts} onCreatePost={handleCreatePost} />
+interface HomePageProps {
+  postsService: PostsService
+  mediaService: MediaService
+}
+
+export default function HomePage({ postsService, mediaService }: HomePageProps) {
+  const [user] = useUserStore()
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const fetchPosts = useCallback(
+    async (cursor: string | null, amount: number | null) => {
+      return postsService.loadPublicFeed(cursor, amount)
+    },
+    [postsService],
+  )
+
+  const [pages, setPages, loadNextPage] = useFeedViewModel(fetchPosts)
+
+  const onCreatePost = useCallback(
+    async (content: string, files: File[]) => {
+      if (!onCreatePost) return
+
+      setIsSubmitting(true)
+      try {
+        if (user == null) throw new Error('Not logged in')
+        const urls = await Promise.all(files.map((file) => mediaService.uploadFile(file)))
+        const postId = await postsService.createNew(user.userId, content, urls)
+        const post = new Post(postId, content, urls, Temporal.Now.instant(), user.username)
+        setPages((pages) => [[post], ...pages])
+      } catch (error) {
+        console.error('Failed to create post:', error)
+      } finally {
+        setIsSubmitting(false)
+      }
+    },
+    [mediaService, postsService, setPages, user],
+  )
+
+  return (
+    <main className={`w-full max-w-3xl mx-auto`}>
+      <NewPostWidget onSubmit={onCreatePost} isSubmitting={isSubmitting} />
+      <FeedView pages={pages} onLoadMore={loadNextPage} />
+    </main>
+  )
 }