import { Row } from '../layout/row' import { Content } from '../editor' import { TextEditor, useTextEditor } from 'web/components/editor' import { Button } from '../button' import { Spacer } from '../layout/spacer' import { Group } from 'common/group' import { deleteFieldFromGroup, updateGroup } from 'web/lib/firebase/groups' import PencilIcon from '@heroicons/react/solid/PencilIcon' import { DocumentRemoveIcon } from '@heroicons/react/solid' import { createPost } from 'web/lib/firebase/api' import { Post } from 'common/post' import { deletePost, updatePost } from 'web/lib/firebase/posts' import { useState } from 'react' import { usePost } from 'web/hooks/use-post' export function GroupAboutPost(props: { group: Group isEditable: boolean post: Post }) { const { group, isEditable } = props const post = usePost(group.aboutPostId) ?? props.post return ( <div className="rounded-md bg-white p-4 "> {isEditable ? ( <RichEditGroupAboutPost group={group} post={post} /> ) : ( <Content content={post.content} /> )} </div> ) } function RichEditGroupAboutPost(props: { group: Group; post: Post }) { const { group, post } = props const [editing, setEditing] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false) const { editor, upload } = useTextEditor({ defaultValue: post.content, disabled: isSubmitting, }) async function savePost() { if (!editor) return const newPost = { title: group.name, content: editor.getJSON(), } if (group.aboutPostId == null) { const result = await createPost(newPost).catch((e) => { console.error(e) return e }) await updateGroup(group, { aboutPostId: result.post.id, }) } else { await updatePost(post, { content: newPost.content, }) } } async function deleteGroupAboutPost() { await deletePost(post) await deleteFieldFromGroup(group, 'aboutPostId') } return editing ? ( <> <TextEditor editor={editor} upload={upload} /> <Spacer h={2} /> <Row className="gap-2"> <Button onClick={async () => { setIsSubmitting(true) await savePost() setEditing(false) setIsSubmitting(false) }} > Save </Button> <Button color="gray" onClick={() => setEditing(false)}> Cancel </Button> </Row> </> ) : ( <> {group.aboutPostId == null ? ( <div className="text-center text-gray-500"> <p className="text-sm"> No post has been added yet. <Spacer h={2} /> <Button onClick={() => setEditing(true)}>Add a post</Button> </p> </div> ) : ( <div className="relative"> <div className="absolute top-0 right-0 z-10 space-x-2"> <Button color="gray" size="xs" onClick={() => { setEditing(true) editor?.commands.focus('end') }} > <PencilIcon className="inline h-4 w-4" /> Edit </Button> <Button color="gray" size="xs" onClick={() => { deleteGroupAboutPost() }} > <DocumentRemoveIcon className="inline h-4 w-4" /> Delete </Button> </div> <Content content={post.content} /> <Spacer h={2} /> </div> )} </> ) }