106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
|
import { useState } from 'react'
|
||
|
|
import { Form, useActionData, useNavigation } from 'react-router-dom'
|
||
|
|
import {
|
||
|
|
CheckboxFieldUncontrolled,
|
||
|
|
InputField,
|
||
|
|
InputFieldUncontrolled
|
||
|
|
} from '../../components/Inputs'
|
||
|
|
import { ProfileSection } from '../../components/ProfileSection'
|
||
|
|
import { useAppSelector } from '../../hooks'
|
||
|
|
import { BlogFormErrors } from 'types'
|
||
|
|
import '../../styles/innerPage.css'
|
||
|
|
import '../../styles/styles.css'
|
||
|
|
import '../../styles/write.css'
|
||
|
|
import { LoadingSpinner } from 'components/LoadingSpinner'
|
||
|
|
|
||
|
|
export const WritePage = () => {
|
||
|
|
const userState = useAppSelector((state) => state.user)
|
||
|
|
const formErrors = useActionData() as BlogFormErrors
|
||
|
|
const navigation = useNavigation()
|
||
|
|
const title = 'Submit a blog post'
|
||
|
|
|
||
|
|
const [content, setContent] = useState<string>('')
|
||
|
|
const handleContentChange = (_: string, value: string) => {
|
||
|
|
setContent(value)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='InnerBodyMain'>
|
||
|
|
<div className='ContainerMain'>
|
||
|
|
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
|
||
|
|
<div className='IBMSMSplitMain'>
|
||
|
|
<div className='IBMSMSplitMainBigSide'>
|
||
|
|
<div className='IBMSMTitleMain'>
|
||
|
|
<h2 className='IBMSMTitleMainHeading'>{title}</h2>
|
||
|
|
</div>
|
||
|
|
{navigation.state === 'loading' && (
|
||
|
|
<LoadingSpinner desc='Loading..' />
|
||
|
|
)}
|
||
|
|
{navigation.state === 'submitting' && (
|
||
|
|
<LoadingSpinner desc='Publishing blog to relays' />
|
||
|
|
)}
|
||
|
|
<Form className='IBMSMSMBS_Write' method='post'>
|
||
|
|
<InputFieldUncontrolled
|
||
|
|
label='Title'
|
||
|
|
name='title'
|
||
|
|
error={formErrors?.title}
|
||
|
|
/>
|
||
|
|
<InputField
|
||
|
|
label='Content'
|
||
|
|
name={'content'}
|
||
|
|
type='richtext'
|
||
|
|
placeholder='Blog content'
|
||
|
|
value={content}
|
||
|
|
error={formErrors?.content}
|
||
|
|
onChange={handleContentChange}
|
||
|
|
/>
|
||
|
|
<input name='content' hidden value={content} readOnly />
|
||
|
|
<InputFieldUncontrolled
|
||
|
|
label='Featured Image URL'
|
||
|
|
name='image'
|
||
|
|
inputMode='url'
|
||
|
|
error={formErrors?.image}
|
||
|
|
/>
|
||
|
|
<InputFieldUncontrolled
|
||
|
|
label='Summary'
|
||
|
|
name='summary'
|
||
|
|
type='textarea'
|
||
|
|
error={formErrors?.summary}
|
||
|
|
/>
|
||
|
|
<InputFieldUncontrolled
|
||
|
|
label='Tags'
|
||
|
|
description='Separate each tag with a comma. (Example: tag1, tag2, tag3)'
|
||
|
|
placeholder='Tags'
|
||
|
|
name='tags'
|
||
|
|
error={formErrors?.tags}
|
||
|
|
/>
|
||
|
|
<CheckboxFieldUncontrolled
|
||
|
|
label='This post is not safe for work (NSFW)'
|
||
|
|
name='nsfw'
|
||
|
|
/>
|
||
|
|
<div className='IBMSMSMBS_WriteAction'>
|
||
|
|
<button
|
||
|
|
className='btn btnMain'
|
||
|
|
type='submit'
|
||
|
|
disabled={
|
||
|
|
navigation.state === 'loading' ||
|
||
|
|
navigation.state === 'submitting'
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{navigation.state === 'submitting'
|
||
|
|
? 'Publishing...'
|
||
|
|
: 'Publish'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
{userState.auth && userState.user?.pubkey && (
|
||
|
|
<ProfileSection pubkey={userState.user.pubkey as string} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|