require sub selection, allow editting

api/resolvers/price.js

@@ -21,15 +21,16 @@ async function getPrice (fiat) {
     const expired = createdAt + expiresIn < Date.now()
     if (expired) fetchPrice(fiat).catch(console.error) // update cache
     return price // serve stale price (this on the SSR critical path)
+  } else {
+    fetchPrice(fiat).catch(console.error)
   }
-  return await fetchPrice(fiat)
+  return null
 }
 
 export default {
   Query: {
     price: async (parent, { fiatCurrency }, ctx) => {
-      const price = await getPrice(fiatCurrency)
+      return await getPrice(fiatCurrency)
-      return price
     }
   }
 }

components/bounty-form.js

@@ -7,6 +7,7 @@ import AdvPostForm, { AdvPostInitial } from './adv-post-form'
 import FeeButton, { EditFeeButton } from './fee-button'
 import { InputGroup } from 'react-bootstrap'
 import { bountySchema } from '../lib/validate'
+import { SubSelectInitial } from './sub-select-form'
 
 export function BountyForm ({
   item,
@@ -17,7 +18,8 @@ export function BountyForm ({
   textLabel = 'text',
   buttonText = 'post',
   adv,
-  handleSubmit
+  handleSubmit,
+  children
 }) {
   const router = useRouter()
   const client = useApolloClient()
@@ -54,7 +56,8 @@ export function BountyForm ({
         title: item?.title || '',
         text: item?.text || '',
         bounty: item?.bounty || 1000,
-        ...AdvPostInitial({ forward: item?.fwdUser?.name })
+        ...AdvPostInitial({ forward: item?.fwdUser?.name }),
+        ...SubSelectInitial({ sub: item?.subName || sub?.name })
       }}
       schema={schema}
       onSubmit={
@@ -83,6 +86,7 @@ export function BountyForm ({
       }
       storageKeyPrefix={item ? undefined : 'bounty'}
     >
+      {children}
       <Input label={titleLabel} name='title' required autoFocus clear />
       <Input
         label={bountyLabel} name='bounty' required

components/discussion-form.js

@@ -11,11 +11,12 @@ import Item from './item'
 import Delete from './delete'
 import { Button } from 'react-bootstrap'
 import { discussionSchema } from '../lib/validate'
+import { SubSelectInitial } from './sub-select-form'
 
 export function DiscussionForm ({
   item, sub, editThreshold, titleLabel = 'title',
   textLabel = 'text', buttonText = 'post',
-  adv, handleSubmit
+  adv, handleSubmit, children
 }) {
   const router = useRouter()
   const client = useApolloClient()
@@ -51,7 +52,8 @@ export function DiscussionForm ({
       initial={{
         title: item?.title || '',
         text: item?.text || '',
-        ...AdvPostInitial({ forward: item?.fwdUser?.name })
+        ...AdvPostInitial({ forward: item?.fwdUser?.name }),
+        ...SubSelectInitial({ sub: item?.subName || sub?.name })
       }}
       schema={schema}
       onSubmit={handleSubmit || (async ({ boost, ...values }) => {
@@ -71,6 +73,7 @@ export function DiscussionForm ({
       })}
       storageKeyPrefix={item ? undefined : 'discussion'}
     >
+      {children}
       <Input
         label={titleLabel}
         name='title'

components/form.js

@@ -434,25 +434,31 @@ export function SyncForm ({
 }
 
 export function Select ({ label, items, groupClassName, onChange, noForm, ...props }) {
-  const [field] = useField(props)
+  const [field, meta] = noForm ? [{}, {}] : useField(props)
   const formik = noForm ? null : useFormikContext()
-
+  const invalid = meta.touched && meta.error
   return (
     <FormGroup label={label} className={groupClassName}>
       <BootstrapForm.Control
         as='select'
         {...field} {...props}
         onChange={(e) => {
-          field.onChange(e)
+          if (field?.onChange) {
+            field.onChange(e)
+          }
 
           if (onChange) {
             onChange(formik, e)
           }
         }}
         custom
+        isInvalid={invalid}
       >
         {items.map(item => <option key={item}>{item}</option>)}
       </BootstrapForm.Control>
+      <BootstrapForm.Control.Feedback type='invalid'>
+        {meta.touched && meta.error}
+      </BootstrapForm.Control.Feedback>
     </FormGroup>
   )
 }

components/job-form.js

@@ -50,7 +50,7 @@ export default function JobForm ({ item, sub }) {
   return (
     <>
       <Form
-        className='py-5'
+        className='pb-5 pt-3'
         initial={{
           title: item?.title || '',
           company: item?.company || '',

components/layout-center.module.css

@@ -16,6 +16,7 @@
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
+    margin-top: 1.5rem;
     flex-direction: column;
 }
 

components/link-form.js

@@ -12,8 +12,9 @@ import Delete from './delete'
 import { Button } from 'react-bootstrap'
 import { linkSchema } from '../lib/validate'
 import Moon from '../svgs/moon-fill.svg'
+import { SubSelectInitial } from './sub-select-form'
 
-export function LinkForm ({ item, sub, editThreshold }) {
+export function LinkForm ({ item, sub, editThreshold, children }) {
   const router = useRouter()
   const client = useApolloClient()
   const schema = linkSchema(client)
@@ -87,7 +88,8 @@ export function LinkForm ({ item, sub, editThreshold }) {
       initial={{
         title: item?.title || '',
         url: item?.url || '',
-        ...AdvPostInitial({ forward: item?.fwdUser?.name })
+        ...AdvPostInitial({ forward: item?.fwdUser?.name }),
+        ...SubSelectInitial({ sub: item?.subName || sub?.name })
       }}
       schema={schema}
       onSubmit={async ({ boost, title, ...values }) => {
@@ -106,6 +108,7 @@ export function LinkForm ({ item, sub, editThreshold }) {
       }}
       storageKeyPrefix={item ? undefined : 'link'}
     >
+      {children}
       <Input
         label='title'
         name='title'

components/poll-form.js

@@ -9,8 +9,9 @@ import FeeButton, { EditFeeButton } from './fee-button'
 import Delete from './delete'
 import { Button } from 'react-bootstrap'
 import { pollSchema } from '../lib/validate'
+import { SubSelectInitial } from './sub-select-form'
 
-export function PollForm ({ item, sub, editThreshold }) {
+export function PollForm ({ item, sub, editThreshold, children }) {
   const router = useRouter()
   const client = useApolloClient()
   const schema = pollSchema(client)
@@ -34,7 +35,8 @@ export function PollForm ({ item, sub, editThreshold }) {
         title: item?.title || '',
         text: item?.text || '',
         options: initialOptions || ['', ''],
-        ...AdvPostInitial({ forward: item?.fwdUser?.name })
+        ...AdvPostInitial({ forward: item?.fwdUser?.name }),
+        ...SubSelectInitial({ sub: item?.subName || sub?.name })
       }}
       schema={schema}
       onSubmit={async ({ boost, title, options, ...values }) => {
@@ -61,6 +63,7 @@ export function PollForm ({ item, sub, editThreshold }) {
       }}
       storageKeyPrefix={item ? undefined : 'poll'}
     >
+      {children}
       <Input
         label='title'
         name='title'

components/post.js

@@ -0,0 +1,87 @@
+import JobForm from './job-form'
+import Link from 'next/link'
+import { Button } from 'react-bootstrap'
+import AccordianItem from './accordian-item'
+import { useMe } from './me'
+import { useRouter } from 'next/router'
+import { DiscussionForm } from './discussion-form'
+import { LinkForm } from './link-form'
+import { PollForm } from './poll-form'
+import { BountyForm } from './bounty-form'
+import SubSelect from './sub-select-form'
+
+export function PostForm ({ type, sub, children }) {
+  const me = useMe()
+
+  const prefix = sub?.name ? `/~${sub.name}` : ''
+
+  if (!type) {
+    return (
+      <div className='align-items-center'>
+        <SubSelect noForm sub={sub?.name} />
+        {me?.freePosts && me?.sats < 1
+          ? <div className='text-center font-weight-bold mb-3 text-success'>{me.freePosts} free posts left</div>
+          : null}
+        <Link href={prefix + '/post?type=link'}>
+          <Button variant='secondary'>link</Button>
+        </Link>
+        <span className='mx-3 font-weight-bold text-muted'>or</span>
+        <Link href={prefix + '/post?type=discussion'}>
+          <Button variant='secondary'>discussion</Button>
+        </Link>
+        <div className='d-flex mt-3'>
+          <AccordianItem
+            headerColor='#6c757d'
+            header={<div className='font-weight-bold text-muted'>more</div>}
+            body={
+              <div className='align-items-center'>
+                <Link href={prefix + '/post?type=poll'}>
+                  <Button variant='info'>poll</Button>
+                </Link>
+                <span className='mx-3 font-weight-bold text-muted'>or</span>
+                <Link href={prefix + '/post?type=bounty'}>
+                  <Button variant='info'>bounty</Button>
+                </Link>
+                <div className='mt-3 d-flex justify-content-center'>
+                  <Link href='/~jobs/post'>
+                    <Button variant='info'>job</Button>
+                  </Link>
+                </div>
+              </div>
+              }
+          />
+        </div>
+      </div>
+    )
+  }
+
+  let FormType = JobForm
+  if (type === 'discussion') {
+    FormType = DiscussionForm
+  } else if (type === 'link') {
+    FormType = LinkForm
+  } else if (type === 'poll') {
+    FormType = PollForm
+  } else if (type === 'bounty') {
+    FormType = BountyForm
+  }
+
+  return <FormType sub={sub}>{children}</FormType>
+}
+
+export default function Post ({ sub }) {
+  const router = useRouter()
+  let type = router.query.type
+
+  if (sub?.postTypes?.length === 1) {
+    type = sub.postTypes[0].toLowerCase()
+  }
+
+  return (
+    <>
+      <PostForm type={type} sub={sub}>
+        {sub?.name !== 'jobs' && <SubSelect label='sub' />}
+      </PostForm>
+    </>
+  )
+}

components/sub-select-form.js

@@ -0,0 +1,55 @@
+import { useRouter } from 'next/router'
+import { Select } from './form'
+import Info from './info'
+
+export function SubSelectInitial ({ sub }) {
+  const router = useRouter()
+  sub = sub || router.query.sub || 'pick sub'
+
+  return {
+    sub
+  }
+}
+
+export default function SubSelect ({ label, sub, setSub, item, ...props }) {
+  const router = useRouter()
+
+  const SubInfo = () => (
+    <Info>
+      <div>
+        <div className='font-weight-bold'>The sub your post will go in ...</div>
+        <ul>
+          <li>If it's bitcoin related, put it in the bitcoin sub.</li>
+          <li>If it's nostr related, put it in the nostr sub.</li>
+          <li>If it's a job, put it in the jobs sub.</li>
+        </ul>
+      </div>
+    </Info>
+  )
+
+  return (
+    <Select
+      className='w-auto d-flex'
+      onChange={(formik, e) => {
+        if (!item) {
+          router.push({
+            pathname: e.target.value === 'pick sub' ? '/post' : `/~${e.target.value}/post`,
+            query: router.query?.type ? { type: router.query.type } : undefined
+          })
+        } else {
+          setSub(e.target.value)
+        }
+      }}
+      name='sub'
+      size='sm'
+      defaultValue={props.noForm ? sub : undefined}
+      items={props.noForm ? ['pick sub', 'bitcoin', 'nostr', 'jobs'] : item ? ['bitcoin', 'nostr'] : ['pick sub', 'bitcoin', 'nostr']}
+      label={label &&
+        <>
+          {label}
+          <SubInfo />
+        </>}
+      {...props}
+    />
+  )
+}

lib/validate.js

@@ -82,20 +82,28 @@ export function advPostSchemaMembers (client) {
   }
 }
 
+export function subSelectSchemaMembers (client) {
+  return {
+    sub: Yup.string().required('required').oneOf(['bitcoin', 'nostr'], 'required')
+  }
+}
+
 export function bountySchema (client) {
   return Yup.object({
     title: titleValidator,
     bounty: intValidator
       .min(1000, 'must be at least 1000')
       .max(1000000, 'must be at most 1m'),
-    ...advPostSchemaMembers(client)
+    ...advPostSchemaMembers(client),
+    ...subSelectSchemaMembers()
   })
 }
 
 export function discussionSchema (client) {
   return Yup.object({
     title: titleValidator,
-    ...advPostSchemaMembers(client)
+    ...advPostSchemaMembers(client),
+    ...subSelectSchemaMembers()
   })
 }
 
@@ -103,7 +111,8 @@ export function linkSchema (client) {
   return Yup.object({
     title: titleValidator,
     url: Yup.string().matches(URL_REGEXP, 'invalid url').required('required'),
-    ...advPostSchemaMembers(client)
+    ...advPostSchemaMembers(client),
+    ...subSelectSchemaMembers()
   })
 }
 
@@ -123,7 +132,8 @@ export function pollSchema (client, numExistingChoices = 0) {
       message: `at least ${MIN_POLL_NUM_CHOICES} choices required`,
       test: arr => arr.length >= MIN_POLL_NUM_CHOICES - numExistingChoices
     }),
-    ...advPostSchemaMembers(client)
+    ...advPostSchemaMembers(client),
+    ...subSelectSchemaMembers()
   })
 }
 

pages/items/[id]/edit.js

@@ -6,24 +6,32 @@ import LayoutCenter from '../../../components/layout-center'
 import JobForm from '../../../components/job-form'
 import { PollForm } from '../../../components/poll-form'
 import { BountyForm } from '../../../components/bounty-form'
+import SubSelect from '../../../components/sub-select-form'
+import { useState } from 'react'
 
 export const getServerSideProps = getGetServerSideProps(ITEM, null,
   data => !data.item)
 
 export default function PostEdit ({ data: { item } }) {
   const editThreshold = new Date(item.createdAt).getTime() + 10 * 60000
+  const [sub, setSub] = useState(item.subName)
+
+  let FormType = DiscussionForm
+  if (item.isJob) {
+    FormType = JobForm
+  } else if (item.url) {
+    FormType = LinkForm
+  } else if (item.pollCost) {
+    FormType = PollForm
+  } else if (item.bounty) {
+    FormType = BountyForm
+  }
 
   return (
-    <LayoutCenter sub={item.subName}>
+    <LayoutCenter sub={sub}>
-      {item.isJob
+      <FormType item={item} editThreshold={editThreshold}>
-        ? <JobForm item={item} />
+        {!item.isJob && <SubSelect label='sub' item={item} setSub={setSub} sub={sub} />}
-        : (item.url
+      </FormType>
-            ? <LinkForm item={item} editThreshold={editThreshold} adv />
-            : (item.pollCost
-                ? <PollForm item={item} editThreshold={editThreshold} adv />
-                : (item.bounty
-                    ? <BountyForm item={item} editThreshold={editThreshold} adv />
-                    : <DiscussionForm item={item} editThreshold={editThreshold} adv />)))}
     </LayoutCenter>
   )
 }

pages/post.js

@@ -1,118 +1,10 @@
-import Button from 'react-bootstrap/Button'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
 import LayoutCenter from '../components/layout-center'
-import { useMe } from '../components/me'
+import Post from '../components/post'
-import { DiscussionForm } from '../components/discussion-form'
-import { LinkForm } from '../components/link-form'
-import { getGetServerSideProps } from '../api/ssrApollo'
-import AccordianItem from '../components/accordian-item'
-import { PollForm } from '../components/poll-form'
-import { BountyForm } from '../components/bounty-form'
-import { Form, Select } from '../components/form'
-import { useEffect, useState } from 'react'
-import Info from '../components/info'
 
-export const getServerSideProps = getGetServerSideProps()
+export default function PostPage () {
-
-export function PostForm () {
-  const router = useRouter()
-  const me = useMe()
-
-  if (!router.query.type) {
-    return (
-      <div className='align-items-center'>
-        {me?.freePosts && me?.sats < 1
-          ? <div className='text-center font-weight-bold mb-3 text-success'>{me.freePosts} free posts left</div>
-          : null}
-        <Link href='/post?type=link'>
-          <Button variant='secondary'>link</Button>
-        </Link>
-        <span className='mx-3 font-weight-bold text-muted'>or</span>
-        <Link href='/post?type=discussion'>
-          <Button variant='secondary'>discussion</Button>
-        </Link>
-        <div className='d-flex mt-3'>
-          <AccordianItem
-            headerColor='#6c757d'
-            header={<div className='font-weight-bold text-muted'>more</div>}
-            body={
-              <div className='align-items-center'>
-                <Link href='/post?type=poll'>
-                  <Button variant='info'>poll</Button>
-                </Link>
-                <span className='mx-3 font-weight-bold text-muted'>or</span>
-                <Link href='/post?type=bounty'>
-                  <Button variant='info'>bounty</Button>
-                </Link>
-              </div>
-            }
-          />
-        </div>
-      </div>
-    )
-  }
-
-  if (router.query.type === 'discussion') {
-    return <DiscussionForm adv />
-  } else if (router.query.type === 'link') {
-    return <LinkForm />
-  } else if (router.query.type === 'poll') {
-    return <PollForm />
-  } else {
-    return <BountyForm adv />
-  }
-}
-
-export function SubSelect ({ children }) {
-  const router = useRouter()
-  const [sub, setSub] = useState(router.query.sub || 'bitcoin')
-
-  useEffect(() => {
-    setSub(router.query.sub || 'bitcoin')
-  }, [router.query?.sub])
-
-  return (
-    <div className='mb-3 d-flex justify-content-start'>
-      <Form
-        className='w-auto d-flex align-items-center'
-        initial={{
-          sub
-        }}
-      >
-        <Select
-          groupClassName='mb-0'
-          onChange={(formik, e) =>
-            // todo move the form values to the other sub's post form
-            router.push({
-              pathname: `/~${e.target.value}/post`,
-              query: router.query?.type ? { type: router.query.type } : undefined
-            })}
-          name='sub'
-          size='sm'
-          items={router.query?.type ? ['bitcoin', 'nostr'] : ['bitcoin', 'nostr', 'jobs']}
-        />
-        <Info>
-          <div>
-            <div className='font-weight-bold'>The sub your post will go in ...</div>
-            <ul>
-              <li>If it's bitcoin related, put it in the bitcoin sub.</li>
-              <li>If it's nostr related, put it in the nostr sub.</li>
-              <li>If it's a job, put it in the jobs sub.</li>
-            </ul>
-          </div>
-        </Info>
-      </Form>
-      {children}
-    </div>
-  )
-}
-
-export default function Post () {
   return (
     <LayoutCenter>
-      <SubSelect />
+      <Post />
-      <PostForm />
     </LayoutCenter>
   )
 }

pages/~/[sub]/post.js

@@ -1,85 +1,15 @@
 import { getGetServerSideProps } from '../../../api/ssrApollo'
 import { SUB } from '../../../fragments/subs'
 import LayoutCenter from '../../../components/layout-center'
-import JobForm from '../../../components/job-form'
+import Post from '../../../components/post'
-import Link from 'next/link'
-import { Button } from 'react-bootstrap'
-import AccordianItem from '../../../components/accordian-item'
-import { useMe } from '../../../components/me'
-import { useRouter } from 'next/router'
-import { DiscussionForm } from '../../../components/discussion-form'
-import { LinkForm } from '../../../components/link-form'
-import { PollForm } from '../../../components/poll-form'
-import { BountyForm } from '../../../components/bounty-form'
-import { SubSelect } from '../../post'
 
 export const getServerSideProps = getGetServerSideProps(SUB, null,
   data => !data.sub)
 
-export function PostForm ({ type, sub }) {
+export default function PostPage ({ data: { sub } }) {
-  const me = useMe()
-
-  const prefix = sub?.name ? `/~${sub.name}` : ''
-
-  if (!type) {
-    return (
-      <div className='align-items-center'>
-        {me?.freePosts && me?.sats < 1
-          ? <div className='text-center font-weight-bold mb-3 text-success'>{me.freePosts} free posts left</div>
-          : null}
-        <Link href={prefix + '/post?type=link'}>
-          <Button variant='secondary'>link</Button>
-        </Link>
-        <span className='mx-3 font-weight-bold text-muted'>or</span>
-        <Link href={prefix + '/post?type=discussion'}>
-          <Button variant='secondary'>discussion</Button>
-        </Link>
-        <div className='d-flex mt-3'>
-          <AccordianItem
-            headerColor='#6c757d'
-            header={<div className='font-weight-bold text-muted'>more</div>}
-            body={
-              <div className='align-items-center'>
-                <Link href={prefix + '/post?type=poll'}>
-                  <Button variant='info'>poll</Button>
-                </Link>
-                <span className='mx-3 font-weight-bold text-muted'>or</span>
-                <Link href={prefix + '/post?type=bounty'}>
-                  <Button variant='info'>bounty</Button>
-                </Link>
-              </div>
-              }
-          />
-        </div>
-      </div>
-    )
-  }
-
-  if (type === 'discussion') {
-    return <DiscussionForm sub={sub} />
-  } else if (type === 'link') {
-    return <LinkForm sub={sub} />
-  } else if (type === 'poll') {
-    return <PollForm sub={sub} />
-  } else if (type === 'bounty') {
-    return <BountyForm sub={sub} />
-  } else {
-    return <JobForm sub={sub} />
-  }
-}
-
-export default function Post ({ data: { sub } }) {
-  const router = useRouter()
-  let type = router.query.type
-
-  if (sub.postTypes.length === 1) {
-    type = sub.postTypes[0].toLowerCase()
-  }
-
   return (
     <LayoutCenter sub={sub.name}>
-      {sub.name !== 'jobs' && <SubSelect />}
+      <Post sub={sub} />
-      <PostForm type={type} sub={sub} />
     </LayoutCenter>
   )
 }

pages/~/[sub]/recent/index.js

@@ -12,7 +12,7 @@ export const getServerSideProps = getGetServerSideProps(SUB_ITEMS, variables,
 export default function Sub ({ data: { sub, items: { items, cursor } } }) {
   return (
     <Layout sub={sub?.name}>
-      <RecentHeader type='posts' sub={sub} />
+      {sub?.name !== 'jobs' && <RecentHeader type='posts' sub={sub} />}
       <Items
         items={items} cursor={cursor}
         variables={{ sub: sub?.name, ...variables }} rank