wip post widget

2025-05-04 13:02:50 +02:00 · 2025-05-04 13:02:50 +02:00 · 8e365867bd
commit 8e365867bd
parent 3c7c2a6957
3 changed files with 160 additions and 3 deletions
--- a/src/components/NewPostWidget.tsx
+++ b/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>
+  )
+}