import { useState } from 'react' import { Spacer } from 'web/components/layout/spacer' import { Title } from 'web/components/title' import { TextEditor, useTextEditor } from 'web/components/editor' import { createPost } from 'web/lib/firebase/api' import clsx from 'clsx' import Router from 'next/router' import { MAX_POST_TITLE_LENGTH } from 'common/post' import { postPath } from 'web/lib/firebase/posts' import { Group } from 'common/group' import { ExpandingInput } from './expanding-input' export function CreatePost(props: { group?: Group }) { const [title, setTitle] = useState('') const [subtitle, setSubtitle] = useState('') const [error, setError] = useState('') const [isSubmitting, setIsSubmitting] = useState(false) const { group } = props const { editor, upload } = useTextEditor({ disabled: isSubmitting, }) const isValid = editor && title.length > 0 && subtitle.length > 0 && editor.isEmpty === false async function savePost(title: string) { if (!editor) return const newPost = { title: title, subtitle: subtitle, content: editor.getJSON(), groupId: group?.id, } const result = await createPost(newPost).catch((e) => { console.log(e) setError('There was an error creating the post, please try again') return e }) if (result.post) { await Router.push(postPath(result.post.slug)) } } return (
<form> <div className="form-control w-full"> <label className="label"> <span className="mb-1"> Title<span className={'text-red-700'}> *</span> </span> </label> <ExpandingInput placeholder="e.g. Elon Mania Post" autoFocus maxLength={MAX_POST_TITLE_LENGTH} value={title} onChange={(e) => setTitle(e.target.value || '')} /> <Spacer h={6} /> <label className="label"> <span className="mb-1"> Subtitle<span className={'text-red-700'}> *</span> </span> </label> <ExpandingInput placeholder="e.g. How Elon Musk is getting everyone's attention" autoFocus maxLength={MAX_POST_TITLE_LENGTH} value={subtitle} onChange={(e) => setSubtitle(e.target.value || '')} /> <Spacer h={6} /> <label className="label"> <span className="mb-1"> Content<span className={'text-red-700'}> *</span> </span> </label> <TextEditor editor={editor} upload={upload} /> <Spacer h={6} /> <button type="submit" className={clsx( 'btn btn-primary normal-case', isSubmitting && 'loading disabled' )} disabled={isSubmitting || !isValid || upload.isLoading} onClick={async () => { setIsSubmitting(true) await savePost(title) setIsSubmitting(false) }} > {isSubmitting ? 'Creating...' : 'Create a post'} </button> {error !== '' && <div className="text-red-700">{error}</div>} </div> </form> </div> </div> ) }