wip post widget

src/pages/FeedView.tsx

@@ -1,5 +1,6 @@
 import { Post } from '../model/posts/posts.ts'
 import PostsList from '../components/PostsList.tsx'
+import NewPostWidget from '../components/NewPostWidget.tsx'
 import { useCallback, useRef, useState } from 'react'
 import { useIntersectionLoad } from '../hooks/useIntersectionLoad.ts'
 
@@ -7,16 +8,33 @@ const PageSize = 20
 
 interface FeedViewProps {
   loadPosts: (cursor: string | null, amount: number) => Promise<Post[]>
+  onCreatePost?: (content: string, media: File[]) => Promise<void>
 }
 
-export default function FeedView({ loadPosts }: FeedViewProps) {
+export default function FeedView({ loadPosts, onCreatePost }: FeedViewProps) {
   const [pages, setPages] = useState<Post[][]>([])
   const [hasMore, setHasMore] = useState(true)
+  const [isSubmitting, setIsSubmitting] = useState(false)
 
   const cursor = useRef<string | null>(null)
   const loading = useRef(false)
   const sentinelRef = useRef<HTMLDivElement | null>(null)
 
+  const handleCreatePost = useCallback(async (content: string, media: File[]) => {
+    if (!onCreatePost) return
+
+    setIsSubmitting(true)
+    try {
+      await onCreatePost(content, media)
+      // Optionally refresh the feed after posting
+      // You could implement this by resetting pages and cursor, then loading the first page again
+    } catch (error) {
+      console.error('Failed to create post:', error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }, [onCreatePost])
+
   const loadNextPage = useCallback(async () => {
     if (loading.current || !hasMore) return
     loading.current = true
@@ -36,7 +54,10 @@ export default function FeedView({ loadPosts }: FeedViewProps) {
   useIntersectionLoad(loadNextPage, sentinelRef)
   return (
     <main className="w-full flex justify-center">
-      <div className="max-w-3xl">
+      <div className="max-w-3xl w-full">
+        {onCreatePost && (
+          <NewPostWidget onSubmit={handleCreatePost} isSubmitting={isSubmitting} />
+        )}
         <PostsList pages={pages} />
         <div ref={sentinelRef} className="h-1" />
       </div>

src/pages/HomePage.tsx

@@ -9,5 +9,17 @@ export default function HomePage() {
     return result.posts.map((post) => Post.fromDto(post))
   }, [])
 
-  return <FeedView loadPosts={fetchPosts} />
+  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} />
 }