add settings page

api/resolvers/user.js

@@ -35,6 +35,15 @@ export default {
         throw error
       }
     },
+    setSettings: async (parent, { tipDefault }, { me, models }) => {
+      if (!me) {
+        throw new AuthenticationError('you must be logged in')
+      }
+
+      await models.user.update({ where: { id: me.id }, data: { tipDefault } })
+
+      return true
+    },
     upsertBio: async (parent, { bio }, { me, models }) => {
       if (!me) {
         throw new AuthenticationError('you must be logged in')

api/typeDefs/user.js

@@ -10,6 +10,7 @@ export default gql`
 
   extend type Mutation {
     setName(name: String!): Boolean
+    setSettings(tipDefault: Int!): Boolean
     upsertBio(bio: String!): User!
   }
 

components/header.js

@@ -90,6 +90,10 @@ export default function Header () {
                 <NavDropdown.Item href='https://bitcoinerjobs.co' target='_blank'>jobs</NavDropdown.Item>
               </div>
               <NavDropdown.Divider />
+              <Link href='/settings' passHref>
+                <NavDropdown.Item>settings</NavDropdown.Item>
+              </Link>
+              <NavDropdown.Divider />
               <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
             </NavDropdown>
             {me?.hasNewNotes &&

pages/settings.js

@@ -0,0 +1,51 @@
+import { Form, Input, SubmitButton } from '../components/form'
+import * as Yup from 'yup'
+import { Alert, InputGroup } from 'react-bootstrap'
+import { useMe } from '../components/me'
+import LayoutCenter from '../components/layout-center'
+import { useState } from 'react'
+import { gql, useMutation } from '@apollo/client'
+
+export const SettingsSchema = Yup.object({
+  tipDefault: Yup.number().typeError('must be a number').required('required')
+    .positive('must be positive').integer('must be whole')
+})
+
+export default function Settings () {
+  const me = useMe()
+  const [success, setSuccess] = useState()
+  const [setSettings] = useMutation(
+    gql`
+      mutation setSettings($tipDefault: Int!) {
+        setSettings(tipDefault: $tipDefault)
+      }`
+  )
+
+  return (
+    <LayoutCenter>
+      <h2 className='mb-5 text-left'>settings</h2>
+      <Form
+        initial={{
+          tipDefault: me?.tipDefault || 21
+        }}
+        schema={SettingsSchema}
+        onSubmit={async ({ tipDefault }) => {
+          await setSettings({ variables: { tipDefault: Number(tipDefault) } })
+          setSuccess('settings saved')
+        }}
+      >
+        {success && <Alert variant='info' onClose={() => setSuccess(undefined)} dismissible>{success}</Alert>}
+        <Input
+          label='tip default'
+          name='tipDefault'
+          required
+          autoFocus
+          append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
+        />
+        <div className='d-flex'>
+          <SubmitButton variant='info' className='ml-auto mt-1 px-4'>save</SubmitButton>
+        </div>
+      </Form>
+    </LayoutCenter>
+  )
+}