import Layout from '@/components/layout' import { gql, useMutation, 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 { ITEM_FIELDS } from '@/fragments/items' 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' export const getServerSideProps = getGetServerSideProps({ query: USER_FULL, notFound: data => !data.user }) export function BioForm ({ handleDone, bio }) { const [upsertBio] = useMutation( gql` ${ITEM_FIELDS} mutation upsertBio($bio: String!) { upsertBio(bio: $bio) { id bio { ...ItemFields text } } }`, { update (cache, { data: { upsertBio } }) { cache.modify({ id: `User:${upsertBio.id}`, fields: { bio () { return upsertBio.bio } } }) } } ) return (
{ const { error } = await upsertBio({ variables: values }) if (error) throw error handleDone?.() }} >
) } export function UserLayout ({ user, children, containClassName }) { return ( {children} ) } 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 const { user } = data || ssrData const mine = me?.name === user.name return ( {user.bio ? (edit ? (
setEdit(false)} />
) : ) : (mine &&
{create ? setCreate(false)} /> : ( mine &&
your bio is also a post introducing yourself to other stackers
)}
)}
) }