Create date doc
This commit is contained in:
parent
1e3e931d16
commit
d30a5c453b
|
@ -12,7 +12,7 @@ export type Post = {
|
|||
export type DateDoc = Post & {
|
||||
bounty: number
|
||||
birthday: number
|
||||
profilePicUrl: string
|
||||
photoUrl: string
|
||||
type: 'date-doc'
|
||||
}
|
||||
|
||||
|
|
155
web/pages/date/create.tsx
Normal file
155
web/pages/date/create.tsx
Normal file
|
@ -0,0 +1,155 @@
|
|||
import Router from 'next/router'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { DateDoc } from 'common/post'
|
||||
import { useTextEditor, TextEditor } from 'web/components/editor'
|
||||
import { Page } from 'web/components/page'
|
||||
import { Title } from 'web/components/title'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
import { createPost } from 'web/lib/firebase/api'
|
||||
import { postPath } from 'web/lib/firebase/posts'
|
||||
import { Row } from 'web/components/layout/row'
|
||||
import { Button } from 'web/components/button'
|
||||
import dayjs from 'dayjs'
|
||||
import { MINUTE_MS } from 'common/util/time'
|
||||
import { Col } from 'web/components/layout/col'
|
||||
import { uploadImage } from 'web/lib/firebase/storage'
|
||||
import { LoadingIndicator } from 'web/components/loading-indicator'
|
||||
|
||||
export default function CreateDateDocPage() {
|
||||
const user = useUser()
|
||||
|
||||
useEffect(() => {
|
||||
if (user === null) Router.push('/date')
|
||||
})
|
||||
|
||||
const title = `${user?.name}'s Date Doc`
|
||||
const [birthday, setBirthday] = useState<undefined | string>(undefined)
|
||||
const [photoUrl, setPhotoUrl] = useState(user?.avatarUrl ?? '')
|
||||
const [avatarLoading, setAvatarLoading] = useState(false)
|
||||
|
||||
const [error, setError] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const { editor, upload } = useTextEditor({
|
||||
disabled: isSubmitting,
|
||||
})
|
||||
|
||||
const birthdayTime = birthday ? dayjs(birthday).valueOf() : undefined
|
||||
const isValid =
|
||||
user && birthday && photoUrl && editor && editor.isEmpty === false
|
||||
|
||||
const fileHandler = async (event: any) => {
|
||||
if (!user) return
|
||||
|
||||
const file = event.target.files[0]
|
||||
|
||||
setAvatarLoading(true)
|
||||
|
||||
await uploadImage(user.username, file)
|
||||
.then(async (url) => {
|
||||
setPhotoUrl(url)
|
||||
setAvatarLoading(false)
|
||||
})
|
||||
.catch(() => {
|
||||
setAvatarLoading(false)
|
||||
setPhotoUrl(user.avatarUrl || '')
|
||||
})
|
||||
}
|
||||
|
||||
async function saveDateDoc() {
|
||||
if (!editor || !birthdayTime) return
|
||||
|
||||
const newPost: Omit<DateDoc, 'id' | 'creatorId' | 'createdTime' | 'slug'> =
|
||||
{
|
||||
title,
|
||||
content: editor.getJSON(),
|
||||
bounty: 0,
|
||||
birthday: birthdayTime,
|
||||
photoUrl,
|
||||
type: 'date-doc',
|
||||
}
|
||||
|
||||
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 (
|
||||
<Page>
|
||||
<div className="mx-auto w-full max-w-3xl">
|
||||
<div className="rounded-lg px-6 py-4 sm:py-0">
|
||||
<Row className="mb-8 items-center justify-between">
|
||||
<Title className="!my-0 text-blue-500" text="Your Date Doc" />
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !isValid || upload.isLoading}
|
||||
onClick={async () => {
|
||||
setIsSubmitting(true)
|
||||
await saveDateDoc()
|
||||
setIsSubmitting(false)
|
||||
}}
|
||||
color="blue"
|
||||
>
|
||||
{isSubmitting ? 'Publishing...' : 'Publish'}
|
||||
</Button>
|
||||
</Row>
|
||||
|
||||
<Col className="gap-6">
|
||||
<Col className="max-w-[150px] justify-start gap-4">
|
||||
<div className="">Birthday</div>
|
||||
<input
|
||||
type={'date'}
|
||||
className="input input-bordered"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={(e) => setBirthday(e.target.value)}
|
||||
max={Math.round(Date.now() / MINUTE_MS) * MINUTE_MS}
|
||||
disabled={isSubmitting}
|
||||
value={birthday}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col className="gap-4">
|
||||
<div className="">Photo</div>
|
||||
<Row className="items-center gap-4">
|
||||
{avatarLoading ? (
|
||||
<LoadingIndicator />
|
||||
) : (
|
||||
<>
|
||||
{photoUrl && (
|
||||
<img
|
||||
src={photoUrl}
|
||||
width={80}
|
||||
height={80}
|
||||
className="flex h-[80px] w-[80px] items-center justify-center rounded-full bg-gray-400 object-cover"
|
||||
/>
|
||||
)}
|
||||
<input
|
||||
className="text-sm text-gray-500"
|
||||
type="file"
|
||||
name="file"
|
||||
accept="image/*"
|
||||
onChange={fileHandler}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
<Col className="gap-4">
|
||||
<div className="">
|
||||
Tell us about you! What are you looking for?
|
||||
</div>
|
||||
<TextEditor editor={editor} upload={upload} />
|
||||
</Col>
|
||||
</Col>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
|
@ -32,7 +32,7 @@ export default function DatePage(props: { dateDocs: DateDoc[] }) {
|
|||
<Page>
|
||||
<div className="mx-auto w-full max-w-3xl ">
|
||||
<Row className="items-center justify-between">
|
||||
<Title className="!my-0 px-2 text-blue-400" text="Date docs" />
|
||||
<Title className="!my-0 px-2 text-blue-500" text="Date docs" />
|
||||
<SiteLink href="/date/create" className="!no-underline">
|
||||
<Button className="flex flex-row gap-1" color="blue">
|
||||
<PlusCircleIcon
|
||||
|
|
Loading…
Reference in New Issue
Block a user