import { useRef, useState } from 'react' import { Form, useActionData, useLoaderData, useNavigation } from 'react-router-dom' import { CheckboxFieldUncontrolled, InputFieldUncontrolled, InputFieldWithImageUpload } from '../../components/Inputs' import { ProfileSection } from '../../components/ProfileSection' import { useAppSelector } from '../../hooks' import { BlogFormErrors, BlogPageLoaderResult } from 'types' import '../../styles/innerPage.css' import '../../styles/styles.css' import '../../styles/write.css' import { LoadingSpinner } from 'components/LoadingSpinner' import { AlertPopup } from 'components/AlertPopup' import { Editor, EditorRef } from 'components/Markdown/Editor' import { InputError } from 'components/Inputs/Error' export const WritePage = () => { const userState = useAppSelector((state) => state.user) const data = useLoaderData() as BlogPageLoaderResult const formErrors = useActionData() as BlogFormErrors const navigation = useNavigation() 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(null) const editorRef = useRef(null) const [showConfirmPopup, setShowConfirmPopup] = useState(false) const handleReset = () => { setShowConfirmPopup(true) } const handleResetConfirm = (confirm: boolean) => { setShowConfirmPopup(false) // Cancel if not confirmed if (!confirm) return // Reset editor if (blog?.content) { editorRef.current?.setMarkdown(blog?.content) } formRef.current?.reset() } return (

{title}

{navigation.state === 'loading' && ( )} {navigation.state === 'submitting' && ( )}
{ setContent(md) }} />
{typeof formErrors?.content !== 'undefined' && ( )} {/* encode to keep the markdown formatting */}
setfeaturedImageUrl(value)} /> {typeof blog?.dTag !== 'undefined' && ( )} {typeof blog?.rTag !== 'undefined' && ( )} {typeof blog?.published_at !== 'undefined' && ( )}
{showConfirmPopup && ( setShowConfirmPopup(false)} header={'Are you sure?'} label={ blog ? `Are you sure you want to clear all changes?` : `Are you sure you want to clear all field data?` } /> )}
{userState.auth && userState.user?.pubkey && ( )}
) }