wip post widget

src/components/NewPostWidget.tsx

@@ -0,0 +1,124 @@
+import { useState, ChangeEvent } from 'react'
+
+interface NewPostWidgetProps {
+  onSubmit: (content: string, media: File[]) => void
+  isSubmitting?: boolean
+}
+
+export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPostWidgetProps) {
+  const [content, setContent] = useState('')
+  const [media, setMedia] = useState<File[]>([])
+  const [mediaPreviewUrls, setMediaPreviewUrls] = useState<string[]>([])
+
+  const handleContentChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value)
+  }
+
+  const handleMediaChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const newFiles = Array.from(e.target.files)
+      setMedia([...media, ...newFiles])
+
+      // Create preview URLs for the new files
+      const newPreviewUrls = newFiles.map((file) => URL.createObjectURL(file))
+      setMediaPreviewUrls([...mediaPreviewUrls, ...newPreviewUrls])
+    }
+  }
+
+  const handleSubmit = () => {
+    if (content.trim() || media.length > 0) {
+      onSubmit(content, media)
+      setContent('')
+      setMedia([])
+
+      // Revoke object URLs to avoid memory leaks
+      mediaPreviewUrls.forEach((url) => URL.revokeObjectURL(url))
+      setMediaPreviewUrls([])
+    }
+  }
+
+  const handleRemoveMedia = (index: number) => {
+    const newMedia = [...media]
+    newMedia.splice(index, 1)
+    setMedia(newMedia)
+
+    // Revoke the URL of the removed media
+    URL.revokeObjectURL(mediaPreviewUrls[index])
+    const newPreviewUrls = [...mediaPreviewUrls]
+    newPreviewUrls.splice(index, 1)
+    setMediaPreviewUrls(newPreviewUrls)
+  }
+
+  return (
+    <div className="w-full p-4 border-b border-gray-200">
+      <textarea
+        className="w-full p-2 mb-3 resize-none border border-gray-200 rounded-md focus:outline-none focus:border-gray-300"
+        placeholder="What's happening?"
+        value={content}
+        onChange={handleContentChange}
+        rows={3}
+        disabled={isSubmitting}
+      />
+
+      {mediaPreviewUrls.length > 0 && (
+        <div className="grid gap-2 grid-cols-3 mb-3">
+          {mediaPreviewUrls.map((url, index) => (
+            <div key={index} className="relative">
+              <img src={url} alt="" className="w-24 h-24 object-cover rounded-md" />
+              <button
+                className="absolute top-1 right-1 bg-gray-800 bg-opacity-50 text-white rounded-full p-1 text-xs"
+                onClick={() => handleRemoveMedia(index)}
+                disabled={isSubmitting}
+              >
+                ✕
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="flex justify-between items-center">
+        <label className="cursor-pointer text-gray-500 hover:text-gray-700">
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleMediaChange}
+            className="hidden"
+            disabled={isSubmitting}
+          />
+          <span className="flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5 mr-1"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M14 16l6-6-1.5-1.5L14 13"
+              />
+            </svg>
+            Add media
+          </span>
+        </label>
+
+        <button
+          className="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 disabled:opacity-50"
+          onClick={handleSubmit}
+          disabled={isSubmitting || (content.trim() === '' && media.length === 0)}
+        >
+          Post
+        </button>
+      </div>
+    </div>
+  )
+}

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} />
 }