106 lines
2.5 KiB
JavaScript
106 lines
2.5 KiB
JavaScript
import Layout from '../components/layout'
|
|
import { gql, useMutation } from '@apollo/client'
|
|
import ApolloClient from '../api/client'
|
|
import UserHeader from '../components/user-header'
|
|
import Seo from '../components/seo'
|
|
import { Button } from 'react-bootstrap'
|
|
import styles from '../styles/user.module.css'
|
|
import { useState } from 'react'
|
|
import { DiscussionForm } from '../components/discussion-form'
|
|
import { useSession } from 'next-auth/client'
|
|
import { ITEM_FIELDS } from '../fragments/items'
|
|
import ItemFull from '../components/item-full'
|
|
|
|
export async function getServerSideProps ({ req, params }) {
|
|
const { error, data: { user } } = await (await ApolloClient(req)).query({
|
|
query:
|
|
gql`
|
|
${ITEM_FIELDS}
|
|
{
|
|
user(name: "${params.username}") {
|
|
id
|
|
createdAt
|
|
name
|
|
nitems
|
|
ncomments
|
|
stacked
|
|
sats
|
|
bio {
|
|
...ItemFields
|
|
}
|
|
}
|
|
}`
|
|
})
|
|
|
|
if (!user || error) {
|
|
return {
|
|
notFound: true
|
|
}
|
|
}
|
|
|
|
return {
|
|
props: {
|
|
user
|
|
}
|
|
}
|
|
}
|
|
|
|
function BioForm () {
|
|
const [createBio] = useMutation(
|
|
gql`
|
|
mutation createBio($title: String!, $text: String) {
|
|
createBio(title: $title, text: $text) {
|
|
id
|
|
}
|
|
}`, {
|
|
update (cache, { data: { createBio } }) {
|
|
cache.modify({
|
|
id: `User:${createBio.userId}`,
|
|
fields: {
|
|
bio () {
|
|
return createBio
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
)
|
|
|
|
return (
|
|
<div className={styles.createFormContainer}>
|
|
<DiscussionForm
|
|
titleLabel='one line bio' textLabel='full bio' buttonText='create'
|
|
handleSubmit={async values => {
|
|
const { error } = await createBio({ variables: values })
|
|
if (error) {
|
|
throw new Error({ message: error.toString() })
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function User ({ user }) {
|
|
const [create, setCreate] = useState(false)
|
|
const [session] = useSession()
|
|
|
|
return (
|
|
<Layout noSeo containClassName={styles.contain}>
|
|
<Seo user={user} />
|
|
<UserHeader user={user} />
|
|
{user.bio
|
|
? <ItemFull item={user.bio} minimal />
|
|
: (
|
|
<div className={styles.create}>
|
|
{create
|
|
? <BioForm />
|
|
: (
|
|
session?.user?.name === user.name &&
|
|
<Button onClick={setCreate} size='md' variant='secondary'>create bio</Button>
|
|
)}
|
|
</div>)}
|
|
</Layout>
|
|
)
|
|
}
|