some change

src/app/feed/pages/HomePage.tsx

@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react'
+import FeedView from '../components/FeedView.tsx'
+import { PostsService } from '../posts/postsService.ts'
+import { useUser } from '../../user/userStore.ts'
+import { MediaService } from '../../media/mediaService.ts'
+import NewPostWidget from '../../../components/NewPostWidget.tsx'
+import { useFeedViewModel } from '../components/FeedView.ts'
+import { Post } from '../posts/posts.ts'
+import { Temporal } from '@js-temporal/polyfill'
+import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
+import NavBar from '../../../components/NavBar.tsx'
+
+interface HomePageProps {
+  postsService: PostsService
+  mediaService: MediaService
+}
+
+export default function HomePage({ postsService, mediaService }: HomePageProps) {
+  const [user] = useUser()
+
+  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: File; width: number; height: number }[]) => {
+      setIsSubmitting(true)
+      if (user == null) throw new Error('Not logged in')
+      try {
+        const media = await Promise.all(
+          files.map(async ({ file, width, height }) => {
+            console.debug('do mediaService.uploadFile', file, 'width', width, 'height', height)
+            const { mediaId, url } = await mediaService.uploadFile(file)
+
+            return {
+              mediaId,
+              url,
+              width,
+              height,
+            }
+          }),
+        )
+        const postId = await postsService.createNew(user.userId, content, media)
+        const post = new Post(postId, content, media, 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 (
+    <SingleColumnLayout navbar={<NavBar />}>
+      <main className={`w-full max-w-3xl mx-auto`}>
+        <NewPostWidget onSubmit={onCreatePost} isSubmitting={isSubmitting} />
+        <FeedView pages={pages} onLoadMore={loadNextPage} />
+      </main>
+    </SingleColumnLayout>
+  )
+}