stacker.news/pages/[name]/index.js

120 lines
3.6 KiB
JavaScript

import Layout from '@/components/layout'
import { useQuery } from '@apollo/client'
import UserHeader from '@/components/user-header'
import Button from 'react-bootstrap/Button'
import styles from '@/styles/user.module.css'
import { useState } from 'react'
import ItemFull from '@/components/item-full'
import { Form, MarkdownInput } from '@/components/form'
import { useMe } from '@/components/me'
import { USER_FULL } from '@/fragments/users'
import { getGetServerSideProps } from '@/api/ssrApollo'
import { FeeButtonProvider } from '@/components/fee-button'
import { bioSchema } from '@/lib/validate'
import { useRouter } from 'next/router'
import PageLoading from '@/components/page-loading'
import { ItemButtonBar } from '@/components/post'
import useItemSubmit from '@/components/use-item-submit'
import { UPSERT_BIO } from '@/fragments/paidAction'
export const getServerSideProps = getGetServerSideProps({
query: USER_FULL,
notFound: data => !data.user
})
export function BioForm ({ handleDone, bio, me }) {
const onSubmit = useItemSubmit(UPSERT_BIO, {
navigateOnSubmit: false,
paidMutationOptions: {
update (cache, { data: { upsertBio: { result, invoice } } }) {
if (!result) return
cache.modify({
id: `User:${me.id}`,
fields: {
bio () {
return result.text
}
}
})
}
},
onSuccessfulSubmit: (data, { resetForm }) => {
handleDone?.()
}
})
return (
<div className={styles.createFormContainer}>
<FeeButtonProvider>
<Form
initial={{
text: bio?.text || ''
}}
schema={bioSchema}
onSubmit={onSubmit}
storageKeyPrefix={`bio-${me.id}`}
>
<MarkdownInput
topLevel
name='text'
minRows={6}
/>
<ItemButtonBar createText='save' onCancel={handleDone} />
</Form>
</FeeButtonProvider>
</div>
)
}
export function UserLayout ({ user, children, containClassName }) {
return (
<Layout user={user} footer footerLinks={false} containClassName={containClassName}>
<UserHeader user={user} />
{children}
</Layout>
)
}
export default function User ({ ssrData }) {
const [create, setCreate] = useState(false)
const [edit, setEdit] = useState(false)
const router = useRouter()
const { me } = useMe()
const { data } = useQuery(USER_FULL, { variables: { ...router.query } })
if (!data && !ssrData) return <PageLoading />
const { user } = data || ssrData
const mine = me?.name === user.name
return (
<UserLayout user={user} containClassName={!user.bio && mine && styles.contain}>
{user.bio
? (edit
? (
<div className={styles.create}>
<BioForm bio={user.bio} me={me} handleDone={() => setEdit(false)} />
</div>)
: <ItemFull item={user.bio} bio handleClick={setEdit} />
)
: (mine &&
<div className={styles.create}>
{create
? <BioForm me={me} handleDone={() => setCreate(false)} />
: (
mine &&
<div className='text-center'>
<Button
onClick={setCreate}
size='md' variant='secondary'
>create bio
</Button>
<small className='d-block mt-3 text-muted'>your bio is also a post introducing yourself to other stackers</small>
</div>
)}
</div>)}
</UserLayout>
)
}