make bio form just a textarea

api/resolvers/user.js

@@ -2,14 +2,14 @@ import { AuthenticationError, UserInputError } from 'apollo-server-errors'
 import { createMentions, getItem, SELECT } from './item'
 import serialize from './serial'
 
-export const createBio = async (parent, { title, text }, { me, models }) => {
+export const createBio = async (parent, { bio }, { me, models }) => {
   if (!me) {
     throw new AuthenticationError('you must be logged in')
   }
 
   const [item] = await serialize(models,
     models.$queryRaw(`${SELECT} FROM create_bio($1, $2, $3) AS "Item"`,
-      title, text, Number(me.id)))
+      `@${me.name}'s bio`, bio, Number(me.id)))
 
   await createMentions(item, models)
 

api/typeDefs/user.js

@@ -10,7 +10,7 @@ export default gql`
 
   extend type Mutation {
     setName(name: String!): Boolean
-    createBio(title: String!, text: String): Item!
+    createBio(bio: String!): Item!
   }
 
   type User {

pages/[username].js

@@ -6,10 +6,13 @@ 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'
+import * as Yup from 'yup'
+import { Form, MarkdownInput, SubmitButton } from '../components/form'
+import ActionTooltip from '../components/action-tooltip'
+import TextareaAutosize from 'react-textarea-autosize'
 
 export async function getServerSideProps ({ req, params }) {
   const { error, data: { user } } = await (await ApolloClient(req)).query({
@@ -45,11 +48,15 @@ export async function getServerSideProps ({ req, params }) {
   }
 }
 
+const BioSchema = Yup.object({
+  bio: Yup.string().required('required').trim()
+})
+
 function BioForm () {
   const [createBio] = useMutation(
     gql`
-      mutation createBio($title: String!, $text: String) {
+      mutation createBio($bio: String!) {
-        createBio(title: $title, text: $text) {
+        createBio(bio: $bio) {
           id
         }
       }`, {
@@ -68,15 +75,27 @@ function BioForm () {
 
   return (
     <div className={styles.createFormContainer}>
-      <DiscussionForm
+      <Form
-        titleLabel='one line bio' textLabel='full bio' buttonText='create'
+        initial={{
-        handleSubmit={async values => {
+          bio: ''
+        }}
+        schema={BioSchema}
+        onSubmit={async values => {
           const { error } = await createBio({ variables: values })
           if (error) {
             throw new Error({ message: error.toString() })
           }
         }}
+      >
+        <MarkdownInput
+          name='bio'
+          as={TextareaAutosize}
+          minRows={4}
         />
+        <ActionTooltip>
+          <SubmitButton variant='secondary' className='mt-3'>create</SubmitButton>
+        </ActionTooltip>
+      </Form>
     </div>
   )
 }
@@ -85,7 +104,7 @@ export default function User ({ user }) {
   const [create, setCreate] = useState(false)
   const [session] = useSession()
 
-  // need to check if this is the user's page
+  // need to check if this is the user's page before exposing create/edit
 
   return (
     <Layout noSeo containClassName={styles.contain}>