fix back button behavior on select navigation

components/fee-button.js

@@ -49,8 +49,6 @@ export default function FeeButton ({ parentId, hasImgLink, baseFee, ChildButton,
   const boost = Number(formik?.values?.boost) || 0
   const cost = baseFee * (hasImgLink ? 10 : 1) * Math.pow(10, repetition) + Number(boost)
 
-  console.log('cost', cost, 'baseFee', baseFee, repetition, hasImgLink, boost)
-
   const show = alwaysShow || !formik?.isSubmitting
   return (
     <div className='d-flex align-items-center'>

components/header.js

@@ -17,7 +17,7 @@ import NoteIcon from '../svgs/notification-4-fill.svg'
 import { useQuery } from '@apollo/client'
 import LightningIcon from '../svgs/bolt.svg'
 import CowboyHat from './cowboy-hat'
-import { Form, Select } from './form'
+import { Select } from './form'
 import SearchIcon from '../svgs/search-line.svg'
 import BackArrow from '../svgs/arrow-left-line.svg'
 import { SUBS } from '../lib/constants'
@@ -181,18 +181,15 @@ function NavItems ({ className, sub, prefix }) {
   return (
     <>
       <Nav.Item className={className}>
-        <Form
+        <Select
-          initial={{ sub }}
+          groupClassName='mb-0'
-        >
+          onChange={(_, e) => router.push(e.target.value === 'home' ? '/' : `/~${e.target.value}`)}
-          <Select
+          name='sub'
-            groupClassName='mb-0'
+          size='sm'
-            onChange={(formik, e) => router.push(e.target.value === 'home' ? '/' : `/~${e.target.value}`)}
+          value={sub}
-            name='sub'
+          noForm
-            size='sm'
+          items={['home', ...SUBS]}
-            overrideValue={sub}
+        />
-            items={['home', ...SUBS]}
-          />
-        </Form>
       </Nav.Item>
       <Nav.Item className={className}>
         <Link href={prefix + '/'} passHref legacyBehavior>

components/job-form.js

@@ -144,7 +144,7 @@ export default function JobForm ({ item, sub }) {
           required
           clear
         />
-        <PromoteJob item={item} sub={sub} storageKeyPrefix={storageKeyPrefix} />
+        <PromoteJob item={item} sub={sub} />
         {item && <StatusControl item={item} />}
         <div className='d-flex align-items-center justify-content-end mt-3'>
           {item
@@ -165,7 +165,7 @@ export default function JobForm ({ item, sub }) {
   )
 }
 
-function PromoteJob ({ item, sub, storageKeyPrefix }) {
+function PromoteJob ({ item, sub }) {
   const [monthly, setMonthly] = useState(satsMin2Mo(item?.maxBid || 0))
   const [getAuctionPosition, { data }] = useLazyQuery(gql`
     query AuctionPosition($id: ID, $bid: Int!) {
@@ -175,7 +175,7 @@ function PromoteJob ({ item, sub, storageKeyPrefix }) {
   const position = data?.auctionPosition
 
   useEffect(() => {
-    const initialMaxBid = Number(item?.maxBid || window.localStorage.getItem(storageKeyPrefix + '-maxBid')) || 0
+    const initialMaxBid = Number(item?.maxBid) || 0
     getAuctionPosition({ variables: { id: item?.id, bid: initialMaxBid } })
     setMonthly(satsMin2Mo(initialMaxBid))
   }, [])
@@ -211,7 +211,6 @@ function PromoteJob ({ item, sub, storageKeyPrefix }) {
             }}
             append={<InputGroup.Text className='text-monospace'>sats/min</InputGroup.Text>}
             hint={<PriceHint monthly={monthly} />}
-            storageKeyPrefix={storageKeyPrefix}
           />
           <><div className='fw-bold text-muted'>This bid puts your job in position: {position}</div></>
         </>

components/recent-header.js

@@ -1,5 +1,5 @@
 import { ITEM_TYPES } from '../lib/constants'
-import { Form, Select } from './form'
+import { Select } from './form'
 import { useRouter } from 'next/router'
 
 export default function RecentHeader ({ type, sub }) {
@@ -8,22 +8,19 @@ export default function RecentHeader ({ type, sub }) {
 
   const items = ITEM_TYPES(sub)
 
+  type ||= router.query.type || type || 'posts'
   return (
-    <Form
+    <div className='text-muted fw-bold mt-0 mb-3 d-flex justify-content-end align-items-center'>
-      initial={{
+      <Select
-        type: router.query.type || type || 'posts'
+        groupClassName='mb-0 ms-2'
-      }}
+        className='w-auto'
-    >
+        name='type'
-      <div className='text-muted fw-bold mt-0 mb-3 d-flex justify-content-end align-items-center'>
+        size='sm'
-        <Select
+        value={type}
-          groupClassName='mb-0 ms-2'
+        items={items}
-          className='w-auto'
+        noForm
-          name='type'
+        onChange={(_, e) => router.push(prefix + (e.target.value === 'posts' ? '/recent' : `/recent/${e.target.value}`))}
-          size='sm'
+      />
-          items={items}
+    </div>
-          onChange={(formik, e) => router.push(prefix + (e.target.value === 'posts' ? '/recent' : `/recent/${e.target.value}`))}
-        />
-      </div>
-    </Form>
   )
 }

components/search.js

@@ -42,9 +42,9 @@ export default function Search ({ sub }) {
         return
       }
 
-      if (values.what === '') delete values.what
+      if (values.what === '' || values.what === 'all') delete values.what
-      if (values.sort === '') delete values.sort
+      if (values.sort === '' || values.sort === 'match') delete values.sort
-      if (values.when === '') delete values.when
+      if (values.when === '' || values.when === 'forever') delete values.when
       await router.push({
         pathname: prefix + '/search',
         query: values
@@ -54,7 +54,10 @@ export default function Search ({ sub }) {
 
   const showSearch = atBottom || searching || router.query.q
   const filter = sub !== 'jobs'
-  const what = router.pathname.startsWith('/stackers') ? 'stackers' : router.query.what
+  const what = router.pathname.startsWith('/stackers') ? 'stackers' : router.query.what || 'all'
+  const sort = router.query.sort || 'match'
+  const when = router.query.when || 'forever'
+
   return (
     <>
       <div className={`${styles.searchSection} ${showSearch ? styles.solid : styles.hidden}`}>
@@ -63,12 +66,7 @@ export default function Search ({ sub }) {
             ? (
               <Form
                 className={styles.formActive}
-                initial={{
+                initial={{ q, what, sort, when }}
-                  q: router.query.q || '',
-                  what: what || '',
-                  sort: router.query.sort || '',
-                  when: router.query.when || ''
-                }}
                 onSubmit={search}
               >
                 {filter &&
@@ -78,6 +76,7 @@ export default function Search ({ sub }) {
                       onChange={(formik, e) => search({ ...formik?.values, what: e.target.value })}
                       name='what'
                       size='sm'
+                      overrideValue={what}
                       items={['all', 'posts', 'comments', 'stackers']}
                     />
                     {what !== 'stackers' &&
@@ -88,6 +87,7 @@ export default function Search ({ sub }) {
                           onChange={(formik, e) => search({ ...formik?.values, sort: e.target.value })}
                           name='sort'
                           size='sm'
+                          overrideValue={sort}
                           items={['match', 'recent', 'comments', 'sats', 'votes']}
                         />
                         for
@@ -96,6 +96,7 @@ export default function Search ({ sub }) {
                           onChange={(formik, e) => search({ ...formik?.values, when: e.target.value })}
                           name='when'
                           size='sm'
+                          overrideValue={when}
                           items={['forever', 'day', 'week', 'month', 'year']}
                         />
 
@@ -109,6 +110,7 @@ export default function Search ({ sub }) {
                     groupClassName='me-3 mb-0 flex-grow-1'
                     className='flex-grow-1'
                     clear
+                    overrideValue={q}
                     onChange={async (formik, e) => {
                       setSearching(true)
                       setQ(e.target.value?.trim())

components/sub-select-form.js

@@ -30,6 +30,9 @@ export default function SubSelect ({ label, sub, setSub, item, ...props }) {
     </Info>
   )
 
+  sub ||= router.query.sub
+  const extraProps = props.noForm ? { value: sub } : { overrideValue: sub }
+
   return (
     <Select
       className='w-auto d-flex'
@@ -45,7 +48,7 @@ export default function SubSelect ({ label, sub, setSub, item, ...props }) {
       }}
       name='sub'
       size='sm'
-      defaultValue={props.noForm ? sub : undefined}
+      {...extraProps}
       items={props.noForm ? ['pick sub', ...SUBS] : item ? SUBS_NO_JOBS : ['pick sub', ...SUBS_NO_JOBS]}
       label={label &&
         <>

components/top-header.js

@@ -31,15 +31,15 @@ export default function TopHeader ({ sub, cat }) {
     })
   }
 
+  const what = cat
+  const by = router.query.by || ''
+  const when = router.query.when || ''
+
   return (
     <div className='d-flex'>
       <Form
         className='me-auto'
-        initial={{
+        initial={{ what, by, when }}
-          what: cat,
-          by: router.query.by || '',
-          when: router.query.when || ''
-        }}
         onSubmit={top}
       >
         <div className='text-muted fw-bold my-3 d-flex align-items-center'>
@@ -49,6 +49,7 @@ export default function TopHeader ({ sub, cat }) {
             onChange={(formik, e) => top({ ...formik?.values, what: e.target.value })}
             name='what'
             size='sm'
+            overrideValue={what}
             items={router?.query?.sub ? ['posts', 'comments'] : ['posts', 'comments', 'stackers', 'cowboys']}
           />
           {cat !== 'cowboys' &&
@@ -59,6 +60,7 @@ export default function TopHeader ({ sub, cat }) {
                 onChange={(formik, e) => top({ ...formik?.values, by: e.target.value })}
                 name='by'
                 size='sm'
+                overrideValue={by}
                 items={cat === 'stackers' ? USER_SORTS : ITEM_SORTS}
               />
               for
@@ -67,6 +69,7 @@ export default function TopHeader ({ sub, cat }) {
                 onChange={(formik, e) => top({ ...formik?.values, when: e.target.value })}
                 name='when'
                 size='sm'
+                overrideValue={when}
                 items={WHENS}
               />
             </>}

components/usage-header.js

@@ -1,27 +1,23 @@
 import { useRouter } from 'next/router'
-import { Form, Select } from './form'
+import { Select } from './form'
 import { WHENS } from '../lib/constants'
 
 export function UsageHeader () {
   const router = useRouter()
 
   return (
-    <Form
+    <div className='text-muted fw-bold my-3 d-flex align-items-center'>
-      initial={{
+      stacker analytics for
-        when: router.query.when || 'day'
+      <Select
-      }}
+        groupClassName='mb-0 ms-2'
-    >
+        className='w-auto'
-      <div className='text-muted fw-bold my-3 d-flex align-items-center'>
+        name='when'
-        stacker analytics for
+        size='sm'
-        <Select
+        items={WHENS}
-          groupClassName='mb-0 ms-2'
+        value={router.query.when || 'day'}
-          className='w-auto'
+        noForm
-          name='when'
+        onChange={(formik, e) => router.push(`/stackers/${e.target.value}`)}
-          size='sm'
+      />
-          items={WHENS}
+    </div>
-          onChange={(formik, e) => router.push(`/stackers/${e.target.value}`)}
-        />
-      </div>
-    </Form>
   )
 }

components/user-list.js

@@ -40,12 +40,12 @@ export default function UserList ({ ssrData, query, variables, destructureData }
   const [statComps, setStatComps] = useState(seperate(STAT_COMPONENTS, Seperator))
 
   useEffect(() => {
-    if (variables.by) {
+    if (variables?.by) {
       // shift the stat we are sorting by to the front
       const comps = [...STAT_COMPONENTS]
       setStatComps(seperate([...comps.splice(STAT_POS[variables.by], 1), ...comps], Seperator))
     }
-  }, [variables.by])
+  }, [variables?.by])
 
   const { users, cursor } = useMemo(() => {
     if (!data && !ssrData) return {}

lib/md.js

@@ -26,8 +26,6 @@ export function extractUrls (md) {
     mdastExtensions: [gfmFromMarkdown()]
   })
 
-  console.log('tree', tree)
-
   const urls = new Set()
   visit(tree, ({ type }) => {
     return type === 'link' || type === 'image'

pages/[name]/[type].js

@@ -41,9 +41,9 @@ function UserItemsHeader ({ type, name }) {
 
   async function select (values) {
     let { type, ...query } = values
-    if (!type || !ITEM_TYPES('user').includes(type)) type = 'all'
+    if (!type || type === 'all' || !ITEM_TYPES('user').includes(type)) type = 'all'
-    if (!query.by || !ITEM_SORTS.includes(query.by)) delete query.by
+    if (!query.by || query.by === 'recent' || !ITEM_SORTS.includes(query.by)) delete query.by
-    if (!query.when || !WHENS.includes(query.when) || query.when === 'forever') delete query.when
+    if (!query.when || query.when === 'forever' || !WHENS.includes(query.when) || query.when === 'forever') delete query.when
 
     await router.push({
       pathname: `/${name}/${type}`,
@@ -51,13 +51,13 @@ function UserItemsHeader ({ type, name }) {
     })
   }
 
+  type ||= router.query.type || 'all'
+  const by = router.query.by || 'recent'
+  const when = router.query.when || 'forever'
+
   return (
     <Form
-      initial={{
+      initial={{ type, by, when }}
-        type,
-        by: router.query.by || 'recent',
-        when: router.query.when || 'forever'
-      }}
       onSubmit={select}
     >
       <div className='text-muted fw-bold mt-0 mb-3 d-flex justify-content-start align-items-center'>
@@ -66,6 +66,7 @@ function UserItemsHeader ({ type, name }) {
           className='w-auto'
           name='type'
           size='sm'
+          overrideValue={type}
           items={ITEM_TYPES('user')}
           onChange={(formik, e) => select({ ...formik?.values, type: e.target.value })}
         />
@@ -75,6 +76,7 @@ function UserItemsHeader ({ type, name }) {
           className='w-auto'
           name='by'
           size='sm'
+          overrideValue={by}
           items={['recent', ...ITEM_SORTS]}
           onChange={(formik, e) => select({ ...formik?.values, by: e.target.value })}
         />
@@ -85,6 +87,7 @@ function UserItemsHeader ({ type, name }) {
           name='when'
           size='sm'
           items={WHENS}
+          overrideValue={when}
           onChange={(formik, e) => select({ ...formik?.values, when: e.target.value })}
         />
       </div>

pages/referrals/[when].js

@@ -2,7 +2,7 @@ import { gql } from 'graphql-tag'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { getGetServerSideProps } from '../../api/ssrApollo'
-import { CopyInput, Form, Select } from '../../components/form'
+import { CopyInput, Select } from '../../components/form'
 import { CenterLayout } from '../../components/layout'
 import { useMe } from '../../components/me'
 import { useQuery } from '@apollo/client'
@@ -43,23 +43,19 @@ export default function Referrals ({ ssrData }) {
 
   return (
     <CenterLayout footerLinks>
-      <Form
+      <h4 className='fw-bold text-muted text-center pt-5 pb-3 d-flex align-items-center justify-content-center'>
-        initial={{
+        {totalReferrals} referrals & {totalSats} sats in the last
-          when: router.query.when
+        <Select
-        }}
+          groupClassName='mb-0 ms-2'
-      >
+          className='w-auto'
-        <h4 className='fw-bold text-muted text-center pt-5 pb-3 d-flex align-items-center justify-content-center'>
+          name='when'
-          {totalReferrals} referrals & {totalSats} sats in the last
+          size='sm'
-          <Select
+          items={WHENS}
-            groupClassName='mb-0 ms-2'
+          value={router.query.when || 'day'}
-            className='w-auto'
+          noForm
-            name='when'
+          onChange={(formik, e) => router.push(`/referrals/${e.target.value}`)}
-            size='sm'
+        />
-            items={WHENS}
+      </h4>
-            onChange={(formik, e) => router.push(`/referrals/${e.target.value}`)}
-          />
-        </h4>
-      </Form>
       <WhenComposedChart data={stats} lineNames={['sats']} barNames={['referrals']} />
 
       <div

pages/stackers/[when].js

@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client'
+import { gql, useQuery } from '@apollo/client'
 import { getGetServerSideProps } from '../../api/ssrApollo'
 import Layout from '../../components/layout'
 import Col from 'react-bootstrap/Col'
@@ -6,6 +6,7 @@ import Row from 'react-bootstrap/Row'
 import { UsageHeader } from '../../components/usage-header'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
+import PageLoading from '../../components/page-loading'
 
 const WhenAreaChart = dynamic(() => import('../../components/charts').then(mod => mod.WhenAreaChart), {
   loading: () => <div>Loading...</div>
@@ -14,61 +15,65 @@ const WhenLineChart = dynamic(() => import('../../components/charts').then(mod =
   loading: () => <div>Loading...</div>
 })
 
-export const getServerSideProps = getGetServerSideProps(
+const GROWTH_QUERY = gql`
-  gql`
+  query Growth($when: String!)
-    query Growth($when: String!)
+  {
-    {
+    registrationGrowth(when: $when) {
-      registrationGrowth(when: $when) {
+      time
-        time
+      data {
-        data {
+        name
-          name
+        value
-          value
-        }
       }
-      itemGrowth(when: $when) {
+    }
-        time
+    itemGrowth(when: $when) {
-        data {
+      time
-          name
+      data {
-          value
+        name
-        }
+        value
       }
-      spendingGrowth(when: $when) {
+    }
-        time
+    spendingGrowth(when: $when) {
-        data {
+      time
-          name
+      data {
-          value
+        name
-        }
+        value
       }
-      spenderGrowth(when: $when) {
+    }
-        time
+    spenderGrowth(when: $when) {
-        data {
+      time
-          name
+      data {
-          value
+        name
-        }
+        value
       }
-      stackingGrowth(when: $when) {
+    }
-        time
+    stackingGrowth(when: $when) {
-        data {
+      time
-          name
+      data {
-          value
+        name
-        }
+        value
       }
-      stackerGrowth(when: $when) {
+    }
-        time
+    stackerGrowth(when: $when) {
-        data {
+      time
-          name
+      data {
-          value
+        name
-        }
+        value
       }
-    }`)
+    }
+  }`
 
-export default function Growth ({
+export const getServerSideProps = getGetServerSideProps(GROWTH_QUERY)
-  ssrData: { registrationGrowth, itemGrowth, spendingGrowth, spenderGrowth, stackingGrowth, stackerGrowth }
+
-}) {
+export default function Growth ({ ssrData }) {
   const router = useRouter()
   const { when } = router.query
   const avg = ['year', 'forever'].includes(when) ? 'avg daily ' : ''
 
+  const { data } = useQuery(GROWTH_QUERY, { variables: { when } })
+  if (!data && !ssrData) return <PageLoading />
+
+  const { registrationGrowth, itemGrowth, spendingGrowth, spenderGrowth, stackingGrowth, stackerGrowth } = data || ssrData
+
   return (
     <Layout>
       <UsageHeader />