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

130 lines
3.8 KiB
JavaScript
Raw Normal View History

2021-09-30 15:46:58 +00:00
import Layout from '../../components/layout'
2021-09-24 21:28:21 +00:00
import { gql, useMutation, useQuery } from '@apollo/client'
2021-09-30 15:46:58 +00:00
import UserHeader from '../../components/user-header'
import Seo from '../../components/seo'
2021-09-23 17:42:00 +00:00
import { Button } from 'react-bootstrap'
2021-09-30 15:46:58 +00:00
import styles from '../../styles/user.module.css'
2021-09-23 17:42:00 +00:00
import { useState } from 'react'
2021-09-30 15:46:58 +00:00
import ItemFull from '../../components/item-full'
import { Form, MarkdownInput, SubmitButton } from '../../components/form'
2021-09-23 20:25:38 +00:00
import TextareaAutosize from 'react-textarea-autosize'
2021-09-30 15:46:58 +00:00
import { useMe } from '../../components/me'
import { USER_FULL } from '../../fragments/users'
import { ITEM_FIELDS } from '../../fragments/items'
2021-10-26 20:49:37 +00:00
import { getGetServerSideProps } from '../../api/ssrApollo'
2022-08-18 18:15:24 +00:00
import FeeButton, { EditFeeButton } from '../../components/fee-button'
2023-02-08 19:38:04 +00:00
import { bioSchema } from '../../lib/validate'
2023-06-12 19:34:10 +00:00
import CancelButton from '../../components/cancel-button'
2021-04-22 22:14:32 +00:00
export const getServerSideProps = getGetServerSideProps(USER_FULL, null,
data => !data.user)
2021-04-22 22:14:32 +00:00
export function BioForm ({ handleDone, bio }) {
2021-09-24 21:28:21 +00:00
const [upsertBio] = useMutation(
2021-09-23 17:42:00 +00:00
gql`
2021-09-24 21:28:21 +00:00
${ITEM_FIELDS}
mutation upsertBio($bio: String!) {
upsertBio(bio: $bio) {
2021-09-23 17:42:00 +00:00
id
2021-09-24 21:28:21 +00:00
bio {
...ItemFields
text
}
2021-09-23 17:42:00 +00:00
}
}`, {
2021-09-24 21:28:21 +00:00
update (cache, { data: { upsertBio } }) {
2021-09-23 17:42:00 +00:00
cache.modify({
2021-09-24 21:28:21 +00:00
id: `User:${upsertBio.id}`,
2021-09-23 17:42:00 +00:00
fields: {
bio () {
2021-09-24 21:28:21 +00:00
return upsertBio.bio
2021-09-23 17:42:00 +00:00
}
}
})
}
}
)
return (
<div className={styles.createFormContainer}>
2021-09-23 20:25:38 +00:00
<Form
initial={{
2021-09-24 21:28:21 +00:00
bio: bio?.text || ''
2021-09-23 20:25:38 +00:00
}}
2023-02-08 19:38:04 +00:00
schema={bioSchema}
2021-09-23 20:25:38 +00:00
onSubmit={async values => {
2021-09-24 21:28:21 +00:00
const { error } = await upsertBio({ variables: values })
2021-09-23 17:42:00 +00:00
if (error) {
throw new Error({ message: error.toString() })
}
handleDone?.()
2021-09-23 17:42:00 +00:00
}}
2021-09-23 20:25:38 +00:00
>
<MarkdownInput
topLevel
2021-09-23 20:25:38 +00:00
name='bio'
as={TextareaAutosize}
2021-11-12 22:39:52 +00:00
minRows={6}
2021-09-23 20:25:38 +00:00
/>
2023-06-12 19:34:10 +00:00
<div className='d-flex mt-3 justify-content-end'>
<CancelButton onClick={handleDone} />
2022-08-10 15:06:31 +00:00
{bio?.text
2022-08-18 18:15:24 +00:00
? <EditFeeButton
2022-09-27 21:19:15 +00:00
paidSats={bio?.meSats}
2022-08-18 18:15:24 +00:00
parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
/>
2022-08-10 15:06:31 +00:00
: <FeeButton
2022-09-27 21:19:15 +00:00
baseFee={1} parentId={null} text='create'
2022-08-10 15:06:31 +00:00
ChildButton={SubmitButton} variant='secondary'
/>}
</div>
2021-09-23 20:25:38 +00:00
</Form>
2021-09-23 17:42:00 +00:00
</div>
)
}
2021-10-26 20:49:37 +00:00
export default function User ({ data: { user } }) {
2021-09-23 17:42:00 +00:00
const [create, setCreate] = useState(false)
2021-09-24 21:28:21 +00:00
const [edit, setEdit] = useState(false)
2021-09-23 22:18:48 +00:00
const me = useMe()
2021-09-30 15:46:58 +00:00
2021-10-26 20:49:37 +00:00
const { data } = useQuery(USER_FULL, { variables: { name: user.name } })
2021-09-24 21:28:21 +00:00
if (data) {
({ user } = data)
}
const mine = me?.name === user.name
2021-04-22 22:14:32 +00:00
return (
2021-09-23 17:42:00 +00:00
<Layout noSeo containClassName={styles.contain}>
2021-07-08 00:15:27 +00:00
<Seo user={user} />
2021-04-22 22:14:32 +00:00
<UserHeader user={user} />
2021-09-23 17:42:00 +00:00
{user.bio
2021-09-24 21:28:21 +00:00
? (edit
? (
<div className={styles.create}>
<BioForm bio={user.bio} handleDone={() => setEdit(false)} />
2021-09-24 21:28:21 +00:00
</div>)
: <ItemFull item={user.bio} bio handleClick={setEdit} />
)
: (mine &&
2021-09-23 17:42:00 +00:00
<div className={styles.create}>
{create
? <BioForm handleDone={() => setCreate(false)} />
2021-09-23 17:42:00 +00:00
: (
2021-09-24 21:28:21 +00:00
mine &&
2021-11-23 21:23:25 +00:00
<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 users</small>
</div>
2021-09-23 17:42:00 +00:00
)}
</div>)}
2021-04-22 22:14:32 +00:00
</Layout>
)
2021-04-14 23:56:29 +00:00
}