recatfor

src/pages/AuthorPage.tsx

@@ -1,19 +1,21 @@
 import { useCallback } from 'react'
+import FeedView from '../feed/FeedView.tsx'
+import { PostsService } from '../model/posts/postsService.ts'
 import { useParams } from 'react-router'
-import { loadPostsForAuthor } from '../api/api.ts'
-import { Post } from '../model/posts/posts.ts'
-import FeedView from './FeedView.tsx'
 
-export default function AuthorPage() {
+interface AuthorPageParams {
+  postsService: PostsService
+}
+
+export default function AuthorPage({ postsService }: AuthorPageParams) {
   const { username } = useParams()
 
   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))
+      return postsService.loadByAuthor(username!, cursor, amount)
     },
-    [username],
+    [postsService, username],
   )
 
-  return <FeedView loadPosts={fetchPosts} />
+  return <FeedView loadMore={fetchPosts} />
 }

src/pages/FeedView.tsx

@@ -1,66 +0,0 @@
-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'
-
-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, 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
-
-    try {
-      const delay = new Promise((resolve) => setTimeout(resolve, 500))
-      const pagePromise = loadPosts(cursor.current, PageSize)
-      const [page] = await Promise.all([pagePromise, delay])
-      setHasMore(page.length >= PageSize)
-      cursor.current = page.at(-1)?.postId ?? null
-      setPages((prev) => [...prev, page])
-    } finally {
-      loading.current = false
-    }
-  }, [loadPosts, hasMore])
-
-  useIntersectionLoad(loadNextPage, sentinelRef)
-  return (
-    <main className="w-full flex justify-center">
-      <div className="max-w-3xl w-full">
-        {onCreatePost && (
-          <NewPostWidget onSubmit={handleCreatePost} isSubmitting={isSubmitting} />
-        )}
-        <PostsList pages={pages} />
-        <div ref={sentinelRef} className="h-1" />
-      </div>
-    </main>
-  )
-}

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>
+  )
 }

src/pages/mediaService.ts

@@ -0,0 +1,8 @@
+import { uploadMedia } from '../api/api.ts'
+
+export class MediaService {
+  async uploadFile(file: File): Promise<URL> {
+    const { url } = await uploadMedia(file)
+    return new URL(url)
+  }
+}