From 9fd1aca99c349131c5ddd75cd6a851236b9eb8a8 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Tue, 7 Jan 2025 10:04:37 +0100
Subject: [PATCH] feat(image): use image upload field in blog

---
 src/pages/write/index.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/write/index.tsx b/src/pages/write/index.tsx
index fd9d12c..36d415e 100644
--- a/src/pages/write/index.tsx
+++ b/src/pages/write/index.tsx
@@ -7,7 +7,8 @@ import {
 } from 'react-router-dom'
 import {
   CheckboxFieldUncontrolled,
-  InputFieldUncontrolled
+  InputFieldUncontrolled,
+  InputFieldWithImageUpload
 } from '../../components/Inputs'
 import { ProfileSection } from '../../components/ProfileSection'
 import { useAppSelector } from '../../hooks'
@@ -29,8 +30,11 @@ export const WritePage = () => {
   const blog = data?.blog
   const title = data?.blog ? 'Edit blog post' : 'Submit a blog post'
   const [content, setContent] = useState(blog?.content || '')
+  const [featuredImageUrl, setfeaturedImageUrl] = useState(blog?.image || '')
+
   const formRef = useRef<HTMLFormElement>(null)
   const editorRef = useRef<EditorRef>(null)
+
   const [showConfirmPopup, setShowConfirmPopup] = useState<boolean>(false)
   const handleReset = () => {
     setShowConfirmPopup(true)
@@ -97,12 +101,14 @@ export const WritePage = () => {
                     readOnly
                   />
                 </div>
-                <InputFieldUncontrolled
+                <InputFieldWithImageUpload
                   label='Featured Image URL'
-                  name='image'
                   inputMode='url'
-                  defaultValue={blog?.image}
+                  placeholder='Image URL'
+                  name='featuredImageUrl'
+                  value={featuredImageUrl}
                   error={formErrors?.image}
+                  onChange={(_, value) => setfeaturedImageUrl(value)}
                 />
                 <InputFieldUncontrolled
                   label='Summary'