manifold/web/components/groups/group-about-post.tsx

136 lines
3.5 KiB
TypeScript
Raw Normal View History

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>
)}
</>
)
}